Added 'Show While Paused' option to all themes

now-playing/themes/vinyl/script.js

@@ -8,6 +8,7 @@ const albumArtContainer = document.getElementById('album-art-container');
 const albumArtLayer = document.getElementById('album-art-layer');
 const albumArtTransition = document.getElementById('album-art-transition-layer');
 const progressCircle = document.getElementById('progress-pie-circle');
+const vinylContainer = document.getElementById('vinyl-container');
 
 ///////////////
 // CONSTANTS //
@@ -60,7 +61,7 @@ async function ChangeTrack(mediaProps) {
     }, 250);
 }
 
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
     // Set progressbar
     // Ensure we don't divide by zero or exceed 100%
     const durationMs = timelineProps.EndTime;
@@ -75,4 +76,52 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
     // 0% progress = 157.1 offset. 100% progress = 0 offset.
     const offset = circumference - (progressPercent / 100) * circumference;
     progressCircle.style.strokeDashoffset = offset;
+
+    // Adjust 'Paused' check to match whatever string/value your backend sends
+    if (playbackStatus === PlaybackStatus.PAUSED)
+        setVinylPaused(true);
+    else
+        setVinylPaused(false);
+}
+
+const vinylAnimation = vinylContainer.animate(
+    [
+        { transform: "rotate(0deg)" },
+        { transform: "rotate(360deg)" }
+    ],
+    {
+        duration: 10000,
+        iterations: Infinity,
+        easing: "linear"
+    }
+);
+
+let animationFrame;
+
+function setVinylPaused(shouldPause) {
+    cancelAnimationFrame(animationFrame);
+
+    const from = vinylAnimation.playbackRate;
+    const to = shouldPause ? 0 : 1;
+    const duration = 700;
+    const start = performance.now();
+
+    vinylAnimation.play();
+
+    function update(now) {
+        const progress = Math.min((now - start) / duration, 1);
+
+        // Smooth acceleration/deceleration
+        const eased = progress * progress * (3 - 2 * progress);
+
+        vinylAnimation.playbackRate = from + (to - from) * eased;
+
+        if (progress < 1) {
+            animationFrame = requestAnimationFrame(update);
+        } else if (shouldPause) {
+            vinylAnimation.pause();
+        }
+    }
+
+    animationFrame = requestAnimationFrame(update);
 }

now-playing/themes/vinyl/style.css

@@ -16,7 +16,7 @@
     justify-content: center;
     width: 100%;
     filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.5));
-    animation: spin 10s linear infinite;
+    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 #vinyl-background {
@@ -91,7 +91,64 @@
     transition: all 1s linear;
 }
 
-@keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+
+
+@keyframes slide-in-from-top {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slide-in-from-top {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slide-out-top {
+    0% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+
+@keyframes slide-in-from-bottom {
+    0% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slide-out-bottom {
+    0% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
 }