Added auto scroll when text is too long

now-playing/themes/simple/index.html

@@ -1,20 +1,19 @@
 <div id="main-wrapper">
-    <div id="yet-another-wrapper-yup">
-        <div id="album-art-container">
-            <div id="album-art-layer"></div>
-            <div id="album-art-transition-layer"></div>
-        </div>
+    <div id="album-art-container">
+        <div id="album-art-layer"></div>
+        <div id="album-art-transition-layer"></div>
+    </div>
 
-        <div id="song-info-container">
-            <div id="track-label" class="text-label">&nbsp;</div>
-            <div id="artist-label" class="text-label">&nbsp;</div>
-            <div id="progress-container">
-                <label>
-                    <span id="current-time" class="progress-text">0:00</span>
-                    <span>/</span>
-                    <span id="duration" class="progress-text">0:00</span>
-                </label>
+    <div id="song-info-container">
+        <div id="track-label" class="text-label">&nbsp;</div>
+        <div id="artist-label" class="text-label">&nbsp;</div>
+        <div id="progress-container">
+            <div id="current-time" class="progress-text">0:00</div>
+            <div id="progress-bar-track">
+                <div id="progress-bar-fill"></div>
+                <div></div>
             </div>
+            <div id="duration" class="progress-text">0:00</div>
         </div>
     </div>
 </div>

now-playing/themes/simple/script.js

@@ -10,6 +10,7 @@ const albumArtTransition = document.getElementById('album-art-transition-layer')
 const trackLabel = document.getElementById('track-label');
 const artistLabel = document.getElementById('artist-label');
 const progressContainer = document.getElementById('progress-container');
+const progressBarFill = document.getElementById('progress-bar-fill');
 const currentTimeLabel = document.getElementById('current-time');
 const durationLabel = document.getElementById('duration');
 
@@ -34,8 +35,9 @@ if (!showProgressBar)
     progressContainer.style.display = 'none';
 
 // If text alignment is 'right', swap the album art to the right hand side too
-if (textAlignment == 'right')
-    document.getElementById('yet-another-wrapper-yup').appendChild(document.getElementById('album-art-container'));
+if (textAlignment == 'right') {
+    mainWrapper.style.flexDirection = 'row-reverse';
+}
 
 
 
@@ -52,8 +54,10 @@ async function ChangeTrack(mediaProps) {
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
     setTimeout(() => {
-        trackLabel.innerText = swapArtistTrack ? mediaProps.Artist : mediaProps.Title;
-        artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; 
+        // 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);
 
         // Extract the image source string (use fallback if Windows has no art)
         const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png';
@@ -81,4 +85,42 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
 
     durationLabel.innerText =
         ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
-}
+
+    // Set progressbar
+    // Ensure we don't divide by zero or exceed 100%
+    const durationMs = timelineProps.EndTime;
+    let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
+    progressPercent = Math.min(100, Math.max(0, progressPercent));
+    progressBarFill.style.width = `${progressPercent}%`;
+    progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+    switch (themeVariant) {
+        case "matte":
+            progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
+            break;
+        case "matte-dark":
+        default:
+            progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+            break;
+    }
+}
+
+
+// Helper function to calculate height of album art
+const observer = new ResizeObserver(entries => {
+    for (let entry of entries) {
+        // Get the accurate rendered height of song-info-container
+        const infoHeight = entry.contentRect.height;
+        
+        // Calculate 125% of that height
+        const targetSize = infoHeight * 1.5;
+
+        console.log(targetSize);
+
+        // Apply to album art (setting both width & height ensures it stays square)
+        albumArtContainer.style.height = `${targetSize}px`;
+        albumArtContainer.style.width = `${targetSize}px`;
+    }
+});
+
+// Start watching the song info container for size changes
+observer.observe(songInfoContainer);

now-playing/themes/simple/style.css

@@ -6,23 +6,13 @@
     width: 500px;
     display: flex;
     flex-direction: row;
-    align-items: stretch;
-    opacity: 0;
-}
-
-#yet-another-wrapper-yup {
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: row;
     align-items: center;
-    gap: 0.75em;
-    transition: all 0.25s ease-in-out;
+    gap: 1em;
+    opacity: 0;
 }
 
 #album-art-container {
     /* 1. Tell it to maintain a 1:1 square ratio */
-    height: 150%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     border-radius: var(--border-radius);
@@ -62,23 +52,13 @@
     overflow: hidden;
     flex-grow: 1;
     min-width: 0;
+    gap: 0.25em;
 }
 
 #background-transition-layer {
 	z-index: 0;
 }
 
-/* The content sits on top */
-#song-info-wrapper {
-    position: relative; /* Keeps it in the document flow */
-    z-index: 2;         /* Sits above the background-layer */
-    
-    padding: 1em 1.75em;
-    display: flex;
-    flex-direction: column;
-    gap: 0.3em;
-}
-
 #track-label {
 	font-size: 1em;
 	font-weight: 600;
@@ -93,11 +73,36 @@
 }
 
 #progress-container {
-	font-size: 0.6em;
-	font-weight: 400;
-	opacity: 0.6;
-    text-align: var(--text-alignment);
-    margin-top: 0.5em;
+	display: flex;
+	flex-direction: row;
+    align-items: center;
+	gap: 0.2em;
+	margin-top: 0.2em;
+    gap: 0.5em;
+}
+
+#progress-bar-track {
+    width: 100%;
+    height: 0.4em;
+	border-radius: 1em;
+	background-color: #ffffff3a;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Adds depth */
+}
+
+#progress-bar-fill {
+    height: 100%;
+    width: 0%; /* JS will control this */
+    border-radius: 1em;
+    background-color: var(--accent-color, #ffffff);
+    transition: width 1s ease-in-out, background-color 1s ease-in-out;
+    
+    /* This makes the handle track the end of the bar */
+    position: relative; 
+}
+
+.progress-text {
+	font-size: 0.7em;
+	opacity: 0.5;
 }
 
 .text-label {