queue whole playlist/album before play item

package.json

@@ -83,9 +83,9 @@
     }
   ],
   "build": {
-    "electronVersion": "15.3.1",
+    "electronVersion": "15.3.3",
     "electronDownload": {
-      "version": "15.3.1-wvvmp",
+      "version": "15.3.3-wvvmp",
       "mirror": "https://github.com/castlabs/electron-releases/releases/download/v"
     },
     "appId": "cider",

resources/cider-ui/index.js

@@ -228,7 +228,8 @@ const app = new Vue({
             maximized: false,
             drawerOpened: false,
             drawerState: "queue",
-            topChromeVisible: true
+            topChromeVisible: true,
+            progresshover: false,
         },
         collectionList: {
             response: {},
@@ -1512,6 +1513,22 @@ const app = new Vue({
                 this.playMediaItemById(id, kind, isLibrary, raurl)
             }
         },
+        queueParentandplayChild(parent,childIndex,item){
+            var kind = parent.substring(0,parent.indexOf(":"))
+            var id = parent.substring(parent.indexOf(":")+1 , parent.length)
+            var truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
+            console.log(truekind,id)
+            try {
+                    this.mk.setQueue({[truekind]: [id]}).then(function (queue) {
+                        MusicKit.getInstance().changeToMediaAtIndex(childIndex)
+                    })
+                
+            } catch (err) {
+                console.log(err)
+                this.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
+            }
+         
+        },
         friendlyTypes(type) {
             // use switch statement to return friendly name for media types "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators"
             switch (type) {

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

@@ -63,6 +63,8 @@
         },
         props: {
             'item': {type: Object, required: true},
+            'parent': {type: Object, required: false},
+            'index': {type: Object, required: false},
             'show-artwork': {type: Boolean, default: true},
             'show-library-status': {type: Boolean, default: true},
             'show-meta-data': {type: Boolean, default: false},
@@ -86,7 +88,13 @@
             },
             playTrack() {
                 let item = this.item
+                let parent = this.parent
+                let childIndex = this.index
+                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)
+                }
             }
         }
     });

resources/cider-ui/views/pages/cider-playlist.ejs

@@ -55,8 +55,8 @@
             </div>
             <div class="playlist-body">
                 <div class="well">
-                    <mediaitem-list-item :item="item"
-                                         v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
+                    <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
+                                         v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
                 </div>
                 <div class="playlist-time"> 
                     {{data.attributes.releaseDate}}
@@ -78,6 +78,13 @@
             return {
                 editorialNotesExpanded: false,
             }
+        },
+        methods: {
+            getItemParent: function (data) {
+                kind = data.attributes.playParams.kind;
+                id = data.attributes.playParams.id;
+                return `${kind}:${id}`
+            }
         }
     })
 </script>