@tribe-nest/forge 3.31.0 → 3.35.0

package/src/ui/styled/FilmDetail.tsx

@@ -0,0 +1,661 @@
+import { useMemo, type CSSProperties } from "react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useFormatCurrency } from "../format/useFormatCurrency";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
+import { PaystackPayButton } from "./PaystackPayButton";
+import { CallHelpHint } from "../media/CallHelpHint";
+import { Loading } from "./Loading";
+import { rentalWindowLabel } from "./FilmCatalog";
+import { useFilmRentalFlow } from "../headless/film/useFilmRentalFlow";
+import { filmSignInHref } from "../headless/film/useFilmPlayback";
+import {
+  canWatchFilmEpisode,
+  groupFilmEpisodesBySeason,
+  isFilmEpisodeReleased,
+  splitDurationSec,
+  splitRemainingMs,
+  useFilm,
+  type PublicFilmDetail,
+  type PublicFilmEpisode,
+  type PublicFilmRental,
+  type PublicFilmRentalOption,
+} from "../../data/queries/useFilms";
+import { useForgeT, type ForgeT } from "../../i18n";
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from "../headless/dialog";
+
+export interface FilmDetailProps {
+  /** Route param. */
+  slug: string;
+  /** SSR-loaded detail, so the first paint is not a spinner. */
+  initialFilm?: PublicFilmDetail;
+  /** A rental id read off the return URL - finalizes the purchase on mount. */
+  finalizeRentalId?: string;
+  /** Where films live. Default `/i/films`. */
+  basePath?: string;
+  /** Sign-in path. Default `/i/login`. */
+  loginPath?: string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * One title: poster, trailer, what it costs, and the way in.
+ *
+ * The rule this block exists to honour is that **the window is stated before
+ * the purchase, never discovered after it**. A rental's clock is a whole-title
+ * clock that starts at first play, so a fan who buys a ten-episode series on a
+ * 48-hour window and finds out at expiry has been mis-sold. The rent button
+ * therefore carries its window in its own label, not in a footnote, and the
+ * "when does it start" explanation - which somebody who already knows the
+ * product would skip every time - sits behind a `?`.
+ *
+ * There is exactly ONE purchase CTA on this page, and on a series it says "rent
+ * the whole series". The episode list underneath it sells nothing: a row is a
+ * Watch button once the viewer holds a live rental (or the episode is a free
+ * preview), and otherwise it is just a row.
+ *
+ * A title may be sold in several windows (8 hours cheaply, 48 hours for more).
+ * When there is more than one, they are drawn IN THE CREATOR'S OWN ORDER (the
+ * one the admin windows editor promises: "Fans see these in this order, top
+ * first") and the fan picks before the CTA fires. The pre-selected window is
+ * still the cheapest one, which is a separate question from which is shown
+ * first. When there is exactly ONE, no picker is drawn at all: a
+ * chooser offering a choice of one is a control that cannot be used, and it
+ * makes a simple title read as a complicated one. Either way the CTA carries the
+ * price AND the window of what is actually about to be bought.
+ */
+export function FilmDetail({
+  slug,
+  initialFilm,
+  finalizeRentalId,
+  basePath = "/i/films",
+  loginPath = "/i/login",
+  navigate,
+  className,
+  style,
+}: FilmDetailProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const { formatCurrency } = useFormatCurrency();
+  const { user, isInitialized } = usePublicAuth();
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  const { data: film, isLoading } = useFilm(slug, { initialFilm, accountId: user?.id });
+  const flow = useFilmRentalFlow({ film, finalizeRentalId, loginPath });
+  const renderPayment = usePaymentRenderer();
+
+  /** One live rental per title, so this one row answers the CTA and every episode row. */
+  const rental = flow.viewerRental;
+  const seasons = useMemo(() => groupFilmEpisodesBySeason(film?.episodes ?? []), [film?.episodes]);
+
+  if (!film && isLoading) return <Loading fullPage />;
+
+  const panel: CSSProperties = {
+    padding: 20,
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.border}`,
+    background: tokens.surface,
+  };
+
+  if (!film) {
+    return (
+      <div className={className} style={{ ...panel, maxWidth: 520, margin: "0 auto", textAlign: "center", ...style }}>
+        {/* A draft, an archived title, an unknown slug, another tenant's slug and
+            a switched-off feature are ONE answer on purpose: a storefront must
+            not be able to tell "not yours" from "does not exist". So there is
+            one sentence here, and `isError` does not change it. */}
+        <p style={{ color: tokens.muted, fontSize: 14 }}>{t("forge.film_detail.not_found")}</p>
+      </div>
+    );
+  }
+
+  /**
+   * The offers are drawn only when the SERVER says the title is sellable.
+   *
+   * `flow.options` reads the live windows off the payload, and they survive
+   * every episode of the title failing transcode or being archived: `films`
+   * carries no rollup of episode readiness by design. `canRentTitle` is the
+   * server's answer to the same question `POST .../rentals` enforces, so the
+   * button and the endpoint agree instead of the button minting a charge the
+   * endpoint refuses.
+   */
+  const options = film.canRentTitle === false ? [] : flow.options;
+  const chosen = options.length > 0 ? flow.selectedOption : null;
+  const watchHref = (episodeId: string) => `${basePath}/${film.slug}/watch/${episodeId}`;
+
+  const primaryButton: CSSProperties = {
+    padding: "12px 20px",
+    borderRadius: tokens.cornerRadius,
+    border: "none",
+    background: tokens.primary,
+    color: tokens.textPrimary,
+    fontSize: 15,
+    fontWeight: 700,
+    cursor: "pointer",
+    fontFamily: tokens.fontFamily,
+  };
+
+  const secondaryButton: CSSProperties = {
+    padding: "8px 14px",
+    borderRadius: tokens.cornerRadius,
+    border: `1px solid ${tokens.primary}`,
+    background: "transparent",
+    color: tokens.primary,
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: tokens.fontFamily,
+  };
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 28,
+        maxWidth: 1100,
+        margin: "0 auto",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      {/* `align-items` defaults to `stretch`, which made the poster grow to match
+          whatever the column beside it was doing. Pinning it to the top is the
+          fix at the root: the checkout moving into a dialog stops the worst of
+          it, but any long description would have stretched the artwork too. */}
+      <div style={{ display: "flex", gap: 28, flexWrap: "wrap", alignItems: "flex-start" }}>
+        {film.cover?.url && (
+          <img
+            src={film.cover.url}
+            alt=""
+            style={{
+              flex: "0 1 260px",
+              maxWidth: 260,
+              aspectRatio: "2/3",
+              objectFit: "cover",
+              borderRadius: tokens.cornerRadius,
+              // The one accepted literal: a letterbox behind artwork.
+              background: "#000",
+              border: `1px solid ${tokens.border}`,
+            }}
+          />
+        )}
+
+        <div style={{ flex: "1 1 380px", minWidth: 280, display: "flex", flexDirection: "column", gap: 14 }}>
+          <h1
+            style={{
+              fontSize: 30,
+              fontWeight: 800,
+              lineHeight: 1.15,
+              fontFamily: tokens.headingFontFamily || tokens.fontFamily,
+            }}
+          >
+            {film.title}
+          </h1>
+
+          {film.description && <p style={{ fontSize: 15, lineHeight: 1.7, color: tokens.muted }}>{film.description}</p>}
+
+          {/* State the fan must act on, so it stays visible rather than behind a `?`. */}
+          {rental && <RentalStatusBanner rental={rental} t={t} />}
+
+          {flow.error && (
+            <p role="alert" style={{ fontSize: 13, color: tokens.text, ...panel, padding: 12 }}>
+              {flow.error}
+            </p>
+          )}
+
+          {/* Already rented: the only useful control is a way in. */}
+          {rental?.isLive && (
+            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+              <button
+                type="button"
+                style={primaryButton}
+                onClick={() => {
+                  // A film has one hidden episode; a series starts at season 1,
+                  // episode 1 of what is actually out, hence the grouped list
+                  // rather than the payload's own order.
+                  const target = film.primaryEpisodeId ?? seasons[0]?.episodes[0]?.id;
+                  if (target) go(watchHref(target));
+                }}
+              >
+                {t("forge.film_detail.watch_now")}
+              </button>
+            </div>
+          )}
+
+          {/* Not rented (or the window has run out): the offers. Hidden while a
+              charge is live, so a fan who closed the Paystack modal is offered
+              the way BACK into that charge rather than a button that would mint
+              a second one. */}
+          {!rental?.isLive && !flow.isFinalizing && flow.step !== "payment" && !flow.canOpenPaystack && (
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {chosen ? (
+                <>
+                  {/* Drawn ONLY for a real choice. One window needs no picker,
+                      and its terms are already on the button below. */}
+                  {options.length > 1 && (
+                    <WindowPicker
+                      t={t}
+                      options={options}
+                      currency={film.currency}
+                      selectedId={chosen.id}
+                      onSelect={flow.selectOption}
+                    />
+                  )}
+
+                  {/* The ONE purchase CTA. On a series it buys every episode,
+                      and it names the window it is buying: a fan who finds out
+                      the length at expiry has been mis-sold. */}
+                  <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+                    <button
+                      type="button"
+                      style={primaryButton}
+                      disabled={flow.isCreating || flow.isStartingPayment}
+                      onClick={() => void flow.rent(chosen.id)}
+                    >
+                      {t(
+                        film.kind === "series" ? "forge.film_detail.rent_series_cta" : "forge.film_detail.rent_film_cta",
+                        {
+                          price: formatCurrency(chosen.priceCents / 100, film.currency),
+                          window: rentalWindowLabel(t, chosen.durationHours),
+                        },
+                      )}
+                    </button>
+                    <ClockHelp t={t} kind={film.kind} />
+                  </div>
+                </>
+              ) : (
+                <p style={{ fontSize: 13, color: tokens.muted }}>{t("forge.film_detail.not_on_sale")}</p>
+              )}
+
+              {isInitialized && !flow.isAuthenticated && (
+                <p style={{ fontSize: 13, color: tokens.muted }}>
+                  {t("forge.film_detail.sign_in_lead")}{" "}
+                  <a
+                    href={filmSignInHref(loginPath, typeof window === "undefined" ? "" : window.location.pathname)}
+                    style={{ color: tokens.primary, fontWeight: 600 }}
+                  >
+                    {t("forge.film_detail.sign_in_action")}
+                  </a>
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Stripe needs a card form; Paystack drives its own modal already.
+              The card form lives in a DIALOG rather than in this column: drawn
+              inline it pushed the page down and dragged the artwork with it, and
+              a card form is a modal task anyway - the fan is finishing one thing
+              and everything behind it is context, not choice.
+
+              `onOpenChange` routes a dismissal through `flow.reset`, so closing
+              the dialog abandons the charge exactly as the old cancel button did.
+              Radix gives the escape key and the backdrop click the same meaning
+              for free. */}
+          <DialogRoot
+            open={flow.step === "payment" && !!flow.clientSecret && !!flow.returnUrl}
+            onOpenChange={(next) => {
+              if (!next) flow.reset();
+            }}
+          >
+            <DialogPortal>
+              <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+              <DialogContent
+                style={{
+                  position: "fixed",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "min(520px, calc(100vw - 24px))",
+                  maxHeight: "88vh",
+                  overflowY: "auto",
+                  background: tokens.surface,
+                  color: tokens.text,
+                  borderRadius: tokens.cornerRadius,
+                  padding: 24,
+                  zIndex: 51,
+                  fontFamily: tokens.fontFamily,
+                }}
+                aria-describedby={undefined}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: 14,
+                    gap: 12,
+                  }}
+                >
+                  <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>{film.title}</DialogTitle>
+                  <DialogClose asChild>
+                    <button type="button" aria-label={t("forge.film_detail.cancel_payment")} style={secondaryButton}>
+                      {t("forge.film_detail.cancel_payment")}
+                    </button>
+                  </DialogClose>
+                </div>
+
+                {flow.clientSecret &&
+                  flow.returnUrl &&
+                  renderPayment({
+                    clientSecret: flow.clientSecret,
+                    returnUrl: flow.returnUrl,
+                    amount: flow.chargeAmount ?? 0,
+                    currency: flow.chargeCurrency ?? film.currency,
+                  })}
+              </DialogContent>
+            </DialogPortal>
+          </DialogRoot>
+
+          {/* PAID, NOT YET RECONCILED. Without this the fan came back from the
+              Paystack modal to a page that still showed a Rent button while the
+              charge settled, so the obvious move was to reload or pay again.
+              The flow already exposed `isFinalizing`; nothing rendered it.
+
+              It says "do not close" because the fan cannot tell a slow
+              reconciliation from a hung page, and reloading mid-finalize is the
+              one action that makes this worse. */}
+          {flow.isFinalizing && !rental?.isLive && (
+            <div style={{ ...panel, display: "flex", alignItems: "center", gap: 12 }}>
+              <Loading />
+              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                <span style={{ fontSize: 14, fontWeight: 600 }}>{t("forge.film_detail.confirming_title")}</span>
+                <span style={{ fontSize: 13, color: tokens.muted }}>{t("forge.film_detail.confirming_body")}</span>
+              </div>
+            </div>
+          )}
+
+          {flow.isPaystack && flow.canOpenPaystack && !flow.isFinalizing && flow.step !== "rented" && (
+            <PaystackPayButton
+              onPay={() => flow.openPaystackCheckout()}
+              amount={flow.chargeAmount}
+              currency={flow.chargeCurrency ?? film.currency}
+            />
+          )}
+        </div>
+      </div>
+
+      {film.trailer?.url && (
+        <section style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+          <h2 style={{ fontSize: 18, fontWeight: 700 }}>{t("forge.film_detail.trailer")}</h2>
+          {/* Ungated, public-tier MP4 - no session, no key, no HLS engine needed. */}
+          <video
+            src={film.trailer.url}
+            controls
+            playsInline
+            preload="none"
+            poster={film.cover?.url}
+            style={{
+              width: "100%",
+              maxWidth: 860,
+              aspectRatio: "16/9",
+              // The one accepted literal: the letterbox behind a video.
+              background: "#000",
+              borderRadius: tokens.cornerRadius,
+            }}
+          />
+        </section>
+      )}
+
+      {film.kind === "series" && seasons.length > 0 && (
+        <section style={{ display: "flex", flexDirection: "column", gap: 18 }}>
+          <h2 style={{ fontSize: 18, fontWeight: 700 }}>{t("forge.film_detail.episodes")}</h2>
+          {seasons.map((season) => (
+            <div key={season.seasonNumber} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              {seasons.length > 1 && (
+                <h3 style={{ fontSize: 14, fontWeight: 700, color: tokens.muted }}>
+                  {t("forge.film_detail.season", { number: season.seasonNumber })}
+                </h3>
+              )}
+              {season.episodes.map((episode) => (
+                <EpisodeRow
+                  key={episode.id}
+                  episode={episode}
+                  t={t}
+                  // Nothing is sold at this level. One live rental on the title
+                  // covers every row, so this is the same question for all of
+                  // them and it is asked of the same single row.
+                  canWatch={canWatchFilmEpisode(rental, episode)}
+                  onWatch={() => go(watchHref(episode.id))}
+                />
+              ))}
+            </div>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The windows this title is sold in, in the creator's own order.
+ *
+ * Radios rather than buttons, and that is the whole point: each row is a price
+ * AND a length, both visible at once, and picking one does not buy anything. The
+ * fan reads the choice, makes it, and then presses a CTA that repeats what they
+ * chose. A row of "Rent" buttons would take money on the click that was meant to
+ * compare.
+ *
+ * Only ever drawn for two or more options - see the block docblock.
+ */
+function WindowPicker({
+  t,
+  options,
+  currency,
+  selectedId,
+  onSelect,
+}: {
+  t: ForgeT;
+  options: PublicFilmRentalOption[];
+  currency: string;
+  selectedId: string;
+  onSelect: (id: string) => void;
+}) {
+  const tokens = useThemeTokens();
+  const { formatCurrency } = useFormatCurrency();
+
+  return (
+    <fieldset style={{ border: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+      <legend style={{ fontSize: 13, fontWeight: 700, padding: 0, marginBottom: 4 }}>
+        {t("forge.film_detail.choose_window")}
+      </legend>
+      {options.map((option) => {
+        const isSelected = option.id === selectedId;
+        return (
+          <label
+            key={option.id}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "10px 14px",
+              borderRadius: tokens.cornerRadius,
+              border: `1px solid ${isSelected ? tokens.primary : tokens.border}`,
+              background: isSelected ? `${tokens.primary}12` : tokens.surface,
+              cursor: "pointer",
+            }}
+          >
+            <input
+              type="radio"
+              name="film-rental-window"
+              value={option.id}
+              checked={isSelected}
+              onChange={() => onSelect(option.id)}
+              style={{ accentColor: tokens.primary, cursor: "pointer" }}
+            />
+            <span style={{ flex: "1 1 auto", minWidth: 0, fontSize: 14, fontWeight: isSelected ? 700 : 500 }}>
+              {/* A creator's own name for the window when they gave it one
+                  ("Weekend pass"), and the length itself when they did not. The
+                  length is repeated on the right either way, so a named window
+                  never hides how long it runs. */}
+              {option.label || rentalWindowLabel(t, option.durationHours)}
+            </span>
+            <span style={{ fontSize: 13, color: tokens.muted }}>{rentalWindowLabel(t, option.durationHours)}</span>
+            <span style={{ fontSize: 14, fontWeight: 700 }}>
+              {formatCurrency(option.priceCents / 100, currency)}
+            </span>
+          </label>
+        );
+      })}
+    </fieldset>
+  );
+}
+
+/**
+ * The one sentence a fan must read every time: what they own and how long it
+ * lasts. State, not help, so it stays visible.
+ */
+function RentalStatusBanner({
+  rental,
+  t,
+}: {
+  rental: Pick<PublicFilmRental, "isLive" | "msRemaining" | "startBy">;
+  t: ForgeT;
+}) {
+  const tokens = useThemeTokens();
+  const remaining = splitRemainingMs(rental.msRemaining);
+
+  const body = !rental.isLive
+    ? t("forge.film_detail.rental_expired")
+    : rental.msRemaining == null
+      ? t("forge.film_detail.rental_not_started")
+      : remaining && remaining.days > 0
+        ? t("forge.film_detail.rental_remaining_days", { days: remaining.days, hours: remaining.hours })
+        : remaining && remaining.hours > 0
+          ? t("forge.film_detail.rental_remaining_hours", { hours: remaining.hours, minutes: remaining.minutes })
+          : t("forge.film_detail.rental_remaining_minutes", { minutes: remaining?.minutes ?? 0 });
+
+  return (
+    <div
+      style={{
+        padding: "10px 14px",
+        borderRadius: tokens.cornerRadius,
+        border: `1px solid ${tokens.border}`,
+        background: `${tokens.primary}12`,
+        fontSize: 13,
+        lineHeight: 1.6,
+      }}
+    >
+      <strong style={{ fontWeight: 700 }}>{t("forge.film_detail.rental_owned")}</strong> {body}
+    </div>
+  );
+}
+
+/**
+ * One episode: what it is, how long it runs, and whether this viewer can open it.
+ *
+ * It carries no price and no Rent button. Episodes are not sold, so the only two
+ * end states are a Watch button and nothing at all, and "nothing at all" is the
+ * honest answer for a fan who has not rented the title: the way in is the one
+ * CTA at the top of the page.
+ */
+function EpisodeRow({
+  episode,
+  t,
+  canWatch,
+  onWatch,
+}: {
+  episode: PublicFilmEpisode;
+  t: ForgeT;
+  canWatch: boolean;
+  onWatch: () => void;
+}) {
+  const tokens = useThemeTokens();
+  const runtime = splitDurationSec(episode.durationSec);
+  const released = isFilmEpisodeReleased(episode);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        flexWrap: "wrap",
+        padding: "10px 14px",
+        borderRadius: tokens.cornerRadius,
+        border: `1px solid ${tokens.border}`,
+        background: tokens.surface,
+      }}
+    >
+      <span style={{ fontSize: 13, fontWeight: 700, color: tokens.muted, minWidth: 34 }}>{episode.episodeNumber}</span>
+      <div style={{ flex: "1 1 200px", minWidth: 0 }}>
+        <div style={{ fontSize: 14, fontWeight: 600 }}>
+          {episode.title || t("forge.film_detail.untitled_episode", { number: episode.episodeNumber })}
+        </div>
+        <div style={{ fontSize: 12, color: tokens.muted, display: "flex", gap: 10, flexWrap: "wrap" }}>
+          {runtime && (
+            <span>
+              {runtime.hours > 0
+                ? t("forge.film_detail.runtime_hm", { hours: runtime.hours, minutes: runtime.minutes })
+                : t("forge.film_detail.runtime_m", { minutes: runtime.minutes })}
+            </span>
+          )}
+          {/* A free episode is not a per-episode rental. It is one episode the
+              creator opened up, and it plays with no rental at all. */}
+          {episode.isFreePreview && (
+            <span style={{ color: tokens.primary, fontWeight: 700 }}>{t("forge.film_detail.free_preview")}</span>
+          )}
+          {/* Drip release. The API omits an unreleased episode from the public
+              payload, so this shows on a page cached across its own release
+              moment - which is exactly when a Watch button would 404. */}
+          {!released && episode.availableAt && (
+            <span>{t("forge.film_detail.episode_unreleased", { date: formatReleaseDate(episode.availableAt) })}</span>
+          )}
+        </div>
+      </div>
+
+      {canWatch && (
+        <button
+          type="button"
+          onClick={onWatch}
+          style={{
+            padding: "8px 14px",
+            borderRadius: tokens.cornerRadius,
+            border: "none",
+            background: tokens.primary,
+            color: tokens.textPrimary,
+            fontSize: 13,
+            fontWeight: 700,
+            cursor: "pointer",
+          }}
+        >
+          {episode.isFreePreview ? t("forge.film_detail.watch_free") : t("forge.film_detail.watch")}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** A release date in the reader's own locale. Blank rather than "Invalid Date". */
+function formatReleaseDate(value: string): string {
+  const at = new Date(value);
+  return Number.isNaN(at.getTime()) ? "" : at.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+/**
+ * When the clock starts, and why it is one clock.
+ *
+ * Behind a `?` because somebody who has rented a film before would skip it every
+ * time. The WINDOW itself is not in here - that is on the button.
+ */
+function ClockHelp({ t, kind }: { t: ForgeT; kind: "film" | "series" }) {
+  return (
+    <CallHelpHint label={t("forge.film_detail.clock_help_label")}>
+      {kind === "series" ? t("forge.film_detail.clock_help_series") : t("forge.film_detail.clock_help_film")}
+    </CallHelpHint>
+  );
+}
+
+export default FilmDetail;