From 686c4d90078ff8a6b2ae0ee0141ac87a41d22e7c Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 16 Apr 2026 14:29:45 +0200
Subject: [PATCH] feat: use episode-specific images instead of podcast images

EpisodeCard and AudioPlayer now display episode.imageUrl when available,
falling back to the podcast image only if the episode has none.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 frontend/src/components/AudioPlayer.tsx | 8 ++++----
 frontend/src/components/EpisodeCard.tsx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/AudioPlayer.tsx b/frontend/src/components/AudioPlayer.tsx
index 67dc981..ad8a11a 100644
--- a/frontend/src/components/AudioPlayer.tsx
+++ b/frontend/src/components/AudioPlayer.tsx
@@ -119,8 +119,8 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
         {/* Artwork + info */}
         <div className="flex items-center gap-3 min-w-0 flex-1 max-w-[280px]">
           <div className="w-13 h-13 w-12 h-12 rounded-xl overflow-hidden border border-white/10 shrink-0 shadow-lg">
-            {podcast?.imageUrl
-              ? <img src={podcast.imageUrl} alt="" className="w-full h-full object-cover" />
+            {(episode.imageUrl || podcast?.imageUrl)
+              ? <img src={episode.imageUrl || podcast!.imageUrl} alt="" className="w-full h-full object-cover" />
               : <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-violet flex items-center justify-center text-xl">🎙️</div>
             }
           </div>
@@ -196,8 +196,8 @@ export default function AudioPlayer({ episode, onClose, userId }: AudioPlayerPro
           <div className="flex flex-col lg:flex-row gap-12 items-center flex-1">
             {/* Artwork */}
             <div className="w-64 h-64 lg:w-80 lg:h-80 rounded-[2.5rem] overflow-hidden shadow-2xl border border-white/10 shrink-0">
-              {podcast?.imageUrl
-                ? <img src={podcast.imageUrl} alt="" className="w-full h-full object-cover" />
+              {(episode.imageUrl || podcast?.imageUrl)
+                ? <img src={episode.imageUrl || podcast!.imageUrl} alt="" className="w-full h-full object-cover" />
                 : <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-violet flex items-center justify-center text-7xl">🎙️</div>
               }
             </div>
diff --git a/frontend/src/components/EpisodeCard.tsx b/frontend/src/components/EpisodeCard.tsx
index 94cfc3b..49cbe8c 100644
--- a/frontend/src/components/EpisodeCard.tsx
+++ b/frontend/src/components/EpisodeCard.tsx
@@ -23,10 +23,10 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
     >
       {/* Visual Header */}
       <div className="relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-xl border border-white/5">
-        {podcast?.imageUrl ? (
+        {(episode.imageUrl || podcast?.imageUrl) ? (
           <img
-            src={podcast.imageUrl}
-            alt={podcast.title}
+            src={episode.imageUrl || podcast!.imageUrl}
+            alt={episode.title}
             className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
           />
         ) : (