diff --git a/now-playing/images/placeholder.af b/now-playing/images/placeholder.af new file mode 100644 index 0000000..6eaf7cd Binary files /dev/null and b/now-playing/images/placeholder.af differ diff --git a/now-playing/images/placeholder.png b/now-playing/images/placeholder.png new file mode 100644 index 0000000..db87688 Binary files /dev/null and b/now-playing/images/placeholder.png differ diff --git a/now-playing/script.js b/now-playing/script.js index 1f83095..3b8ffb6 100644 --- a/now-playing/script.js +++ b/now-playing/script.js @@ -332,10 +332,10 @@ async function UpdatePlayerState(data) { // 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded // Only proceed if the player state is actively playing audio if (CurrentPlaybackStatus == PlaybackStatus.PLAYING) { - const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`; + const newTrackKey = `${mediaProps.Title}-${mediaProps.Artist}-${mediaProps.Thumbnail}`; if (newTrackKey !== CurrentSongKey) { - ChangeTrack(mediaProps, accentColorPalette); // Now trigger your cross-fade logic here! - CurrentSongKey = newTrackKey; // Update the tracker with the string key + ChangeTrack(mediaProps, accentColorPalette); // Now trigger your cross-fade logic here! + CurrentSongKey = newTrackKey; // Update the tracker with the string key } } diff --git a/now-playing/themes/card/script.js b/now-playing/themes/card/script.js index abe95a1..623effe 100644 --- a/now-playing/themes/card/script.js +++ b/now-playing/themes/card/script.js @@ -44,8 +44,10 @@ if (!showProgressBar) async function ChangeTrack(mediaProps, accentColorPalette) { // Fade in the overlay (shows the new text) - trackLabel.style.opacity = "0"; - artistLabel.style.opacity = "0"; + if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title)) + trackLabel.style.opacity = "0"; + if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist)) + artistLabel.style.opacity = "0"; backgroundLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0"; @@ -55,15 +57,14 @@ async function ChangeTrack(mediaProps, accentColorPalette) { artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) - const newArtUrl = mediaProps.Thumbnail; + const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png'; // 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 = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex + // Apply a tint + backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex trackLabel.style.opacity = ""; artistLabel.style.opacity = ""; @@ -75,9 +76,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) { 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 = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex + // Apply a tint: + 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); diff --git a/now-playing/themes/classic/script.js b/now-playing/themes/classic/script.js index c34b9be..122a5be 100644 --- a/now-playing/themes/classic/script.js +++ b/now-playing/themes/classic/script.js @@ -44,8 +44,10 @@ if (!showProgressBar) async function ChangeTrack(mediaProps, accentColorPalette) { // Fade in the overlay (shows the new text) - trackLabel.style.opacity = "0"; - artistLabel.style.opacity = "0"; + if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title)) + trackLabel.style.opacity = "0"; + if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist)) + artistLabel.style.opacity = "0"; backgroundLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0"; @@ -55,14 +57,13 @@ async function ChangeTrack(mediaProps, accentColorPalette) { artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) - const newArtUrl = mediaProps.Thumbnail; + const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png'; // 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 + // Apply a tint backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex trackLabel.style.opacity = ""; @@ -75,8 +76,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) { 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 + // Apply a tint 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 diff --git a/now-playing/themes/simple/script.js b/now-playing/themes/simple/script.js index 232f3f2..0549f9f 100644 --- a/now-playing/themes/simple/script.js +++ b/now-playing/themes/simple/script.js @@ -44,8 +44,10 @@ if (textAlignment == 'right') //////////////////// async function ChangeTrack(mediaProps) { - trackLabel.style.opacity = "0"; - artistLabel.style.opacity = "0"; + if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title)) + trackLabel.style.opacity = "0"; + if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist)) + artistLabel.style.opacity = "0"; albumArtLayer.style.opacity = "0"; // Wait for fade (0.5s), then swap the real text and hide overlay @@ -54,7 +56,7 @@ async function ChangeTrack(mediaProps) { artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; // Extract the image source string (use fallback if Windows has no art) - const newArtUrl = mediaProps.Thumbnail; + const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png'; // Set the image albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; diff --git a/now-playing/themes/standard/script.js b/now-playing/themes/standard/script.js index ca388e9..94d0bd7 100644 --- a/now-playing/themes/standard/script.js +++ b/now-playing/themes/standard/script.js @@ -56,8 +56,10 @@ switch (themeVariant) { async function ChangeTrack(mediaProps, accentColorPalette) { // Fade in the overlay (shows the new text) - trackLabel.style.opacity = "0"; - artistLabel.style.opacity = "0"; + if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title)) + trackLabel.style.opacity = "0"; + if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist)) + artistLabel.style.opacity = "0"; backgroundLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0"; @@ -90,9 +92,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) { 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 = accentColorPalette.LightVibrant + "80"; // 80 is 50% opacity in hex + // Apply a tint + backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex trackLabel.style.opacity = ""; artistLabel.style.opacity = ""; @@ -104,9 +105,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) { 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 = accentColorPalette.LightVibrant + "80"; // 80 is 50% opacity in hex + // Apply a tint + 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); diff --git a/now-playing/themes/vinyl/script.js b/now-playing/themes/vinyl/script.js index fd25045..5559960 100644 --- a/now-playing/themes/vinyl/script.js +++ b/now-playing/themes/vinyl/script.js @@ -46,7 +46,7 @@ async function ChangeTrack(mediaProps) { setTimeout(() => { // Extract the image source string (use fallback if Windows has no art) - const newArtUrl = mediaProps.Thumbnail; + const newArtUrl = mediaProps.Thumbnail ?? './images/placeholder.png'; // Set the image albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;