mirror of
https://github.com/myronblair/kino-app
synced 2026-07-30 06:23:40 -05:00
Myron Blair
119dd20743
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.
38 lines
1.9 KiB
React
38 lines
1.9 KiB
React
import { Play } from "lucide-react";
|
|
import AlbumArt from "./AlbumArt";
|
|
|
|
export const MovieCard = ({ movie, onClick, progress }) => {
|
|
const pct = progress?.duration_seconds
|
|
? Math.min(100, (progress.position_seconds / progress.duration_seconds) * 100)
|
|
: 0;
|
|
return (
|
|
<button
|
|
onClick={() => onClick?.(movie)}
|
|
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}`}
|
|
>
|
|
<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">
|
|
{movie.title}
|
|
</h3>
|
|
<div className="mt-2 flex items-center gap-2 text-[10px] uppercase tracking-[0.2em] text-[#C8C8C8]">
|
|
<span>{movie.year}</span>
|
|
{movie.rating ? <span>· {movie.rating}</span> : null}
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-3 right-3 w-9 h-9 bg-[#D9381E] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<Play size={14} fill="white" strokeWidth={0} />
|
|
</div>
|
|
{pct > 0 && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-[3px] bg-white/10">
|
|
<div className="h-full bg-[#D9381E]" style={{ width: `${pct}%` }} />
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default MovieCard;
|