playlist sorting, remove from playlist added

This commit is contained in:
booploops 2021-12-22 00:39:02 -08:00
parent b0ceec8533
commit 9e4f3015f0
3 changed files with 75 additions and 3 deletions

View file

@ -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>

View file

@ -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) {

View file

@ -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)