From f88477f18f9aad9517f91b352b2e95c95178c25a Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 3 Dec 2021 12:41:31 -0800
Subject: [PATCH] Added sidebar-library-item component

---
 resources/cider-ui-tests/index.html | 23 +++++----
 resources/cider-ui-tests/index.js   | 74 ++++++++++++++++-------------
 2 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index ab006be9..10f6ab4b 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -124,19 +124,16 @@
                     <div class="app-sidebar-header-text">
                         Apple Music
                     </div>
-                    <button class="app-sidebar-item">
-                        <div></div>
-                        <div>Listen Now</div>
-                    </button>
-                    <button class="app-sidebar-item active">Browse</button>
-                    <button class="app-sidebar-item">Radio</button>
+                    <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
+                    <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
+                    <sidebar-library-item name="Radio" page="Radio"></sidebar-library-item>
                     <div class="app-sidebar-header-text">
                         Library
                     </div>
-                    <button class="app-sidebar-item">Songs</button>
-                    <button class="app-sidebar-item">Albums</button>
-                    <button class="app-sidebar-item">Artists</button>
-                    <button class="app-sidebar-item">Made For You</button>
+                    <sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
+                    <sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
+                    <sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
+                    <sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
                     <div class="app-sidebar-header-text">
                         Playlists
                     </div>
@@ -221,6 +218,12 @@
     <div class="bg-artwork"></div>
 </div>
 
+<script type="text/x-template" id="sidebar-library-item">
+    <button class="app-sidebar-item"
+            :class="$parent.getSidebarItemClass(page)"
+            @click="$parent.page = page">{{ name }}</button>
+</script>
+
 <script type="text/x-template" id="mediaitem-list-item">
     <template>
         <div @click="$parent.playMediaItemById(item.id, item.type)"
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 83b8f927..8b35d4a4 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -1,22 +1,25 @@
+Vue.component('sidebar-library-item', {
+    template: '#sidebar-library-item',
+    props: ['name', 'page'],
+    methods: {}
+});
+
 Vue.component('mediaitem-square', {
     template: '#mediaitem-square',
     props: ['item'],
-    methods: {
-    }
+    methods: {}
 });
 
 Vue.component('mediaitem-hrect', {
     template: '#mediaitem-hrect',
     props: ['item'],
-    methods: {
-    }
+    methods: {}
 });
 
 Vue.component('mediaitem-list-item', {
     template: '#mediaitem-list-item',
     props: ['item'],
-    methods: {
-    }
+    methods: {}
 });
 
 const MusicKitTools = {
@@ -56,7 +59,7 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
 
-            this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a)=>{
+            this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
                 self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
             })
 
@@ -64,6 +67,13 @@ const app = new Vue({
                 self.playlists.listing = res.data
             })
         },
+        getSidebarItemClass(page) {
+            if (this.page == page) {
+                return ["active"]
+            } else {
+                return []
+            }
+        },
         unauthorize() {
             this.mk.unauthorize()
         },
@@ -71,7 +81,7 @@ const app = new Vue({
             this.page = "search"
         },
         playMediaItemById(id, kind) {
-            this.mk.setQueue({ [kind]: [id] }).then(function (queue) {
+            this.mk.setQueue({[kind]: [id]}).then(function (queue) {
                 MusicKit.getInstance().play()
             })
         },
@@ -81,14 +91,14 @@ const app = new Vue({
                 {
                     types: "songs,artists,albums,playlists",
                     limit: 32
-                }).then(function(results) {
+                }).then(function (results) {
                 self.search.results = results
             })
         },
         mkReady() {
             if (this.mk["nowPlayingItem"]) {
                 return true
-            } else{
+            } else {
                 return false
             }
         },
@@ -104,10 +114,10 @@ const app = new Vue({
         },
         quickPlay(query) {
             let self = this
-            MusicKit.getInstance().api.search(query, { limit: 2, types: 'songs' }).then(function (data) {
-                MusicKit.getInstance().setQueue({ song: data["songs"]['data'][0]["id"] }).then(function (queue) {
+            MusicKit.getInstance().api.search(query, {limit: 2, types: 'songs'}).then(function (data) {
+                MusicKit.getInstance().setQueue({song: data["songs"]['data'][0]["id"]}).then(function (queue) {
                     MusicKit.getInstance().play()
-                    setTimeout(()=>{
+                    setTimeout(() => {
                         self.$forceUpdate()
                     }, 1000)
                 })
@@ -148,26 +158,26 @@ const app = new Vue({
     }
 })
 
-document.addEventListener('musickitloaded', function() {
+document.addEventListener('musickitloaded', function () {
     // MusicKit global is now defined
     fetch("https://beta.music.apple.com/")
-    .then(response => response.text())
-    .then(data => {
-        var el = document.createElement("html");
-        el.innerHTML = data;
-        var u = el.querySelector(`[name="desktop-music-app/config/environment"]`)
-        var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content")));
-        console.log(amwebCFG.MEDIA_API.token)
-        MusicKit.configure({
-            developerToken: amwebCFG.MEDIA_API.token,
-            app: {
-                name: 'My Cool Web App',
-                build: '1978.4.1'
-            }
+        .then(response => response.text())
+        .then(data => {
+            var el = document.createElement("html");
+            el.innerHTML = data;
+            var u = el.querySelector(`[name="desktop-music-app/config/environment"]`)
+            var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content")));
+            console.log(amwebCFG.MEDIA_API.token)
+            MusicKit.configure({
+                developerToken: amwebCFG.MEDIA_API.token,
+                app: {
+                    name: 'My Cool Web App',
+                    build: '1978.4.1'
+                }
+            });
+            setTimeout(() => {
+                app.init()
+            }, 1000)
         });
-        setTimeout(()=>{
-            app.init()
-        }, 1000)
-    });
-    
+
 });
\ No newline at end of file