first commit

resources/client/titles/pages/title-page/title-page-header-image.tsx

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