@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/headless/broadcast/_tests/broadcastState.spec.ts

@@ -0,0 +1,235 @@
+import { describe, it, expect } from "vitest";
+import type { ILiveBroadcast, IBroadcastPass } from "../../../../types/models";
+import {
+  broadcastListStatus,
+  broadcastSessionKey,
+  hasBroadcastEnded,
+  isPassValidated,
+  minTicketPrice,
+  needsPassValidation,
+  selectBroadcastScreen,
+} from "../broadcastState";
+
+/**
+ * The rules a live-broadcast page runs on, checked without a browser.
+ *
+ * The player is deliberately not tested here: it is a video element, a WebRTC
+ * negotiation and a socket, and none of those tell you whether the right person
+ * is looking at them. These functions do.
+ */
+
+const NOW = new Date("2026-08-18T12:00:00.000Z");
+
+function broadcast(overrides: Partial<ILiveBroadcast> = {}): ILiveBroadcast {
+  return {
+    id: "b1",
+    title: "Sunday Session",
+    createdAt: "2026-08-01T00:00:00.000Z",
+    updatedAt: "2026-08-01T00:00:00.000Z",
+    profileId: "p1",
+    streamTemplateId: "st1",
+    egressId: "e1",
+    events: [],
+    event: { id: "ev1", title: "Sunday Session", description: "", isPaid: true },
+    ...overrides,
+  } as ILiveBroadcast;
+}
+
+const gate = (price = 25) =>
+  [
+    {
+      eventId: "ev1",
+      eventTitle: "Sunday Session",
+      eventTickets: [{ price } as unknown as ILiveBroadcast["events"][number]["eventTickets"][number]],
+    },
+  ] as ILiveBroadcast["events"];
+
+const pass: IBroadcastPass = { sessionId: "s1", name: "Ada", email: "ada@example.com" };
+
+describe("broadcastListStatus", () => {
+  it("calls a started, unfinished broadcast LIVE", () => {
+    const status = broadcastListStatus(broadcast({ startedAt: "2026-08-18T11:00:00.000Z" }), NOW);
+    expect(status.text).toBe("LIVE");
+  });
+
+  it("REGRESSION: LIVE wins over a start DATE that has not arrived", () => {
+    // A host who goes on early has `startedAt` set and a `startDate` still in
+    // the future. Reading the schedule first would badge a broadcast that is
+    // ON AIR as UPCOMING, and everyone waits through the show they came for.
+    const status = broadcastListStatus(
+      broadcast({ startedAt: "2026-08-18T11:00:00.000Z", startDate: "2026-08-18T20:00:00.000Z" }),
+      NOW,
+    );
+    expect(status.text).toBe("LIVE");
+  });
+
+  it("calls a future start date UPCOMING", () => {
+    expect(broadcastListStatus(broadcast({ startDate: "2026-08-18T20:00:00.000Z" }), NOW).text).toBe("UPCOMING");
+  });
+
+  it("calls a finished broadcast ENDED even though it started", () => {
+    const status = broadcastListStatus(
+      broadcast({ startedAt: "2026-08-18T10:00:00.000Z", endedAt: "2026-08-18T11:00:00.000Z" }),
+      NOW,
+    );
+    expect(status.text).toBe("ENDED");
+  });
+
+  it("calls a past start date with no start at all ENDED", () => {
+    expect(broadcastListStatus(broadcast({ startDate: "2026-08-17T20:00:00.000Z" }), NOW).text).toBe("ENDED");
+  });
+
+  it("gives the three states three different badge colours", () => {
+    const live = broadcastListStatus(broadcast({ startedAt: "2026-08-18T11:00:00.000Z" }), NOW);
+    const upcoming = broadcastListStatus(broadcast({ startDate: "2026-08-18T20:00:00.000Z" }), NOW);
+    const ended = broadcastListStatus(broadcast(), NOW);
+    expect(new Set([live.background, upcoming.background, ended.background]).size).toBe(3);
+  });
+});
+
+describe("needsPassValidation", () => {
+  it("is the linked event, and nothing else", () => {
+    expect(needsPassValidation(broadcast({ events: gate() }))).toBe(true);
+    expect(needsPassValidation(broadcast({ events: [] }))).toBe(false);
+    expect(needsPassValidation(undefined)).toBe(false);
+    expect(needsPassValidation(null)).toBe(false);
+  });
+});
+
+describe("hasBroadcastEnded", () => {
+  it("ends on the POLLED copy, which is the only thing that notices a host hanging up", () => {
+    const opened = broadcast();
+    const polled = broadcast({ endedAt: "2026-08-18T11:59:00.000Z" });
+    expect(hasBroadcastEnded(opened, polled)).toBe(true);
+  });
+
+  it("ends on the opened copy for a viewer who arrives late", () => {
+    expect(hasBroadcastEnded(broadcast({ endedAt: "2026-08-18T11:00:00.000Z" }), undefined)).toBe(true);
+  });
+
+  it("is not ended while neither copy says so", () => {
+    expect(hasBroadcastEnded(broadcast({ startedAt: "2026-08-18T11:00:00.000Z" }), broadcast())).toBe(false);
+  });
+});
+
+describe("isPassValidated", () => {
+  it("REGRESSION: a gated broadcast without a validated pass is NOT open", () => {
+    // This single expression is the paywall. False here is a paid stream
+    // playing for anybody who has the URL.
+    expect(isPassValidated(broadcast({ events: gate() }), false)).toBe(false);
+  });
+
+  it("opens a gated broadcast once the pass is validated", () => {
+    expect(isPassValidated(broadcast({ events: gate() }), true)).toBe(true);
+  });
+
+  it("lets everyone into a broadcast with no linked event", () => {
+    expect(isPassValidated(broadcast({ events: [] }), false)).toBe(true);
+  });
+});
+
+describe("minTicketPrice", () => {
+  it("takes the cheapest tier on the linked event", () => {
+    const events = [
+      {
+        eventId: "ev1",
+        eventTitle: "Sunday Session",
+        eventTickets: [{ price: 40 }, { price: 15 }, { price: 60 }],
+      },
+    ] as unknown as ILiveBroadcast["events"];
+    expect(minTicketPrice(broadcast({ events }))).toBe(15);
+  });
+
+  it("REGRESSION: says nothing rather than 'From Infinity' when the event lists no tiers", () => {
+    const events = [{ eventId: "ev1", eventTitle: "x", eventTickets: [] }] as unknown as ILiveBroadcast["events"];
+    expect(minTicketPrice(broadcast({ events }))).toBeNull();
+    expect(minTicketPrice(broadcast({ events: [] }))).toBeNull();
+    expect(minTicketPrice(undefined)).toBeNull();
+  });
+});
+
+describe("broadcastSessionKey", () => {
+  it("scopes the stored session to ONE broadcast", () => {
+    // A shared key would carry a ticket for last week's show into this week's.
+    expect(broadcastSessionKey("b1")).toBe("broadcast_b1_session_id");
+    expect(broadcastSessionKey("b1")).not.toBe(broadcastSessionKey("b2"));
+  });
+});
+
+describe("selectBroadcastScreen", () => {
+  const base = {
+    isBroadcastLoading: false,
+    isSessionLoading: false,
+    hasValidPass: false,
+    pass: null,
+  };
+
+  it("decides nothing until a stored session has been re-checked", () => {
+    const screen = selectBroadcastScreen({
+      ...base,
+      isSessionLoading: true,
+      broadcast: broadcast({ events: gate() }),
+    });
+    expect(screen).toEqual({ showLoading: true, view: "none" });
+  });
+
+  it("reports a broadcast that could not be read", () => {
+    expect(selectBroadcastScreen({ ...base, error: new Error("boom") }).view).toBe("error");
+  });
+
+  it("REGRESSION: a GATED broadcast shows the ticket box, never the player", () => {
+    const screen = selectBroadcastScreen({ ...base, broadcast: broadcast({ events: gate() }) });
+    expect(screen.view).toBe("pass");
+  });
+
+  it("plays a gated broadcast once a pass is held", () => {
+    const screen = selectBroadcastScreen({
+      ...base,
+      broadcast: broadcast({ events: gate(), startedAt: "2026-08-18T11:00:00.000Z" }),
+      hasValidPass: true,
+      pass,
+    });
+    expect(screen.view).toBe("player");
+  });
+
+  it("REGRESSION: an ENDED gated broadcast shows the ended screen, not a ticket box", () => {
+    // Asking somebody for a ticket to a stream that finished is both useless
+    // and, for anyone who then buys one, a refund.
+    const screen = selectBroadcastScreen({
+      ...base,
+      broadcast: broadcast({ events: gate() }),
+      polled: broadcast({ endedAt: "2026-08-18T11:59:00.000Z" }),
+    });
+    expect(screen.view).toBe("ended");
+  });
+
+  it("shows the ended screen to a pass holder too", () => {
+    const screen = selectBroadcastScreen({
+      ...base,
+      broadcast: broadcast({ events: gate(), endedAt: "2026-08-18T11:00:00.000Z" }),
+      hasValidPass: true,
+      pass,
+    });
+    expect(screen.view).toBe("ended");
+  });
+
+  it("keeps the spinner alongside the screen while the broadcast is still loading", () => {
+    const screen = selectBroadcastScreen({
+      ...base,
+      isBroadcastLoading: true,
+      broadcast: broadcast({ events: gate() }),
+    });
+    expect(screen).toEqual({ showLoading: true, view: "pass" });
+  });
+
+  it("draws nothing for an OPEN broadcast until a pass exists, matching apps/client", () => {
+    // Pinned, not endorsed. The player needs a pass to sign chat messages with,
+    // so a broadcast with no linked event and no stored session renders blank on
+    // both stacks. Reported alongside this port.
+    const screen = selectBroadcastScreen({
+      ...base,
+      broadcast: broadcast({ events: [], startedAt: "2026-08-18T11:00:00.000Z" }),
+    });
+    expect(screen.view).toBe("none");
+  });
+});

