WIP settings panel, added #app[window-state]

src/main/base/browserwindow.ts

@@ -123,6 +123,7 @@ export class BrowserWindow {
                 "components/artist-chip",
                 "components/hello-world",
                 "components/inline-collection-list",
+                "components/settings-window",
             ],
             appRoutes: [
                 {
@@ -550,8 +551,10 @@ export class BrowserWindow {
         app.get("/ciderlocal/:songs", (req, res) => {
             const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+'));
             console.log('auss', audio)
-            let data = {data: 
+            let data = {
-             this.localSongs.filter((f: any) => audio.split(',').includes(f.id))};
+                data:
+                    this.localSongs.filter((f: any) => audio.split(',').includes(f.id))
+            };
             res.send(data);
         });
 
@@ -1273,7 +1276,8 @@ export class BrowserWindow {
                         // "name": metadata.common.title,
                         // "albumName": metadata.common.album,
                         // "artistName": metadata.common.artist}}
-                        metadatalist.push(form)}
+                        metadatalist.push(form)
+                    }
                 } catch (e) { }
             }
             // console.log('metadatalist', metadatalist);
@@ -1502,7 +1506,6 @@ export class BrowserWindow {
         /* *********************************************************************************************
          * Window Events
          * **********************************************************************************************/
-        if (process.platform === "win32") {
         let WND_STATE = {
             MINIMIZED: 0,
             NORMAL: 1,
@@ -1518,19 +1521,23 @@ export class BrowserWindow {
             const state = wndState;
             if (isMinimized && state !== WND_STATE.MINIMIZED) {
                 wndState = WND_STATE.MINIMIZED;
+                BrowserWindow.win.webContents.send('window-state-changed', 'minimized');
             } else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
                 wndState = WND_STATE.FULL_SCREEN;
+                BrowserWindow.win.webContents.send('window-state-changed', 'fullscreen')
             } else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
                 wndState = WND_STATE.MAXIMIZED;
+                BrowserWindow.win.webContents.send('window-state-changed', 'maximized')
                 BrowserWindow.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
             } else if (state !== WND_STATE.NORMAL) {
                 wndState = WND_STATE.NORMAL;
+                BrowserWindow.win.webContents.send('window-state-changed', 'normal')
                 BrowserWindow.win.webContents.executeJavaScript(
                     `app.chrome.maximized = false`
                 );
             }
         });
-        }
+
 
         let isQuiting = false
 

src/renderer/less/bootstrap.less

