added window style to settings

src/main/base/store.ts

@@ -97,7 +97,10 @@ export class Store {
             "bg_artwork_rotation": false,
             "hw_acceleration": "default", // default, webgpu, disabled
             "showuserinfo": true,
-            "miniplayer_top_toggle": true
+            "miniplayer_top_toggle": true,
+            "directives": {
+                "windowLayout": "default"
+            }
         },
         "lyrics": {
             "enable_mxm": false,

src/renderer/index.js

@@ -959,11 +959,14 @@ const app = new Vue({
             }
         },
         getThemeDirective(directive = "") {
-            if (typeof this.chrome.appliedTheme.info.directives != "object") {
+            let directives = {}
-                return ""
+            if (typeof this.chrome.appliedTheme.info.directives == "object") {
+                directives = this.chrome.appliedTheme.info.directives
             }
-            if (this.chrome.appliedTheme.info.directives[directive]) {
+            if (directives[directive]) {
                 return this.chrome.appliedTheme.info.directives[directive].value
+            } else if(this.cfg.visual.directives[directive]) {
+                return this.cfg.visual.directives.windowLayout
             }else{
                 return ""
             }

src/renderer/less/directives.less

@@ -1,22 +1,177 @@
 #app.twopanel {
   --chromeHeight1: 42px;
-    --chromeHeight2: 55px;
+  --chromeHeight2: 76px;
   --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
+
   .app-chrome {
     .app-mainmenu {
+      margin-left: 10px;
       width: 88px;
     }
+
     height: var(--chromeHeight1);
+
     &.chrome-bottom {
       height: var(--chromeHeight2);
       box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
-            .app-chrome--left {
-                padding-left: 32px;
-            }
     }
   }
 
   .app-sidebar-footer--controls {
     display: none !important;
   }
+
+  .app-chrome.chrome-bottom {
+    .app-playback-controls .actions {
+      align-self: center;
+    }
+
+    .playback-button.play,
+    .playback-button.pause {
+      width: 42px;
+      height: 42px;
+      background-color: rgb(200 200 200 / 20%);
+      border-radius: 50%;
+      margin: 6px;
+      box-shadow: 0px 0px 0px 2px var(--keyColor);
+    }
+
+    .app-chrome--center {
+      display: flex;
+      flex-direction: column;
+
+      .app-chrome-playback-controls {
+        display: flex;
+        z-index: 1;
+        // margin-bottom: 12px;
+      }
+
+      .app-chrome-playback-duration {
+        position: relative;
+        width: 80%;
+        -webkit-app-region: no-drag;
+        height: 16px;
+
+        .song-progress {
+          @bgColor: transparent;
+          height: 16px;
+          position: absolute;
+          bottom: 4px;
+          left: 0px;
+          right: 4px;
+          background: @bgColor;
+          z-index: 0;
+
+
+          .song-duration {
+            display: flex;
+          }
+
+          .song-duration p {
+            font-weight: 400;
+            font-size: 10px;
+            height: 1.2em;
+            line-height: 1.3em;
+            overflow: hidden;
+            margin: 0 0 0 0.25em;
+          }
+
+          &:hover {
+            > input[type=range] {
+              &::-webkit-slider-thumb {
+                opacity: 1;
+                transform: scale(1);
+                z-index: 1;
+              }
+            }
+          }
+
+          input[type=range] {
+            appearance: none;
+            width: 100%;
+            height: 4px;
+            background-color: rgb(200 200 200 / 10%);
+            border-radius: 2px;
+
+            &::-webkit-slider-thumb {
+              opacity: 0;
+              transform: scale(0.5);
+              -webkit-appearance: none;
+              appearance: none;
+              width: 12px;
+              height: 12px;
+              border-radius: 100%;
+              background: var(--keyColor);
+              cursor: default;
+              transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+            }
+          }
+        }
+      }
+
+    }
+
+    .app-chrome--left {
+      width: 30%;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .playback-controls {
+        .artwork {
+          width: var(--chromeHeight2);
+          height: var(--chromeHeight2);
+          margin: 0px 6px 0px 0px;
+          box-shadow: unset;
+          border: 0px;
+
+          .mediaitem-artwork,
+          img {
+            border-radius: 0px;
+            box-shadow: unset;
+            border: 0px;
+          }
+        }
+
+        .playback-info {
+          align-items: flex-start;
+          margin: 6px;
+
+          .song-name {
+            text-align: left;
+            font-size: 15px;
+            font-weight: initial;
+            width: 100%;
+            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
+          }
+
+          .song-artist-album {
+            width: 100%;
+            -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
+          }
+
+          .audio-type {
+            margin: 0px;
+          }
+
+          .song-artist-album-content {
+            text-align: left;
+            font-size: 12px;
+          }
+        }
+
+
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        border: 0px;
+      }
+
+      flex: 0 0 auto;
+    }
+
+    .app-chrome--right {
+      width: 30%;
+      flex: 0 0 auto;
+    }
+  }
 }

src/renderer/themes/groovy/index.less

@@ -0,0 +1 @@
+//

src/renderer/themes/groovy/theme.json

@@ -0,0 +1,15 @@
+{
+    "name": "Groovy",
+    "description": "Inspired by Groove Music and Media Player found on Windows",
+    "version": "1.0.0",
+    "author": "ciderapp",
+    "github_repo": "ciderapp/Groovy",
+    "directives": {
+        "windowLayout": {
+            "value": "twopanel"
+        },
+        "lcdArtworkSize": {
+            "value": 70
+        }
+    }
+}

src/renderer/views/app/chrome-bottom.ejs

@@ -1,31 +1,5 @@
 <div class="app-chrome chrome-bottom" v-if="getThemeDirective('windowLayout') == 'twopanel'" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
     <div class="app-chrome--left">
-        <div class="app-chrome-item">
-            <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
-                    @click="mk.shuffleMode = 1"></button>
-            <button class="playback-button--small shuffle active" v-else
-                    @click="mk.shuffleMode = 0"></button>
-        </div>
-        <div class="app-chrome-item">
-            <button class="playback-button previous" @click="prevButton()"></button>
-        </div>
-        <div class="app-chrome-item">
-            <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
-            <button class="playback-button play" @click="mk.play()" v-else></button>
-        </div>
-        <div class="app-chrome-item">
-            <button class="playback-button next" @click="skipToNextItem()"></button>
-        </div>
-        <div class="app-chrome-item">
-            <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
-                    @click="mk.repeatMode = 1"></button>
-            <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
-                    v-else-if="mk.repeatMode == 1"></button>
-            <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
-                    v-else-if="mk.repeatMode == 2"></button>
-        </div>
-    </div>
-    <div class="app-chrome--center">
         <div class="app-chrome-item playback-controls">
             <template v-if="mkReady()">
                 <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@@ -59,21 +33,6 @@
                                 </div>
                             </div>
                         </div>
-
-                        <div class="song-progress">
-                            <div class="song-duration"
-                                 style="justify-content: space-between; height: 1px;"
-                                 :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
-                                <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
-                                <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
-                                </p>
-                            </div>
-
-                            <input type="range" step="0.01" min="0" :style="progressBarStyle()"
-                                   @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
-                                   @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
-                                   :max="mk.currentPlaybackDuration" :value="getSongProgress()">
-                        </div>
                     </div>
                     <template v-if="mk.nowPlayingItem['attributes']['playParams']">
                         <div class="actions">
@@ -87,6 +46,50 @@
             </template>
 
         </div>
+
+    </div>
+    <div class="app-chrome--center">
+        <div class="app-chrome-playback-controls">
+            <div class="app-chrome-item">
+                <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                        @click="mk.shuffleMode = 1"></button>
+                <button class="playback-button--small shuffle active" v-else
+                        @click="mk.shuffleMode = 0"></button>
+            </div>
+            <div class="app-chrome-item">
+                <button class="playback-button previous" @click="prevButton()"></button>
+            </div>
+            <div class="app-chrome-item">
+                <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
+                <button class="playback-button play" @click="mk.play()" v-else></button>
+            </div>
+            <div class="app-chrome-item">
+                <button class="playback-button next" @click="skipToNextItem()"></button>
+            </div>
+            <div class="app-chrome-item">
+                <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                        @click="mk.repeatMode = 1"></button>
+                <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                        v-else-if="mk.repeatMode == 1"></button>
+                <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+                        v-else-if="mk.repeatMode == 2"></button>
+            </div>
+        </div>
+        <div class="app-chrome-playback-duration">
+            <div class="song-progress">
+                <div class="song-duration"
+                     style="justify-content: space-between; height: 1px;">
+                    <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
+                    <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
+                    </p>
+                </div>
+
+                <input type="range" step="0.01" min="0" :style="progressBarStyle()"
+                       @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
+                       @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
+                       :max="mk.currentPlaybackDuration" :value="getSongProgress()">
+            </div>
+        </div>
     </div>
     <div class="app-chrome--right">
         <div class="app-chrome-item volume">

src/renderer/views/pages/settings.ejs

@@ -143,6 +143,17 @@
                         </button>
                     </div>
                 </div>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Window Style
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select" v-model="$root.cfg.visual.directives.windowLayout">
+                            <option value="default">Cupertino</option>
+                            <option value="twopanel">Redmond</option>
+                        </select>
+                    </div>
+                </div>
                 <div class="md-option-line">
                     <div class="md-option-segment">
                         {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}