@tribe-nest/forge 3.42.0 → 3.48.0

package/src/ui/media/stage/stageTheme.ts

@@ -0,0 +1,50 @@
+import type { ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+
+/**
+ * The call stage's palette: a dark stage, with the site's accents.
+ *
+ * THE one sanctioned exception to "colors only from theme tokens" (a locked
+ * product decision): the call screen commits to a near-black chrome on every
+ * surface, the way every video product does, because faces read against dark
+ * and a light-themed site would otherwise produce a white call screen. The
+ * neutral constants live in THIS file and nowhere else; every accent (the
+ * speaking ring, active buttons, badges, danger) still flows from the theme,
+ * so the stage is recognisably the site's.
+ */
+export type StageTokens = {
+  /** Near-black stage floor. */
+  stageBg: string;
+  /** Tiles, panels, dialogs: one step up from the floor. */
+  stageSurface: string;
+  /** The control bar and top bar: one more step. */
+  stageChrome: string;
+  stageText: string;
+  stageMuted: string;
+  stageBorder: string;
+  /** The site's primary: speaking ring, active controls, badges. */
+  accent: string;
+  /** Text on the accent. */
+  accentText: string;
+  /** The site's alarming color: leave, recording dot, errors. */
+  danger: string;
+  cornerRadius: number;
+  fontFamily?: string | undefined;
+  headingFontFamily?: string | undefined;
+};
+
+export function stageTokens(tokens: ResolvedThemeTokens): StageTokens {
+  return {
+    stageBg: "#0c0d10",
+    stageSurface: "#17181d",
+    stageChrome: "#1e2026",
+    stageText: "#f4f5f7",
+    stageMuted: "#9aa0ab",
+    stageBorder: "#2c2f37",
+    accent: tokens.primary,
+    accentText: tokens.textPrimary,
+    danger: tokens.secondary,
+    cornerRadius: tokens.cornerRadius,
+    fontFamily: tokens.fontFamily,
+    headingFontFamily: tokens.headingFontFamily,
+  };
+}

package/src/ui/styled/broadcast/BroadcastPlayer.tsx

@@ -159,6 +159,14 @@ export interface BroadcastPlayerProps {
  * carry. The picker below stays on the v1 Cloudflare path, which is where it
  * was built and where it is wired.
  */
+/**
+ * How long the v1 Cloudflare lane may deliver nothing before HLS takes over.
+ *
+ * Long enough that a slow negotiation is not cut off, short enough that a
+ * viewer is not staring at a spinner while the broadcast is being published.
+ */
+const LEGACY_REALTIME_DEADLINE_MS = 12_000;
+
 export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: BroadcastPlayerProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
@@ -175,6 +183,21 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
   const videoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
   const videoContainerRef = useRef<HTMLDivElement>(null);
+  /**
+   * The v1 Cloudflare lane gave up, so HLS may have the viewer.
+   *
+   * The plane and the relay both fall back: every way they can fail ends at
+   * HLS, and `chooseBroadcastStage` holds that rule. The v1 lane had no such
+   * exit. `isLegacyRealtime` SUPPRESSED the HLS stage outright, so a broadcast
+   * whose Cloudflare room was gone - retired, expired, never created for a v2
+   * broadcast that still carries a stale `realtimeConfig` - showed a spinner
+   * and nothing else, for ever, with no way for the viewer to reach a stream
+   * that was being published the whole time.
+   *
+   * Reported from production as a live HLS broadcast showing nothing on the
+   * site.
+   */
+  const [legacyFailed, setLegacyFailed] = useState(false);
   const [isAudioLoaded, setIsAudioLoaded] = useState(false);
   const [isVideoLoaded, setIsVideoLoaded] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -344,7 +367,7 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
   // hls.js instance on mount and starts fetching immediately, so rendering the
   // HLS stage "meanwhile" made every realtime viewer download the broadcast a
   // second time, over the CDN, for a stage that was about to be replaced.
-  const showHls = stage === "hls" && !isLegacyRealtime;
+  const showHls = stage === "hls" && (!isLegacyRealtime || legacyFailed);
   const fellBack = broadcastFellBack(stageInput);
 
   const { data: audienceData } = useBroadcastAudience(broadcast.id, !broadcast.endedAt);
@@ -363,6 +386,24 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
     });
   }, [comments]);
 