@@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
 .nav-pills .nav-link {
   background-color: transparent;
   border: 0;
-  border-radius: 50px;
+  border-radius: 6px;
   color: #eee;
   -webkit-user-drag: none;
-  // transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
   font-weight: 500;
   margin: 0px 4px;
   &:hover {
@@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
 .nav-pills .show > .nav-link {
   color: #fff;
   background-color: var(--selected);
-  outline:2px solid var(--keyColor);
+  // outline:2px solid var(--keyColor);
 }
 
 .nav-fill > .nav-link,

src/renderer/less/elements.less

@@ -2168,12 +2168,20 @@ input[type=checkbox][switch]:checked:active::before {
 }
 
 // fancy pills
+.fancy-pills {
   .nav-pills {
     position: relative;
   
     .nav-link {
       transition: transform .3s var(--appleEase);
       position: relative;
+      background-color: transparent;
+      border: 0;
+      border-radius: 50px;
+      color: #eee;
+      -webkit-user-drag: none;
+      font-weight: 500;
+      margin: 0px 4px;
   
   
       &:after {
@@ -2271,6 +2279,7 @@ input[type=checkbox][switch]:checked:active::before {
       pointer-events: none;
     }
   }
+}
 
 .grouping-container {
   display: grid;

src/renderer/less/macos.less

@@ -6,6 +6,7 @@ body[platform="darwin"] {
     &.notransparency::before {
         display: none;
     }
+
     #app {
         &.simplebg {
             background: transparent;
@@ -33,6 +34,16 @@ body[platform="darwin"] {
                 background-color: var(--macOSChromeColor);
             }
         }
+
+        // &::after {
+        //     position: fixed;
+        //     top:0;left:0;right:0;bottom:0;
+        //     box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
+        //     border-radius: 10px;
+        //     content: " ";
+        //     z-index: 999999;
+        //     pointer-events: none;
+        // }
     }
 
     #app-main {

src/renderer/less/pages.less

@@ -672,6 +672,7 @@
           -webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%);
           border-radius: 0px;
         }
+
         .hero-tint {
           position: absolute;
           top: 0;
@@ -906,7 +907,8 @@
       transition: min-height 0.5s ease-in-out;
       min-height: 200px;
 
-      .playlistInfo {}
+      .playlistInfo {
+      }
 
       .mediaContainer {
         transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
@@ -1331,23 +1333,6 @@
     margin: 16px auto 0px;
   }
 
-  .md-option-header {
-    padding      : 0px 26px;
-    border-bottom: unset;
-    border-top   : unset;
-    font-weight  : 600;
-    background   : rgb(255 255 255 / 0%);
-    font-size    : 2em;
-  }
-
-  .settings-option-body-webview {
-    height: 100%;
-    width : 100%;
-  }
-
-  .settings-option-body {
-    margin: 16px;
-  }
 }
 
 // AudioLabs page
@@ -1812,7 +1797,6 @@
           }
 
 
-
           &:hover {
             transform: scale(1.10) translateZ(-1px) translateY(10px);
             z-index: 1;
@@ -1879,6 +1863,7 @@
 
         &.close {
           background-color: #fc3c44aa;
+
           &:hover {
             background-color: #fc3c44;
           }
@@ -1886,6 +1871,7 @@
 
         &.min {
           background-color: rgb(200 200 200 / 5%);
+
           &:hover {
             background-color: rgb(200 200 200 / 10%);
           }
@@ -1936,3 +1922,156 @@
     }
   }
 }
+
+.settings-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(0 0 0 / 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 16;
+
+  .settings-window {
+    background: var(--baseColorMix);
+    max-width: 1024px;
+    min-width: 850px;
+    height: 100%;
+    border-radius: 10px;
+    box-shadow: var(--ciderShadow-Generic);
+    max-height: 90%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex: 1;
+    backdrop-filter: var(--glassFilterHeavy);
+    transition: width 0.25s ease-in-out, height 0.25s ease-in-out, max-width 0.25s ease-in-out, max-height 0.25s ease-in-out;
+
+    .header-text {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      opacity: 0.9;
+    }
+
+    .nav-pills {
+      gap: 6px;
+
+    }
+
+    .nav-pills .nav-link {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+
+    .md-option-header {
+      padding: 0px 26px;
+      border-bottom: unset;
+      border-top: unset;
+      font-weight: 600;
+      background: rgb(255 255 255 / 0%);
+      font-size: 2em;
+    }
+
+    .settings-option-body-webview {
+      height: 100%;
+      width: 100%;
+    }
+
+    .settings-option-body {
+      margin: 16px;
+    }
+
+    &.maxed {
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
+      border-radius: 0px;
+      box-shadow: unset;
+    }
+
+    .close-btn {
+      width: 36px;
+      height: 36px;
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      appearance: none;
+      border: 0;
+      background-color: transparent;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      border-radius: 50px;
+      display: grid;
+      align-content: center;
+      z-index: 9;
+
+      &:before {
+        content: "";
+        font-family: "codicon";
+        color: var(--textColor);
+        font-size: 20px;
+      }
+
+      &:hover {
+        background-color: rgb(196, 43, 28)
+      }
+
+      &.minmax-btn {
+        right: 52px;
+
+        &:before {
+          content: "";
+        }
+
+        &.min {
+          &:before {
+            content: "";
+          }
+        }
+
+        &:hover {
+          background-color: var(--selected);
+        }
+      }
+    }
+
+    .tabs {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+
+      > .col-auto {
+        width: 230px;
+      }
+
+      .tab-content {
+        margin: 0 !important;
+      }
+    }
+
+    .tab-content {
+      overflow-y: overlay;
+      height: 100%;
+      background-color: var(--panelColor2);
+      padding-top: 48px;
+      border-left: 1px solid var(--borderColor);
+    }
+  }
+}

src/renderer/main/vueapp.js

@@ -168,6 +168,7 @@ const app = new Vue({
                 location: "",
                 info: {}
             },
+            windowState: "normal",
             desiredPageTransition: "wpfade_transform",
             hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
             artworkReady: false,
@@ -217,6 +218,7 @@ const app = new Vue({
             castMenu: false,
             moreInfo: false,
             airplayPW: false,
+            settings: false
         },
         socialBadges: {
             badgeMap: {},
@@ -849,6 +851,10 @@ const app = new Vue({
                 this.library.localsongs = data;
             })
 
+            ipcRenderer.on('window-state-changed', (event, data) => {
+                this.chrome.windowState = data
+            })
+
             ipcRenderer.on('SoundCheckTag', (event, tag) => {
                 // let replaygain = self.parseSCTagToRG(tag)
                 try {
@@ -4325,7 +4331,8 @@ const app = new Vue({
                             "name": app.getLz('settings.option.audio.audioLab'),
                             "hidden": true,
                             "action": function () {
-                                app.appRoute('audiolabs')
+                                app.$store.state.pageState.settings.currentTabIndex = 2
+                                app.modals.settings = true
                             }
                         },
                     ]

src/renderer/main/vuex-store.js

@@ -12,6 +12,10 @@ const store = new Vuex.Store({
                 nextUrl: null,
                 items: [],
                 size: "normal"
+            },
+            settings: {
+                currentTabIndex: 0,
+                fullscreen: false
             }
         },
         artwork: {

src/renderer/style.less

@@ -15,6 +15,7 @@
 
 :root {
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
+  --borderColor: rgb(200 200 200 / 16%);
   --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
   --mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
   --mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
@@ -50,6 +51,7 @@
   --textColor: #eee;
   --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
   --glassFilter: blur(16px) saturate(180%); 
+  --glassFilterHeavy: blur(64px) saturate(280%);
   --sidebarWidth: 260px;
 }
 

src/renderer/views/app/app-navigation.ejs

@@ -105,7 +105,7 @@
               $root.getLz("term.about")
             }}</span>
           </button>
-          <button class="usermenu-item" @click="appRoute('settings')">
+          <button class="usermenu-item" @click="modals.settings = true">
             <span class="usermenu-item-icon">
               <%- include("../svg/settings.svg") %>
             </span>

src/renderer/views/app/panels.ejs

@@ -31,6 +31,9 @@
 <transition name="modal">
     <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
 </transition>
+<transition name="modal">
+    <settings-window v-if="modals.settings"></settings-window>
+</transition>
 <transition name="modal">
     <eq-view v-if="modals.equalizer"></eq-view>
 </transition>

src/renderer/views/main.ejs

@@ -71,7 +71,9 @@
     <div id="LOADER">
         <%- include("../assets/cider-round.svg") %>
     </div>
-    <div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
+    <div id="app" :class="getAppClasses()"
+    :window-state="chrome.windowState"
+    :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'); %>

src/renderer/views/pages/audiolabs.ejs

@@ -1,5 +1,5 @@
 <script type="text/x-template" id="audiolabs-page">
-    <div class="content-inner audiolabs-page ">
+    <div class="audiolabs-page">
         <div class="md-option-container">
             <div class="settings-option-body">
                 <div class="md-option-line">
@@ -120,7 +120,7 @@
                         </select>
                     </div>
                 </div>
-                <div style="opacity: 0.5; pointer-events: none">
+                <div style="opacity: 0.5; pointer-events: none" v-if="false">
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.unfinished')}}</span>
                     </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -178,7 +178,7 @@
                 </div>
             </div>
             <div class="playlist-body scrollbody">
-                <b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
+                <b-tabs pills class="track-pills pilldim fancy-pills" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
                     <b-tab :title="$root.getLz('term.tracks')">
                         <div @wheel="minClass(true)" @scroll="minClass(true)">
                         <div class="">