From 27f49fc8e8411ab22cd9f55987067fc5eba8dd3e Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:19:17 -0800
Subject: [PATCH 01/12] beginning of adding history routing

---
 resources/cider-ui/index.js | 44 ++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 86d691aa..d7263fa1 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -233,7 +233,8 @@ const app = new Vue({
         pageHistory: [],
         songstest: false,
         hangtimer: null,
-        selectedMediaItems: []
+        selectedMediaItems: [],
+        routes: ["browse", "listen_now", "radio"]
     },
     watch: {
         page: () => {
@@ -257,7 +258,7 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
             this.mk.privateEnabled = true
-            this.platform = ipcRenderer.sendSync('cider-platform');
+            // this.platform = ipcRenderer.sendSync('cider-platform');
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
             // API Fallback
@@ -356,6 +357,9 @@ const app = new Vue({
                 self.playlists.listing = res.data
             })
             document.body.removeAttribute("loading")
+            if(window.location.hash != "") {
+                this.appRoute(window.location.hash)
+            }
         },
         invokeDrawer(panel) {
             if(this.drawer.panel == panel && this.drawer.open) {
@@ -541,6 +545,29 @@ const app = new Vue({
             }
             return hash;
         },
+        appRoute(route) {
+            if(route == "" || route == "#" || route == "/") {
+                return;
+            }
+            route = route.replace(/#/g, "")
+            // if the route contains does not include a / then route to the page directly
+            if (route.indexOf("/") == -1) {
+                this.page = route
+                window.location.hash = `${page}/${id}`
+                return
+            }
+            let hash = route.split("/")
+            let page = hash[0]
+            let id = hash[1]
+            console.log(`page: ${page} id: ${id}`)
+            this.routeView({
+                kind: page,
+                id: id,
+                attributes: {
+                    playParams: {kind: page, id: id}
+                }
+            })
+        },
         routeView(item) {
             let self = this
 
@@ -575,12 +602,14 @@ const app = new Vue({
                 }
                 document.querySelector("#app-content").scrollTop = 0
             }
+            window.location.hash = `${kind}/${id}`
         },
         async getNowPlayingItemDetailed(target) {
             let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind, (app.mk.nowPlayingItem.songId == -1), (app.mk.nowPlayingItem.songId != -1) ? app.mk.nowPlayingItem.songId : app.mk.nowPlayingItem["id"], {"include[songs]": "albums,artists"});
             app.searchAndNavigate(u, target)
         },
         async searchAndNavigate(item, target) {
+            let self = this
             app.tmpVar = item;
             switch (target) {
                 case "artist":
@@ -615,7 +644,7 @@ const app = new Vue({
                     }
                     console.log(artistId);
                     if (artistId != "")
-                        app.getArtistFromID(artistId);
+                        self.appRoute(`artist/${artistId}`)
                     break;
                 case "album":
                     let albumId = '';
@@ -642,8 +671,7 @@ const app = new Vue({
                         }
                     }
                     if (albumId != "") {
-                        app.getTypeFromID("album", albumId, false);
-                        app.page = "album_" + albumId;
+                        self.appRoute(`album/${albumId}`)
                     }
                     break;
                 case "recordLabel":
@@ -668,7 +696,6 @@ const app = new Vue({
                     }
                     if (labelId != "") {
                         app.showingPlaylist = []
-
                         await app.getTypeFromID("recordLabel", labelId, false, {views: 'top-releases,latest-releases,top-artists'});
                         app.page = "recordLabel_" + labelId;
                     }
@@ -1818,6 +1845,11 @@ app.hangtimer = setTimeout(()=>{
     }
 }, 10000)
 
+// add event listener for when window.location.hash changes
+window.addEventListener("hashchange", function () {
+    app.appRoute(window.location.hash)
+});
+
 document.addEventListener('musickitloaded', function () {
     // MusicKit global is now defined
     function initMusicKit() {

From 832e0f75bf78164a9c745a088ee8abc9583e972d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:25:30 -0800
Subject: [PATCH 02/12] routes

---
 resources/cider-ui/index.js       | 2 +-
 resources/cider-ui/views/main.ejs | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index d7263fa1..8e207a23 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -553,7 +553,7 @@ const app = new Vue({
             // if the route contains does not include a / then route to the page directly
             if (route.indexOf("/") == -1) {
                 this.page = route
-                window.location.hash = `${page}/${id}`
+                window.location.hash = this.page
                 return
             }
             let hash = route.split("/")
diff --git a/resources/cider-ui/views/main.ejs b/resources/cider-ui/views/main.ejs
index 9e950199..0f1d3471 100644
--- a/resources/cider-ui/views/main.ejs
+++ b/resources/cider-ui/views/main.ejs
@@ -174,7 +174,7 @@
                     </div>
                     <button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
                             :href="item.href"
-                            @click='page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
+                            @click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
                         {{ item.attributes.name }}
                     </button>
                 </div>
@@ -456,7 +456,7 @@
 <!-- Sidebar Item -->
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
-            :class="$parent.getSidebarItemClass(page)" @click="$parent.page = page">
+            :class="$parent.getSidebarItemClass(page)" @click="app.appRoute(page)">
         {{ name }}
     </button>
 </script>

From e2dc9e4c0a7ca3c43b998251c439cda9d38c9562 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:41:00 -0800
Subject: [PATCH 03/12] added navigation bar, always present at the moment

---
 resources/cider-ui/style.less                 | 41 +++++++++++++++++++
 resources/cider-ui/views/main.ejs             |  4 ++
 resources/cider-ui/views/svg/chevron-left.svg |  1 +
 .../cider-ui/views/svg/chevron-right.svg      |  1 +
 4 files changed, 47 insertions(+)
 create mode 100644 resources/cider-ui/views/svg/chevron-left.svg
 create mode 100644 resources/cider-ui/views/svg/chevron-right.svg

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index c4bb6830..7ea4e4ce 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -19,6 +19,7 @@
   --keyColor-deepPressed: #ff8a9c;
   --keyColor-deepPressed-rgb: 255, 138, 156;
   --keyColor-disabled: rgba(250, 88, 106, 0.35);
+  --navigationBarHeight: 38px;
 }
 
 html,
@@ -220,6 +221,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   top: 0;
   left: 0;
   padding: 32px;
+  padding-top: calc(var(--navigationBarHeight) * 2);
   width: 100%;
 }
 
@@ -1489,6 +1491,45 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+#navigation-bar {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.25);
+  height: var(--navigationBarHeight);
+  display: flex;
+  align-items: center;
+  padding: 0px 6px;
+  z-index: 1;
+  position: sticky;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(16px) saturate(180%);
+  border-bottom: 1px solid rgb(200 200 200 / 10%);
+  .nav-item {
+    appearance: none;
+    border: 0px;
+    height: 32px;
+    width: 42px;
+    background: transparent;
+    padding: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(200, 200, 200, 0.8);
+    margin: 2px;
+    border-radius: 3px;
+    &:hover {
+      background: var(--selected);
+    }
+    &:active {
+      background: var(--selected-click);
+    }
+    > svg {
+      width: 8px;
+      pointer-events: none;
+    }
+  }
+}
+
 .reload-btn {
   background: rgb(86 86 86 / 52%);
   border-radius: 100%;
diff --git a/resources/cider-ui/views/main.ejs b/resources/cider-ui/views/main.ejs
index 0f1d3471..950b07d9 100644
--- a/resources/cider-ui/views/main.ejs
+++ b/resources/cider-ui/views/main.ejs
@@ -240,6 +240,10 @@
                 </div>
             </div>
             <div id="app-content">
+                <div id="navigation-bar">
+                    <button class="nav-item" @click="history.back()"><%- include('svg/chevron-left.svg') %></button>
+                    <button class="nav-item" @click="history.forward()"><%- include('svg/chevron-right.svg') %></button>
+                </div>
                 <!-- Artist Page -->
                 <transition name="wpfade">
                     <template v-if="page == 'artist-page' && artistPage.data.attributes">
diff --git a/resources/cider-ui/views/svg/chevron-left.svg b/resources/cider-ui/views/svg/chevron-left.svg
new file mode 100644
index 00000000..baac5e11
--- /dev/null
+++ b/resources/cider-ui/views/svg/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/></svg>
\ No newline at end of file
diff --git a/resources/cider-ui/views/svg/chevron-right.svg b/resources/cider-ui/views/svg/chevron-right.svg
new file mode 100644
index 00000000..1dca9de0
--- /dev/null
+++ b/resources/cider-ui/views/svg/chevron-right.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-right" fill="currentColor" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-chevron-right fa-w-10 fa-7x"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" class=""/></svg>
\ No newline at end of file

From c6b4d6bd2c44de143243b273035de6ea5bf38ca7 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:41:45 -0800
Subject: [PATCH 04/12] increased z-index of navigation bar

---
 resources/cider-ui/style.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 7ea4e4ce..b7352d97 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1498,7 +1498,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
   align-items: center;
   padding: 0px 6px;
-  z-index: 1;
+  z-index: 2;
   position: sticky;
   top: 0;
   left: 0;

From cef6a8fb2e45851f78f8e3f30df5175730ae120d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:43:22 -0800
Subject: [PATCH 05/12] adjusted content-inner padding

---
 resources/cider-ui/index.js   | 2 +-
 resources/cider-ui/style.less | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 8e207a23..6b442acc 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -258,7 +258,7 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
             this.mk.privateEnabled = true
-            // this.platform = ipcRenderer.sendSync('cider-platform');
+            this.platform = ipcRenderer.sendSync('cider-platform');
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
             // API Fallback
diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index b7352d97..c2897d9f 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -221,7 +221,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   top: 0;
   left: 0;
   padding: 32px;
-  padding-top: calc(var(--navigationBarHeight) * 2);
+  padding-top: calc(var(--navigationBarHeight) + calc(var(--navigationBarHeight) / 2));
   width: 100%;
 }
 

From 4ae1370086562dd34e59aa223a7f1479ab908736 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:45:44 -0800
Subject: [PATCH 06/12] Added see all to routes

---
 resources/cider-ui/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 6b442acc..7218a6c4 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -258,7 +258,7 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
             this.mk.privateEnabled = true
-            this.platform = ipcRenderer.sendSync('cider-platform');
+            // this.platform = ipcRenderer.sendSync('cider-platform');
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
             // API Fallback
@@ -406,7 +406,7 @@ const app = new Vue({
             this.collectionList.response = response
             this.collectionList.title = title
             this.collectionList.type = type
-            this.page = "collection-list"
+            app.appRoute("collection-list")
         },
         async showArtistView(artist, title, view) {
             let response = await this.mk.api.artistView(artist, view, {}, {view: view, includeResponseMeta: !0})

From 0f66facc58b1b58dd46811e7d641b29d93070ea7 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:48:00 -0800
Subject: [PATCH 07/12] Update style.less

---
 resources/cider-ui/style.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index c2897d9f..275a22d8 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1503,7 +1503,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   top: 0;
   left: 0;
   backdrop-filter: blur(16px) saturate(180%);
-  border-bottom: 1px solid rgb(200 200 200 / 10%);
+  box-shadow: 0px 1px 0px rgb(185 185 185 / 8%);
   .nav-item {
     appearance: none;
     border: 0px;

From 750ac8a79830c6f2be6638ab11a911473d4e7cbd Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:49:19 -0800
Subject: [PATCH 08/12] Update style.less

---
 resources/cider-ui/style.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 275a22d8..5a37f8b1 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -218,10 +218,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .content-inner {
   position: absolute;
-  top: 0;
+  top: var(--navigationBarHeight);
   left: 0;
   padding: 32px;
-  padding-top: calc(var(--navigationBarHeight) + calc(var(--navigationBarHeight) / 2));
   width: 100%;
 }
 

From 977c27aca12077d7f4020255bc01531ab176460b Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:50:45 -0800
Subject: [PATCH 09/12] added blend mode to nav bar for better visibility

---
 resources/cider-ui/style.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 5a37f8b1..3078c779 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1497,12 +1497,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   display: flex;
   align-items: center;
   padding: 0px 6px;
-  z-index: 2;
+  z-index: 7;
   position: sticky;
   top: 0;
   left: 0;
   backdrop-filter: blur(16px) saturate(180%);
-  box-shadow: 0px 1px 0px rgb(185 185 185 / 8%);
+  box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08);
+  mix-blend-mode: hard-light;
   .nav-item {
     appearance: none;
     border: 0px;

From 2abd1fa4f99170765dd00c80c2c86b80f1e2edec Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:58:00 -0800
Subject: [PATCH 10/12] Update style.less

---
 resources/cider-ui/style.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 3078c779..3fb9ee48 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1715,6 +1715,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .artist-page {
   padding: 0px;
+  top:0;
 
   .artist-header {
     background: linear-gradient(45deg, var(--keyColor), #0e0e0e);

From 1325ec098003a09fe82282631c3799a173eddaa6 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 19:12:53 -0800
Subject: [PATCH 11/12] adjusted playlist css

---
 resources/cider-ui/style.less                     | 4 ++++
 resources/cider-ui/views/pages/cider-playlist.ejs | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index 3fb9ee48..d1811c58 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1573,7 +1573,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Album / Playlist Page */
 .playlist-page {
+  --bgColor: transparent;
   padding: 0px;
+  background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 59px, transparent 60px, transparent 100%);
+  top: 0;
+  padding-top: var(--navigationBarHeight);
 
   .playlist-body {
     padding: var(--contentInnerPadding);
diff --git a/resources/cider-ui/views/pages/cider-playlist.ejs b/resources/cider-ui/views/pages/cider-playlist.ejs
index fcc851c9..18194f7b 100644
--- a/resources/cider-ui/views/pages/cider-playlist.ejs
+++ b/resources/cider-ui/views/pages/cider-playlist.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-playlist">
-    <div class="content-inner playlist-page">
-        <template v-if="data != [] && data.attributes != null">
+    <template v-if="data != [] && data.attributes != null">
+    <div class="content-inner playlist-page" :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
             <div class="playlist-display row"
                  :style="{
                 background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
@@ -66,9 +66,9 @@
                 </div>
                 <div class="playlist-time">{{app.getTotalTime()}}</div>
             </div>
-        </template>
-
     </div>
+</template>
+
 </script>
 <script>
     Vue.component('cider-playlist', {

From 4b906511a6abebba8f8d35199121936f285cb17c Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 19:24:18 -0800
Subject: [PATCH 12/12] changed cider-platform from once to on

---
 resources/cider-ui/index.js       | 2 +-
 resources/functions/cider-base.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js
index 7218a6c4..1a743a6a 100644
--- a/resources/cider-ui/index.js
+++ b/resources/cider-ui/index.js
@@ -258,7 +258,7 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
             this.mk.privateEnabled = true
-            // this.platform = ipcRenderer.sendSync('cider-platform');
+            this.platform = ipcRenderer.sendSync('cider-platform');
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
             // API Fallback
diff --git a/resources/functions/cider-base.js b/resources/functions/cider-base.js
index 786782c0..301a1ac9 100644
--- a/resources/functions/cider-base.js
+++ b/resources/functions/cider-base.js
@@ -86,7 +86,7 @@ const CiderBase = {
         mainWindowState.manage(win);
 
         // IPC stuff (senders)
-        ipcMain.once("cider-platform", (event) => {
+        ipcMain.on("cider-platform", (event) => {
             event.returnValue = process.platform
         })