From f8aeae8eaedb6e593d7a9f14b17ce3ec4ed47ac6 Mon Sep 17 00:00:00 2001
From: Monochromish <79590499+Monochromish@users.noreply.github.com>
Date: Mon, 7 Nov 2022 09:05:37 +1100
Subject: [PATCH] Add expand artwork feature (#1557)

---
 src/main/base/store.ts                    |  1 +
 src/renderer/less/directives.less         |  2 +-
 src/renderer/main/vueapp.js               | 14 +++++
 src/renderer/views/app/chrome-bottom.ejs  | 62 +++++++++++------------
 src/renderer/views/components/sidebar.ejs | 18 +++++++
 5 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index bb6383c8..aa3d92a1 100644
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@@ -205,6 +205,7 @@ export class Store {
       purplePodcastPlaybackBar: false,
       maxElementScale: -1, // -1 default, anything else is a custom scale
       overrideDisplayTheme: "system", // system , dark, light
+      artworkDisplayLayout: "default",
     },
     lyrics: {
       enable_mxm: true,
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index e061b92f..27f63ed9 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -271,7 +271,7 @@
 
         .playback-info {
           align-items: flex-start;
-          margin: 6px;
+          margin: 8px;
 
           .song-name {
             text-align: left;
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 0d61e04a..93a53088 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -2350,6 +2350,20 @@ const app = new Vue({
       return this.isDisabled() || app.mk.queue._position + 1 === app.mk.queue.length;
     },
 
+    switchArtworkDisplayLayout() {
+      switch (app.cfg.visual.artworkDisplayLayout) {
+        case "default":
+          app.cfg.visual.artworkDisplayLayout = "sidebar";
+          break;
+        case "sidebar":
+          app.cfg.visual.artworkDisplayLayout = "default";
+          break;
+        default:
+          app.cfg.visual.artworkDisplayLayout = "default";
+          break;
+      }
+    },
+
     async getNowPlayingItemDetailed(target) {
       let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem));
       if (nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index b95b1931..b3e1c5ce 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -5,38 +5,38 @@
             <template v-if="mkReady()">
                 <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                      @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                    <div class="artwork" id="artworkLCD">
+                    <div v-if="app.cfg.visual.artworkDisplayLayout == 'default'" @click.stop="switchArtworkDisplayLayout()" class="artwork" id="artworkLCD">
                         <mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
+                        <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
+                          <div class="content">
+                              <div class="shadow-artwork">
+                                  <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                              </div>
+                              <div class="popover-artwork">
+                                  <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                              </div>
+                              <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
+                              <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{
+                                  mk.nowPlayingItem["attributes"]["artistName"] }}
+                              </div>
+                              <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
+                                  {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                                  (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                              </div>
+                              <hr>
+                              <div class="btn-group" style="width:100%;">
+                                  <button class="md-btn md-btn-small" style="width: 100%;"
+                                          @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer")
+                                      }}
+                                  </button>
+                                  <button class="md-btn md-btn-small" style="width: 100%;"
+                                          @click="drawer.open = false; fullscreen(true)">{{
+                                      $root.getLz("term.fullscreenView") }}
+                                  </button>
+                              </div>
+                          </div>
+                      </b-popover>
                     </div>
-                    <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
-                        <div class="content">
-                            <div class="shadow-artwork">
-                                <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
-                            </div>
-                            <div class="popover-artwork">
-                                <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
-                            </div>
-                            <div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
-                            <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{
-                                mk.nowPlayingItem["attributes"]["artistName"] }}
-                            </div>
-                            <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
-                                {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
-                                (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
-                            </div>
-                            <hr>
-                            <div class="btn-group" style="width:100%;">
-                                <button class="md-btn md-btn-small" style="width: 100%;"
-                                        @click="drawer.open = false; miniPlayer(true)">{{ $root.getLz("term.miniplayer")
-                                    }}
-                                </button>
-                                <button class="md-btn md-btn-small" style="width: 100%;"
-                                        @click="drawer.open = false; fullscreen(true)">{{
-                                    $root.getLz("term.fullscreenView") }}
-                                </button>
-                            </div>
-                        </div>
-                    </b-popover>
                     <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' : '']">
@@ -86,7 +86,7 @@
 
             <template v-else>
                 <div class="app-playback-controls">
-                    <div class="artwork" id="artworkLCD" style="pointer-events: none;">
+                    <div v-if="app.cfg.visual.artworkDisplayLayout == 'default'" class="artwork" id="artworkLCD" style="pointer-events: none;">
                         <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                     </div>
                     <div class="playback-info">
diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs
index 8d9d034b..b66d3644 100644
--- a/src/renderer/views/components/sidebar.ejs
+++ b/src/renderer/views/components/sidebar.ejs
@@ -193,6 +193,9 @@
                 >
                 </sidebar-playlist>
             </template>
+            <div v-if="app.cfg.visual.artworkDisplayLayout == 'sidebar'" @click.stop="switchArtworkDisplayLayout()" class="artwork" id="artworkLCD" style="position:absolute;bottom:0px">
+              <mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
+            </div>
         </div>
         <div class="app-sidebar-footer display--small app-sidebar-footer--controls">
             <div class="app-playback-controls" @contextmenu="$root.nowPlayingContextMenu">
@@ -308,5 +311,20 @@
 <script>
   Vue.component("cider-app-sidebar", {
     template: "#cider-app-sidebar",
+    methods: {
+      switchArtworkDisplayLayout: function() {
+      switch (app.cfg.visual.artworkDisplayLayout) {
+        case "default":
+          app.cfg.visual.artworkDisplayLayout = "sidebar";
+          break;
+        case "sidebar":
+          app.cfg.visual.artworkDisplayLayout = "default";
+          break;
+        default:
+          app.cfg.visual.artworkDisplayLayout = "default";
+          break;
+      }
+    },
+    }
   })
 </script>