49 lines
1.2 KiB
TypeScript
Executable File
49 lines
1.2 KiB
TypeScript
Executable File
import {MediaPlayIcon} from '@common/icons/media/media-play';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {Button, ButtonProps} from '@common/ui/buttons/button';
|
|
import {Link} from 'react-router-dom';
|
|
import {getWatchLink} from '@app/videos/watch-page/get-watch-link';
|
|
import {Video} from '@app/titles/models/video';
|
|
import {CompactSeasonEpisode} from '@app/episodes/compact-season-episode';
|
|
|
|
interface Props {
|
|
variant?: ButtonProps['variant'];
|
|
color?: ButtonProps['color'];
|
|
size?: string;
|
|
video: Video;
|
|
defaultLabel?: boolean;
|
|
}
|
|
export function WatchNowButton({
|
|
video,
|
|
variant = 'outline',
|
|
color = 'primary',
|
|
size = 'w-full min-h-40 mt-14',
|
|
defaultLabel,
|
|
}: Props) {
|
|
const label =
|
|
video.episode_num && !defaultLabel ? (
|
|
<span className="inline-flex gap-4">
|
|
<Trans message="Start watching" />
|
|
<CompactSeasonEpisode
|
|
seasonNum={video.season_num}
|
|
episodeNum={video.episode_num}
|
|
/>
|
|
</span>
|
|
) : (
|
|
<Trans message="Watch now" />
|
|
);
|
|
|
|
return (
|
|
<Button
|
|
to={getWatchLink(video)}
|
|
elementType={Link}
|
|
startIcon={<MediaPlayIcon />}
|
|
color={color}
|
|
variant={variant}
|
|
className={size}
|
|
>
|
|
{label}
|
|
</Button>
|
|
);
|
|
}
|