playlist sorting, remove from playlist added
This commit is contained in:
parent
b0ceec8533
commit
9e4f3015f0
3 changed files with 75 additions and 3 deletions
|
@ -2,6 +2,7 @@
|
|||
<template v-if="type == 'artists'">
|
||||
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
|
||||
<img :src="app.getMediaItemArtwork(url, size)"
|
||||
loading="lazy" decoding="async"
|
||||
class="mediaitem-artwork--img">
|
||||
</div>
|
||||
</template>
|
||||
|
@ -9,6 +10,7 @@
|
|||
<div class="mediaitem-artwork" :key="url" :style="getStyle()"
|
||||
v-observe-visibility="{callback: visibilityChanged}">
|
||||
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
|
||||
loading="lazy" decoding="async"
|
||||
class="mediaitem-artwork--img">
|
||||
<div v-if="video && isVisible" class="animatedartwork-view-box">
|
||||
<animatedartwork-view :video="video"></animatedartwork-view>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@contextmenu="contextMenu"
|
||||
@click="select"
|
||||
:data-id="item.attributes.playParams.id ?? item.id"
|
||||
:data-type="item.attributes.playParams.kind ?? item.type"
|
||||
:data-type="item.type ?? item.attributes.playParams.kind"
|
||||
:data-index="index"
|
||||
:data-guid="guid"
|
||||
class="cd-mediaitem-list-item"
|
||||
|
@ -81,6 +81,7 @@
|
|||
'show-library-status': {type: Boolean, default: true},
|
||||
'show-meta-data': {type: Boolean, default: false},
|
||||
'show-duration': {type: Boolean, default: true},
|
||||
'contextExt': {type: Object, required: false},
|
||||
},
|
||||
methods: {
|
||||
select(e) {
|
||||
|
@ -236,6 +237,15 @@
|
|||
]
|
||||
}
|
||||
}
|
||||
if(this.contextExt) {
|
||||
// if this.context-ext.normal is true append all options to the 'normal' menu which is a kvp of arrays
|
||||
if(this.contextExt.normal) {
|
||||
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
|
||||
}
|
||||
if(this.contextExt.multiple) {
|
||||
menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
|
||||
}
|
||||
}
|
||||
CiderContextMenu.Create(event, menus[useMenu])
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
|
|
|
@ -59,8 +59,13 @@
|
|||
</div>
|
||||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="playlist-time">
|
||||
{{data.attributes.releaseDate}}
|
||||
|
@ -82,12 +87,67 @@
|
|||
data: function () {
|
||||
return {
|
||||
editorialNotesExpanded: false,
|
||||
drag: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
buildContextMenu (index) {
|
||||
let self = this
|
||||
if(!this.data.attributes.canEdit) {
|
||||
return
|
||||
}
|
||||
return {
|
||||
normal: [
|
||||
{
|
||||
name: 'Remove from Playlist',
|
||||
action: () => {
|
||||
self.remove()
|
||||
}
|
||||
},
|
||||
],
|
||||
multiple: [
|
||||
{
|
||||
name: 'Remove selected tracks from Playlist',
|
||||
action: () => {
|
||||
self.remove()
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
async put() {
|
||||
if(!this.data.attributes.canEdit) {
|
||||
return
|
||||
}
|
||||
await app.mk.api.library.putPlaylistTracklisting(this.data.attributes.playParams.id, this.convert())
|
||||
},
|
||||
async remove () {
|
||||
if(!this.data.attributes.canEdit) {
|
||||
return
|
||||
}
|
||||
// for each app.selectedMediaItems splice the items from the playlist
|
||||
for(let i = 0; i < app.selectedMediaItems.length; i++) {
|
||||
let item = app.selectedMediaItems[i]
|
||||
let index = this.data.relationships.tracks.data.findIndex(x => x.id == item.id)
|
||||
if(index > -1) {
|
||||
this.data.relationships.tracks.data.splice(index, 1)
|
||||
}
|
||||
}
|
||||
await this.put()
|
||||
},
|
||||
convert() {
|
||||
let pl_tracks = []
|
||||
for (let i = 0; i < this.data.relationships.tracks.data.length; i++) {
|
||||
pl_tracks.push({
|
||||
id: this.data.relationships.tracks.data[i].id,
|
||||
type: this.data.relationships.tracks.data[i].type
|
||||
})
|
||||
}
|
||||
return pl_tracks
|
||||
},
|
||||
getRecursive(url) {
|
||||
app.apiCall(app.musicBaseUrl + "/v1/me/library/playlists/p.V7VYlrDso6kkYY/tracks?offset=100", res => {
|
||||
this.data.relationships.tracks.data = this.data.relationships.tracks.data.concat(res.data.data)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue