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

.circleci/config.yml

@@ -15,16 +15,15 @@ jobs:
             - yarn-packages-{{ checksum "yarn.lock" }}
       - run:
           name: Install Dependencies
-          command: yarn install --immutable
-      - run:
-          name: Install Playwright
-          command: yarn playwright install --with-deps
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
       - save_cache:
           name: Save Yarn Package Cache
           key: yarn-packages-{{ checksum "yarn.lock" }}
           paths:
-            - .yarn/cache
-            - .yarn/unplugged
+            - ~/.cache/yarn
+      - run:
+          name: Install Playwright
+          command: yarn playwright install --with-deps
       - run:
           name: Install system build dependencies
           command: |
@@ -35,9 +34,6 @@ jobs:
             sudo apt-get install -y wine32
       - store_test_results:
           path: test-results
-      - run:
-          name: Base Functionality Test
-          command: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test -- 
       - run:
           name: Generate Builds (Linux)
           command: yarn dist -l -p never

.gitignore

@@ -135,11 +135,14 @@ dist
 .vscode-test
 
 # yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
 .pnp.*
+.yarn/*
+.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 ## JetBrains GitIgnore ##
 

.yarnrc.yml

@@ -1,2 +0,0 @@
-nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-3.1.1.cjs

package.json

@@ -8,7 +8,6 @@
   "main": "./build/index.js",
   "author": "Cider Collective <cryptofyre@cider.sh> (https://cider.sh)",
   "repository": "https://github.com/ciderapp/Cider.git",
-  "packageManager": "yarn@3.1.1",
   "bugs": {
     "url": "https://github.com/ciderapp/Cider/issues?q=is%3Aopen+is%3Aissue+label%3Abug"
   },

src/i18n/en_US.jsonc

@@ -60,6 +60,7 @@
   "term.mute": "Mute",
   "term.unmute": "Unmute",
   "term.share": "Share",
+  "term.share.success": "Copied to clipboard",
   "term.settings": "Settings",
   "term.seeAll": "See All",
   "term.sortBy": "Sort By",

src/main/index.ts

@@ -1,8 +1,12 @@
 require('v8-compile-cache');
 
+import {app, components, ipcMain} from 'electron';
+import {join} from 'path';
+app.setPath('userData', join(app.getPath('appData'), 'Cider'));
+
+
 // Analytics for debugging fun yeah.
 import {init as Sentry} from '@sentry/electron';
-import {app, components, ipcMain} from 'electron';
 import {Store} from "./base/store";
 import {AppEvents} from "./base/app";
 import {Plugins} from "./base/plugins";

src/renderer/assets/AppChromeBtn.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 300 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.30081,0,0,0.30081,-41.1651,-47.9227)">
+        <g transform="matrix(1.26848,0,0,1.26848,167,195.512)">
+            <circle cx="101" cy="102.5" r="79.5" style="fill:rgb(15,15,15);"/>
+        </g>
+        <g transform="matrix(0.260038,0,0,0.260038,167,195.511)">
+            <g id="Release.afdesign">
+                <g>
+                    <path d="M501,21C765.367,21 980,235.633 980,500C980,764.367 765.367,979 501,979C236.633,979 22,764.367 22,500C22,235.633 236.633,21 501,21ZM501,169C683.684,169 832,317.316 832,500C832,682.684 683.684,831 501,831C318.316,831 170,682.684 170,500C170,317.316 318.316,169 501,169Z" style="fill:rgb(255,38,84);"/>
+                    <path d="M501,224C653.053,224 776.5,347.447 776.5,499.5C776.5,651.553 653.053,775 501,775C348.947,775 225.5,651.553 225.5,499.5C225.5,347.447 348.947,224 501,224ZM589.165,492.207C595.163,495.672 595.163,504.328 589.165,507.793L439.502,594.256C433.502,597.722 426,593.392 426,586.463L426,413.537C426,406.608 433.502,402.278 439.502,405.744L589.165,492.207Z" style="fill:rgb(255,38,84);"/>
+                </g>
+            </g>
+        </g>
+        <g transform="matrix(10.0544,0,0,10.0544,472.765,384.95)">
+            <g transform="matrix(16,0,0,16,0,0)">
+                <path d="M0.705,-0.473C0.685,-0.641 0.558,-0.737 0.389,-0.737C0.197,-0.737 0.05,-0.602 0.05,-0.364C0.05,-0.126 0.195,0.01 0.389,0.01C0.576,0.01 0.688,-0.114 0.705,-0.248L0.549,-0.249C0.535,-0.171 0.474,-0.126 0.392,-0.126C0.281,-0.126 0.206,-0.208 0.206,-0.364C0.206,-0.515 0.28,-0.601 0.393,-0.601C0.477,-0.601 0.538,-0.553 0.549,-0.473L0.705,-0.473Z" style="fill:rgb(235,235,235);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,12.0341,0)">
+                <path d="M0.06,-0L0.212,-0L0.212,-0.545L0.06,-0.545L0.06,-0ZM0.136,-0.616C0.181,-0.616 0.218,-0.65 0.218,-0.692C0.218,-0.734 0.181,-0.769 0.136,-0.769C0.092,-0.769 0.055,-0.734 0.055,-0.692C0.055,-0.65 0.092,-0.616 0.136,-0.616Z" style="fill:rgb(235,235,235);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,16.3864,0)">
+                <path d="M0.261,0.009C0.349,0.009 0.395,-0.042 0.416,-0.087L0.423,-0.087L0.423,-0L0.572,-0L0.572,-0.727L0.421,-0.727L0.421,-0.454L0.416,-0.454C0.396,-0.498 0.352,-0.553 0.261,-0.553C0.141,-0.553 0.04,-0.46 0.04,-0.272C0.04,-0.089 0.137,0.009 0.261,0.009ZM0.309,-0.112C0.235,-0.112 0.195,-0.178 0.195,-0.273C0.195,-0.367 0.234,-0.432 0.309,-0.432C0.383,-0.432 0.424,-0.37 0.424,-0.273C0.424,-0.175 0.382,-0.112 0.309,-0.112Z" style="fill:rgb(235,235,235);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,26.5511,0)">
+                <path d="M0.309,0.011C0.444,0.011 0.535,-0.055 0.556,-0.156L0.416,-0.165C0.401,-0.124 0.362,-0.102 0.311,-0.102C0.236,-0.102 0.188,-0.152 0.188,-0.234L0.188,-0.234L0.559,-0.234L0.559,-0.276C0.559,-0.461 0.447,-0.553 0.303,-0.553C0.142,-0.553 0.038,-0.439 0.038,-0.27C0.038,-0.097 0.141,0.011 0.309,0.011ZM0.188,-0.328C0.191,-0.39 0.238,-0.44 0.305,-0.44C0.371,-0.44 0.417,-0.393 0.417,-0.328L0.188,-0.328Z" style="fill:rgb(235,235,235);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,36.1136,0)">
+                <path d="M0.06,-0L0.212,-0L0.212,-0.309C0.212,-0.376 0.261,-0.422 0.327,-0.422C0.348,-0.422 0.377,-0.418 0.391,-0.414L0.391,-0.548C0.378,-0.551 0.359,-0.553 0.344,-0.553C0.283,-0.553 0.233,-0.518 0.213,-0.45L0.207,-0.45L0.207,-0.545L0.06,-0.545L0.06,-0Z" style="fill:rgb(235,235,235);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+    <g transform="matrix(0.0132579,0,0,-0.0132579,266.642,57.2123)">
+        <g id="g3003">
+            <path id="path3005" d="M1611,832C1611,796.667 1598.67,766.667 1574,742L923,91C897.667,65.667 867.333,53 832,53C796,53 766,65.667 742,91L91,742C65.667,766 53,796 53,832C53,867.333 65.667,897.667 91,923L165,998C191,1022.67 221.333,1035 256,1035C291.333,1035 321.333,1022.67 346,998L832,512L1318,998C1342.67,1022.67 1372.67,1035 1408,1035C1442.67,1035 1473,1022.67 1499,998L1574,923C1598.67,897 1611,866.667 1611,832Z" style="fill:rgb(235,235,235);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

src/renderer/index.js

@@ -340,6 +340,13 @@ const app = new Vue({
         },
     },
     methods: {
+        mainMenuVisibility(val) {
+            if(val) {
+                (this.chrome.userinfo.id) ? this.chrome.menuOpened = !this.chrome.menuOpened : false
+            }else{
+                setTimeout(()=>{this.chrome.menuOpened = false}, 100)
+            }
+        },
         stringTemplateParser(expression, valueObj) {
             const templateMatcher = /{{\s?([^{}\s]*)\s?}}/g;
             let text = expression.replace(templateMatcher, (substring, value, index) => {
@@ -594,7 +601,6 @@ const app = new Vue({
             if (this.isDev) {
                 this.mk.privateEnabled = true
                 // Hide UserInfo if Dev mode
-                this.chrome.hideUserInfo = true
             } else {
                 // Get Hide User from Settings
                 this.chrome.hideUserInfo = !this.cfg.visual.showuserinfo
@@ -965,6 +971,7 @@ const app = new Vue({
             })
         },
         copyToClipboard(str) {
+            notyf.success(app.getLz('term.share.success'))
             navigator.clipboard.writeText(str)
         },
         newPlaylist(name = app.getLz('term.newPlaylist'), tracks = []) {
@@ -3270,11 +3277,13 @@ const app = new Vue({
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {
                     el.play()
                 })
+                document.querySelector("body").classList.remove("stopanimation")
                 this.animateBackground = true
             } else {
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {
                     el.pause()
                 })
+                document.querySelector("body").classList.add("stopanimation")
                 this.animateBackground = false
             }
         },

src/renderer/logo-simple.svg

@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 313 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(3.125,0,0,3.125,0,0)">
-        <g transform="matrix(1.38696,0,0,1.38696,-183.553,-76.7485)">
-            <g transform="matrix(16,0,0,16,160.665,73.4177)">
-                <path d="M0.705,-0.473C0.685,-0.641 0.558,-0.737 0.389,-0.737C0.197,-0.737 0.05,-0.602 0.05,-0.364C0.05,-0.126 0.195,0.01 0.389,0.01C0.576,0.01 0.688,-0.114 0.705,-0.248L0.549,-0.249C0.535,-0.171 0.474,-0.126 0.392,-0.126C0.281,-0.126 0.206,-0.208 0.206,-0.364C0.206,-0.515 0.28,-0.601 0.393,-0.601C0.477,-0.601 0.538,-0.553 0.549,-0.473L0.705,-0.473Z" style="fill:white;fill-rule:nonzero;"/>
-            </g>
-            <g transform="matrix(16,0,0,16,172.699,73.4177)">
-                <path d="M0.06,-0L0.212,-0L0.212,-0.545L0.06,-0.545L0.06,-0ZM0.136,-0.616C0.181,-0.616 0.218,-0.65 0.218,-0.692C0.218,-0.734 0.181,-0.769 0.136,-0.769C0.092,-0.769 0.055,-0.734 0.055,-0.692C0.055,-0.65 0.092,-0.616 0.136,-0.616Z" style="fill:white;fill-rule:nonzero;"/>
-            </g>
-            <g transform="matrix(16,0,0,16,177.051,73.4177)">
-                <path d="M0.261,0.009C0.349,0.009 0.395,-0.042 0.416,-0.087L0.423,-0.087L0.423,-0L0.572,-0L0.572,-0.727L0.421,-0.727L0.421,-0.454L0.416,-0.454C0.396,-0.498 0.352,-0.553 0.261,-0.553C0.141,-0.553 0.04,-0.46 0.04,-0.272C0.04,-0.089 0.137,0.009 0.261,0.009ZM0.309,-0.112C0.235,-0.112 0.195,-0.178 0.195,-0.273C0.195,-0.367 0.234,-0.432 0.309,-0.432C0.383,-0.432 0.424,-0.37 0.424,-0.273C0.424,-0.175 0.382,-0.112 0.309,-0.112Z" style="fill:white;fill-rule:nonzero;"/>
-            </g>
-            <g transform="matrix(16,0,0,16,187.216,73.4177)">
-                <path d="M0.309,0.011C0.444,0.011 0.535,-0.055 0.556,-0.156L0.416,-0.165C0.401,-0.124 0.362,-0.102 0.311,-0.102C0.236,-0.102 0.188,-0.152 0.188,-0.234L0.188,-0.234L0.559,-0.234L0.559,-0.276C0.559,-0.461 0.447,-0.553 0.303,-0.553C0.142,-0.553 0.038,-0.439 0.038,-0.27C0.038,-0.097 0.141,0.011 0.309,0.011ZM0.188,-0.328C0.191,-0.39 0.238,-0.44 0.305,-0.44C0.371,-0.44 0.417,-0.393 0.417,-0.328L0.188,-0.328Z" style="fill:white;fill-rule:nonzero;"/>
-            </g>
-            <g transform="matrix(16,0,0,16,196.778,73.4177)">
-                <path d="M0.06,-0L0.212,-0L0.212,-0.309C0.212,-0.376 0.261,-0.422 0.327,-0.422C0.348,-0.422 0.377,-0.418 0.391,-0.414L0.391,-0.548C0.378,-0.551 0.359,-0.553 0.344,-0.553C0.283,-0.553 0.233,-0.518 0.213,-0.45L0.207,-0.45L0.207,-0.545L0.06,-0.545L0.06,-0Z" style="fill:white;fill-rule:nonzero;"/>
-            </g>
-        </g>
-        <circle cx="17" cy="16.667" r="12.333" style="fill:rgb(235,235,235);"/>
-        <g id="g147" transform="matrix(0.297476,0,0,0.297476,-16.7212,-19.0819)">
-            <path id="path41" d="M113.553,67.234C111.989,67.44 110.373,67.38 108.796,67.538C105.581,67.86 102.374,68.548 99.283,69.479C85.683,73.576 74.237,83.188 67.62,95.728C58.974,112.114 59.92,132.602 69.683,148.275C73.899,155.044 79.648,160.705 86.34,165.013C90.987,168.005 96.247,170.235 101.606,171.575C107.932,173.157 114.607,173.607 121.076,172.802C139.182,170.549 155.227,158.921 162.858,142.301C165.794,135.905 167.337,128.957 167.644,121.946C168.67,98.52 152.877,76.772 130.7,69.694C126.785,68.444 122.737,67.681 118.642,67.399C116.992,67.285 115.202,67.018 113.553,67.234M112.226,83.813C116.656,83.29 121.632,84.115 125.833,85.514C130.752,87.152 135.254,89.717 139.108,93.203C153.094,105.857 154.806,128.026 143.09,142.744C140.415,146.104 137.152,149.006 133.466,151.217C128.993,153.901 123.948,155.665 118.753,156.221C113.863,156.745 108.876,156.366 104.15,154.943C99.89,153.66 95.81,151.611 92.313,148.85C77.992,137.54 73.888,116.673 83.621,101.038C86.308,96.722 89.827,93.066 93.973,90.133C99.448,86.26 105.67,84.586 112.226,83.813M112.226,89.802C106.903,90.501 101.862,91.851 97.402,95.001C93.9,97.475 90.841,100.562 88.619,104.246C80.752,117.287 83.774,134.719 95.853,144.135C98.477,146.18 101.448,147.812 104.593,148.901C109.23,150.505 114.244,150.887 119.085,150.235C123.337,149.662 127.573,148.069 131.143,145.694C135.459,142.822 139.035,139.018 141.507,134.447C148.532,121.459 144.666,104.627 132.913,95.798C129.999,93.609 126.685,91.926 123.178,90.925C119.742,89.945 115.8,89.332 112.226,89.802M107.138,109.717C108.23,109.447 110.211,111.095 111.12,111.636C114.483,113.639 117.898,115.564 121.297,117.505C122.215,118.029 124.992,119.047 124.931,120.287C124.871,121.486 122.008,122.553 121.076,123.084C117.931,124.873 114.817,126.715 111.673,128.504C110.475,129.186 108.937,130.499 107.58,130.751C105.799,131.083 106.363,127.602 106.363,126.593L106.363,113.76C106.363,112.776 105.865,110.031 107.138,109.717Z" style="fill:rgb(255,91,109);fill-rule:nonzero;"/>
-        </g>
-    </g>
-</svg>

src/renderer/style.less

@@ -83,6 +83,14 @@ body.notransparency::before {
   background-image: url(data:image/png;base64,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);
 }
 
+body.stopanimation * {
+  animation: unset !important;
+
+  .loadbar-sound {
+    display: none;
+  }
+}
+
 *,
 *:before,
 *:after {
@@ -159,6 +167,7 @@ body.notransparency::before {
       z-index: 1;
     }
   }
+
   //&::before {
   //  position: absolute;
   //  top: -50%;
@@ -496,6 +505,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   padding: 11px;
 
   .app-playback-controls {
+    margin: 0 auto;
     .control-buttons {
       display: flex;
       justify-content: center;
@@ -655,7 +665,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .usermenu-container {
-  bottom: 66px;
+  top: 0px;
   #cmenu.container();
 
   .usermenu-body {
@@ -986,18 +996,26 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 100%;
 }
 
-.app-chrome .app-chrome-item > .app-title {
-  width: 100px;
+.app-chrome .app-chrome-item > .app-mainmenu {
+  width: 116px;
   font-size: 13px;
-  background: url("./AppHeader.svg");
-  background-size: 95px;
+  background: url("./assets/AppChromeBtn.svg");
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
-  height: 100%;
+  height: 70%;
   margin-right: 16px;
   margin-left: 16px;
-  image-rendering: -webkit-optimize-contrast;
-  -webkit-app-region: drag;
+  border: 0px;
+  border-radius: 6px;
+
+  &:hover {
+    background-color: var(--selected);
+  }
+
+  &:active, &.active {
+    background-color: var(--selected-click);
+  }
 }
 
 .app-chrome .app-chrome-item > .window-controls {
@@ -1107,15 +1125,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .app-playback-controls:hover .marquee {
   animation: unset;
+
   &.song-artist {
     overflow: hidden;
   }
+
   .song-artist {
     overflow: hidden;
   }
+
   &.song-name {
     overflow: hidden;
   }
+
   &::after {
     content: none !important;
     display: none;
@@ -1125,23 +1147,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .marquee {
   animation: marquee 15s linear infinite;
+
   &.song-artist {
     overflow: unset;
   }
+
   .song-artist {
     overflow: unset;
   }
+
   &.song-name {
     overflow: unset;
   }
+
   &::after {
     content: attr(data-value);
   }
 }
 
 
-
-
 .app-chrome .app-chrome-item > .app-playback-controls .song-progress {
   @bgColor: transparent;
   //height: 16px;
@@ -1241,13 +1265,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     &:focus {
       outline: none;
     }
+
     &:hover {
       background: var(--hover);
     }
+
     &:active {
       background: var(--selected-click);
       transform: scale(0.95);
     }
+
     .svg-icon {
       --url: url('views/svg/more.svg') !important;
     }
@@ -1275,6 +1302,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   display: flex;
   position: relative;
 }
+
 .app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album {
   font-weight: 400;
   font-size: 12px;
@@ -1382,7 +1410,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
 
-
   .display--large {
     display: none !important;
   }
@@ -2776,6 +2803,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       top: 0;
       z-index: 2;
     }
+
     .close-btn {
       width: 50px;
       height: 42px;
@@ -2852,7 +2880,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 
-
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;
@@ -3072,6 +3099,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     opacity: 0.7;
   }
 }
+
 // Collection Page
 .collection-page {
   padding-bottom: 128px;
@@ -3264,6 +3292,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
     }
   }
+
   .artist-title {
 
     .artist-play {
@@ -3417,6 +3446,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     padding: 6px;
     display: flex;
     background: rgb(200 200 200 / 10%);
+
     .menu-option-header {
       width: 40px;
       height: 40px;
@@ -3443,6 +3473,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
     }
   }
+
   .menu-panel-body {
     display: flex;
     flex-flow: column;
@@ -3540,6 +3571,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 32px;
     width: 32px;
   }
+
   .infinity {
     content: url("./assets/infinity.svg");
     margin: auto;
@@ -3720,15 +3752,33 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   /* CSS.gg
   */
   @keyframes load-bar {
-    10% {box-shadow: inset 0 -4px 0}
-    20% {box-shadow: inset 0 -10px 0}
-    30% {box-shadow: inset 0 -12px 0}
-    40% {box-shadow: inset 0 -8px 0}
-    50% {box-shadow: inset 0 -4px 0}
-    60% {box-shadow: inset 0 -6px 0}
-    80% {box-shadow: inset 0 -12px 0}
-    90% {box-shadow: inset 0 -6px 0}
-    to {box-shadow: inset 0 -2px 0}
+    10% {
+      box-shadow: inset 0 -4px 0
+    }
+    20% {
+      box-shadow: inset 0 -10px 0
+    }
+    30% {
+      box-shadow: inset 0 -12px 0
+    }
+    40% {
+      box-shadow: inset 0 -8px 0
+    }
+    50% {
+      box-shadow: inset 0 -4px 0
+    }
+    60% {
+      box-shadow: inset 0 -6px 0
+    }
+    80% {
+      box-shadow: inset 0 -12px 0
+    }
+    90% {
+      box-shadow: inset 0 -6px 0
+    }
+    to {
+      box-shadow: inset 0 -2px 0
+    }
   }
 
   .loadbar-sound,