package/src/ui/headless/broadcast/broadcastState.ts

@@ -0,0 +1,158 @@
+import type { ILiveBroadcast, IBroadcastPass } from "../../../types/models";
+
+/**
+ * The decisions a live-broadcast page makes, with no React and no network in
+ * them: which badge a broadcast wears in the list, whether the page a viewer
+ * opened is still on, and whether they are allowed past the paywall.
+ *
+ * They are pure so both rendering stacks (apps/client and a Forge code site)
+ * can be checked against the same rules. Every one of these is a rule a wrong
+ * answer turns into either a paid broadcast given away for free, or a viewer
+ * staring at a player for a stream that ended twenty minutes ago.
+ */
+
+/** The three states a broadcast can be in, as the list badge names them. */
+export type BroadcastListStatusText = "LIVE" | "UPCOMING" | "ENDED";
+
+export interface BroadcastListStatus {
+  text: BroadcastListStatusText;
+  /** Badge background. Status colour, deliberately not a theme token: see below. */
+  background: string;
+  /** Badge foreground. */
+  color: string;
+}
+
+/**
+ * Status colours are literal rather than theme tokens on purpose. A LIVE badge
+ * is red on every streaming surface a viewer has ever used, and re-tinting it to
+ * a tenant's brand primary would make "on air" and "ended" the same colour on
+ * any site whose brand happens to be grey. Everything else on these pages
+ * (surfaces, borders, text, radius) reads from the theme.
+ */
+const STATUS_COLORS: Record<BroadcastListStatusText, { background: string; color: string }> = {
+  LIVE: { background: "#ef4444", color: "#ffffff" },
+  UPCOMING: { background: "#3b82f6", color: "#ffffff" },
+  ENDED: { background: "#6b7280", color: "#ffffff" },
+};
+
+/**
+ * Which badge a broadcast wears in the "what is on now" list.
+ *
+ * There is no status column on the row: the lifecycle is derived from the
+ * timestamps. Started and not ended is LIVE, a start date still in the future is
+ * UPCOMING, and everything else has been and gone.
+ */
+export function broadcastListStatus(broadcast: ILiveBroadcast, now: Date = new Date()): BroadcastListStatus {
+  if (broadcast.startedAt && !broadcast.endedAt) {
+    return { text: "LIVE", ...STATUS_COLORS.LIVE };
+  }
+  if (broadcast.startDate && new Date(broadcast.startDate) > now) {
+    return { text: "UPCOMING", ...STATUS_COLORS.UPCOMING };
+  }
+  return { text: "ENDED", ...STATUS_COLORS.ENDED };
+}
+
+/**
+ * Does this broadcast sit behind a ticket?
+ *
+ * A linked event IS the paywall. A broadcast with no linked event is open, and a
+ * broadcast with one is not, so this single expression is what stands between a
+ * paid stream and anyone who knows the URL.
+ */
+export function needsPassValidation(broadcast?: ILiveBroadcast | null): boolean {
+  return !!broadcast?.events?.length;
+}
+
+/**
+ * Has it ended?
+ *
+ * Two sources, because the page holds the broadcast it OPENED with and polls a
+ * second copy. The poll is the only thing that notices the host hanging up while
+ * somebody is watching, so an end seen in either copy ends the page.
+ */
+export function hasBroadcastEnded(broadcast?: ILiveBroadcast | null, polled?: ILiveBroadcast | null): boolean {
+  return !!polled?.endedAt || !!broadcast?.endedAt;
+}
+
+/**
+ * May this viewer through?
+ *
+ * An open broadcast passes everyone. A gated one passes only a viewer holding a
+ * validated pass. Note the direction of the default: when there is no gate the
+ * answer is yes, so a bug that loses the events array opens the paywall rather
+ * than closing it. That is why `needsPassValidation` reads the broadcast and
+ * never a flag the caller passes in.
+ */
+export function isPassValidated(broadcast: ILiveBroadcast | null | undefined, hasValidPass: boolean): boolean {
+  return needsPassValidation(broadcast) ? hasValidPass : true;
+}
+
+/** Where a validated session id is parked so a refresh does not re-ask for the ticket. */
+export function broadcastSessionKey(broadcastId: string): string {
+  return `broadcast_${broadcastId}_session_id`;
+}
+
+/**
+ * The cheapest ticket on the linked event, for the "from ..." line beside the
+ * buy button. `null` when the event lists no tickets at all, so the caller
+ * renders nothing rather than the word "Infinity".
+ */
+export function minTicketPrice(broadcast?: ILiveBroadcast | null): number | null {
+  const tickets = broadcast?.events?.[0]?.eventTickets;
+  if (!tickets || tickets.length === 0) return null;
+  const min = tickets.reduce((lowest, ticket) => Math.min(lowest, ticket.price), Infinity);
+  return Number.isFinite(min) ? min : null;
+}
+
+/** What the watch page puts on screen. */
+export type BroadcastView = "none" | "error" | "ended" | "player" | "pass";
+
+export interface BroadcastScreen {
+  /** The spinner. It can sit ALONGSIDE a view, exactly as the client renders it. */
+  showLoading: boolean;
+  view: BroadcastView;
+}
+
+export interface BroadcastScreenInput {
+  /** The broadcast the page opened with. */
+  broadcast?: ILiveBroadcast | null;
+  /** The polled copy, which is allowed to say only one thing: that it ended. */
+  polled?: ILiveBroadcast | null;
+  isBroadcastLoading: boolean;
+  /** Re-opening a stored session. Nothing renders until this settles. */
+  isSessionLoading: boolean;
+  error?: unknown;
+  hasValidPass: boolean;
+  pass?: IBroadcastPass | null;
+}
+
+/**
+ * The whole render decision for the watch page, in one place.
+ *
+ * Order matters and is not arbitrary. ENDED is checked before the pass, so a
+ * viewer who arrives after the stream is over gets the "it ended" screen instead
+ * of being asked for a ticket to nothing. The pass gate is checked before the
+ * player, so no frame of a gated broadcast is ever mounted for a viewer who has
+ * not presented one.
+ */
+export function selectBroadcastScreen(input: BroadcastScreenInput): BroadcastScreen {
+  const { broadcast, polled, isBroadcastLoading, isSessionLoading, error, hasValidPass, pass } = input;
+  const showLoading = isBroadcastLoading || isSessionLoading;
+
+  // Nothing at all is decided until the stored session has been re-checked:
+  // deciding early would flash the ticket box at a viewer who already has one.
+  if (isSessionLoading) return { showLoading: true, view: "none" };
+
+  if (error) return { showLoading, view: "error" };
+  if (!broadcast) return { showLoading, view: "none" };
+
+  if (hasBroadcastEnded(broadcast, polled)) return { showLoading, view: "ended" };
+
+  if (!isPassValidated(broadcast, hasValidPass)) return { showLoading, view: "pass" };
+
+  // A pass is what names the viewer in chat, so the player waits for one even on
+  // an open broadcast. Matches apps/client exactly.
+  if (pass) return { showLoading, view: "player" };
+
+  return { showLoading, view: "none" };
+}

