• Removed all references to 'SetAlbumArtSize()'

• Added progress info to Simple theme

now-playing/themes/card/script.js

@@ -100,11 +100,3 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
     progressBarFill.style.width = `${progressPercent}%`;
     progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
 }
-
-function SetAlbumArtSize() {
-    // const height = songInfoContainer.offsetHeight;
-    albumArtContainer.style.height = `100%`;
-    // albumArtContainer.style.width = `100%`;
-}
-
-SetAlbumArtSize();

now-playing/themes/classic/index.html

@@ -1,4 +1,5 @@
 <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>
@@ -26,3 +27,4 @@
             </div>
         </div>
     </div>
+</div>

now-playing/themes/classic/script.js

@@ -77,7 +77,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
 
             // Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
             // 'rgba(0,0,0,0.6)' ensures the text stays readable
-            backgroundTransitionLayer.style.backgroundColor = aaccentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
+            backgroundTransitionLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
 
             SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
         }, 250);
@@ -100,13 +100,3 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
     progressBarFill.style.width = `${progressPercent}%`;
     progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
 }
-
-function SetAlbumArtSize() {
-    const height = songInfoContainer.offsetHeight;
-    albumArtContainer.style.height = `${height}px`;
-    albumArtContainer.style.width = `${height}px`;
-}
-
-requestAnimationFrame(() => {
-    SetAlbumArtSize();
-});

now-playing/themes/classic/style.css

@@ -13,6 +13,7 @@
 
 #album-art-container {
     /* 1. Tell it to maintain a 1:1 square ratio */
+    height: 100%;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     border-radius: var(--border-radius);
@@ -20,6 +21,7 @@
     background-size: cover;
     background-position: center;
     display: var(--show-album-art);
+    flex-shrink: 0;
 }
 
 #album-art-layer,
@@ -45,7 +47,8 @@
 
 #song-info-container {
     position: relative;
-    flex: 1;
+    flex-grow: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -54,6 +57,17 @@
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 }
 
+#yet-another-wrapper-yup {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    overflow: hidden;
+    gap: 0.5em;
+    transition: all 0.25s ease-in-out;
+}
+
 /* The background now fills the frame */
 #background-layer,
 #background-transition-layer {

now-playing/themes/simple/index.html

@@ -1,4 +1,5 @@
 <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>
@@ -7,5 +8,13 @@
         <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>
+        </div>
     </div>
 </div>

now-playing/themes/simple/script.js

@@ -7,14 +7,11 @@ const albumArtContainer = document.getElementById('album-art-container');
 const songInfoContainer = document.getElementById('song-info-container');
 const albumArtLayer = document.getElementById('album-art-layer');
 const albumArtTransition = document.getElementById('album-art-transition-layer');
-// const backgroundLayer = document.getElementById('background-layer');
-// const backgroundTransitionLayer = document.getElementById('background-transition-layer');
 const trackLabel = document.getElementById('track-label');
 const artistLabel = document.getElementById('artist-label');
-// const progressContainer = document.getElementById('progress-container');
+const progressContainer = document.getElementById('progress-container');
-// const progressBarFill = document.getElementById('progress-bar-fill');
+const currentTimeLabel = document.getElementById('current-time');
-// const currentTimeLabel = document.getElementById('current-time');
+const durationLabel = document.getElementById('duration');
-// const durationLabel = document.getElementById('duration');
 
 
 
@@ -32,9 +29,13 @@ if (maxWidth > 0)
 else
     mainWrapper.style.width = `100%`;
 
-// // Set progress bar visibility
+// Set progress bar visibility
-// if (!showProgressBar)
+if (!showProgressBar)
-//     progressContainer.style.display = 'none';
+    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'));
 
 
 
@@ -43,10 +44,8 @@ else
 ////////////////////
 
 async function ChangeTrack(mediaProps) {
-    // Fade in the overlay (shows the new text)
     trackLabel.style.opacity = "0";
     artistLabel.style.opacity = "0";
-    // backgroundLayer.style.opacity = "0";
     albumArtLayer.style.opacity = "0";
     
     // Wait for fade (0.5s), then swap the real text and hide overlay
@@ -58,39 +57,26 @@ async function ChangeTrack(mediaProps) {
         const newArtUrl = mediaProps.Thumbnail;
 
         // Set the image
-        // backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
         albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
 
-        // // Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
-        // // 'rgba(0,0,0,0.6)' ensures the text stays readable
-        // backgroundLayer.style.backgroundColor = accent + "80"; // 80 is 50% opacity in hex
-
         trackLabel.style.opacity = "";
         artistLabel.style.opacity = "";
-        // backgroundLayer.style.opacity = "";
         albumArtLayer.style.opacity = "";
 
         setTimeout(() => {
-            // // Set the image
+            // Set the image
-            // backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
             albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
             
-            // // Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast
-            // // 'rgba(0,0,0,0.6)' ensures the text stays readable
-            // backgroundTransitionLayer.style.backgroundColor = accent + "80"; // 80 is 50% opacity in hex
-
             SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
         }, 250);
     }, 250);
 }
 
 function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
-}
+    // Update the label using your naming convention
+    currentTimeLabel.innerText =
+        ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
 
-function SetAlbumArtSize() {
+    durationLabel.innerText =
-    const height = songInfoContainer.offsetHeight;
+        ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
-    albumArtContainer.style.height = `${1.5 * height}px`;
-    albumArtContainer.style.width = `${1.5 * height}px`;
 }
-
-SetAlbumArtSize();

now-playing/themes/simple/style.css

@@ -7,13 +7,22 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
-    gap: 1em;
     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;
 }
 
 #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);
@@ -21,6 +30,7 @@
     background-size: cover;
     background-position: center;
     display: var(--show-album-art);
+    flex-shrink: 0;
 }
 
 #album-art-layer,
@@ -50,6 +60,8 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    flex-grow: 1;
+    min-width: 0;
 }
 
 #background-transition-layer {
@@ -75,11 +87,19 @@
 
 #artist-label {
 	font-size: 0.8em;
-	font-weight: 300;
+	font-weight: 400;
 	opacity: 0.6;
     text-align: var(--text-alignment);
 }
 
+#progress-container {
+	font-size: 0.6em;
+	font-weight: 400;
+	opacity: 0.6;
+    text-align: var(--text-alignment);
+    margin-top: 0.5em;
+}
+
 .text-label {
 	white-space: nowrap;
     overflow: hidden;