@@ -3740,6 +3790,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 28px;
     box-shadow: inset 0 -12px 0;
   }
+
   .loadbar-sound {
     margin-left: 22px;
     margin-top: -16px;
@@ -3748,16 +3799,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     color: var(--keyColor);
     display: block;
   }
+
   .loadbar-sound::after,
   .loadbar-sound::before {
     content: "";
     position: absolute;
     bottom: 0
   }
+
   .loadbar-sound::before {
     left: -4.5px;
     animation-delay: -2.4s
   }
+
   .loadbar-sound::after {
     right: -4.2px;
     animation-delay: -3.7s
@@ -5105,6 +5159,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       z-index: 3;
       opacity: 0;
       padding: 3%;
+
       &:hover {
         opacity: 1;
       }
@@ -5250,6 +5305,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 300px;
   display: flex;
   align-items: center;
+
   .grid-body {
     display: grid;
     grid-auto-flow: column dense;
@@ -5286,6 +5342,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     font-size: 1.0em;
     background: rgb(255 255 255 / 3%);
   }
+
   .settings-option-body {
     margin: 16px;
   }
@@ -5799,6 +5856,7 @@ body.no-gpu {
         }
       }
     }
+
     .modal-content {
       display: block;
 
@@ -5812,12 +5870,14 @@ body.no-gpu {
         justify-items: center;
         font-size: 0.7em;
       }
+
       .input-container.mini {
         display: inline-grid;
         width: 43px;
         justify-items: center;
         font-size: 0.7em;
       }
+
       .freq-header {
         margin-bottom: 2px;
       }
@@ -5827,14 +5887,17 @@ body.no-gpu {
         margin-left: 25%;
         text-align: center;
       }
+
       input.eq-slider {
         -webkit-appearance: slider-vertical;
         width: 5%;
       }
+
       input[type="number"] {
         padding: unset;
         width: 55px;
       }
+
       .header input.eq-slider {
         -webkit-appearance: slider-vertical;
         width: 5%;

src/renderer/views/main.ejs

@@ -50,7 +50,10 @@
                         </div>
                     </div>
                     <div class="app-chrome-item full-height" v-else>
-                        <div class="app-title"></div>
+                        <button class="app-mainmenu"
+                                @blur="mainMenuVisibility(false)"
+                                @click="mainMenuVisibility(true)"
+                                :class="{active: chrome.menuOpened}"></button>
                     </div>
                     <div class="app-chrome-item display--large">
                         <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@@ -189,7 +192,8 @@
                                    @focus="search.showHints = true"
                                    @blur="setTimeout(()=>{search.showHints = false}, 300)"
                                    v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
-                                   @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
+                                   @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'"
+                                   v-model="search.term"
                                    ref="searchInput" class="search-input">
                         </div>
                     </div>
@@ -205,21 +209,26 @@
                         <div class="app-sidebar-header-text">
                             Cider
                         </div>
-                        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
+                        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg"
+                                              page="home">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             {{$root.getLz('term.appleMusic')}}
                         </div>
-                        <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
+                        <sidebar-library-item :name="$root.getLz('term.listenNow')"
+                                              svg-icon="./assets/feather/play-circle.svg"
                                               page="listen_now"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
+                        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg"
+                                              page="browse">
                         </sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
+                        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg"
+                                              page="radio">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             {{$root.getLz('term.library')}}
                         </div>
-                        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')" svg-icon="./assets/feather/plus-circle.svg"
+                        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')"
+                                              svg-icon="./assets/feather/plus-circle.svg"
                                               page="library-recentlyadded"></sidebar-library-item>
                         <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
                                               page="library-songs"></sidebar-library-item>
@@ -227,8 +236,10 @@
                                               page="library-albums"></sidebar-library-item>
                         <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
                                               page="library-artists"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg" page="library-videos"></sidebar-library-item>
-                        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg" page="podcasts">
+                        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg"
+                                              page="library-videos"></sidebar-library-item>
+                        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg"
+                                              page="podcasts">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
                             {{ $root.getLz('term.playlists') }}
@@ -239,6 +250,34 @@
                     <transition name="wpfade">
                         <div class="usermenu-container" v-if="chrome.menuOpened">
                             <div class="usermenu-body">
+                                <button class="app-sidebar-button" style="width:100%">
+
+                                    <img class="sidebar-user-icon" loading="lazy"
+                                         :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>
+
+                                    <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
+                                        <template v-if="chrome.userinfo.id || mk.isAuthorized">
+                                            <div class="fullname text-overflow-elipsis">{{ (chrome.userinfo != null &&
+                                                chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") :
+                                                ""
+                                                }}
+                                            </div>
+                                            <div class="handle-text text-overflow-elipsis">{{
+                                                (chrome.userinfo != null && chrome.userinfo.attributes != null) ?
+                                                (chrome.userinfo.attributes.handle ?? "") : ""
+                                                }}
+                                            </div>
+                                        </template>
+                                        <template v-else>
+                                            <div @click="mk.authorize()">
+                                                Sign In
+                                            </div>
+                                        </template>
+                                    </div>
+                                    <div class="sidebar-user-text" v-else>
+                                        Cider
+                                    </div>
+                                </button>
                                 <button class="usermenu-item" @click="showWebRemoteQR()">
                                     <div class="row nopadding">
                                         <div class="col nopadding">
@@ -261,15 +300,16 @@
                                     <span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
                                 </button>
                                 <button class="usermenu-item" @click="unauthorize()">
-                                    <span class="usermenu-item-icon" style="right:2.5px;"><%- include("./svg/log-out.svg") %></span>
+                                    <span class="usermenu-item-icon"
+                                          style="right:2.5px;"><%- include("./svg/log-out.svg") %></span>
                                     <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
                                 </button>
                             </div>
                         </div>
                     </transition>
-                    <div class="app-sidebar-footer">
+                    <div class="app-sidebar-footer display--small">
 
-                        <div class="app-playback-controls display--small" v-if="mkReady()"
+                        <div class="app-playback-controls " v-if="mkReady()"
                              @contextmenu="nowPlayingContextMenu">
                             <div class="control-buttons">
                                 <div class="app-chrome-item">
@@ -302,39 +342,13 @@
                                 <div class="input-container">
                                     <button class="volume-button--small volume" @click="muteButtonPressed()"
                                             :class="{'active': this.cfg.audio.volume == 0}"></button>
-                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
+                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0"
+                                           :max="cfg.audio.maxVolume"
                                            v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
                                            @change="checkMuteChange()">
                                 </div>
                             </div>
                         </div>
-                        <button class="app-sidebar-button" style="width:100%" :class="{active: chrome.menuOpened}"
-                                @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
-                                @click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
-
-                            <img class="sidebar-user-icon" loading="lazy"
-                                 :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>
-
-                            <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
-                                <template v-if="chrome.userinfo.id || mk.isAuthorized">
-                                    <div class="fullname text-overflow-elipsis">{{  (chrome.userinfo != null && chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") : ""
-                                        }}
-                                    </div>
-                                    <div class="handle-text text-overflow-elipsis">{{
-                                        (chrome.userinfo != null && chrome.userinfo.attributes != null)  ? (chrome.userinfo.attributes.handle ?? "") : ""
-                                        }}
-                                    </div>
-                                </template>
-                                <template v-else>
-                                    <div @click="mk.authorize()">
-                                        Sign In
-                                    </div>
-                                </template>
-                            </div>
-                            <div class="sidebar-user-text" v-else>
-                                Cider
-                            </div>
-                        </button>
                     </div>
                     <div class="app-sidebar-notification backgroundNotification"
                          v-if="library.backgroundNotification.show">

src/renderer/views/pages/settings.ejs

@@ -6,6 +6,9 @@
             </div>
             <div class="settings-option-body">
                 <div class="md-option-line">
+                    <div class="md-option-segment">
+                        {{$root.getLz('term.accountSettings')}}
+                    </div>
                     <div class="md-option-segment md-option-segment_auto">
                         <button class="md-btn" @click="app.appRoute('apple-account-settings')">
                             {{$root.getLz('term.accountSettings')}}