From 4c7c644f973747ddee29343739ffa330f0af992e Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 16 Dec 2021 01:31:00 -0800
Subject: [PATCH] Added play next, and play later for multi select

---
 resources/cider-ui/index.js                   |  25 +++-
 .../views/components/mediaitem-list-item.ejs  | 127 +++++++++++++-----
 .../cider-ui/views/pages/collection-list.ejs  |   3 +-
 3 files changed, 122 insertions(+), 33 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 61824680..457c3d37 100644
--- a/resources/cider-ui/index.js
+++ b/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
diff --git a/resources/cider-ui/views/components/mediaitem-list-item.ejs b/resources/cider-ui/views/components/mediaitem-list-item.ejs
index d0ef3694..6f45c261 100644
--- a/resources/cider-ui/views/components/mediaitem-list-item.ejs
+++ b/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">
@@ -23,14 +28,16 @@
                         {{ item.attributes.name }}
                     </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')">
-                            {{ item.attributes.artistName }}
+                        <template v-if="item.attributes.artistName">
+                            <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')">
-                                {{ item.attributes.albumName }}
+                                <div class="artist item-navigate text-overflow-elipsis"
+                                     @click="app.searchAndNavigate(item,'album')">
+                                    {{ item.attributes.albumName }}
                                 </div>
                             </template>
                         </template>
@@ -63,71 +70,129 @@
             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",
-                                "action": function() {
-                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(()=>{
+                                "action": function () {
+                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
                                         app.mk.play()
                                     })
                                 }
                             },
-                            {   
+                            {
                                 "name": "Play Next",
-                                "action": function() {
+                                "action": function () {
                                     app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
                                     app.mk.queue._reindex()
                                 }
                             },
-                            {   
+                            {
                                 "name": "Play Later",
-                                "action": function() {
+                                "action": function () {
                                     app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
                                     app.mk.queue._reindex()
                                 }
                             },
-                            {   
+                            {
                                 "name": "Go to Artist",
-                                "action": function() {
-                                    app.searchAndNavigate(self.item,'artist')
+                                "action": function () {
+                                    app.searchAndNavigate(self.item, 'artist')
                                 }
                             },
-                            {   
+                            {
                                 "name": "Go to Album",
-                                "action": function() {
-                                    app.searchAndNavigate(self.item,'album')
+                                "action": function () {
+                                    app.searchAndNavigate(self.item, 'album')
                                 }
                             },
                         ]
-                    });
+                    }
+                }
+                CiderContextMenu.Create(event, menus[useMenu])
             },
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible
             },
             addToLibrary() {
                 let item = this.item
-                if(item.attributes.playParams.id) {
+                if (item.attributes.playParams.id) {
                     console.log('adding to library', item.attributes.playParams.id)
                     app.addToLibrary(item.attributes.playParams.id.toString())
                     this.addedToLibrary = true
-                }else if(item.id) {
+                } else if (item.id) {
                     console.log('adding to library', item.id)
                     app.addToLibrary(item.id.toString())
                     this.addedToLibrary = true
@@ -137,10 +202,10 @@
                 let item = this.item
                 let parent = this.parent
                 let childIndex = this.index
-                if (parent != null && childIndex != null){
-                    app.queueParentandplayChild(parent,childIndex);
+                if (parent != null && childIndex != null) {
+                    app.queueParentandplayChild(parent, childIndex);
                 } else {
-                app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
+                    app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
                 }
             }
         }
diff --git a/resources/cider-ui/views/pages/collection-list.ejs b/resources/cider-ui/views/pages/collection-list.ejs
index 1323f188..a704daff 100644
--- a/resources/cider-ui/views/pages/collection-list.ejs
+++ b/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>