Added play next, and play later for multi select

resources/cider-ui/index.js

@@ -235,17 +235,21 @@ const app = new Vue({
         page: "browse",
         pageHistory: [],
         songstest: false,
-        hangtimer: null
+        hangtimer: null,
+        selectedMediaItems: []
     },
     watch: {
         page: () => {
             document.getElementById("app-content").scrollTo(0, 0);
+            app.selectedMediaItems = [];
         },
         showingPlaylist: () => {
             document.getElementById("app-content").scrollTo(0, 0);
+            app.selectedMediaItems = [];
         },
         artistPage: () => {
             document.getElementById("app-content").scrollTo(0, 0);
+            app.selectedMediaItems = [];
         },
     },
     methods: {
@@ -414,6 +418,25 @@ const app = new Vue({
                 this.drawer.panel = panel
             }
         },
+        select_removeMediaItem(id) {
+            this.selectedMediaItems.filter(item => item.id == id).forEach(item => {
+                this.selectedMediaItems.splice(this.selectedMediaItems.indexOf(item), 1)
+            })
+        },
+        select_hasMediaItem(id) {
+            let found = this.selectedMediaItems.find(item => item.id == id)
+            if(found) {
+                return true
+            }else{
+                return false
+            }
+        },
+        select_selectMediaItem(id, kind) {
+            this.selectedMediaItems.push({
+                id: id,
+                kind: kind
+            })
+        },
         async showCollection(response, title, type) {
             let self = this
             this.collectionList.response = response

resources/cider-ui/views/components/mediaitem-list-item.ejs

@@ -2,13 +2,18 @@
     <template>
         <div v-observe-visibility="{callback: visibilityChanged}"
              @contextmenu="contextMenu"
-             @click.shift="selected = !selected"
+             @click="select"
              :data-id="item.attributes.playParams.id ?? item.id"
              :data-type="item.attributes.playParams.kind ?? item.type"
-             class="cd-mediaitem-list-item" :class="{'mediaitem-selected': selected}">
+             :data-index="index"
+             :data-selectorder="selectedOrder"
+             class="cd-mediaitem-list-item"
+             :class="{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}">
             <template v-if="isVisible">
                 <div class="isLibrary" v-if="showLibraryStatus == true">
-                    <button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
+                    <button @click="addToLibrary()"
+                            v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
+                    </button>
                     <button v-else>❤️</button>
                 </div>
                 <div class="artwork" v-if="showArtwork == true">
@@ -24,12 +29,14 @@
                     </div>
                     <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
                         <template v-if="item.attributes.artistName">
-                            <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
+                            <div class="artist item-navigate text-overflow-elipsis"
+                                 @click="app.searchAndNavigate(item,'artist')">
                                 {{ item.attributes.artistName }}
                             </div>
                             <template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
                             <template v-if="item.attributes.albumName">
-                                <div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
+                                <div class="artist item-navigate text-overflow-elipsis"
+                                     @click="app.searchAndNavigate(item,'album')">
                                     {{ item.attributes.albumName }}
                                 </div>
                             </template>
@@ -63,23 +70,79 @@
             return {
                 isVisible: false,
                 addedToLibrary: false,
-                selected: false
+                selected: false,
+                selectedOrder: -1
             }
         },
         props: {
             'item': {type: Object, required: true},
             'parent': {type: Object, required: false},
-            'index': {type: Object, required: false},
+            'index': {type: Object, required: false, default: -1},
             'show-artwork': {type: Boolean, default: true},
             'show-library-status': {type: Boolean, default: true},
             'show-meta-data': {type: Boolean, default: false},
-            'show-duration': {type: Boolean, default: true}
+            'show-duration': {type: Boolean, default: true},
         },
         methods: {
+            deselect() {
+                this.selected = false;
+                this.selectedOrder = -1;
+            },
+            select(e) {
+                if (e.shiftKey) {
+                    if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
+                        app.select_removeMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                    } else {
+                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                    }
+                } else if (e.ctrlKey) {
+                    if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
+                        app.select_removeMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                    } else {
+                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                    }
+                } else {
+                    if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
+                        app.selectedMediaItems = []
+                    }else{
+                        app.selectedMediaItems = []
+                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                    }
+                }
+            },
             contextMenu(event) {
                 let self = this
-                CiderContextMenu.Create(event,
+                let useMenu = "normal"
+                if (!app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
+                    app.selectedMediaItems = []
+                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                }else{
+                    useMenu = "multiple"
+                }
+                let menus = {
+                    multiple: {
+                        items: [
                             {
+                                name: `Play ${app.selectedMediaItems.length} tracks next`,
+                                action: ()=>{
+                                    app.selectedMediaItems.forEach(item=>{
+                                        app.mk.playNext({[item.kind]: item.id})
+                                    })
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                            {
+                                name: `Play ${app.selectedMediaItems.length} tracks later`,
+                                action: ()=>{
+                                    app.selectedMediaItems.forEach(item=>{
+                                        app.mk.playLater({[item.kind]: item.id})
+                                    })
+                                    app.selectedMediaItems = []
+                                }
+                            },
+                        ]
+                    },
+                    normal: {
                         items: [
                             {
                                 "name": "Start Radio",
@@ -116,7 +179,9 @@
                                 }
                             },
                         ]
-                    });
+                    }
+                }
+                CiderContextMenu.Create(event, menus[useMenu])
             },
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible

resources/cider-ui/views/pages/collection-list.ejs

@@ -2,13 +2,14 @@
     <div class="content-inner collection-page">
         <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
         <div v-if="data['data'] != 'null'" class="well">
-            <template v-for="item in data.data">
+            <template v-for="(item, key) in data.data">
                 <template v-if="item.type == 'artists'">
                     <mediaitem-square-large :item="item"></mediaitem-square-large>
                 </template>
                 <template v-else>
                     <mediaitem-list-item
                             v-if="item.attributes.playParams.kind == 'song'"
+                            :index="key"
                             :item="item"></mediaitem-list-item>
                     <mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
                     <mediaitem-square-large v-else :item="item"></mediaitem-square-large>