From d5e3aa3be5b5eeac7ec516578fe95995b1cccedd Mon Sep 17 00:00:00 2001
From: Michael SCHAL <michaelschal@gmail.com>
Date: Wed, 22 Apr 2026 15:41:10 +0200
Subject: [PATCH] fix: artwork spin animation in inline player

Replace class-based animation toggle with inline animationPlayState
style. The transition-all class was conflicting with the CSS keyframe
animation, preventing the artwork from spinning when playing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/components/AudioPlayer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AudioPlayer.tsx b/frontend/src/components/AudioPlayer.tsx
index 30ebdd3..b69b5f0 100644
--- a/frontend/src/components/AudioPlayer.tsx
+++ b/frontend/src/components/AudioPlayer.tsx
@@ -123,7 +123,8 @@ export default function AudioPlayer({ episode, onClose, userId, mode = 'floating
                 ? <img
                     src={episode.imageUrl || podcast!.imageUrl}
                     alt=""
-                    className={`w-full h-full object-cover transition-all duration-500 ${isPlaying ? 'animate-spin-slow' : 'animate-spin-slow animate-spin-paused'}`}
+                    className="w-full h-full object-cover animate-spin-slow"
+                    style={{ animationPlayState: isPlaying ? 'running' : 'paused' }}
                   />
                 : <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-5xl">🎙️</div>
               }