improvements to immersive fs, moved sidebar-library-item to its own js component

src/renderer/index.js

@@ -52,45 +52,6 @@ Vue.component("animated-number", {
   },
 });
 
-Vue.component("sidebar-library-item", {
-  template: "#sidebar-library-item",
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    page: {
-      type: String,
-      required: true,
-    },
-    svgIcon: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    svgIconName: {
-        type: String,
-        required: false
-    },
-    cdClick: {
-      type: Function,
-      required: false,
-    },
-  },
-  data: function () {
-    return {
-      app: app,
-      svgIconData: "",
-    };
-  },
-  async mounted() {
-    if (this.svgIcon) {
-      this.svgIconData = this.svgIcon;
-    }
-  },
-  methods: {},
-});
-
 function fallbackinitMusicKit() {
   const request = new XMLHttpRequest();
 

src/renderer/less/fullscreen.less

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  --chromeHeight1: 60px;
+  --chromeHeight1: 70px;
 
   .app-content-container {
     width:100%;
@@ -50,8 +50,6 @@
     left: 0;
     right: 0;
     height: var(--chromeHeight1);
-    background: var(--color1);
-    backdrop-filter: var(--glassFilter);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -62,8 +60,10 @@
       border       : 1px solid lighten(@baseColor, 8);
       border-radius: 12px;
       display      : flex;
-      height       : 42px;
+      height       : 55px;
       width: 90%;
+      backdrop-filter: var(--glassFilter);
+
 
       .app-sidebar-item {
         background-color: #1e1e1e00;
@@ -76,6 +76,8 @@
         margin          : 0px;
         height          : 100%;
         position        : relative;
+        font-size: 1.1em;
+        font-weight: 500;
 
         &:before {
           --dist          : 1px;
@@ -505,11 +507,31 @@
     font-weight: 380;
   }
 
+  .cd-mediaitem-list-item .duration {
+    font-size: 1.2em;
+  }
+
   .cd-mediaitem-list-item .artwork {
     width: 50px;
     height: 50px;
   }
 
+  .cd-btn-seeall {
+    font-size: 1.2em;
+  }
+
+  h1 {
+    font-size: 3em;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+  }
+
+  .home-page .well.artistfeed-well {
+    height: 512px;
+  }
+
   .header-text {
     font-size: 3em;
     height: 3em;
@@ -558,6 +580,24 @@
     margin-top: 40px;
   }
 
+  .playlist-page .playlist-display .playlistInfo .playlist-hero {
+    transform: unset;
+  }
+
+  .artist-page .artist-header {
+    min-height: 60vh;
+  }
+
+  .artist-page .artist-image {
+    width: 20vh;
+    height: 20vh;
+    aspect-ratio: 1;
+  }
+
+  .artist-page.animated .artist-header {
+    min-height: 80vh;
+  }
+
   .playlist-page .playlist-body {
     flex: 1;
   }

src/renderer/main/app.js

@@ -8,6 +8,7 @@ import { wsapi } from "./wsapi_interop.js"
 import { MusicKitTools } from "./musickittools.js"
 import { spawnMica } from "./mica.js"
 import { svgIcon } from './components/svg-icon.js'
+import { sidebarLibraryItem } from './components/sidebar-library-item.js'
 
 
 // Define window objects

src/renderer/main/components/sidebar-library-item.js

@@ -0,0 +1,46 @@
+import {html} from "../html.js"
+
+export const sidebarLibraryItem = Vue.component("sidebar-library-item", {
+    template: html`
+        <button class="app-sidebar-item"
+                :class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
+            <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''"/>
+            <span class="sidebar-item-text">{{ name }}</span>
+        </button>
+    `,
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        page: {
+            type: String,
+            required: true,
+        },
+        svgIcon: {
+            type: String,
+            required: false,
+            default: "",
+        },
+        svgIconName: {
+            type: String,
+            required: false
+        },
+        cdClick: {
+            type: Function,
+            required: false,
+        },
+    },
+    data: function () {
+        return {
+            app: app,
+            svgIconData: "",
+        };
+    },
+    async mounted() {
+        if (this.svgIcon) {
+            this.svgIconData = this.svgIcon;
+        }
+    },
+    methods: {},
+})

src/renderer/views/components/fullscreen.ejs

@@ -26,7 +26,7 @@
                 </sidebar-library-item>
                 <sidebar-library-item @click.native="tabMode = ''" :name="$root.getLz('term.nowPlaying')" svg-icon="./assets/play.svg" svg-icon-name="nowPlaying" page="nowPlaying">
                 </sidebar-library-item>
-                <sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.search')" svg-icon="./assets/search.svg" svg-icon-name="search" page="search">
+                <sidebar-library-item @click.native="tabMode = 'catalog'" name="" svg-icon="./assets/search.svg" svg-icon-name="search" page="search">
                 </sidebar-library-item>
             </div>
         </div>

src/renderer/views/main.ejs

@@ -119,15 +119,6 @@
     <h1>{{ component.attributes.title.stringForDisplay }}</h1>
 </script>
 
-<!-- Sidebar Item -->
-<script type="text/x-template" id="sidebar-library-item">
-    <button class="app-sidebar-item"
-            :class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
-        <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
-        <span class="sidebar-item-text">{{ name }}</span>
-    </button>
-</script>
-
 </body>
 
 </html>