tweak to inline playlists
This commit is contained in:
booploops
parent
d5c5e1b05b
commit
19b630f7b1
1 changed files with 215 additions and 167 deletions
|
|
@ -40,20 +40,25 @@
|
|||
{{data.attributes ? (data.attributes.name ??
|
||||
(data.attributes.title ?? '') ?? '') : ''}}
|
||||
</div>
|
||||
<div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false"
|
||||
<div class="playlist-name" v-show="nameEditing"><input type="text"
|
||||
spellcheck="false"
|
||||
class="nameEdit"
|
||||
v-model="data.attributes.name"
|
||||
@blur="editPlaylist"
|
||||
@change="editPlaylist"
|
||||
@keydown.enter="editPlaylist"/></div>
|
||||
@keydown.enter="editPlaylist"/>
|
||||
</div>
|
||||
<div class="playlist-artist item-navigate"
|
||||
v-if="getArtistName(data) != ''"
|
||||
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
|
||||
{{getArtistName(data)}}
|
||||
</div>
|
||||
<div class="playlist-desc" v-if="data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)">
|
||||
<div v-if="data.attributes.description.short" class="content" v-html="data.attributes.description.short"></div>
|
||||
<div v-else-if="data.attributes.description.standard" class="content" v-html="data.attributes.description.standard"></div>
|
||||
<div class="playlist-desc"
|
||||
v-if="data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)">
|
||||
<div v-if="data.attributes.description.short" class="content"
|
||||
v-html="data.attributes.description.short"></div>
|
||||
<div v-else-if="data.attributes.description.standard" class="content"
|
||||
v-html="data.attributes.description.standard"></div>
|
||||
<button v-if="data.attributes.description.short" class="more-btn"
|
||||
@click="editorialNotesExpanded = !editorialNotesExpanded">
|
||||
{{app.getLz('term.showMore')}}
|
||||
|
|
@ -65,7 +70,9 @@
|
|||
<div class="playlist-desc-expanded">
|
||||
<div class="content"
|
||||
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
|
||||
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">{{app.getLz('term.showLess')}}
|
||||
<button class="more-btn"
|
||||
@click="editorialNotesExpanded = !editorialNotesExpanded">
|
||||
{{app.getLz('term.showLess')}}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -78,12 +85,16 @@
|
|||
@click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
|
||||
{{app.getLz('term.shuffle')}}
|
||||
</button>
|
||||
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
|
||||
<button class="md-btn md-btn-icon" style="min-width: 180px;"
|
||||
v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()"><img
|
||||
:class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{ (!inLibrary) ? app.getLz('action.addToLibrary') :
|
||||
app.getLz("action.removeFromLibrary") }}
|
||||
</button>
|
||||
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
|
||||
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{app.getLz('term.confirm')}}
|
||||
</button>
|
||||
<button class="more-btn-round" style="float:right;" @click="menu">
|
||||
|
|
@ -98,7 +109,8 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
|
||||
<div class="floating-header"
|
||||
:style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{data.attributes ? (data.attributes.name ??
|
||||
|
|
@ -114,12 +126,16 @@
|
|||
@click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
|
||||
{{app.getLz('term.shuffle')}}
|
||||
</button>
|
||||
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
|
||||
<button class="md-btn md-btn-icon" style="min-width: 180px;"
|
||||
v-if="inLibrary!=null && confirm!=true"
|
||||
@click="confirmButton()"><img
|
||||
:class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{ (!inLibrary) ? app.getLz('action.addToLibrary') :
|
||||
app.getLz("action.removeFromLibrary") }}
|
||||
</button>
|
||||
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
|
||||
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{app.getLz('term.confirm')}}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -135,8 +151,11 @@
|
|||
<div class="well">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :showIndex="true" :showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true"
|
||||
@end="drag=false;put()">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</draggable>
|
||||
|
|
@ -147,7 +166,8 @@
|
|||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
<div class="socialBadge"
|
||||
:title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
|
|
@ -164,8 +184,10 @@
|
|||
style="width: 50%;">
|
||||
{{data.attributes.copyright}}
|
||||
</div>
|
||||
<template v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
|
||||
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold" @click="app.routeView(data.relationships.catalog.data[0])">
|
||||
<template
|
||||
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
|
||||
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
|
||||
@click="app.routeView(data.relationships.catalog.data[0])">
|
||||
{{$root.getLz("action.showAlbum")}}
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -178,7 +200,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-scroller-horizontal :items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -186,6 +209,21 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="playlist-inner" v-else>
|
||||
<div class="close-btn" title="Close" @click="$root.resetState()">
|
||||
<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
|
||||
aria-role="presentation" focusable="false">
|
||||
<path
|
||||
d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
|
||||
fill-rule="nonzero"/>
|
||||
</svg>
|
||||
</div>
|
||||
<template v-if="app.playlists.loadingState == 0">
|
||||
<div class="content-inner centered">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
@ -307,7 +345,8 @@
|
|||
{
|
||||
fetchOptions: {
|
||||
method: "DELETE"
|
||||
}})
|
||||
}
|
||||
})
|
||||
this.inLibrary = false
|
||||
this.confirm = false
|
||||
},
|
||||
|
|
@ -454,13 +493,22 @@
|
|||
// date = releaseDate.getDate();
|
||||
// year = releaseDate.getFullYear();
|
||||
let formatted = ''
|
||||
try {formatted = new Intl.DateTimeFormat(this.app.cfg.general.language?.replace('_','-') ?? 'en-US', {day:'numeric',month: 'long', year: 'numeric'}).format(releaseDate);}
|
||||
catch(e){
|
||||
try {
|
||||
formatted = new Intl.DateTimeFormat(this.app.cfg.general.language?.replace('_', '-') ?? 'en-US', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
}).format(releaseDate);
|
||||
} catch (e) {
|
||||
// use the format in json instead
|
||||
if (this.app.getLz('date.format') != null) {
|
||||
formatted = new this.app.getLz('date.format').replace("${d}", releaseDate.getDate()).replace("${m}", releaseDate.getMonth()).replace("${y}", releaseDate.getFullYear());
|
||||
} else {
|
||||
formatted = new Intl.DateTimeFormat('en-US', {day:'numeric',month: 'long', year: 'numeric'}).format(releaseDate);
|
||||
formatted = new Intl.DateTimeFormat('en-US', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
}).format(releaseDate);
|
||||
}
|
||||
}
|
||||
return prefix + formatted
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue