Merge branch 'main' into enhancement/lastfm

src/renderer/assets/feather/hard-drive.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hard-drive">
+  <path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zM6 16h.01M10 16h.01"/>
+</svg>

src/renderer/assets/feather/headphones.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones">
+  <path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
+  <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
+</svg>

src/renderer/assets/feather/pen-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool" width="20" height="20">
+  <path d="m12 19 7-7 3 3-7 7-3-3z"/>
+  <path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586"/>
+  <circle cx="11" cy="11" r="2"/>
+</svg>

src/renderer/assets/feather/zap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" width="20" height="20">
+  <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
+</svg>

src/renderer/assets/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

src/renderer/index.js

@@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
   },
   async mounted() {
     if (this.svgIcon) {
-      this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
+      this.svgIconData = this.svgIcon;
     }
   },
   methods: {},

src/renderer/less/directives.less

@@ -338,7 +338,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 110px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;
@@ -353,7 +355,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 60px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;

src/renderer/less/helpers.less

@@ -64,7 +64,8 @@
       overflow-y: overlay;
     }
 
-    .modal-footer {}
+    .modal-footer {
+    }
   }
 }
 
@@ -74,7 +75,9 @@
       height: 700px;
       max-height: 700px;
       width: 800px;
-    max-width : 800px;}
+      max-width: 800px;
+    }
+
     overflow: hidden;
 
     .info-header {
@@ -481,6 +484,7 @@
       z-index: -1;
       filter: blur(32px) brightness(50%) saturate(280%);
     }
+
     .popover-artwork {
       width: 200px;
       height: 200px;
@@ -491,6 +495,7 @@
     .song-name {
       font-weight: 600;
     }
+
     .song-artist, .song-album {
       opacity: 0.75;
       cursor: pointer;
@@ -501,3 +506,19 @@
     }
   }
 }
+
+._svg-icon {
+  --icon: url("./assets/chevron-left.svg");
+  --size: 1em;
+  width: var(--size);
+  height: var(--size);
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  background: rgb(255 255 255 / 76%);
+  -webkit-mask-repeat: no-repeat;
+
+  &.md {
+    --size: 1.2em;
+  }
+}

src/renderer/main/app.js

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

src/renderer/main/components/svg-icon.js

@@ -0,0 +1,20 @@
+export const svgIcon = Vue.component("svg-icon", {
+    template: `
+        <div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
+    `,
+    props: {
+        name: {
+            type: String,
+            required: false
+        },
+        classes: {
+            type: String,
+            required: false
+        },
+        url: {
+            type: String,
+            required: true,
+            default: "./assets/repeat.svg"
+        }
+    }
+})

src/renderer/main/vueapp.js

