Minor polish

This commit is contained in:
nutty
2026-07-03 00:49:22 +10:00
parent 15e5f91f01
commit 3ac06ed9c3
8 changed files with 33 additions and 31 deletions
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

+3 -3
View File
@@ -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 // 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 // Only proceed if the player state is actively playing audio
if (CurrentPlaybackStatus == PlaybackStatus.PLAYING) { if (CurrentPlaybackStatus == PlaybackStatus.PLAYING) {
const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`; const newTrackKey = `${mediaProps.Title}-${mediaProps.Artist}-${mediaProps.Thumbnail}`;
if (newTrackKey !== CurrentSongKey) { if (newTrackKey !== CurrentSongKey) {
ChangeTrack(mediaProps, accentColorPalette); // Now trigger your cross-fade logic here! ChangeTrack(mediaProps, accentColorPalette); // Now trigger your cross-fade logic here!
CurrentSongKey = newTrackKey; // Update the tracker with the string key CurrentSongKey = newTrackKey; // Update the tracker with the string key
} }
} }
+9 -9
View File
@@ -44,8 +44,10 @@ if (!showProgressBar)
async function ChangeTrack(mediaProps, accentColorPalette) { async function ChangeTrack(mediaProps, accentColorPalette) {
// Fade in the overlay (shows the new text) // Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0"; if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title))
artistLabel.style.opacity = "0"; trackLabel.style.opacity = "0";
if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist))
artistLabel.style.opacity = "0";
backgroundLayer.style.opacity = "0"; backgroundLayer.style.opacity = "0";
albumArtLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0";
@@ -55,15 +57,14 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
// Extract the image source string (use fallback if Windows has no art) // 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 // Set the image
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast // Apply a tint
// 'rgba(0,0,0,0.6)' ensures the text stays readable backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
// backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
trackLabel.style.opacity = ""; trackLabel.style.opacity = "";
artistLabel.style.opacity = ""; artistLabel.style.opacity = "";
@@ -75,9 +76,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`; albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast // Apply a tint:
// 'rgba(0,0,0,0.6)' ensures the text stays readable backgroundTransitionLayer.style.backgroundColor = accentColorPalette.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 SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250); }, 250);
+7 -7
View File
@@ -44,8 +44,10 @@ if (!showProgressBar)
async function ChangeTrack(mediaProps, accentColorPalette) { async function ChangeTrack(mediaProps, accentColorPalette) {
// Fade in the overlay (shows the new text) // Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0"; if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title))
artistLabel.style.opacity = "0"; trackLabel.style.opacity = "0";
if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist))
artistLabel.style.opacity = "0";
backgroundLayer.style.opacity = "0"; backgroundLayer.style.opacity = "0";
albumArtLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0";
@@ -55,14 +57,13 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist; artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
// Extract the image source string (use fallback if Windows has no art) // 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 // Set the image
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast // Apply a tint
// 'rgba(0,0,0,0.6)' ensures the text stays readable
backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
trackLabel.style.opacity = ""; trackLabel.style.opacity = "";
@@ -75,8 +76,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`; albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast // Apply a tint
// 'rgba(0,0,0,0.6)' ensures the text stays readable
backgroundTransitionLayer.style.backgroundColor = accentColorPalette.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 SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
+5 -3
View File
@@ -44,8 +44,10 @@ if (textAlignment == 'right')
//////////////////// ////////////////////
async function ChangeTrack(mediaProps) { async function ChangeTrack(mediaProps) {
trackLabel.style.opacity = "0"; if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title))
artistLabel.style.opacity = "0"; trackLabel.style.opacity = "0";
if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist))
artistLabel.style.opacity = "0";
albumArtLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0";
// Wait for fade (0.5s), then swap the real text and hide overlay // 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; artistLabel.innerText = swapArtistTrack ? mediaProps.Title : mediaProps.Artist;
// Extract the image source string (use fallback if Windows has no art) // 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 // Set the image
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
+8 -8
View File
@@ -56,8 +56,10 @@ switch (themeVariant) {
async function ChangeTrack(mediaProps, accentColorPalette) { async function ChangeTrack(mediaProps, accentColorPalette) {
// Fade in the overlay (shows the new text) // Fade in the overlay (shows the new text)
trackLabel.style.opacity = "0"; if (trackLabel.innerText != (swapArtistTrack ? mediaProps.Artist : mediaProps.Title))
artistLabel.style.opacity = "0"; trackLabel.style.opacity = "0";
if (artistLabel.innerText != (swapArtistTrack ? mediaProps.Title : mediaProps.Artist))
artistLabel.style.opacity = "0";
backgroundLayer.style.opacity = "0"; backgroundLayer.style.opacity = "0";
albumArtLayer.style.opacity = "0"; albumArtLayer.style.opacity = "0";
@@ -90,9 +92,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast // Apply a tint
// 'rgba(0,0,0,0.6)' ensures the text stays readable backgroundLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
// backgroundLayer.style.backgroundColor = accentColorPalette.LightVibrant + "80"; // 80 is 50% opacity in hex
trackLabel.style.opacity = ""; trackLabel.style.opacity = "";
artistLabel.style.opacity = ""; artistLabel.style.opacity = "";
@@ -104,9 +105,8 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`; backgroundTransitionLayer.style.backgroundImage = `url('${newArtUrl}')`;
albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`; albumArtTransition.style.backgroundImage = `url('${newArtUrl}')`;
// Apply a tint: Use 30% opacity of the accent color + a dark overlay for contrast // Apply a tint
// 'rgba(0,0,0,0.6)' ensures the text stays readable backgroundTransitionLayer.style.backgroundColor = accentColorPalette.DarkMuted + "80"; // 80 is 50% opacity in hex
// backgroundTransitionLayer.style.backgroundColor = accentColorPalette.LightVibrant + "80"; // 80 is 50% opacity in hex
SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled SetVisibility(true); // Show the overlay for a few seconds if autoHide is enabled
}, 250); }, 250);
+1 -1
View File
@@ -46,7 +46,7 @@ async function ChangeTrack(mediaProps) {
setTimeout(() => { setTimeout(() => {
// Extract the image source string (use fallback if Windows has no art) // 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 // Set the image
albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`; albumArtLayer.style.backgroundImage = `url('${newArtUrl}')`;