top songs queuing (listitem-horizontal)

src/renderer/index.js

@@ -2814,7 +2814,67 @@ const app = new Vue({
                             })
                         }
                     })
-                } else {
+                } else if (parent.startsWith('listitem-hr')) {
+                    app.mk.stop().then(() => {
+                        if (app.mk.shuffleMode == 1) {
+                            app.mk.setQueue({
+                                [item.attributes.playParams.kind ?? item.type]: item.attributes.playParams.id ?? item.id
+                            }).then(function () {
+                                app.mk.play().then(() => {
+                                    const data = JSON.parse(parent.split('listitem-hr')[1] ?? '[]')
+                                    let itemsToPlay = {}
+                                    let u = data.map(x => x.id)
+                                    try {
+                                        data.splice(u.indexOf(item.attributes.playParams.id ?? item.id), 1)
+                                    } catch (e) { }
+                                    if (app.mk.shuffleMode == 1) {
+                                        shuffleArray(data)
+                                    }
+                                    data.forEach(item => {
+                                        if (!itemsToPlay[item.kind]) {
+                                            itemsToPlay[item.kind] = []
+                                        }
+                                        itemsToPlay[item.kind].push(item.id)
+                                    })
+                                    // loop through itemsToPlay
+                                    for (let kind in itemsToPlay) {
+                                        let ids = itemsToPlay[kind]
+                                        if (ids.length > 0) {
+                                            app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
+                                        }
+                                    }
+                                })
+                            })
+                        } else {
+                            const data = JSON.parse(parent.split('listitem-hr')[1] ?? '[]')
+                            let itemsToPlay = {}
+                            let u = data.map(x => x.id)
+                            data.forEach(item => {
+                                if (!itemsToPlay[item.kind]) {
+                                    itemsToPlay[item.kind] = []
+                                }
+                                itemsToPlay[item.kind].push(item.id)
+                            })
+                            // loop through itemsToPlay
+                            let ind = 0;
+                            for (let kind in itemsToPlay) {
+                                let ids = itemsToPlay[kind]
+                                app.mk.clearQueue().then(function () {
+                                    if (ids.length > 0) {
+                                        app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] }).then(function() {
+                                            ind += 1;
+                                            console.log(ind , Object.keys(itemsToPlay).length)
+                                            if(ind >= Object.keys(itemsToPlay).length) {                        
+                                                app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id))
+                                            }
+                                        }
+                                    )}
+                                })
+                            }
+                        }
+                    })
+                }
+                else {
                     app.mk.stop().then(() => {
                         if (truekind == "playlists" && (id.startsWith("p.") || id.startsWith("pl.u"))) {
                             app.mk.setQueue({

src/renderer/views/components/listitem-horizontal.ejs

@@ -3,7 +3,7 @@
     <vue-horizontal>
         <div v-for="items in itemPages">
             <mediaitem-list-item
-                v-for="(song, index) in items"
+                v-for="(song, index) in items" :parent="'listitem-hr' + simplifiedParent"
                 :index="song.index"
                 :item="song"></mediaitem-list-item>
         </div>
@@ -23,7 +23,8 @@
         },
         data: function () {
             return {
-                itemPages: []
+                itemPages: [],
+                simplifiedParent : []
             }
         },
         mounted() {
@@ -33,6 +34,12 @@
             });
             // split items into pages
             this.itemPages = app.arrayToChunk(this.items, 4);
+            try{
+            this.simplifiedParent = JSON.stringify(this.items.map ( function(x){return x.attributes.playParams}));
+            console.log("simplifiedParent: " + this.simplifiedParent);
+            }
+            catch (e){}
+            
         },
         methods: {
             sayHello: function () {