Minor tweaks

now-playing/script.js

@@ -33,6 +33,14 @@ const displayDuration = GetIntParam("displayDuration", 5);
 const showAnimation = urlParams.get('showAnimation') || 'slide-in-from-bottom';
 const hideAnimation = urlParams.get('hideAnimation') || 'slide-out-bottom';
 
+/////////////////
+// GLOBAL VARS //
+/////////////////
+
+let CurrentPlaybackStatus;
+let CurrentSong;
+let hideTimeout = null;
+
 ////////////////
 // PAGE SETUP //
 ////////////////

now-playing/themes/card/script.js

@@ -1,11 +1,3 @@
-/////////////////
-// GLOBAL VARS //
-/////////////////
-
-let CurrentPlaybackStatus;
-let CurrentSong;
-let hideTimeout = null;
-
 ///////////////////
 // PAGE ELEMENTS //
 ///////////////////
@@ -86,10 +78,14 @@ async function UpdatePlayerState(data) {
         }
 
         // 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
-        const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+        // Only proceed if the player state is actively playing audio
-        if (newTrackKey !== CurrentSong) {
+        if (CurrentPlaybackStatus == PlaybackStatus.PLAYING)
-            ChangeTrack(mediaProps, accentColorPalette.LightVibrant);        // Now trigger your cross-fade logic here!
+        {
-            CurrentSong = newTrackKey;      // Update the tracker with the string key
+            const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+            if (newTrackKey !== CurrentSong) {
+                ChangeTrack(mediaProps, accentColorPalette.LightVibrant);        // Now trigger your cross-fade logic here!
+                CurrentSong = newTrackKey;      // Update the tracker with the string key
+            }
         }
 
         // 3. Update the progress info

now-playing/themes/card/style.css

@@ -82,7 +82,7 @@
     position: relative; /* Keeps it in the document flow */
     z-index: 2;         /* Sits above the background-layer */
     
-    padding: 2em 1.75em;
+    padding: 10% 7.5%;
     display: flex;
     flex-direction: column;
     gap: 0.3em;

now-playing/themes/compact/script.js

@@ -1,11 +1,3 @@
-/////////////////
-// GLOBAL VARS //
-/////////////////
-
-let CurrentPlaybackStatus;
-let CurrentSong;
-let hideTimeout = null;
-
 ///////////////////
 // PAGE ELEMENTS //
 ///////////////////
@@ -81,10 +73,14 @@ async function UpdatePlayerState(data) {
         }
 
         // 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
-        const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+        // Only proceed if the player state is actively playing audio
-        if (newTrackKey !== CurrentSong) {
+        if (CurrentPlaybackStatus == PlaybackStatus.PLAYING)
-            ChangeTrack(mediaProps, accentColorPalette);        // Now trigger your cross-fade logic here!
+        {
-            CurrentSong = newTrackKey;      // Update the tracker with the string key
+            const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+            if (newTrackKey !== CurrentSong) {
+                ChangeTrack(mediaProps, accentColorPalette);        // Now trigger your cross-fade logic here!
+                CurrentSong = newTrackKey;      // Update the tracker with the string key
+            }
         }
 
         // 3. Update the progress info

now-playing/themes/simple/script.js

@@ -1,11 +1,3 @@
-/////////////////
-// GLOBAL VARS //
-/////////////////
-
-let CurrentPlaybackStatus;
-let CurrentSong;
-let hideTimeout = null;
-
 ///////////////////
 // PAGE ELEMENTS //
 ///////////////////
@@ -83,10 +75,14 @@ function UpdatePlayerState(data) {
         }
 
         // 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
-        const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+        // Only proceed if the player state is actively playing audio
-        if (newTrackKey !== CurrentSong) {
+        if (CurrentPlaybackStatus == PlaybackStatus.PLAYING)
-            ChangeTrack(mediaProps);        // Now trigger your cross-fade logic here!
+        {
-            CurrentSong = newTrackKey;      // Update the tracker with the string key
+            const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+            if (newTrackKey !== CurrentSong) {
+                ChangeTrack(mediaProps);        // Now trigger your cross-fade logic here!
+                CurrentSong = newTrackKey;      // Update the tracker with the string key
+            }
         }
 
         // // 3. Update the progress info

now-playing/themes/standard/script.js

@@ -1,11 +1,3 @@
-/////////////////
-// GLOBAL VARS //
-/////////////////
-
-let CurrentPlaybackStatus;
-let CurrentSong;
-let hideTimeout = null;
-
 ///////////////////
 // PAGE ELEMENTS //
 ///////////////////
@@ -86,10 +78,14 @@ async function UpdatePlayerState(data) {
         }
 
         // 2. Check if the track name/artist have changed - this is our indicator that the next track has loaded
-        const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+        // Only proceed if the player state is actively playing audio
-        if (newTrackKey !== CurrentSong) {
+        if (CurrentPlaybackStatus == PlaybackStatus.PLAYING)
-            ChangeTrack(mediaProps, accentColorPalette.LightVibrant);       // Now trigger your cross-fade logic here!
+        {
-            CurrentSong = newTrackKey;                  // Update the tracker with the string key
+            const newTrackKey = `${mediaProps.Title}|${mediaProps.Artist}`;
+            if (newTrackKey !== CurrentSong) {
+                ChangeTrack(mediaProps, accentColorPalette.LightVibrant);       // Now trigger your cross-fade logic here!
+                CurrentSong = newTrackKey;                  // Update the tracker with the string key
+            }
         }
 
         // 3. Update the progress info

now-playing/themes/standard/style.css

@@ -45,6 +45,7 @@
     flex: 1;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     border-radius: 1em;
     overflow: hidden;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
@@ -64,7 +65,7 @@
     background-repeat: no-repeat;
 
 	background-blend-mode: overlay; /* Or 'soft-light' for a subtler effect */
-    filter: blur(0px) brightness(0.3) saturate(1.2);
+    filter: blur(5px) brightness(0.3) saturate(1.2);
     transform: scale(1.1); /* Slightly zoom in to cover edges when blurred */
 }