From 119dd20743bba777a131779f7fd22a90005b4a89 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@gmail.com>
Date: Mon, 27 Jul 2026 18:28:37 -0500
Subject: [PATCH] Use branded StreamHoard placeholder for missing movie/show
 artwork

AlbumArt was music-only until now; movies and series grids/detail views
still showed a broken-image icon when poster_url/backdrop_url was empty.
Reused the same component (movies library grid, series grid + resume
strip, show detail backdrop, movie detail modal backdrop) instead of
duplicating the placeholder logic.
---
 frontend/src/components/AlbumArt.jsx         | 4 ++--
 frontend/src/components/MovieCard.jsx        | 9 ++-------
 frontend/src/components/MovieDetailModal.jsx | 7 ++-----
 frontend/src/pages/ShowDetail.jsx            | 3 ++-
 frontend/src/pages/Shows.jsx                 | 5 +++--
 5 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/AlbumArt.jsx b/frontend/src/components/AlbumArt.jsx
index 92bb9d7..7f2023f 100644
--- a/frontend/src/components/AlbumArt.jsx
+++ b/frontend/src/components/AlbumArt.jsx
@@ -1,9 +1,9 @@
 // Shows real album art when a URL is available; otherwise a branded placeholder instead of an
 // empty box. Once musicbrainz enrichment (or a manual edit) sets album_art_url, callers just
 // pass the new url and this swaps over automatically — no separate "loaded" state to manage.
