first commit

resources/client/titles/pages/title-page/watch-now-button.tsx

@@ -0,0 +1,48 @@
+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>
+  );
+}