69 lines
2.1 KiB
TypeScript
Executable File
69 lines
2.1 KiB
TypeScript
Executable File
import {Title} from '@app/titles/models/title';
|
|
import {Episode} from '@app/titles/models/episode';
|
|
import {TitleBackdrop} from '@app/titles/title-poster/title-backdrop';
|
|
import {useSettings} from '@common/core/settings/use-settings';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {MediaPlayIcon} from '@common/icons/media/media-play';
|
|
import {Link} from 'react-router-dom';
|
|
import {getWatchLink} from '@app/videos/watch-page/get-watch-link';
|
|
import {Season} from '@app/titles/models/season';
|
|
|
|
interface Props {
|
|
title: Title;
|
|
season?: Season;
|
|
episode?: Episode;
|
|
}
|
|
export function TitlePageHeaderImage({title, season, episode}: Props) {
|
|
const {streaming} = useSettings();
|
|
const watchItem = episode || season || title;
|
|
const backdropUrl = episode?.poster || title.backdrop;
|
|
|
|
if (!backdropUrl) {
|
|
return null;
|
|
}
|
|
|
|
const backdrop = (
|
|
<TitleBackdrop
|
|
title={title}
|
|
episode={episode}
|
|
size="w-full h-full"
|
|
className="object-top"
|
|
lazy={false}
|
|
/>
|
|
);
|
|
return (
|
|
<header className="relative isolate max-h-320 overflow-hidden bg-black md:max-h-400 lg:max-h-450">
|
|
<div className="container relative left-0 right-0 top-0 z-20 mx-auto h-full w-full px-24">
|
|
{backdrop}
|
|
</div>
|
|
<div className="h-[calc(100% + 20px)] absolute left-1/2 top-1/2 z-10 w-[calc(100%+100px)] -translate-x-1/2 -translate-y-1/2 bg-black opacity-50 blur-md">
|
|
{backdrop}
|
|
</div>
|
|
<div className="pointer-events-none absolute left-0 top-0 z-30 h-full w-full bg-gradient-to-b from-black/20 md:from-black/40" />
|
|
{streaming?.show_header_play && watchItem?.primary_video ? (
|
|
<PlayButton item={watchItem} />
|
|
) : null}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
interface PlayButtonProps {
|
|
item: Season | Episode | Title;
|
|
}
|
|
function PlayButton({item}: PlayButtonProps) {
|
|
const link = getWatchLink(item.primary_video!);
|
|
return (
|
|
<IconButton
|
|
radius="rounded-full"
|
|
color="white"
|
|
variant="raised"
|
|
size="lg"
|
|
className="absolute inset-0 z-40 m-auto"
|
|
elementType={Link}
|
|
to={link}
|
|
>
|
|
<MediaPlayIcon />
|
|
</IconButton>
|
|
);
|
|
}
|