first commit

resources/client/episodes/episode-page-header.tsx

@@ -0,0 +1,70 @@
+import {TitlePageHeaderLayout} from '@app/titles/pages/title-page/title-page-header-layout';
+import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
+import {Trans} from '@common/i18n/trans';
+import {FormattedDate} from '@common/i18n/formatted-date';
+import {FormattedDuration} from '@common/i18n/formatted-duration';
+import {InteractableRating} from '@app/reviews/interactable-rating';
+import {Breadcrumb} from '@common/ui/breadcrumbs/breadcrumb';
+import {BreadcrumbItem} from '@common/ui/breadcrumbs/breadcrumb-item';
+import {getTitleLink} from '@app/titles/title-link';
+import {getSeasonLink} from '@app/seasons/season-link';
+import React from 'react';
+import {Title} from '@app/titles/models/title';
+import {Episode} from '@app/titles/models/episode';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+
+interface Props {
+  title: Title;
+  episode: Episode;
+  showPoster?: boolean;
+}
+export function EpisodePageHeader({title, episode, showPoster}: Props) {
+  const navigate = useNavigate();
+  const runtime = episode.runtime || title.runtime;
+  return (
+    <TitlePageHeaderLayout
+      poster={
+        showPoster ? (
+          <TitlePoster title={title} size="w-80" srcSize="sm" />
+        ) : undefined
+      }
+      name={episode.name}
+      description={
+        <BulletSeparatedItems className="my-10 md:my-0">
+          <Trans
+            message="Aired :date"
+            values={{
+              date: <FormattedDate date={episode.release_date} />,
+            }}
+          />
+          <span className="uppercase">{title.certification}</span>
+          {runtime ? <FormattedDuration minutes={runtime} verbose /> : null}
+        </BulletSeparatedItems>
+      }
+      right={<InteractableRating title={title} episode={episode} />}
+    >
+      <Breadcrumb isNavigation>
+        <BreadcrumbItem onSelected={() => navigate(getTitleLink(title))}>
+          {title.name}
+        </BreadcrumbItem>
+        <BreadcrumbItem
+          onSelected={() =>
+            navigate(getSeasonLink(title, episode.season_number))
+          }
+        >
+          <Trans
+            message="Season :number"
+            values={{number: episode.season_number}}
+          />
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <Trans
+            message="Episode :number"
+            values={{number: episode.episode_number}}
+          />
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </TitlePageHeaderLayout>
+  );
+}