@tribe-nest/forge 3.34.0 → 3.36.0

package/src/ui/styled/FilmWatch.tsx

@@ -0,0 +1,701 @@
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { Loading } from "./Loading";
+import { FilmWatermark } from "../headless/film/FilmWatermark";
+import { useFilmPlayback, type FilmPlaybackGate, type FilmPlaybackSubtitle } from "../headless/film/useFilmPlayback";
+import { useStageFullscreen } from "../headless/film/useStageFullscreen";
+import {
+  groupFilmEpisodesBySeason,
+  nextFilmEpisode,
+  splitRemainingMs,
+  useFilm,
+  useMyFilmRentals,
+  type PublicFilmDetail,
+  type PublicFilmEpisode,
+} from "../../data/queries/useFilms";
+import { useForgeT, type ForgeT } from "../../i18n";
+
+/**
+ * What a player renderer is handed. Everything it needs, nothing it could leak.
+ *
+ * There is no "stop" prop, because there does not need to be one: `<FilmWatch>`
+ * UNMOUNTS the renderer the moment playback must stop (a gate, or this tab being
+ * displaced under decision 7's one-stream cap), so the renderer's own cleanup is
+ * what tears the engine down. A renderer must therefore destroy its player in an
+ * effect cleanup rather than assume it will be told. A player built directly on
+ * `useFilmPlayback` instead of on this block reads `playback.stopped` for the
+ * same signal.
+ */
+export interface FilmPlayerRenderProps {
+  /** The session-scoped, single-episode-bound master playlist. Changes only on recovery. */
+  src: string;
+  /** Poster art while nothing has loaded. */
+  poster?: string;
+  /**
+   * Sidecar WebVTT tracks, already absolute and already carrying the session
+   * token. Render one `<track kind="subtitles">` each, `default` on the one
+   * whose `isDefault` is true. Empty is the normal answer.
+   *
+   * Two things a renderer must do, both of which fail SILENTLY when skipped:
+   *
+   *  - ⚠️ These live on the API's origin, not the site's, and a browser refuses
+   *    to load a cross-origin `<track>` unless the `<video>` carries
+   *    `crossOrigin="anonymous"`.
+   *  - ⚠️ The token in each URL lives ten minutes and a `<track>` is fetched
+   *    lazily, so force the cues down at mount (`textTrack.mode = "hidden"`) or
+   *    a fan who enables subtitles late gets a 401 and an empty track.
+   *
+   * The starter's `FilmHlsPlayer` is the reference for both.
+   */
+  subtitles: FilmPlaybackSubtitle[];
+  /** Where to pick up. Seek to this once metadata is ready, then ignore it. */
+  startAtSec: number;
+  /** Fire as often as the player likes; the hook debounces the write. */
+  onTimeUpdate: (positionSec: number, durationSec?: number) => void;
+  onEnded: () => void;
+  /**
+   * A fatal playback error. Call it INSTEAD of reloading the page: the block
+   * re-derives the URL from a fresh token and hands back a new `src`, and the
+   * renderer restores its own position from `startAtSec`.
+   */
+  onFatalError: () => void;
+}
+
+export interface FilmWatchProps {
+  /** Route params. */
+  slug: string;
+  episodeId: string;
+  /**
+   * How to play encrypted HLS.
+   *
+   * Forge ships no HLS engine by design: a bare `<video src="…m3u8">` plays on
+   * Safari and nowhere else, and `EXT-X-KEY` fetching off Safari needs a real
+   * engine. The site-starter passes a player built on a client-only dynamic
+   * import of hls.js. The bare `<video>` is the fallback rather than the
+   * default-and-only, so a missing renderer degrades to "plays on Safari"
+   * instead of to a blank rectangle everywhere.
+   *
+   * Swapping this cannot defeat anything: the manifest handed to it is already
+   * session-scoped and episode-bound, and the key endpoint re-checks the rental
+   * on every fetch.
+   */
+  renderPlayer?: (props: FilmPlayerRenderProps) => ReactNode;
+  /** 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;
+  /**
+   * Draw the dynamic viewer overlay. Default true, and leaving it true is the
+   * point: switching it off removes the only layer that ties a leaked recording
+   * to the RENTER rather than only to the film. Everything else that protects
+   * the stream is server-side and unaffected either way.
+   */
+  showWatermark?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The player surface: the gate, the stream, the overlay, the clock and the way
+ * to the next episode.
+ *
+ * ## The five states, and why none of them may be merged
+ *
+ *   - **sign in** - nobody is signed in, and this is not a free preview. Needs a
+ *     way IN that comes back here.
+ *   - **wrong account** - signed in as somebody else. Needs a way OUT of the
+ *     session they are already in. Never the words "sign in", which they have
+ *     done.
+ *   - **no rental** - nothing covers this episode. Needs the title page, where
+ *     the offers are.
+ *   - **expired** - there WAS a rental and the window closed. Needs a re-rent,
+ *     not a sign-in, and needs to be told that plainly rather than shown an
+ *     error.
+ *   - **taken over** - somebody is watching this rental somewhere else. The
+ *     player is torn down (see the overlay below: covering a playing video caps
+ *     nothing), but this is NOT a dead end: one button takes it back, because
+ *     takeover is the design and a crashed tab must never lock the buyer out.
+ *
+ * ## What is drawn over the video, and what that costs
+ *
+ * `<FilmWatermark>` sits INSIDE the player surface, not beside it, so it shares
+ * the pixels a screen recording captures. It deters the record-and-share leak by
+ * naming the leaker; it prevents nothing. A creator building a custom player
+ * from `useFilmPlayback` can leave it out, and if they do, a leaked recording is
+ * still traceable to the film (that watermark is burned into the pixels by the
+ * transcoder) but no longer to the renter.
+ */
+export function FilmWatch({
+  slug,
+  episodeId,
+  renderPlayer,
+  basePath = "/i/films",
+  loginPath = "/i/login",
+  navigate,
+  showWatermark = true,
+  className,
+  style,
+}: FilmWatchProps) {
+  const t = useForgeT();
+  const tokens = useThemeTokens();
+  const { user, isInitialized } = usePublicAuth();
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const [ended, setEnded] = useState(false);
+  const fullscreen = useStageFullscreen();
+
+  const detail = useFilm(slug, { accountId: user?.id });
+
+  /**
+   * The fallback that stops an archived title from stranding a paying fan.
+   *
+   * `/public/films/:slug` 404s for an archived title and while the feature
+   * switch is off, but an active rental keeps playing in both cases - turning a
+   * switch off must never eat something a fan paid for. The fan's own library
+   * always carries the rental with its film's slug, so it is the one place the
+   * id can still be resolved. Only asked for when the detail actually failed.
+   */
+  const fallback = useMyFilmRentals(detail.isError ? user?.id : undefined, 1, 50);
+  const fallbackFilm = useMemo(() => {
+    if (!detail.isError) return null;
+    const match = (fallback.data?.data ?? []).find((rental) => rental.film.slug === slug);
+    return match?.film ?? null;
+  }, [detail.isError, fallback.data, slug]);
+
+  const film: PublicFilmDetail | null = detail.data ?? null;
+  const filmId = film?.id ?? fallbackFilm?.id;
+  const episode = film?.episodes.find((candidate) => candidate.id === episodeId) ?? null;
+
+  const playback = useFilmPlayback({
+    filmId,
+    episodeId,
+    loginPath,
+    isFreePreview: episode?.isFreePreview,
+    enabled: !!filmId,
+  });
+
+  // ⚠️ EVERY HOOK MUST SIT ABOVE THE EARLY RETURNS BELOW. This block lived under
+  // them and produced "Rendered more hooks than during the previous render": the
+  // loading render bailed at the guard having called fewer hooks than the render
+  // that got past it. The effect guards on its own ref instead, which is null
+  // until the stage mounts.
+  /**
+   * The fallback `<video>`, and the one thing it has to do about subtitles.
+   *
+   * ⚠️ This block tells every renderer to force the cues down at mount, and the
+   * fallback below is a renderer. A `<track>` is fetched LAZILY, when the viewer
+   * picks a language out of the captions menu, and the session token baked into
+   * its URL lives ten minutes. Eleven minutes in, that fetch carries an expired
+   * token, the subtitle endpoint answers 401, and the viewer gets a menu entry
+   * that is selected and empty: a `<track>` load failure fires an `error` event
+   * on the element and nothing else, so there is nowhere for it to surface.
+   *
+   * `mode = "hidden"` fetches and parses the cues without displaying them, so
+   * every language is already in memory before anyone asks for one. Only
+   * `disabled` tracks are touched, leaving the `default` one in the `showing`
+   * mode it loaded with, and the menu still reads as off until the viewer picks.
+   *
+   * The starter's `FilmHlsPlayer` carries the same effect for the same reason;
+   * this is not a duplicate of it, it is the fallback path honouring the rule
+   * the props above set.
+   */
+  const fallbackVideoRef = useRef<HTMLVideoElement | null>(null);
+  useEffect(() => {
+    const video = fallbackVideoRef.current;
+    if (!video || playback.subtitles.length === 0) return;
+    for (const textTrack of Array.from(video.textTracks)) {
+      if (textTrack.mode === "disabled") textTrack.mode = "hidden";
+    }
+  }, [playback.subtitles, playback.src, playback.stopped, renderPlayer]);
+
+  const resolvingFilm = detail.isLoading || (detail.isError && fallback.isLoading);
+  if (!isInitialized || resolvingFilm || playback.isLoading) return <Loading fullPage />;
+
+  const titleHref = `${basePath}/${slug}`;
+
+  if (playback.gate) {
+    return (
+      <GatePanel
+        gate={playback.gate}
+        t={t}
+        onSignIn={() => go(playback.signInHref)}
+        onSignOut={() => void playback.signOutAndRetry()}
+        onTitle={() => go(titleHref)}
+        signedInEmail={playback.signedInEmail}
+        className={className}
+        style={style}
+      />
+    );
+  }
+
+  if (!filmId || !playback.src) {
+    return (
+      <Panel className={className} style={style}>
+        <p style={{ fontSize: 14, color: tokens.muted }}>{t("forge.film_watch.unavailable")}</p>
+      </Panel>
+    );
+  }
+
+  const remaining = splitRemainingMs(playback.msRemaining);
+  const next = film ? nextFilmEpisode(film.episodes, episodeId) : null;
+  const seasons = film ? groupFilmEpisodesBySeason(film.episodes) : [];
+  const episodeLabel = playback.episode
+    ? t("forge.film_watch.episode_label", {
+        season: playback.episode.seasonNumber,
+        number: playback.episode.episodeNumber,
+      })
+    : null;
+
+  const playerProps: FilmPlayerRenderProps = {
+    src: playback.src,
+    poster: film?.cover?.url,
+    subtitles: playback.subtitles,
+    startAtSec: playback.resumeAtSec,
+    onTimeUpdate: playback.reportProgress,
+    onEnded: () => setEnded(true),
+    onFatalError: () => void playback.recoverPlayback(),
+  };
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        maxWidth: 1100,
+        margin: "0 auto",
+        color: tokens.text,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      {/* THE STAGE IS THE FULLSCREEN ELEMENT, never the <video>. The browser
+          promotes one element and hides the rest of the document, so a native
+          fullscreen on the video would leave the watermark behind - see
+          `useStageFullscreen`. Everything that must survive fullscreen has to be
+          a DESCENDANT of this node. */}
+      <div
+        ref={fullscreen.ref}
+        data-testid="film-stage"
+        style={{
+          position: "relative",
+          width: "100%",
+          // In fullscreen the stage IS the viewport, so a 16/9 box would letterbox
+          // inside an already letterboxed screen.
+          ...(fullscreen.isFullscreen
+            ? { height: "100%", aspectRatio: undefined, borderRadius: 0 }
+            : { aspectRatio: "16/9", borderRadius: tokens.cornerRadius }),
+          // The one accepted literal in this file: the letterbox behind a video,
+          // which has to be black whatever the theme is.
+          background: "#000",
+          overflow: "hidden",
+        }}
+      >
+        {/* UNMOUNTED once this tab has been displaced, never merely covered.
+            Decision 7 caps a rental at one stream, and an overlay painted over a
+            still-playing <video> caps nothing: the engine has already fetched
+            the key and holds hours of presigned segment URLs the server cannot
+            revoke, so both devices would watch the whole film, audio included on
+            this one. Unmounting runs the renderer's cleanup - hls.js is
+            destroyed, the element is torn down - which is the only thing here
+            that actually stops the bytes. The overlay below still offers the way
+            back, so this is a stop, not a dead end. */}
+        {!playback.stopped &&
+          (renderPlayer ? (
+            renderPlayer(playerProps)
+          ) : (
+            <video
+              ref={fallbackVideoRef}
+              src={playback.src}
+              // CORS mode is what lets a cross-origin <track> load at all, and
+              // it is asked for only when there is a track to load: it also puts
+              // the POSTER fetch into CORS mode, and the media bucket does not
+              // allow creator custom domains, so a poster requested that way
+              // silently fails to paint. A title with no subtitles keeps its
+              // poster; a title with them trades it for the captions.
+              {...(playback.subtitles.length > 0
+                ? { crossOrigin: "anonymous" as const }
+                : { poster: film?.cover?.url })}
+              controls
+              playsInline
+              autoPlay
+              onLoadedMetadata={(e) => {
+                if (playback.resumeAtSec > 0) e.currentTarget.currentTime = playback.resumeAtSec;
+              }}
+              onTimeUpdate={(e) => playback.reportProgress(e.currentTarget.currentTime, e.currentTarget.duration)}
+              onEnded={() => setEnded(true)}
+              style={{ width: "100%", height: "100%", display: "block" }}
+            >
+              {playback.subtitles.map((track) => (
+                <track
+                  key={track.id}
+                  kind="subtitles"
+                  src={track.src}
+                  srcLang={track.language}
+                  label={track.label}
+                  default={track.isDefault}
+                />
+              ))}
+            </video>
+          ))}
+
+        {showWatermark && !playback.stopped && playback.watermark && (
+          <FilmWatermark
+            name={playback.watermark.name}
+            email={playback.watermark.email}
+            rentalRef={playback.watermark.rentalRef}
+          />
+        )}
+
+        {/* The stage's own fullscreen control. On Chromium the player hides the
+            native one (`controlsList="nofullscreen"`), so this is the only route
+            and the watermark always travels. Elsewhere the native button still
+            works and `useStageFullscreen` corrects it. */}
+        {fullscreen.isSupported && !playback.stopped && (
+          <button
+            type="button"
+            onClick={fullscreen.toggle}
+            aria-label={fullscreen.isFullscreen ? t("forge.film_watch.exit_fullscreen") : t("forge.film_watch.enter_fullscreen")}
+            style={{
+              position: "absolute",
+              right: 12,
+              top: 12,
+              zIndex: 3,
+              cursor: "pointer",
+              border: "none",
+              borderRadius: tokens.cornerRadius,
+              padding: "6px 10px",
+              fontSize: 12,
+              fontFamily: tokens.fontFamily,
+              // Sits on the black stage, so theme surface tokens would vanish
+              // against it.
+              background: "rgba(0,0,0,0.55)",
+              color: "#ffffff",
+            }}
+          >
+            {fullscreen.isFullscreen ? t("forge.film_watch.exit_fullscreen") : t("forge.film_watch.enter_fullscreen")}
+          </button>
+        )}
+
+        {/* Takeover is drawn OVER the stage rather than replacing the page: the
+            fan is one click from taking their rental back, and losing the page
+            they were on would make that feel like a punishment. */}
+        {playback.takenOver && (
+          <div
+            role="alert"
+            style={{
+              position: "absolute",
+              inset: 0,
+              zIndex: 30,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 14,
+              padding: 24,
+              textAlign: "center",
+              background: "rgba(0,0,0,0.82)",
+              color: "#ffffff",
+            }}
+          >
+            <p style={{ fontSize: 17, fontWeight: 700 }}>{t("forge.film_watch.taken_over_title")}</p>
+            <p style={{ fontSize: 14, maxWidth: 420, lineHeight: 1.6 }}>{t("forge.film_watch.taken_over_body")}</p>
+            <button
+              type="button"
+              onClick={() => void playback.resumeHere()}
+              style={{
+                padding: "10px 20px",
+                borderRadius: tokens.cornerRadius,
+                border: "none",
+                background: tokens.primary,
+                color: tokens.textPrimary,
+                fontSize: 14,
+                fontWeight: 700,
+                cursor: "pointer",
+              }}
+            >
+              {t("forge.film_watch.taken_over_action")}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
+        <div>
+          <h1
+            style={{
+              fontSize: 22,
+              fontWeight: 800,
+              fontFamily: tokens.headingFontFamily || tokens.fontFamily,
+            }}
+          >
+            {film?.title ?? fallbackFilm?.title ?? ""}
+          </h1>
+          {film?.kind === "series" && episodeLabel && (
+            <p style={{ fontSize: 14, color: tokens.muted }}>
+              {episodeLabel}
+              {playback.episode?.title ? ` · ${playback.episode.title}` : ""}
+            </p>
+          )}
+        </div>
+
+        {/* Time remaining is content, never help: it is the thing the fan is
+            spending. Free previews have no window, so they get no clock. */}
+        {!playback.isFreePreview && (
+          <p style={{ fontSize: 14, fontWeight: 600, alignSelf: "center" }}>
+            {playback.msRemaining == null
+              ? t("forge.film_watch.window_not_started")
+              : remaining && remaining.days > 0
+                ? t("forge.film_watch.time_left_days", { days: remaining.days, hours: remaining.hours })
+                : remaining && remaining.hours > 0
+                  ? t("forge.film_watch.time_left_hours", { hours: remaining.hours, minutes: remaining.minutes })
+                  : t("forge.film_watch.time_left_minutes", { minutes: remaining?.minutes ?? 0 })}
+          </p>
+        )}
+      </div>
+
+      {/* Decision 12, said out loud at the only moment it can still be acted on.
+          Every rental is a whole-title rental, so there is no case where this
+          sentence would be untrue: a free preview has no rental and no clock. */}
+      {playback.clockStartedNow && playback.rental && (
+        <p
+          style={{
+            fontSize: 13,
+            lineHeight: 1.6,
+            padding: "10px 14px",
+            borderRadius: tokens.cornerRadius,
+            border: `1px solid ${tokens.border}`,
+            background: `${tokens.primary}12`,
+          }}
+        >
+          {t("forge.film_watch.clock_started", { hours: playback.rental.durationHours })}
+        </p>
+      )}
+
+      {ended && next && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            flexWrap: "wrap",
+            padding: "12px 16px",
+            borderRadius: tokens.cornerRadius,
+            border: `1px solid ${tokens.border}`,
+            background: tokens.surface,
+          }}
+        >
+          <span style={{ flex: "1 1 220px", fontSize: 14 }}>
+            {t("forge.film_watch.up_next", {
+              title:
+                next.title ||
+                t("forge.film_watch.episode_label", { season: next.seasonNumber, number: next.episodeNumber }),
+            })}
+          </span>
+          <button
+            type="button"
+            onClick={() => go(`${basePath}/${slug}/watch/${next.id}`)}
+            style={{
+              padding: "9px 16px",
+              borderRadius: tokens.cornerRadius,
+              border: "none",
+              background: tokens.primary,
+              color: tokens.textPrimary,
+              fontSize: 13,
+              fontWeight: 700,
+              cursor: "pointer",
+            }}
+          >
+            {t("forge.film_watch.play_next")}
+          </button>
+        </div>
+      )}
+
+      {seasons.length > 0 && film?.kind === "series" && (
+        <section style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <h2 style={{ fontSize: 15, fontWeight: 700 }}>{t("forge.film_watch.episodes")}</h2>
+          {seasons.map((season) => (
+            <div key={season.seasonNumber} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              {seasons.length > 1 && (
+                <h3 style={{ fontSize: 13, fontWeight: 700, color: tokens.muted }}>
+                  {t("forge.film_watch.season", { number: season.seasonNumber })}
+                </h3>
+              )}
+              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                {season.episodes.map((candidate) => (
+                  <EpisodeChip
+                    key={candidate.id}
+                    episode={candidate}
+                    t={t}
+                    isCurrent={candidate.id === episodeId}
+                    onSelect={() => go(`${basePath}/${slug}/watch/${candidate.id}`)}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </section>
+      )}
+    </div>
+  );
+}
+
+function EpisodeChip({
+  episode,
+  t,
+  isCurrent,
+  onSelect,
+}: {
+  episode: PublicFilmEpisode;
+  t: ForgeT;
+  isCurrent: boolean;
+  onSelect: () => void;
+}) {
+  const tokens = useThemeTokens();
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      aria-current={isCurrent ? "true" : undefined}
+      title={episode.title ?? undefined}
+      style={{
+        padding: "7px 12px",
+        borderRadius: tokens.cornerRadius,
+        border: `1px solid ${isCurrent ? tokens.primary : tokens.border}`,
+        background: isCurrent ? `${tokens.primary}20` : "transparent",
+        color: isCurrent ? tokens.primary : tokens.text,
+        fontSize: 13,
+        fontWeight: isCurrent ? 700 : 500,
+        cursor: "pointer",
+        fontFamily: tokens.fontFamily,
+      }}
+    >
+      {t("forge.film_watch.episode_short", { number: episode.episodeNumber })}
+      {episode.isFreePreview ? ` · ${t("forge.film_watch.free")}` : ""}
+    </button>
+  );
+}
+
+function Panel({ children, className, style }: { children: ReactNode; className?: string; style?: CSSProperties }) {
+  const tokens = useThemeTokens();
+  return (
+    <div
+      className={className}
+      style={{
+        maxWidth: 520,
+        margin: "0 auto",
+        padding: 28,
+        borderRadius: tokens.cornerRadius,
+        border: `1px solid ${tokens.border}`,
+        background: tokens.surface,
+        color: tokens.text,
+        textAlign: "center",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        fontFamily: tokens.fontFamily,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function GatePanel({
+  gate,
+  t,
+  onSignIn,
+  onSignOut,
+  onTitle,
+  signedInEmail,
+  className,
+  style,
+}: {
+  gate: FilmPlaybackGate;
+  t: ForgeT;
+  onSignIn: () => void;
+  onSignOut: () => void;
+  onTitle: () => void;
+  signedInEmail: string | null;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  const tokens = useThemeTokens();
+
+  const copy: Record<FilmPlaybackGate["kind"], { title: string; body: string; action: string | null }> = {
+    sign_in_required: {
+      title: t("forge.film_watch.gate_sign_in_title"),
+      body: t("forge.film_watch.gate_sign_in_body"),
+      action: t("forge.film_watch.gate_sign_in_action"),
+    },
+    wrong_account: {
+      title: t("forge.film_watch.gate_wrong_account_title"),
+      body: t("forge.film_watch.gate_wrong_account_body"),
+      action: t("forge.film_watch.gate_wrong_account_action"),
+    },
+    no_rental: {
+      title: t("forge.film_watch.gate_no_rental_title"),
+      body: t("forge.film_watch.gate_no_rental_body"),
+      action: t("forge.film_watch.gate_no_rental_action"),
+    },
+    expired: {
+      title: t("forge.film_watch.gate_expired_title"),
+      body: t("forge.film_watch.gate_expired_body"),
+      action: t("forge.film_watch.gate_expired_action"),
+    },
+    unavailable: {
+      title: t("forge.film_watch.gate_unavailable_title"),
+      body: t("forge.film_watch.gate_unavailable_body"),
+      action: t("forge.film_watch.gate_unavailable_action"),
+    },
+  };
+
+  const chosen = copy[gate.kind];
+  const onAction = gate.kind === "sign_in_required" ? onSignIn : gate.kind === "wrong_account" ? onSignOut : onTitle;
+
+  return (
+    <Panel className={className} style={style}>
+      <h1 style={{ fontSize: 20, fontWeight: 800, fontFamily: tokens.headingFontFamily || tokens.fontFamily }}>
+        {chosen.title}
+      </h1>
+      {/* The API's own sentence wins when it sent one - it is already translated
+          and it knows more about the refusal than this component does. */}
+      <p style={{ fontSize: 14, color: tokens.muted, lineHeight: 1.6 }}>{gate.message ?? chosen.body}</p>
+
+      {/* Naming the session they are in is what makes "wrong account"
+          actionable: otherwise the reader has no idea which of their addresses
+          they are currently signed in with. */}
+      {gate.kind === "wrong_account" && signedInEmail && (
+        <p style={{ fontSize: 13, color: tokens.muted }}>
+          {t("forge.film_watch.signed_in_as")} <strong style={{ color: tokens.text }}>{signedInEmail}</strong>
+        </p>
+      )}
+
+      {chosen.action && (
+        <button
+          type="button"
+          onClick={onAction}
+          style={{
+            alignSelf: "center",
+            padding: "10px 20px",
+            borderRadius: tokens.cornerRadius,
+            border: "none",
+            background: tokens.primary,
+            color: tokens.textPrimary,
+            fontSize: 14,
+            fontWeight: 700,
+            cursor: "pointer",
+          }}
+        >
+          {chosen.action}
+        </button>
+      )}
+    </Panel>
+  );
+}
+
+export default FilmWatch;