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.
This commit is contained in:
Myron Blair
2026-07-27 18:28:37 -05:00
parent eed071dd8f
commit 119dd20743
5 changed files with 11 additions and 17 deletions
+2 -1
View File
@@ -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>