playlist sorting, remove from playlist added

src/renderer/views/components/mediaitem-artwork.ejs

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

src/renderer/views/components/mediaitem-list-item.ejs

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

src/renderer/views/pages/cider-playlist.ejs

@@ -59,8 +59,13 @@
             </div>
             <div class="playlist-body">
                 <div class="well">
-                    <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
+                    <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)