diff --git a/now-playing/themes/card/script.js b/now-playing/themes/card/script.js index 762360c..abe95a1 100644 --- a/now-playing/themes/card/script.js +++ b/now-playing/themes/card/script.js @@ -99,12 +99,4 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { progressPercent = Math.min(100, Math.max(0, progressPercent)); 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(); \ No newline at end of file +} \ No newline at end of file diff --git a/now-playing/themes/classic/index.html b/now-playing/themes/classic/index.html index 9d89656..5aab0e6 100644 --- a/now-playing/themes/classic/index.html +++ b/now-playing/themes/classic/index.html @@ -1,26 +1,28 @@
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
-
-
 
-
 
+
+
 
+
 
-
-
-
-
-
+
+
+
+
+
-
-
0:00
-
0:00
+
+
0:00
+
0:00
+
diff --git a/now-playing/themes/classic/script.js b/now-playing/themes/classic/script.js index 453646e..c34b9be 100644 --- a/now-playing/themes/classic/script.js +++ b/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); @@ -99,14 +99,4 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) { progressPercent = Math.min(100, Math.max(0, progressPercent)); 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(); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/now-playing/themes/classic/style.css b/now-playing/themes/classic/style.css index 9dc3d90..a0f2969 100644 --- a/now-playing/themes/classic/style.css +++ b/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 { diff --git a/now-playing/themes/simple/index.html b/now-playing/themes/simple/index.html index 07f1765..9519a12 100644 --- a/now-playing/themes/simple/index.html +++ b/now-playing/themes/simple/index.html @@ -1,11 +1,20 @@
-
-
-
-
+
+
+
+
+
-
-
 
-
 
+
+
 
+
 
+
+ +
+
\ No newline at end of file diff --git a/now-playing/themes/simple/script.js b/now-playing/themes/simple/script.js index 3c01a4d..232f3f2 100644 --- a/now-playing/themes/simple/script.js +++ b/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 progressBarFill = document.getElementById('progress-bar-fill'); -// const currentTimeLabel = document.getElementById('current-time'); -// const durationLabel = document.getElementById('duration'); +const progressContainer = document.getElementById('progress-container'); +const currentTimeLabel = document.getElementById('current-time'); +const durationLabel = document.getElementById('duration'); @@ -32,9 +29,13 @@ if (maxWidth > 0) else mainWrapper.style.width = `100%`; -// // Set progress bar visibility -// if (!showProgressBar) -// progressContainer.style.display = 'none'; +// Set progress bar visibility +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')); @@ -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 - // backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`; + // Set the image 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() { - const height = songInfoContainer.offsetHeight; - albumArtContainer.style.height = `${1.5 * height}px`; - albumArtContainer.style.width = `${1.5 * height}px`; -} - -SetAlbumArtSize(); \ No newline at end of file + durationLabel.innerText = + ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime); +} \ No newline at end of file diff --git a/now-playing/themes/simple/style.css b/now-playing/themes/simple/style.css index 5430809..d65e88d 100644 --- a/now-playing/themes/simple/style.css +++ b/now-playing/themes/simple/style.css @@ -6,14 +6,23 @@ width: 500px; display: flex; flex-direction: row; - align-items: stretch; - gap: 1em; + align-items: stretch; opacity: 0; - align-items: center; +} + +#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;