@@ -245,6 +245,7 @@ const app = new Vue({
         notyf: notyf,
         idleTimer: null,
         idleState: false,
+        appVisible: true
     },
     watch: {
         cfg: {
@@ -276,6 +277,12 @@ const app = new Vue({
         }, false)
     },
     methods: {
+        hotReload() {
+            this.appVisible = false
+            setTimeout(() => {
+                this.appVisible = true
+            }, 1000)
+        },
         setWindowHash(route = "") {
             window.location.hash = `#${route}`;
         },

src/renderer/style.less

@@ -858,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-sidebar-item {
+  --iconSize: 18px;
   display: flex;
   width: 100%;
   padding: 8px 12px;
@@ -872,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   transition: transform 0.1s;
   text-align: left;
   align-items: center;
+  gap: 12px;
 
   &.app-sidebar-item-playlist {
     -webkit-user-drag: element;
@@ -887,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     }
   }
 
+  >._svg-icon {
+    --size: var(--iconSize);
+  }
+
 }
 
 .app-sidebar-item:hover {

src/renderer/views/app/sidebar.ejs

@@ -158,23 +158,10 @@
       </div>
       <template v-if="!cfg.general.sidebarCollapsed.playlists">
         <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
-          <div class="sidebar-icon">
+          <svg-icon url="./assets/feather/plus.svg"></svg-icon>
-            <svg
+          <div class="sidebar-item-text">
-              width="46"
-              height="46"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M12 5v14"></path>
-              <path d="M5 12h14"></path>
-            </svg>
-          </div>
             {{ getLz("action.createNew") }}
+          </div>
         </button>
         <sidebar-playlist
           v-for="item in getPlaylistFolderChildren('p.playlistsroot')"

src/renderer/views/components/settings-window.ejs

@@ -6,7 +6,7 @@
         <b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex">
             <b-tab>
                 <template #title>
-                    <div>⚙️</div>
+                    <div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div>
                     <div>
                         {{ $root.getLz('settings.header.general') }}
                     </div>
@@ -234,7 +234,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🔊</div>
+                    <div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div>
                     <div>
                         {{ $root.getLz('settings.header.audio') }}
                     </div>
@@ -372,7 +372,7 @@
             </b-tab>
             <b-tab v-if="app.cfg.advanced.AudioContext">
                 <template #title>
-                    <div>✨</div>
+                    <div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div>
                     <div>
                         {{ $root.getLz('settings.option.audio.audioLab') }}
                     </div>
@@ -383,7 +383,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🎨</div>
+                    <div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div>
                     <div>
                         {{ $root.getLz('settings.header.visual') }}
                     </div>
@@ -624,7 +624,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🎤</div>
+                    <div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div>
                     <div>
                         {{ $root.getLz('settings.header.lyrics') }}
                     </div>
@@ -963,7 +963,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>🔌</div>
+                    <div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div>
                     <div>
                         {{ $root.getLz('settings.header.connectivity') }}
                     </div>
@@ -1147,7 +1147,7 @@
             </b-tab>
             <b-tab>
                 <template #title>
-                    <div>💻</div>
+                    <div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div>
                     <div>
                         {{$root.getLz('settings.header.advanced')}}
                     </div>

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

@@ -9,7 +9,7 @@
                 :href="item.href"
                 @click='clickEvent()'>
             <template v-if="!renaming">
-                <div class="sidebar-icon" :key="item.id" v-html="icon"></div> {{ item.attributes.name }}
+                <svg-icon :url="icon"/> {{ item.attributes.name }}
                 <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
             </template>
             <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
@@ -57,9 +57,9 @@
         },
         async mounted() {
             if (this.item.type !== "library-playlist-folders") {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
+                this.icon = ("./assets/feather/list.svg")
             } else {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
+                this.icon = ("./assets/feather/folder.svg")
             }
             let playlistMap = this.$root.playlists.trackMapping
             if (this.relateMediaItems.length != 0) {

src/renderer/views/main.ejs

@@ -67,13 +67,16 @@
     </style>
 </head>
 
-<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>">
+<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
+      platform="<%= env.platform %>">
 <div id="LOADER">
     <%- include("../assets/cider-round.svg") %>
 </div>
 <div id="app" :class="getAppClasses()"
+     v-if="appVisible"
      :window-state="chrome.windowState"
-    :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
+     :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
+     :window-style="cfg.visual.directives.windowLayout">
     <transition name="fsModeSwitch">
         <div id="app-main" v-show="appMode == 'player'">
             <%- include('app/chrome-top'); %>
@@ -106,8 +109,9 @@
     <%- include(env.components[i]); %>
 <% } %>
 
-
+<script async
-                <script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
+        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
+        data-web-components>
 </script>
 <script src="index.js?v=1"></script>
 
@@ -119,8 +123,8 @@
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
-        <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
+        <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
-        {{ name }}
+        <span class="sidebar-item-text">{{ name }}</span>
     </button>
 </script>
 

src/renderer/views/pages/zoo.ejs

@@ -1,5 +1,6 @@
 <script type="text/x-template" id="cider-zoo">
     <div class="content-inner">
+        <svg-icon/>
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         {{ $store.state.test }}