From 3ad4665ee252f10bc8d5235e346676dcd0be8422 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 16 Dec 2021 02:41:10 -0800
Subject: [PATCH] added guid's to list items for selection

---
 resources/cider-ui/index.js                   | 22 +++++++---
 .../views/components/mediaitem-list-item.ejs  | 44 +++++++++++--------
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 82f6e02f..08617c2f 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -424,18 +424,22 @@ const app = new Vue({
             })
         },
         select_hasMediaItem(id) {
-            let found = this.selectedMediaItems.find(item => item.id == id)
+            let found = this.selectedMediaItems.find(item => item.guid == id)
             if(found) {
                 return true
             }else{
                 return false
             }
         },
-        select_selectMediaItem(id, kind) {
-            this.selectedMediaItems.push({
-                id: id,
-                kind: kind
-            })
+        select_selectMediaItem(id, kind, index, guid) {
+            if(!this.select_hasMediaItem(guid)) {
+                this.selectedMediaItems.push({
+                    id: id,
+                    kind: kind,
+                    index: index,
+                    guid: guid
+                })
+            }
         },
         async showCollection(response, title, type) {
             let self = this
@@ -1857,6 +1861,12 @@ document.addEventListener('musickitloaded', function () {
     request.send();
 });
 
+function uuidv4() {
+    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    );
+}
+
 function refreshFocus() {
     if (document.hasFocus() == false) {
         app.windowFocus(false)
diff --git a/resources/cider-ui/views/components/mediaitem-list-item.ejs b/resources/cider-ui/views/components/mediaitem-list-item.ejs
index 2300d912..f209eb09 100644
--- a/resources/cider-ui/views/components/mediaitem-list-item.ejs
+++ b/resources/cider-ui/views/components/mediaitem-list-item.ejs
@@ -6,9 +6,9 @@
              :data-id="item.attributes.playParams.id ?? item.id"
              :data-type="item.attributes.playParams.kind ?? item.type"
              :data-index="index"
-             :data-selectorder="selectedOrder"
+             :data-guid="guid"
              class="cd-mediaitem-list-item"
-             :class="{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}">
+             :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
             <template v-if="isVisible">
                 <div class="isLibrary" v-if="showLibraryStatus == true">
                     <button @click="addToLibrary()"
@@ -70,8 +70,7 @@
             return {
                 isVisible: false,
                 addedToLibrary: false,
-                selected: false,
-                selectedOrder: -1
+                guid: uuidv4()
             }
         },
         props: {
@@ -84,38 +83,44 @@
             '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)
+                    if(this.index != -1) {
+                        let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]")
+                        // select everything between the last selected item from app.selectedMediaItems and this one
+
+                        for (let i = start; i <= end; i++) {
+                            let mediaItem = allMediaItems[i];
+                            app.select_selectMediaItem(mediaItem.getAttribute("data-id"), mediaItem.getAttribute("data-type"));
+                        }
+
+                    }
+                    if (app.select_hasMediaItem(this.guid)) {
+                        app.select_removeMediaItem(this.guid)
                     } else {
-                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
                     }
                 } 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)
+                    if (app.select_hasMediaItem(this.guid)) {
+                        app.select_removeMediaItem(this.guid)
                     } else {
-                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
                     }
                 } else {
-                    if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
+                    if (app.select_hasMediaItem(this.guid)) {
                         app.selectedMediaItems = []
                     } else {
                         app.selectedMediaItems = []
-                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
                     }
                 }
             },
             contextMenu(event) {
                 let self = this
                 let useMenu = "normal"
-                if (!app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
+                if (!app.select_hasMediaItem(this.guid)) {
                     app.selectedMediaItems = []
-                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
+                    app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
                 } else {
                     useMenu = "multiple"
                 }
@@ -172,6 +177,7 @@
                                 "action": function () {
                                     app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
                                         app.mk.play()
+                                        app.selectedMediaItems = []
                                     })
                                 }
                             },
@@ -180,6 +186,7 @@
                                 "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()
+                                    app.selectedMediaItems = []
                                 }
                             },
                             {
@@ -187,6 +194,7 @@
                                 "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()
+                                    app.selectedMediaItems = []
                                 }
                             },
                             {