From db80697a8f7cac63f32efd0ab3810c2140a10ee4 Mon Sep 17 00:00:00 2001
From: yazninja <yazlesean@gmail.com>
Date: Mon, 24 Jan 2022 18:19:17 +0800
Subject: [PATCH 1/4] fix overlapping items in playback-info

---
 src/renderer/style.less     | 47 ++++++++++++++++++++-----------------
 src/renderer/views/main.ejs | 15 +++++++++++-
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 2511b9fe..0c4e99db 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1112,27 +1112,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 
-.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
-  font-weight: 400;
-  font-size: 12px;
-  text-align: center;
-  /*height: 1.2em;
-  line-height: 1.2em;*/
 
-  z-index: 1;
-  max-width: 360px;
-  
-
-  .song-artist-normal {
-    height: inherit;
-  }
-
-  &.song-artist-marquee {
-    > marquee {
-      margin-bottom: -3px;
-    }
-  }
-}
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-progress {
   @bgColor: transparent;
@@ -1256,7 +1236,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   overflow: hidden;
 }
 
-.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
+.app-chrome .app-chrome-item > .app-playback-controls .playback-info > .song-progress{
   width: 100%;
 }
 
@@ -1267,6 +1247,31 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   display: flex;
   position: relative;
 }
+.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album {
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  /*height: 1.2em;
+  line-height: 1.2em;*/
+
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  width: 80%;
+  max-width: 340px;
+  overflow: hidden;
+  
+
+  .song-artist-normal {
+    height: inherit;
+  }
+
+  &.song-artist-marquee {
+    > marquee {
+      margin-bottom: -3px;
+    }
+  }
+}
 
 .display--small {
   display: none !important;
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 972027a6..ad72e94d 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -96,7 +96,7 @@
                                              style="display: inline-block"></div>
                                     </div>
                                     <!-- :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']" -->
-                                    <div class="song-artist"
+                                    <div class="song-artist-album"
                                          style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
                                         <div class="item-navigate song-artist" style="display: inline-block"
                                              @click="getNowPlayingItemDetailed(`artist`)">
@@ -788,6 +788,19 @@
 <!-- Miniplayer View -->
 <%- include('components/miniplayer')
 %>
+<script>
+    function checkMarquee(){
+        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') == true) {
+            document.getElementsByClassName('song-artist')[0].classList.add('marquee');
+            document.getElementsByClassName('song-artist')[1].classList.add('marquee-after');
+        }
+        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') == true) {
+            document.getElementsByClassName('song-name')[0].classList.add('marquee');
+            document.getElementsByClassName('song-name')[1].classList.add('marquee-after');
+        } 
+
+    }    
+</script>
 
 <script
         src="musickit.js?v=1"></script>

From e2f3647d97159aa482e4c7462d3452ffcb4f27b6 Mon Sep 17 00:00:00 2001
From: yazninja <71800112+yazninja@users.noreply.github.com>
Date: Tue, 25 Jan 2022 00:21:24 +0800
Subject: [PATCH 2/4] Remove js

Put in index.js
---
 src/renderer/views/main.ejs | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 355494c4..2d6d22eb 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -788,19 +788,6 @@
 <!-- Miniplayer View -->
 <%- include('components/miniplayer')
 %>
-<script>
-    function checkMarquee(){
-        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') == true) {
-            document.getElementsByClassName('song-artist')[0].classList.add('marquee');
-            document.getElementsByClassName('song-artist')[1].classList.add('marquee-after');
-        }
-        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') == true) {
-            document.getElementsByClassName('song-name')[0].classList.add('marquee');
-            document.getElementsByClassName('song-name')[1].classList.add('marquee-after');
-        } 
-
-    }    
-</script>
 
 <script
         src="musickit.js?v=1"></script>
@@ -819,4 +806,4 @@
         src="./js/WSAPI_Interop.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From dc6f56e04f38d22795a98946121ad63411aa3b15 Mon Sep 17 00:00:00 2001
From: yazninja <71800112+yazninja@users.noreply.github.com>
Date: Tue, 25 Jan 2022 00:25:33 +0800
Subject: [PATCH 3/4] Add js for marquee (non-functional atm)

---
 src/renderer/index.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 14462aa9..8d0a76c7 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -3373,7 +3373,16 @@ const app = new Vue({
            //this.modals.qrcode = true;
            
         }
-
+    function checkMarquee(){
+        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') == true) {
+            document.getElementsByClassName('song-artist')[0].classList.add('marquee');
+            document.getElementsByClassName('song-artist')[1].classList.add('marquee-after');
+        }
+        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') == true) {
+            document.getElementsByClassName('song-name')[0].classList.add('marquee');
+            document.getElementsByClassName('song-name')[1].classList.add('marquee-after');
+        } 
+    }    
     }
 })
 
@@ -3663,4 +3672,4 @@ document.addEventListener('keydown', function(event) {
             ipcRenderer.send('detachDT','')
         } catch (e) { }
     }
-});
\ No newline at end of file
+});

From 518a5f59b25286c18e6768c08df09c8735e61bb0 Mon Sep 17 00:00:00 2001
From: yazninja <71800112+yazninja@users.noreply.github.com>
Date: Tue, 25 Jan 2022 13:44:35 +0800
Subject: [PATCH 4/4] Resize queue-col

---
 src/renderer/style.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index e167fd0f..27119f5b 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -4575,7 +4575,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .queue-col {
 
     width: 60vh;
-    height: 50vh;
+    height: 62vh;
 
     .queue-title {
       opacity: 0.6;