improvements to playlist folder sorting

src/renderer/index.js

@@ -69,6 +69,18 @@ var CiderContextMenu = {
     }
 }
 
+const MusicKitObjects = {
+    LibraryPlaylist: function () {
+        this.id = ""
+        this.type = "library-playlist-folders"
+        this.href = ""
+        this.attributes = {
+            dateAdded: "",
+            name: ""
+        }
+        this.playlists = []
+    }
+}
 
 const MusicKitTools = {
     getHeader() {
@@ -86,24 +98,6 @@ Array.prototype.limit = function (n) {
     return this.slice(0, n);
 };
 
-// function msToMinSec(ms) {
-//     let minutes = Math.floor(ms / 60000);
-//     let seconds = ((ms % 60000) / 1000).toFixed(0);
-//     return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
-// }
-
-class NavigationEvent {
-    constructor(page, onnavigate, scrollPosition) {
-        this.page = page;
-        this.onnavigate = onnavigate;
-        this.scrollPosition = scrollPosition;
-    }
-
-    navigate() {
-        this.onnavigate();
-        document.querySelector("#app-content").scrollTop = this.scrollPosition;
-    }
-}
 
 const app = new Vue({
     el: "#app",
@@ -293,7 +287,8 @@ const app = new Vue({
         },
     },
     methods: {
-        getSocialBadges(cb = ()=>{}) {
+        getSocialBadges(cb = () => {
+        }) {
             let self = this
             try {
                 app.mk.api.socialBadgingMap().then(data => {
@@ -438,7 +433,6 @@ const app = new Vue({
             }
 
 
-
             // load last played track
             try {
                 let lastItem = window.localStorage.getItem("currentTrack")
@@ -467,7 +461,8 @@ const app = new Vue({
                                                 if (!(i == 0 && ids[0] == lastItem.attributes.playParams.id)) {
                                                     try {
                                                         app.mk.playLater({songs: [id]})
-                                                    } catch (err) { }
+                                                    } catch (err) {
+                                                    }
                                                 }
                                                 i++;
                                             }
@@ -482,7 +477,9 @@ const app = new Vue({
 
                 }
 
-            } catch (e) { console.log(e) }
+            } catch (e) {
+                console.log(e)
+            }
 
             MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player")
 
@@ -514,7 +511,8 @@ const app = new Vue({
                         let previewURL = null
                         try {
                             previewURL = app.mk.nowPlayingItem.previewURL
-                        } catch (e) { }
+                        } catch (e) {
+                        }
                         if (!previewURL) {
                             app.mk.api.song(app.mk.nowPlayingItem._songId ?? app.mk.nowPlayingItem.relationships.catalog.data[0].id).then((response) => {
                                 previewURL = response.attributes.previews[0].url
@@ -526,7 +524,8 @@ const app = new Vue({
                                 ipcRenderer.send('getPreviewURL', previewURL)
                         }
 
-                    } catch (e) { }
+                    } catch (e) {
+                    }
                 }
 
                 try {
@@ -623,11 +622,25 @@ const app = new Vue({
                 })
             }
         },
+        getPlaylistFolderChildren(id) {
+            return this.playlists.listing.filter(playlist => {
+                if (playlist.parent == id) {
+                    return playlist
+                }
+            })
+        },
         async refreshPlaylists() {
             let self = this
             this.apiCall('https://api.music.apple.com/v1/me/library/playlist-folders/p.playlistsroot/children/', res => {
                 self.playlists.listing = res.data
-                self.playlists.listing.sort((a, b) => {
+                self.playlists.listing.forEach(playlist => {
+                    playlist.parent = "p.playlistsroot"
+                })
+                self.sortPlaylists()
+            })
+        },
+        sortPlaylists() {
+            this.playlists.listing.sort((a, b) => {
                 if (a.type === "library-playlist-folders" && b.type !== "library-playlist-folders") {
                     return -1
                 } else if (a.type !== "library-playlist-folders" && b.type === "library-playlist-folders") {
@@ -636,7 +649,6 @@ const app = new Vue({
                     return 0
                 }
             })
-            })
         },
         playlistHeaderContextMenu(event) {
             let menu = {
@@ -673,9 +685,17 @@ const app = new Vue({
                 self.appRoute(`playlist_` + res.id);
                 self.showingPlaylist = [];
                 self.getPlaylistFromID(app.page.substring(9))
+                self.playlists.listing.push({
+                    id: res.id,
+                    attributes: {
+                        name: name
+                    },
+                    parent: "p.playlistsroot"
+                })
+                self.sortPlaylists()
                 setTimeout(() => {
                     app.refreshPlaylists()
-                }, 3000)
+                }, 8000)
             })
         },
         deletePlaylist(id) {
@@ -1075,10 +1095,6 @@ const app = new Vue({
                     break;
             }
         },
-        pushNavigationEvent(item) {
-            let self = this
-
-        },
         exitMV() {
             MusicKit.getInstance().stop()
             document.getElementById("apple-music-video-container").style.display = "none";
@@ -1118,8 +1134,7 @@ const app = new Vue({
                 } finally {
                     if (kind == "appleCurator") {
                         app.appleCurator = a
-                    }
+                    } else {
-                    else {
                         this.getPlaylistContinuous(a)
                     }
                 }
@@ -1735,7 +1750,9 @@ const app = new Vue({
             } else {
                 if (app.cfg.lyrics.enable_mxm) {
                     this.loadMXM();
-                } else { this.loadAMLyrics(); }
+                } else {
+                    this.loadAMLyrics();
+                }
             }
         },
         loadAMLyrics() {
@@ -1771,8 +1788,12 @@ const app = new Vue({
                     let ytid = result[0]['id']['videoId'];
                     if (app.cfg.lyrics.enable_yt) {
                         loadYT(ytid, app.cfg.lyrics.mxm_language ?? "en")
-                    } else { app.loadMXM() }
+                    } else {
-                } else { app.loadMXM() }
+                        app.loadMXM()
+                    }
+                } else {
+                    app.loadMXM()
+                }
 
                 function loadYT(id, lang) {
                     let req = new XMLHttpRequest();
@@ -2168,7 +2189,9 @@ const app = new Vue({
                                 app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.id) ?? 1)
                                 app.mk.play()
                             })
-                        } else { app.mk.play() }
+                        } else {
+                            app.mk.play()
+                        }
                     })
                 } else {
                     try {
@@ -2186,7 +2209,9 @@ const app = new Vue({
                                 app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.id) ?? 1)
                                 app.mk.play()
                             })
-                        } else { app.mk.play() }
+                        } else {
+                            app.mk.play()
+                        }
                     })
                 }
             } catch (err) {
@@ -2318,7 +2343,9 @@ const app = new Vue({
         getMediaItemArtwork(url, height = 64, width) {
             let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900) ? "sr" : "cc"))}`;
 
-            if (newurl.includes("900x516")) { newurl = newurl.replace("900x516cc", "900x516sr").replace("900x516bb", "900x516sr"); }
+            if (newurl.includes("900x516")) {
+                newurl = newurl.replace("900x516cc", "900x516sr").replace("900x516bb", "900x516sr");
+            }
             return newurl
         },
         getNowPlayingArtworkBG(size = 600) {
@@ -2656,6 +2683,7 @@ document.addEventListener('musickitloaded', function () {
                 app.init()
             }, 1000)
         }
+
         request.addEventListener("load", loadAlternateKey);
         request.open("GET", "https://raw.githubusercontent.com/lujjjh/LitoMusic/main/token.json");
         request.send();

src/renderer/views/components/sidebar-playlist.ejs

@@ -1,5 +1,5 @@
 <script type="text/x-template" id="sidebar-playlist">
-    <div class="sidebar-playlist">
+    <div class="sidebar-playlist" :key="item.id">
         <button class="app-sidebar-item app-sidebar-item-playlist" :key="item.id" v-if="item.type != 'library-playlist-folders'"
                 :class="{'active': $root.page.includes(item.id)}"
                 @contextmenu="playlistContextMenu($event, item.id)"
@@ -50,9 +50,18 @@
             }
         },
         methods: {
-            move(item, sendTo) {
+            async getChildren() {
                 let self = this
-                console.log(item, sendTo)
+                this.children = []
+                this.children = this.$root.playlists.listing.filter(child => {
+                    if(child.parent == self.item.id) {
+                        return child
+                    }
+                })
+            },
+            async move(item, sendTo) {
+                let self = this
+                console.log(sendTo)
                 let type = item.type.replace("library-", "")
                 let typeTo = sendTo.type
                 this.$root.mk.api.v3.music(`/v1/me/library/${type}/${item.id}/parent`, {}, {
@@ -67,10 +76,21 @@
                     }
                 })
 
+                // find the item in this.$root.playlists.listing and store it in a variable
+                this.$root.playlists.listing.filter(playlist => {
+                    if(playlist.id == item.id) {
+                        console.log(playlist)
+                        playlist.parent = sendTo.id
 
-                setTimeout(()=>{
+                    }
-                    this.$root.refreshPlaylists()
+                })
-                }, 3000)
+                if(typeof this.$parent.getChildren == "function") {
+                    this.$parent.getChildren()
+                    console.log(this.$parent.children)
+                }
+                await this.getChildren()
+                this.$root.sortPlaylists()
+                // await this.$root.refreshPlaylists()
             },
             playlistContextMenu(event, playlist_id) {
                 let menu = {
@@ -78,10 +98,12 @@
                         "moveToParent": {
                             name: "Move to top",
                             action: () => {
+                                let self = this
                                 this.move(this.item, {
                                     id: this.playlistRoot,
                                     type: "library-playlist-folders"
                                 })
+                                setTimeout(()=>{self.getChildren()}, 2000)
                             }
                         },
                         "deleteFromPlaylist": {
@@ -130,10 +152,18 @@
             },
             getPlaylistChildren(item) {
                 let self = this
+                this.children = []
+                this.getChildren()
                 this.toggleFolder()
                 this.$root.mk.api.library.playlistFolderChildren(item.id).then(children => {
-                    self.children = children
+                    children.forEach(child => {
-                    self.children.sort((a, b) => {
+                        if(!self.$root.playlists.listing.find(listing => listing.id == child.id)) {
+                            child.parent = self.item.id
+                            self.$root.playlists.listing.push(child)
+                        }
+                    })
+
+                    self.$root.playlists.listing.sort((a, b) => {
                         if (a.type === 'library-playlist-folders' && b.type !== 'library-playlist-folders') {
                             return -1
                         } else if (a.type !== 'library-playlist-folders' && b.type === 'library-playlist-folders') {
@@ -142,6 +172,7 @@
                             return 0
                         }
                     })
+                    self.getChildren()
                 })
             },
             isPlaylistSelected(item) {

src/renderer/views/main.ejs

@@ -23,6 +23,7 @@
     <script src="sortable.min.js"></script>
     <script src="vuedraggable.umd.min.js"></script>
     <link rel="manifest" href="./manifest.json?v=2">
+    <script src="bootbox.all.js"></script>
     <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>
     <script src="hlscider.js"></script>
 </head>
@@ -183,7 +184,7 @@
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                             Playlists
                         </div>
-                        <sidebar-playlist v-for="item in playlists.listing" :item="item"></sidebar-playlist>
+                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item"></sidebar-playlist>
                     </div>
                     <transition name="wpfade">
                         <div class="usermenu-container" v-if="chrome.menuOpened">