package/src/ui/headless/broadcast/useBroadcastWatch.ts

@@ -1,43 +1,143 @@
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { IBroadcastPass } from "../../../types/models";
-import { useLiveBroadcasts, useValidateBroadcastPass } from "../../../data/queries/useBroadcasts";
+import {
+  useLiveBroadcast,
+  useLiveBroadcastPoll,
+  useBroadcastSessionApi,
+  useValidateBroadcastPass,
+} from "../../../data/queries/useBroadcasts";
+import {
+  broadcastSessionKey,
+  hasBroadcastEnded,
+  needsPassValidation,
+  selectBroadcastScreen,
+  type BroadcastScreen,
+} from "./broadcastState";
 
 const errMessage = (e: unknown) =>
   (e as { response?: { data?: { message?: string } } })?.response?.data?.message || "Invalid pass.";
 
+/** How often a watching viewer tells the server it is still there. */
+const SESSION_PING_MS = 15000;
+
+const readSessionId = (broadcastId?: string): string | null => {
+  if (!broadcastId || typeof localStorage === "undefined") return null;
+  return localStorage.getItem(broadcastSessionKey(broadcastId));
+};
+
 /**
- * Headless broadcast watch: resolves a broadcast from the live list and gates it
- * behind pass validation. Composes `useLiveBroadcasts` + `useValidateBroadcastPass`.
- * Once `pass` is set the caller can mount its player with the returned playback info.
+ * Headless broadcast watch: everything the watch page does apart from drawing it.
+ *
+ * Reads the broadcast by id, polls a second copy so the end of a stream reaches
+ * a viewer who is already watching, re-opens a session held from an earlier
+ * visit, gates the whole thing behind pass validation, and keeps the session
+ * heartbeat running while the broadcast is on.
+ *
+ * The render decision itself is `screen`, computed by the pure
+ * `selectBroadcastScreen`, so what is on the page is decided by rules that can
+ * be checked without a browser.
  */
 export function useBroadcastWatch(broadcastId?: string) {
-  const broadcasts = useLiveBroadcasts();
+  const broadcastQuery = useLiveBroadcast(broadcastId);
+  const pollQuery = useLiveBroadcastPoll(broadcastId);
   const validatePass = useValidateBroadcastPass();
+  const sessionApi = useBroadcastSessionApi();
+
   const [pass, setPass] = useState<IBroadcastPass | null>(null);
+  const [hasValidPass, setHasValidPass] = useState(false);
+  const [isSessionLoading, setIsSessionLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const pingRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const broadcast = useMemo(
-    () => broadcasts.data?.find((b) => b.id === broadcastId),
-    [broadcasts.data, broadcastId],
+  const broadcast = broadcastQuery.data;
+  const polled = pollQuery.data;
+
+  const startPing = useCallback(
+    (sessionId: string) => {
+      if (!broadcastId) return;
+      if (pingRef.current) clearInterval(pingRef.current);
+      pingRef.current = setInterval(() => {
+        sessionApi.sessionPing(broadcastId, sessionId).catch(() => {
+          // A dropped heartbeat is not worth interrupting the stream over. The
+          // server ages the session out and the next ping re-establishes it.
+        });
+      }, SESSION_PING_MS);
+    },
+    // `sessionApi` is rebuilt every render (it closes over the Axios client), so
+    // it is deliberately not a dependency: including it would restart the
+    // heartbeat on every render and reset the interval before it ever fired.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [broadcastId],
   );
 
-  // Derive lifecycle from the broadcast timestamps (no explicit status field).
-  const isEnded = !!broadcast?.endedAt;
-  const isLive = !!broadcast?.startedAt && !broadcast?.endedAt;
-  const status: "scheduled" | "live" | "ended" | undefined = !broadcast
-    ? undefined
-    : isEnded
-      ? "ended"
-      : isLive
-        ? "live"
-        : "scheduled";
+  // Re-open a session parked in storage by an earlier visit. Until this settles
+  // the page shows nothing, so a returning viewer never sees the ticket box
+  // flash before their existing pass is recognised.
+  useEffect(() => {
+    if (!broadcastId) return;
+    const sessionId = readSessionId(broadcastId);
+    if (!sessionId) {
+      setIsSessionLoading(false);
+      return;
+    }
+    let cancelled = false;
+    sessionApi
+      .validateSession(broadcastId, sessionId)
+      .then((restored) => {
+        if (cancelled) return;
+        setPass(restored);
+        setHasValidPass(true);
+        startPing(restored.sessionId);
+      })
+      .catch(() => {
+        // A session the server no longer honours simply means "ask for the
+        // ticket again". It is not an error the viewer needs to read.
+      })
+      .finally(() => {
+        if (!cancelled) setIsSessionLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [broadcastId, startPing]);
 
+  const isEnded = hasBroadcastEnded(broadcast, polled);
+
+  // Once it has ended there is nobody to be counted as watching.
+  useEffect(() => {
+    if (isEnded && pingRef.current) {
+      clearInterval(pingRef.current);
+      pingRef.current = null;
+    }
+  }, [isEnded]);
+
+  useEffect(
+    () => () => {
+      if (pingRef.current) clearInterval(pingRef.current);
+    },
+    [],
+  );
+
+  /**
+   * Present a ticket code. On acceptance the session id is parked in storage so
+   * a refresh does not re-ask for it, and the heartbeat starts.
+   */
   const validate = async (eventPassId: string, sessionId?: string) => {
     setError(null);
     if (!broadcastId) return;
     try {
-      const result = await validatePass.mutateAsync({ broadcastId, eventPassId, sessionId });
+      const result = await validatePass.mutateAsync({
+        broadcastId,
+        eventPassId,
+        sessionId: sessionId ?? readSessionId(broadcastId) ?? undefined,
+      });
+      setHasValidPass(true);
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(broadcastSessionKey(broadcastId), result.sessionId);
+      }
       setPass(result);
+      startPing(result.sessionId);
       return result;
     } catch (e) {
       setError(errMessage(e));
@@ -45,15 +145,68 @@ export function useBroadcastWatch(broadcastId?: string) {
     }
   };
 
+  /**
+   * Leave deliberately. The server is told first (so the audience count drops
+   * now rather than when the heartbeat ages out), then the stored session goes,
+   * so the next visit starts clean.
+   */
+  const leave = useCallback(() => {
+    if (!broadcastId) return;
+    sessionApi.leave(broadcastId, readSessionId(broadcastId) ?? undefined).catch(() => {
+      // Best effort. The session ages out on its own.
+    });
+    if (typeof localStorage !== "undefined") {
+      localStorage.removeItem(broadcastSessionKey(broadcastId));
+    }
+    setHasValidPass(false);
+    if (pingRef.current) {
+      clearInterval(pingRef.current);
+      pingRef.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [broadcastId]);
+
+  const isLive = !!broadcast?.startedAt && !broadcast?.endedAt;
+  const status: "scheduled" | "live" | "ended" | undefined = !broadcast
+    ? undefined
+    : isEnded
+      ? "ended"
+      : isLive
+        ? "live"
+        : "scheduled";
+
+  const screen: BroadcastScreen = selectBroadcastScreen({
+    broadcast,
+    polled,
+    isBroadcastLoading: broadcastQuery.isLoading,
+    isSessionLoading,
+    error: broadcastQuery.error,
+    hasValidPass,
+    pass,
+  });
+
   return {
     broadcast,
-    isLoading: broadcasts.isLoading,
+    /** The polled copy. Only its `endedAt` is acted on. */
+    polled,
+    isLoading: broadcastQuery.isLoading,
+    /** True while a stored session is being re-checked. */
+    isSessionLoading,
+    /** The failure of the broadcast READ, as opposed to a rejected ticket. */
+    loadError: broadcastQuery.error,
     status,
     isLive,
     isEnded,
+    /** Does this broadcast sit behind a ticket at all? */
+    isGated: needsPassValidation(broadcast),
     pass,
+    hasValidPass,
     validate,
+    leave,
     isValidating: validatePass.isPending,
+    /** The rejected-ticket message, for the viewer to read. */
     error,
+    /** What to draw. */
+    screen,
   };
 }