Added auto scroll when text is too long

now-playing/themes/standard/index.html

@@ -20,9 +20,6 @@
                     <div></div>
                 </div>
                 <div id="duration" class="progress-text">0:00</div>
-
-                <div id="time-container">
-                </div>
             </div>
         </div>
     </div>

now-playing/themes/standard/script.js

@@ -5,6 +5,7 @@
 const mainWrapper = document.getElementById('main-wrapper');
 const albumArtContainer = document.getElementById('album-art-container');
 const songInfoContainer = document.getElementById('song-info-container');
+const songInfoWrapper = document.getElementById('song-info-wrapper');
 const albumArtLayer = document.getElementById('album-art-layer');
 const albumArtTransition = document.getElementById('album-art-transition-layer');
 const backgroundLayer = document.getElementById('background-layer');
@@ -48,6 +49,10 @@ switch (themeVariant) {
         break;
 }
 
+// If text alignment is 'right', swap the album art to the right hand side too
+if (textAlignment == 'right') {
+    songInfoContainer.style.flexDirection = 'row-reverse';
+}
 
 
 ////////////////////
@@ -65,8 +70,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
 
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(async () => {
-        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
+        SetLabelText('track-label', swapArtistTrack ? mediaProps.Artist : mediaProps.Title);
+        SetLabelText('artist-label', swapArtistTrack ? mediaProps.Title : mediaProps.Artist);
 
         switch (themeVariant) {
             case "matte":
@@ -100,6 +105,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
         backgroundLayer.style.opacity = "";
         albumArtLayer.style.opacity = "";
 
+        console.log(songInfoWrapper.clientWidth);
+
         setTimeout(() => {
             // Set the image
             backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;

now-playing/themes/standard/style.css

@@ -7,7 +7,7 @@
     width: 500px;
     display: flex;
     flex-direction: row;
-    align-items: stretch; 
+    align-items: stretch;
     gap: 0.5em;
     opacity: 0;
 }
@@ -115,14 +115,6 @@
     text-align: var(--text-alignment);
 }
 
-.text-label {
-	white-space: nowrap;
-    overflow: hidden;
-    mask-image: var(--trailing-fade);
-    -webkit-mask-image: var(--trailing-fade);
-    transition: opacity 0.25s ease-in-out;
-}
-
 #progress-container {
 	display: flex;
 	flex-direction: row;
@@ -151,14 +143,6 @@
     position: relative; 
 }
 
-/* #time-container {
-	display: flex;
-	justify-content: space-between;
-	font-size: 0.7em;
-	opacity: 0.5;
-    display: none;
-} */
-
 .progress-text {
 	font-size: 0.7em;
 	opacity: 0.5;