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 -7
View File
@@ -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">