From e4030c10c05e6367ab2a932edcd5bd8218eaca88 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 25 Feb 2022 18:25:38 -0800
Subject: [PATCH] added twopanel directive

---
 src/renderer/index.js                    |   4 +
 src/renderer/less/directives.less        |  17 ++++
 src/renderer/style.less                  |   1 +
 src/renderer/views/app/chrome-bottom.ejs | 115 +++++++++++++++++++++++
 src/renderer/views/app/chrome-top.ejs    |  98 ++++++++++---------
 src/renderer/views/main.ejs              |   1 +
 6 files changed, 189 insertions(+), 47 deletions(-)
 create mode 100644 src/renderer/less/directives.less
 create mode 100644 src/renderer/views/app/chrome-bottom.ejs

diff --git a/src/renderer/index.js b/src/renderer/index.js
index f262bc56..2f3a4ff5 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -959,6 +959,10 @@ const app = new Vue({
             if (this.cfg.visual.window_background_style == "none") {
                 classes.simplebg = true
             }
+
+            if(this.getThemeDirective('windowLayout') == 'twopanel') {
+                classes.twopanel = true
+            }
             return classes
         },
         invokeDrawer(panel) {
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
new file mode 100644
index 00000000..e7bc7803
--- /dev/null
+++ b/src/renderer/less/directives.less
@@ -0,0 +1,17 @@
+#app.twopanel {
+    --chromeHeight1: 42px;
+    --chromeHeight2: 55px;
+    --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
+    .app-chrome {
+        .app-mainmenu {
+            width: 88px;
+        }
+        height: var(--chromeHeight1);
+        &.chrome-bottom {
+            height: var(--chromeHeight2);
+            .app-chrome--left {
+                padding-left: 32px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 6a0bc45e..d4ba33cd 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -3142,3 +3142,4 @@ body[platform='darwin'] {
 @import url("less/macos.less");
 @import url("less/linux.less");
 @import url("less/compact.less");
+@import url("less/directives.less");
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
new file mode 100644
index 00000000..d3448e4d
--- /dev/null
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -0,0 +1,115 @@
+<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 display--large">
+            <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 display--large">
+            <button class="playback-button previous" @click="prevButton()"></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <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 display--large">
+            <button class="playback-button next" @click="skipToNextItem()"></button>
+        </div>
+        <div class="app-chrome-item display--large">
+            <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"
+                     @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
+                    <div class="artwork" @click="drawer.open = false; fullscreen(true)">
+                        <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                    </div>
+                    <div class="playback-info">
+                        <div class="song-name"
+                             :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
+                            {{ mk.nowPlayingItem["attributes"]["name"] }}
+                            <div class="explicit-icon"
+                                 v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
+                                 style="display: inline-block"></div>
+                        </div>
+                        <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
+                        <div class="song-artist-album">
+                            <div class="song-artist-album-content"
+                                 :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
+                                 style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
+                                <div class="item-navigate song-artist" style="display: inline-block"
+                                     @click="getNowPlayingItemDetailed(`artist`)">
+                                    {{ mk.nowPlayingItem["attributes"]["artistName"] }}
+                                </div>
+                                <div class="song-artist item-navigate" style="display: inline-block"
+                                     @click="getNowPlayingItemDetailed('album')"
+                                     v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
+                                    <div class="separator" style="display: inline-block;">{{"—"}}</div>
+                                    {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                                    (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                                </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">
+                            <button class="lcdMenu" @click="nowPlayingContextMenu">
+                                <div class="svg-icon"></div>
+                            </button>
+                        </div>
+                    </template>
+
+                </div>
+            </template>
+
+        </div>
+    </div>
+    <div class="app-chrome--right">
+        <div class="app-chrome-item volume display--large">
+            <button class="volume-button--small volume" @click="muteButtonPressed()"
+                    :class="{'active': this.cfg.audio.volume == 0}"></button>
+            <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
+                   v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
+        </div>
+        <div class="app-chrome-item generic">
+            <button class="playback-button--small miniplayer"
+                    @click="drawer.open = false; miniPlayer(true)"></button>
+        </div>
+        <div class="app-chrome-item generic">
+            <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+                    @click="invokeDrawer('queue')"></button>
+        </div>
+        <div class="app-chrome-item generic">
+            <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
+                <button class="playback-button--small lyrics"
+                        :class="{'active': drawer.panel == 'lyrics'}"
+                        @click="invokeDrawer('lyrics')"></button>
+            </template>
+
+        </div>
+    </div>
+</div>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 0ea9c415..84ed0270 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -16,33 +16,35 @@
                     @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"
-                    @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 display--large">
-            <button class="playback-button previous" @click="prevButton()"></button>
-        </div>
-        <div class="app-chrome-item display--large">
-            <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 display--large">
-            <button class="playback-button next" @click="skipToNextItem()"></button>
-        </div>
-        <div class="app-chrome-item display--large">
-            <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>
+        <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
+            <div class="app-chrome-item display--large">
+                <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 display--large">
+                <button class="playback-button previous" @click="prevButton()"></button>
+            </div>
+            <div class="app-chrome-item display--large">
+                <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 display--large">
+                <button class="playback-button next" @click="skipToNextItem()"></button>
+            </div>
+            <div class="app-chrome-item display--large">
+                <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>
+        </template>
     </div>
     <div class="app-chrome--center">
-        <div class="app-chrome-item playback-controls">
+        <div class="app-chrome-item playback-controls" v-if="getThemeDirective('windowLayout') != 'twopanel'">
             <template v-if="mkReady()">
                 <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                      @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
@@ -105,28 +107,30 @@
         </div>
     </div>
     <div class="app-chrome--right">
-        <div class="app-chrome-item volume display--large">
-            <button class="volume-button--small volume" @click="muteButtonPressed()"
-                    :class="{'active': this.cfg.audio.volume == 0}"></button>
-            <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
-                   v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
-        </div>
-        <div class="app-chrome-item generic">
-            <button class="playback-button--small miniplayer"
-                    @click="drawer.open = false; miniPlayer(true)"></button>
-        </div>
-        <div class="app-chrome-item generic">
-            <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
-                    @click="invokeDrawer('queue')"></button>
-        </div>
-        <div class="app-chrome-item generic">
-            <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-                <button class="playback-button--small lyrics"
-                        :class="{'active': drawer.panel == 'lyrics'}"
-                        @click="invokeDrawer('lyrics')"></button>
-            </template>
-
-        </div>
+        <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
+            <div class="app-chrome-item volume display--large">
+                <button class="volume-button--small volume" @click="muteButtonPressed()"
+                        :class="{'active': this.cfg.audio.volume == 0}"></button>
+                <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
+                       v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
+            </div>
+            <div class="app-chrome-item generic">
+                <button class="playback-button--small miniplayer"
+                        @click="drawer.open = false; miniPlayer(true)"></button>
+            </div>
+            <div class="app-chrome-item generic">
+                <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+                        @click="invokeDrawer('queue')"></button>
+            </div>
+            <div class="app-chrome-item generic">
+                <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
+                    <button class="playback-button--small lyrics"
+                            :class="{'active': drawer.panel == 'lyrics'}"
+                            @click="invokeDrawer('lyrics')"></button>
+                </template>
+    
+            </div>
+        </template>
         <div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">
             <div class="window-controls">
                 <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 921c4fdb..97064e4c 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -42,6 +42,7 @@
         <div id="app-main" v-show="appMode == 'player'">
             <%- include('app/chrome-top'); %>
             <%- include('app/app-navigation'); %>
+            <%- include('app/chrome-bottom'); %>
         </div>
     </transition>
     <transition name="fsModeSwitch">