Merge branch 'main' of https://github.com/ciderapp/Cider

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: () => {
@@ -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) {
@@ -402,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})
@@ -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 = this.page
+                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);
+                        self.appRoute(`album/${albumId}`)
-                        app.page = "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() {

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,
@@ -217,7 +218,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .content-inner {
   position: absolute;
-  top: 0;
+  top: var(--navigationBarHeight);
   left: 0;
   padding: 32px;
   width: 100%;
@@ -1489,6 +1490,46 @@ 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: 7;
+  position: sticky;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(16px) saturate(180%);
+  box-shadow: 0px 1px 0px rgba(185, 185, 185, 0.08);
+  mix-blend-mode: hard-light;
+  .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%;
@@ -1532,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);
@@ -1674,6 +1719,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);

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>
@@ -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">
@@ -456,7 +460,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>

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">
+    <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', {

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>

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>

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
         })