+  /**
+   * The v1 lane also fails by never arriving, which no `catch` will report.
+   *
+   * A peer connection that negotiates and then delivers no track raises
+   * nothing at all: `subscribe()` resolves, and the viewer watches a spinner.
+   * So the deadline is the backstop, and it is what makes the fallback
+   * guaranteed rather than dependent on the failure being the polite kind.
+   *
+   * Twelve seconds: long enough that a slow negotiation is not cut off, short
+   * enough that a viewer is not staring at nothing while the broadcast runs.
+   */
+  useEffect(() => {
+    if (!isLegacyRealtime || legacyFailed) return;
+    if (isVideoLoaded || isAudioLoaded) return;
+    const timer = setTimeout(() => setLegacyFailed(true), LEGACY_REALTIME_DEADLINE_MS);
+    return () => clearTimeout(timer);
+  }, [isLegacyRealtime, legacyFailed, isVideoLoaded, isAudioLoaded]);
+
   // ── WebRTC subscription, v1 (Cloudflare Calls) ─────────────────────────────
   useEffect(() => {
     const config = broadcast.realtimeConfig;
@@ -413,9 +454,10 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
     };
 
     subscribe().catch(() => {
-      // Nothing useful to say to a viewer here: the spinner over the stage is
-      // already the honest report that no track arrived.
+      // A spinner is not an honest report when there is a stream the viewer
+      // could be watching. Falling back is.
       isSubscribingRef.current = false;
+      setLegacyFailed(true);
     });
     // `sessionApi` is rebuilt each render and is deliberately not a dependency:
     // including it would re-negotiate the peer connection on every render.
@@ -537,10 +579,45 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
   return (
     <div
       style={{
+        /**
+         * The video dominates, and the chat takes what is left.
+         *
+         * `flexWrap` wraps rather than shrinking, so the two panels stacked
+         * the moment their BASES no longer fit on a line - and with both
+         * growing at the same rate, the chat took half of every extra pixel,
+         * so the video was never big even side by side. On an ordinary
+         * desktop that read as a small video sitting on top of a chat.
+         *
+         * The bases below stay on one line down to about 800px, and the video
+         * grows three times faster than the chat, so the space a wider screen
+         * provides goes almost entirely to the picture. Stacking is then what
+         * happens on a genuinely narrow screen, which is where it is right.
+         */
         display: "flex",
         flexWrap: "wrap",
         gap: 32,
-        padding: 16,
+        // No padding at the TOP: the shell and the close button above already
+        // put the player well down the page, and on a phone that was most of
+        // the first screen spent before any video.
+        padding: "0 16px 16px",
+        /**
+         * FILL the parent rather than being sized by what is inside.
+         *
+         * Without this the container was shrink-to-fit, so its width came from
+         * its content - and the HLS stage puts its player in an absolutely
+         * positioned `inset: 0` box (which is what stops the player resizing
+         * its own container on a rendition change). Absolutely positioned
+         * children contribute NO intrinsic width, so the content measured as
+         * almost nothing and the whole player collapsed to about 400px inside a
+         * 1300px column, then wrapped.
+         *
+         * The realtime stages hid it: they render an in-flow `<video>` with a
+         * real intrinsic width, so the same container came out wide enough. It
+         * looked like "HLS stacks and the SFU does not", and it was neither -
+         * it was a container taking its width from whatever happened to be
+         * inside it.
+         */
+        width: "100%",
         maxWidth: 1700,
         marginInline: "auto",
         flex: 1,
@@ -548,7 +625,7 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
         fontFamily: theme.fontFamily,
       }}
     >
-      <div style={{ flex: "1 1 520px", minWidth: 0, ...panel }}>
+      <div style={{ flex: "3 1 420px", minWidth: 0, ...panel }}>
         {showMoq && moqStage && moqCredentials && (
           <MoqStageRenderer
             Stage={moqStage}
@@ -643,7 +720,7 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
           </div>
         )}
 
-        {isLegacyRealtime && (
+        {isLegacyRealtime && !legacyFailed && (
           <div
             ref={videoContainerRef}
             data-testid="broadcast-realtime-stage"
@@ -815,7 +892,7 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
         </div>
       </div>
 
-      <div style={{ flex: "1 1 340px", maxWidth: 400, height: 600, position: "relative", overflow: "hidden", ...panel }}>
+      <div style={{ flex: "1 1 300px", maxWidth: 400, height: 600, position: "relative", overflow: "hidden", ...panel }}>
         <p style={{ fontSize: 18, padding: 16, borderBottom: `1px solid ${theme.colors.primary}30` }}>
           {t("forge.broadcast_player.chat")}
         </p>

package/src/ui/styled/broadcast/broadcastStage.spec.ts

@@ -0,0 +1,32 @@
+
+/**
+ * The v1 Cloudflare lane must end at HLS like the other two.
+ *
+ * `isLegacyRealtime` SUPPRESSED the HLS stage outright, so a broadcast whose
+ * Cloudflare room was gone - retired, expired, or never created for a v2
+ * broadcast still carrying a stale `realtimeConfig` - showed a spinner and
+ * nothing else, for ever, while HLS was being published the whole time.
+ * Reported from production as a live broadcast showing nothing on the site.
+ *
+ * The rule lives in the component (it needs the lane's load state, which this
+ * pure chooser has no business knowing), so this pins the SHAPE of it: three
+ * lanes, and every one of them has an exit to HLS.
+ */
+describe("every realtime lane has an exit to HLS", () => {
+  const showHls = (input: { stage: string; isLegacyRealtime: boolean; legacyFailed: boolean }) =>
+    input.stage === "hls" && (!input.isLegacyRealtime || input.legacyFailed);
+
+  it("keeps HLS hidden while the v1 lane is still trying", () => {
+    // Not a regression: mounting an HLS engine beside a working realtime lane
+    // makes the viewer download the broadcast twice.
+    expect(showHls({ stage: "hls", isLegacyRealtime: true, legacyFailed: false })).toBe(false);
+  });
+
+  it("shows HLS once the v1 lane has given up", () => {
+    expect(showHls({ stage: "hls", isLegacyRealtime: true, legacyFailed: true })).toBe(true);
+  });
+
+  it("shows HLS normally when there is no v1 lane at all", () => {
+    expect(showHls({ stage: "hls", isLegacyRealtime: false, legacyFailed: false })).toBe(true);
+  });
+});

package/src/ui/styled/broadcast/relayReachable.spec.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { relayIsReachable } from "./relayReachable";
+
+/**
+ * The lane must be able to give up. `<moq-watch>` retries a refused connection
+ * for ever and never raises an `error` event, so without this the viewer sits
+ * on a dead stage while HLS is being published.
+ */
+describe("probing the MoQ relay before handing a viewer to it", () => {
+  it("is reachable when the fingerprint responds", async () => {
+    expect(await relayIsReachable("https://relay.example/room/name", vi.fn(async () => new Response("")))).toBe(true);
+  });
+
+  it("is NOT reachable when the connection is refused", async () => {
+    // The dev case: no relay running on localhost:4444.
+    const refused = vi.fn(async () => {
+      throw new TypeError("Failed to fetch");
+    });
+    expect(await relayIsReachable("http://localhost:4444/room/name", refused)).toBe(false);
+  });
+
+  it("asks the relay ORIGIN, not the ticketed path", async () => {
+    const fetchImpl = vi.fn(async () => new Response(""));
+    await relayIsReachable("https://relay.example/room/name?jwt=abc", fetchImpl);
+    expect(fetchImpl.mock.calls[0]?.[0]).toBe("https://relay.example/certificate.sha256");
+  });
+
+  it("gives up rather than hanging when nothing answers", async () => {
+    const hangs = vi.fn(
+      (_url: string, init?: { signal?: AbortSignal }) =>
+        new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener("abort", () => reject(new Error("aborted")));
+        }),
+    );
+    expect(await relayIsReachable("https://relay.example/x", hangs as unknown as typeof fetch, 10)).toBe(false);
+  });
+
+  it("treats an unparseable URL as unreachable rather than throwing", async () => {
+    expect(await relayIsReachable("not a url", vi.fn())).toBe(false);
+  });
+});

package/src/ui/styled/broadcast/relayReachable.ts

@@ -0,0 +1,47 @@
+/**
+ * Is the MoQ relay actually there, before a viewer is handed to it?
+ *
+ * `<moq-watch>` owns its own reconnect loop: a refused connection produces a
+ * console error and a retry, for ever, and never an `error` event. So the
+ * lane's `onFailed` never fires, `chooseBroadcastStage` keeps answering "moq",
+ * and the HLS stage is never mounted - the viewer watches nothing while the
+ * broadcast is being published the whole time.
+ *
+ * A blind timeout would be the wrong fix: it cannot tell a slow relay from a
+ * dead one and would cut off a stream that was about to work. This asks the
+ * question that actually has an answer. The element fetches
+ * `/certificate.sha256` from the relay origin before it connects; if that is
+ * unreachable, so is the relay, and the lane is over before it began.
+ *
+ * The common case is not an outage. It is a developer with no relay running
+ * locally, where the URL is `http://localhost:4444` and correct.
+ */
+export const RELAY_PROBE_TIMEOUT_MS = 3000;
+
+export async function relayIsReachable(
+  url: string,
+  fetchImpl: typeof fetch = fetch,
+  timeoutMs: number = RELAY_PROBE_TIMEOUT_MS,
+): Promise<boolean> {
+  let origin: string;
+  try {
+    origin = new URL("/certificate.sha256", url).toString();
+  } catch {
+    // An unparseable relay URL is not reachable by any definition.
+    return false;
+  }
+
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    // `no-cors` on purpose: the answer wanted is "did the connection happen",
+    // not what the body says. An opaque response is a reachable relay, and it
+    // keeps this probe from needing CORS the element itself may not need.
+    await fetchImpl(origin, { mode: "no-cors", signal: controller.signal });
+    return true;
+  } catch {
+    return false;
+  } finally {
+    clearTimeout(timer);
+  }
+}

package/src/ui/styled/forge-utilities.css

@@ -331,6 +331,9 @@
     .p-6 {
       padding: calc(var(--spacing) * 6);
     }
+    .p-10 {
+      padding: calc(var(--spacing) * 10);
+    }
     .px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }
@@ -465,6 +468,16 @@
       --tw-ease: var(--ease-out);
       transition-timing-function: var(--ease-out);
     }
+    .sm\:block {
+      @media (width >= 40rem) {
+        display: block;
+      }
+    }
+    .sm\:hidden {
+      @media (width >= 40rem) {
+        display: none;
+      }
+    }
     .sm\:grid-cols-2 {
       @media (width >= 40rem) {
         grid-template-columns: repeat(2, minmax(0, 1fr));