-export default function AlbumArt({ url, size = "lg", className = "" }) {
+export default function AlbumArt({ url, size = "lg", className = "", loading }) {
   if (url) {
-    return <img src={url} alt="" className={`w-full h-full object-cover ${className}`} />;
+    return <img src={url} alt="" loading={loading} className={`w-full h-full object-cover ${className}`} />;
   }
   const small = size === "sm";
   return (
diff --git a/frontend/src/components/MovieCard.jsx b/frontend/src/components/MovieCard.jsx
index d624513..b06d791 100644
--- a/frontend/src/components/MovieCard.jsx
+++ b/frontend/src/components/MovieCard.jsx
@@ -1,4 +1,5 @@
 import { Play } from "lucide-react";
+import AlbumArt from "./AlbumArt";
 
 export const MovieCard = ({ movie, onClick, progress }) => {
   const pct = progress?.duration_seconds
@@ -10,13 +11,7 @@ export const MovieCard = ({ movie, onClick, progress }) => {
       className="group relative shrink-0 w-[180px] md:w-[220px] aspect-[2/3] overflow-hidden bg-[#0F0F0F] transition-all duration-300 hover:scale-105 hover:z-10 focus:outline-none focus:ring-2 focus:ring-[#D9381E]"
       data-testid={`movie-card-${movie.id}`}
     >
-      <img
-        src={movie.poster_url || movie.backdrop_url}
-        alt={movie.title}
-        loading="lazy"
-        className="w-full h-full object-cover"
-        onError={(e) => { e.currentTarget.style.opacity = 0.3; }}
-      />
+      <AlbumArt url={movie.poster_url || movie.backdrop_url} loading="lazy" />
       <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent opacity-90 md:opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
       <div className="absolute inset-x-0 bottom-0 p-4 translate-y-2 md:translate-y-0 md:opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
         <h3 className="font-display text-lg font-bold tracking-tight text-white leading-none line-clamp-2">
diff --git a/frontend/src/components/MovieDetailModal.jsx b/frontend/src/components/MovieDetailModal.jsx
index 01d8b26..65c0945 100644
--- a/frontend/src/components/MovieDetailModal.jsx
+++ b/frontend/src/components/MovieDetailModal.jsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import api from "../lib/api";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
+import AlbumArt from "./AlbumArt";
 
 export const MovieDetailModal = ({ movie, open, onClose, onWatchlistChange }) => {
   const nav = useNavigate();
@@ -64,11 +65,7 @@ export const MovieDetailModal = ({ movie, open, onClose, onWatchlistChange }) =>
         </button>
 
         <div className="relative h-[280px] md:h-[440px]">
-          <img
-            src={movie.backdrop_url || movie.poster_url}
-            alt={movie.title}
-            className="absolute inset-0 w-full h-full object-cover"
-          />
+          <AlbumArt url={movie.backdrop_url || movie.poster_url} className="absolute inset-0" />
           <div className="absolute inset-0 bg-gradient-to-t from-[#0A0A0A] via-[#0A0A0A]/40 to-transparent" />
           <div className="absolute bottom-0 left-0 right-0 p-8 md:p-10">
             <h2 className="font-display text-4xl md:text-5xl font-black tracking-tighter text-white" data-testid="modal-movie-title">
diff --git a/frontend/src/pages/ShowDetail.jsx b/frontend/src/pages/ShowDetail.jsx
index 6871b2a..3007241 100644
--- a/frontend/src/pages/ShowDetail.jsx
+++ b/frontend/src/pages/ShowDetail.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import api from "../lib/api";
 import { Play, ArrowLeft } from "lucide-react";
+import AlbumArt from "../components/AlbumArt";
 
 export default function ShowDetail() {
   const { id } = useParams();
@@ -27,7 +28,7 @@ export default function ShowDetail() {
   return (
     <div className="min-h-screen bg-[#050505]" data-testid={`show-detail-${show.id}`}>
       <div className="relative h-[60vh] min-h-[400px] overflow-hidden">
-        <img src={show.backdrop_url || show.poster_url} alt="" className="absolute inset-0 w-full h-full object-cover" />
+        <AlbumArt url={show.backdrop_url || show.poster_url} className="absolute inset-0" />
         <div className="absolute inset-0 hero-fade" />
         <button onClick={() => nav(-1)} className="absolute top-24 left-6 md:left-12 flex items-center gap-2 text-white/80 hover:text-white bg-black/40 hover:bg-black/60 px-4 py-2 backdrop-blur transition-colors" data-testid="show-back">
           <ArrowLeft size={16} strokeWidth={1.5} /> <span className="text-xs uppercase tracking-[0.2em]">Back</span>
diff --git a/frontend/src/pages/Shows.jsx b/frontend/src/pages/Shows.jsx
index 97a205e..acc8835 100644
--- a/frontend/src/pages/Shows.jsx
+++ b/frontend/src/pages/Shows.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import api from "../lib/api";
 import { Tv } from "lucide-react";
+import AlbumArt from "../components/AlbumArt";
 
 export default function Shows() {
   const [shows, setShows] = useState([]);
@@ -51,7 +52,7 @@ export default function Shows() {
                   <button key={episode.id} onClick={() => nav(`/watch/episode/${episode.id}`)}
                     className="relative shrink-0 w-[260px] group focus:outline-none" data-testid={`continue-ep-${episode.id}`}>
                     <div className="aspect-video overflow-hidden bg-[#0F0F0F] transition-transform duration-300 group-hover:scale-105">
-                      <img src={show.backdrop_url || show.poster_url} alt="" className="w-full h-full object-cover" />
+                      <AlbumArt url={show.backdrop_url || show.poster_url} />
                     </div>
                     <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-white/10">
                       <div className="h-full bg-[#D9381E]" style={{ width: `${pct}%` }} />
@@ -70,7 +71,7 @@ export default function Shows() {
             <button key={s.id} onClick={() => nav(`/show/${s.id}`)}
               className="group shrink-0 aspect-[2/3] overflow-hidden bg-[#0F0F0F] transition-transform duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-[#D9381E]"
               data-testid={`show-card-${s.id}`}>
-              <img src={s.poster_url || s.backdrop_url} alt={s.title} loading="lazy" className="w-full h-full object-cover" />
+              <AlbumArt url={s.poster_url || s.backdrop_url} loading="lazy" />
               <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                 <p className="text-white text-sm truncate">{s.title}</p>
                 <p className="text-[10px] uppercase tracking-[0.2em] text-[#8A8A8A]">{s.season_count} seasons · {s.episode_count} eps</p>