46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
import type { EpisodeRef } from "../types";
|
||
|
|
|
||
|
|
interface NextEpisodeOverlayProps {
|
||
|
|
episode: EpisodeRef;
|
||
|
|
secondsRemaining: number;
|
||
|
|
onSkip: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Overlay shown during the credits region with a countdown to the next episode.
|
||
|
|
*/
|
||
|
|
export function NextEpisodeOverlay({
|
||
|
|
episode,
|
||
|
|
secondsRemaining,
|
||
|
|
onSkip,
|
||
|
|
onCancel,
|
||
|
|
}: NextEpisodeOverlayProps) {
|
||
|
|
return (
|
||
|
|
<div className="absolute right-6 bottom-24 z-50 flex min-w-[260px] flex-col gap-2 rounded-lg bg-black/80 p-4 text-white">
|
||
|
|
<div className="text-xs tracking-wider text-white/60 uppercase">
|
||
|
|
Up Next in {secondsRemaining}s
|
||
|
|
</div>
|
||
|
|
<div className="text-sm font-medium">
|
||
|
|
S{episode.seasonNumber}:E{episode.episodeNumber} — {episode.title}
|
||
|
|
</div>
|
||
|
|
<div className="mt-1 flex gap-2">
|
||
|
|
<button
|
||
|
|
onClick={onSkip}
|
||
|
|
type="button"
|
||
|
|
className="flex-1 rounded bg-white px-3 py-1.5 text-sm font-medium text-black transition-colors hover:bg-white/90"
|
||
|
|
>
|
||
|
|
Play Now
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={onCancel}
|
||
|
|
type="button"
|
||
|
|
className="rounded border border-white/30 px-3 py-1.5 text-sm transition-colors hover:bg-white/10"
|
||
|
|
>
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|