@tribe-nest/forge 3.39.0 → 3.42.0

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

@@ -314,3 +314,44 @@ describe("programTracks", () => {
     expect(tracks.audioProducerIds).toEqual(["a2"]);
   });
 });
+
+describe("the relay lane", () => {
+  const base = {
+    realtimeAvailable: true,
+    credentialsReady: true,
+    credentialsError: null,
+  } as const;
+
+  it("prefers the relay over the plane when both are offered", () => {
+    expect(chooseBroadcastStage({ ...base, moqAvailable: true })).toBe("moq");
+  });
+
+  it("is not a fallback: a working relay is the best lane there is", () => {
+    expect(broadcastFellBack({ ...base, moqAvailable: true })).toBe(false);
+  });
+
+  it("falls to the plane when the relay lane is over and a plane is offered", () => {
+    expect(chooseBroadcastStage({ ...base, moqAvailable: true, moqFailed: true })).toBe("realtime");
+  });
+
+  // The shape of a relay-only instance: `viewer-token` answered with `moq` and
+  // `credentials: null`. Falling to "realtime" here would mount a room that
+  // does not exist and show a black rectangle for ever.
+  it("falls to hls when the relay is over and there is no plane behind it", () => {
+    expect(
+      chooseBroadcastStage({ ...base, moqAvailable: true, moqFailed: true, planeAvailable: false }),
+    ).toBe("hls");
+    expect(
+      broadcastFellBack({ ...base, moqAvailable: true, moqFailed: true, planeAvailable: false }),
+    ).toBe(true);
+  });
+
+  it("still draws nothing while the ticket is in flight", () => {
+    expect(chooseBroadcastStage({ ...base, credentialsReady: false, moqAvailable: true })).toBe("pending");
+  });
+
+  it("leaves every existing caller unchanged", () => {
+    expect(chooseBroadcastStage(base)).toBe("realtime");
+    expect(chooseBroadcastStage({ ...base, realtimeAvailable: false })).toBe("hls");
+  });
+});

package/src/ui/styled/_tests/pollResults.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+
+import { pollPercentages, type PollLike } from "../broadcast/pollResults";
+
+const poll = (counts: number[]): PollLike => ({
+  totalVotes: counts.reduce((a, b) => a + b, 0),
+  options: counts.map((voteCount, i) => ({ id: `o${i}`, label: `Option ${i}`, voteCount })),
+});
+
+const percents = (counts: number[]) => pollPercentages(poll(counts)).map((r) => r.percent);
+
+describe("pollPercentages", () => {
+  it("shows nothing rather than an even split before anybody votes", () => {
+    // "50% / 50%" on an untouched poll claims two votes that were never cast.
+    expect(percents([0, 0])).toEqual([0, 0]);
+    expect(percents([0, 0, 0])).toEqual([0, 0, 0]);
+  });
+
+  it("adds up to 100 where naive rounding shows 99", () => {
+    // One vote each on three options: 33.33 floored three times is 99.
+    expect(percents([1, 1, 1]).reduce((a, b) => a + b, 0)).toBe(100);
+    expect(percents([1, 2]).reduce((a, b) => a + b, 0)).toBe(100);
+    expect(percents([1, 1, 1, 1, 1, 1]).reduce((a, b) => a + b, 0)).toBe(100);
+  });
+
+  it("gives the spare point to the biggest remainder", () => {
+    // 1/3 = 33.33 (remainder .33), 2/3 = 66.67 (remainder .67).
+    expect(percents([1, 2])).toEqual([33, 67]);
+  });
+
+  it("is exact when it can be", () => {
+    expect(percents([1, 1])).toEqual([50, 50]);
+    expect(percents([1, 3])).toEqual([25, 75]);
+    expect(percents([7, 3])).toEqual([70, 30]);
+  });
+
+  it("gives a unanimous poll all of it", () => {
+    expect(percents([5, 0, 0])).toEqual([100, 0, 0]);
+  });
+
+  it("breaks a remainder tie the same way every time", () => {
+    // Two options tied on both share and votes: the earlier one wins, so the
+    // overlay does not swap them between renders of an unchanged tally.
+    const first = percents([1, 1, 1]);
+    const second = percents([1, 1, 1]);
+    expect(first).toEqual(second);
+    expect(first.reduce((a, b) => a + b, 0)).toBe(100);
+  });
+
+  it("keeps the labels and the raw counts, which are shown beside the bar", () => {
+    const results = pollPercentages(poll([3, 1]));
+    expect(results.map((r) => r.label)).toEqual(["Option 0", "Option 1"]);
+    expect(results.map((r) => r.voteCount)).toEqual([3, 1]);
+  });
+
+  it("survives a poll with no options at all", () => {
+    expect(pollPercentages({ totalVotes: 0, options: [] })).toEqual([]);
+  });
+
+  it("holds up on a large tally", () => {
+    const counts = [4321, 987, 65, 4];
+    const result = percents(counts);
+    expect(result.reduce((a, b) => a + b, 0)).toBe(100);
+    expect(result[0]).toBeGreaterThan(result[1]);
+  });
+});

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

@@ -0,0 +1,124 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * The relay stage: a broadcast watched over MoQ.
+ *
+ * The player is a VENDORED bundle (`vendor/moq-watch.bundle.js`), not an npm
+ * dependency, because Forge ships source: its `exports` point at `./src/*.ts`
+ * with no build step, so anything it depends on is something every creator site
+ * has to resolve too, and `@moq/json` peer-depends on zod 4 against this repo's
+ * zod 3. See `scripts/build-moq-player.mjs`.
+ *
+ * Loaded LAZILY by the player, never imported on this file's module path,
+ * for the same reason `BroadcastRealtimeStage` is: Forge renders inside
+ * TanStack Start on Cloudflare Workers, and `@moq/watch` reaches for
+ * WebTransport, WebCodecs and a decoder worker the moment it is evaluated.
+ * An effect is code no server ever runs.
+ *
+ * The element is created imperatively rather than written as JSX because it is
+ * a custom element: JSX would need an ambient declaration in every consuming
+ * app, and `document.createElement` needs none.
+ */
+
+export type BroadcastMoqStageProps = {
+  /** The relay URL with the viewer ticket already on it. */
+  url: string;
+  /** The broadcast name beneath the ticket's root. */
+  name: string;
+  muted: boolean;
+  /**
+   * The lane is over: the player should fall back.
+   *
+   * Reported upward rather than handled here for the same reason the plane
+   * stage reports its room state upward: falling back means unmounting this
+   * component, and a component cannot unmount itself. There is one
+   * `chooseBroadcastStage` and it lives above.
+   */
+  onFailed: (reason: string) => void;
+};
+
+export function BroadcastMoqStage({ url, name, muted, onFailed }: BroadcastMoqStageProps) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  // Held in a ref so the effect below does not re-run when the player
+  // re-renders with a new closure, which would tear down a working player.
+  const onFailedRef = useRef(onFailed);
+  onFailedRef.current = onFailed;
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    let cancelled = false;
+    let element: HTMLElement | undefined;
+
+    const mount = async () => {
+      try {
+        // Imported for its side effect: the module registers <moq-watch>.
+        await import("./vendor/moq-watch.bundle.js");
+      } catch (error) {
+        // The chunk did not load at all. Identical in consequence to a refused
+        // ticket, and it falls back the same way.
+        onFailedRef.current(`moq player failed to load: ${(error as Error).message}`);
+        return;
+      }
+      if (cancelled) return;
+
+      element = document.createElement("moq-watch");
+      element.setAttribute("url", url);
+      element.setAttribute("name", name);
+      if (muted) element.setAttribute("muted", "");
+      /**
+       * `always`, not the default.
+       *
+       * The default is a visibility THRESHOLD ("20%") driven by an
+       * IntersectionObserver, and until it is met the renderer reports itself
+       * hidden, which disables the decoder, which never subscribes to the video
+       * track. A player inside a tab that has not been scrolled, or measured
+       * before layout settles, shows black for ever rather than late.
+       */
+      element.setAttribute("visible", "always");
+      element.style.width = "100%";
+      element.style.height = "100%";
+      element.style.display = "block";
+
+      /**
+       * The nested canvas the renderer paints into, and it is REQUIRED.
+       *
+       * `<moq-watch>` finds its render target by querying its own children. With
+       * no canvas there is no target, so the renderer is never visible, so
+       * `video.in.enabled` stays false and the decoder never subscribes. Every
+       * symptom of this is silent: the connection is established, the catalog
+       * arrives with the video rendition, the config resolves, and the relay
+       * shows only a `catalog.json` subscription and never a `video` one.
+       */
+      const canvas = document.createElement("canvas");
+      canvas.style.width = "100%";
+      canvas.style.height = "100%";
+      canvas.style.display = "block";
+      element.appendChild(canvas);
+
+      // A relay that refuses the ticket, or a broadcast that is not there,
+      // surfaces as an error event rather than a throw: the element owns its
+      // own reconnect loop and never rejects the caller.
+      element.addEventListener("error", () => {
+        onFailedRef.current("the relay connection failed");
+      });
+
+      host.replaceChildren(element);
+    };
+
+    void mount();
+
+    return () => {
+      cancelled = true;
+      // `replaceChildren()` disconnects the element, and its
+      // `disconnectedCallback` closes the connection and the decoders. Leaving
+      // it attached would keep a QUIC session and a decode pipeline alive for a
+      // stage the viewer has already left.
+      host.replaceChildren();
+      element = undefined;
+    };
+  }, [url, name, muted]);
+
+  return <div ref={hostRef} className="h-full w-full bg-black" />;
+}

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

@@ -28,13 +28,40 @@ import {
 // `mediasoup-client`, and a value import here would put a browser-only package
 // on the server path of every site that loads `@tribe-nest/forge/ui`. It is
 // reached through the `import()` in the effect below, which no server runs.
+import type { BroadcastMoqStageProps } from "./BroadcastMoqStage";
 import type { BroadcastRealtimeStageProps } from "./BroadcastRealtimeStage";
 
+/** The relay lane's half of a `viewer-token` response. */
+type BroadcastMoqCredentials = { url: string; name: string; expiresAt: string; path: string };
+
+/**
+ * Renders the lazily-loaded relay stage.
+ *
+ * A named component rather than `<moqStage ... />` inline: a component read out
+ * of state and rendered directly is a new type on every render that produces a
+ * different one, which unmounts and remounts the player underneath. Naming it
+ * here keeps the element type stable across renders.
+ */
+function MoqStageRenderer({
+  Stage,
+  ...props
+}: BroadcastMoqStageProps & { Stage: ComponentType<BroadcastMoqStageProps> }) {
+  return <Stage {...props} />;
+}
+import { BroadcastPollPanel } from "./BroadcastPollPanel";
+import { useBroadcastPoll } from "../../headless/broadcast/useBroadcastPoll";
+import type { BroadcastPoll } from "../../../data/queries/useBroadcasts";
+
 /** The socket messages a watching browser sends and receives. */
 const SocketEvent = {
   BroadcastChatMessage: "broadcastChatMessage",
   BroadcastJoin: "broadcastJoin",
   BroadcastPinComment: "broadcastPinComment",
+  // Server to viewer only. A vote goes over HTTP, because it needs the unique
+  // index behind it; the result comes back here to everyone watching.
+  BroadcastPollStarted: "broadcastPollStarted",
+  BroadcastPollResults: "broadcastPollResults",
+  BroadcastPollEnded: "broadcastPollEnded",
 } as const;
 
 /**
@@ -124,15 +151,20 @@ export interface BroadcastPlayerProps {
  *
  * ## Why the quality picker is not on the new path
  *
- * The plane has no simulcast. Every viewer receives the program feed's single
- * encoding, so High, Medium and Low would be three controls that change
- * nothing. A control that lies about what it does is worse than no control.
+ * The plane DOES publish three simulcast layers now (`REALTIME_PROGRAM_VIDEO`),
+ * so the old reason for leaving the picker off - "there is only one encoding,
+ * three buttons would all do nothing" - no longer holds. What holds instead is
+ * that the node's own layer choice tracks the viewer's actual bandwidth, and a
+ * manual override is a way to pin yourself to a layer your connection cannot
+ * carry. The picker below stays on the v1 Cloudflare path, which is where it
+ * was built and where it is wired.
  */
 export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: BroadcastPlayerProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
   const { apiUrl, profileId } = useForge();
   const sessionApi = useBroadcastSessionApi();
+  const poll = useBroadcastPoll(broadcast.id);
 
   const [comments, setComments] = useState<BroadcastComment[]>([]);
   const [comment, setComment] = useState("");
@@ -169,6 +201,17 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
   const [PlaneStage, setPlaneStage] = useState<ComponentType<BroadcastRealtimeStageProps> | null>(null);
   const [credentialsReady, setCredentialsReady] = useState(false);
   const [credentialsError, setCredentialsError] = useState<BroadcastCredentialsError | null>(null);
+  /**
+   * The relay lane, as `viewer-token` reported it.
+   *
+   * Held separately from the plane credentials because the two are independent
+   * answers: an instance may offer a relay and no plane, a plane and no relay,
+   * or both. `planeAvailable` reads the plane's half off the same response.
+   */
+  const [moqStage, setMoqStage] = useState<ComponentType<BroadcastMoqStageProps> | null>(null);
+  const [moqCredentials, setMoqCredentials] = useState<BroadcastMoqCredentials | null>(null);
+  const [moqFailed, setMoqFailed] = useState(false);
+  const [planeAvailable, setPlaneAvailable] = useState(true);
   const [roomState, setRoomState] = useState<BroadcastRoomState | undefined>(undefined);
   /** The ticket the probe already minted, spent on the SDK's FIRST attempt. */
   const primedCredentials = useRef<BroadcastViewerCredentials | null>(null);
@@ -214,6 +257,24 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
         if (cancelled) return;
         primedCredentials.current = credentials;
         setPlaneStage(() => module.BroadcastRealtimeStage);
+        // A response with no `mediaUrl` is a relay-only instance. Recording it
+        // is what stops the chooser falling to a plane room that is not there
+        // if the relay lane later gives up.
+        setPlaneAvailable(Boolean((credentials as { mediaUrl?: string }).mediaUrl));
+        const moq = (credentials as { moq?: BroadcastMoqCredentials }).moq ?? null;
+        setMoqCredentials(moq);
+        if (moq) {
+          import("./BroadcastMoqStage")
+            .then((moqModule) => {
+              if (cancelled) return;
+              setMoqStage(() => moqModule.BroadcastMoqStage);
+            })
+            .catch(() => {
+              if (cancelled) return;
+              // The relay chunk did not load. The lane is over before it began.
+              setMoqFailed(true);
+            });
+        }
         setCredentialsReady(true);
       })
       .catch((error: unknown) => {
@@ -257,11 +318,27 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
    */
   const handleRoomState = useCallback((next: BroadcastRoomState) => setRoomState(next), []);
 
+  /**
+   * The relay lane gave up. Never cleared back to false, for the same reason
+   * `roomState` is never cleared: the failure is why we left, so forgetting it
+   * would choose the relay again, mount it again, and watch it fail again.
+   */
+  const handleMoqFailed = useCallback(() => setMoqFailed(true), []);
+
   const stageInput = useMemo(
-    () => ({ realtimeAvailable, credentialsReady, credentialsError, roomState }),
-    [realtimeAvailable, credentialsReady, credentialsError, roomState],
+    () => ({
+      realtimeAvailable,
+      credentialsReady,
+      credentialsError,
+      roomState,
+      moqAvailable: Boolean(moqCredentials && moqStage),
+      moqFailed,
+      planeAvailable,
+    }),
+    [realtimeAvailable, credentialsReady, credentialsError, roomState, moqCredentials, moqStage, moqFailed, planeAvailable],
   );
   const stage = chooseBroadcastStage(stageInput);
+  const showMoq = stage === "moq" && !!moqStage && !!moqCredentials;
   const showPlane = stage === "realtime" && !!PlaneStage;
   // Nothing is mounted while the ticket is in flight. `react-player` builds an
   // hls.js instance on mount and starts fetching immediately, so rendering the
@@ -364,6 +441,17 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
         setComments((prev) => [...prev, data.message]);
         return;
       }
+      if (
+        message.event === SocketEvent.BroadcastPollStarted ||
+        message.event === SocketEvent.BroadcastPollResults
+      ) {
+        poll.onPollEvent((message.data as { poll: BroadcastPoll }).poll);
+        return;
+      }
+      if (message.event === SocketEvent.BroadcastPollEnded) {
+        poll.onPollEvent(null);
+        return;
+      }
       if (message.event === SocketEvent.BroadcastPinComment) {
         const data = message.data as { broadcastId: string; comment: BroadcastComment | null };
         setPinnedComment(data.comment);
@@ -371,7 +459,7 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
     });
 
     socketRef.current = socket;
-  }, [apiUrl, profileId, broadcast.id]);
+  }, [apiUrl, profileId, broadcast.id, poll.onPollEvent]);
 
   const sendComment = () => {
     if (!profileId || !socketRef.current || !comment.trim()) return;
@@ -461,6 +549,19 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
       }}
     >
       <div style={{ flex: "1 1 520px", minWidth: 0, ...panel }}>
+        {showMoq && moqStage && moqCredentials && (
+          <MoqStageRenderer
+            Stage={moqStage}
+            url={moqCredentials.url}
+            name={moqCredentials.name}
+            // Not muted: this is the broadcast the viewer came for, and the
+            // plane stage does not mute either. The element paints video to a
+            // canvas independently of its audio emitter, so a browser that
+            // blocks autoplay audio still shows a picture rather than nothing.
+            muted={false}
+            onFailed={handleMoqFailed}
+          />
+        )}
         {showPlane && PlaneStage && <PlaneStage getCredentials={getCredentials} onRoomState={handleRoomState} />}
 
         {stage === "pending" && (
@@ -470,7 +571,26 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
         )}
 
         {showHls && (
-          <div data-testid="broadcast-hls-stage" style={{ aspectRatio: "16/9" }}>
+          /*
+            The ratio box, and INSIDE it an absolutely filled box that the
+            player cannot resize.
+
+            `renderPlayer` is host-supplied (the starter passes `react-player`),
+            so this cannot dictate how the player sizes itself - and the
+            conventional `height: "100%"` a player is given resolves against a
+            parent whose height comes from `aspect-ratio`, which is not reliably
+            a definite height. The player then falls back to the stream's
+            intrinsic size and the panel jumps every time HLS changes rendition.
+
+            An absolutely positioned `inset: 0` box HAS a definite height, so a
+            child asking for 100% gets a real answer, and nothing the child does
+            can change the box it is in.
+          */
+          <div
+            data-testid="broadcast-hls-stage"
+            style={{ aspectRatio: "16/9", position: "relative", lineHeight: 0 }}
+          >
+            <div style={{ position: "absolute", inset: 0 }}>
             {renderPlayer ? (
               renderPlayer({ src: broadcast.liveUrl })
             ) : (
@@ -479,9 +599,20 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
                 controls
                 autoPlay
                 playsInline
-                style={{ width: "100%", height: "100%", background: "#000" }}
+                // Same reasoning as the realtime stage below: HLS renditions
+                // change resolution mid-stream too, and `height: 100%` off an
+                // `aspect-ratio` parent leaves the box following the source.
+                style={{
+                  display: "block",
+                  width: "100%",
+                  height: "auto",
+                  aspectRatio: "16 / 9",
+                  objectFit: "contain",
+                  background: "#000",
+                }}
               />
             )}
+            </div>
           </div>
         )}
 
@@ -519,9 +650,44 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
             onClick={togglePlay}
             onMouseEnter={() => setShowControls(true)}
             onMouseLeave={() => setShowControls(false)}
-            style={{ aspectRatio: "16/9", position: "relative", background: "#000", cursor: "pointer" }}
+            style={{
+              aspectRatio: "16/9",
+              position: "relative",
+              background: "#000",
+              cursor: "pointer",
+              lineHeight: 0,
+            }}
           >
-            <video ref={videoRef} playsInline style={{ width: "100%", height: "100%" }} />
+            {/*
+              The RATIO is on the video element itself, and `height` is `auto`.
+
+              This is the same fix `BroadcastRealtimeStage` carries, and this
+              path is where it was actually needed: it is the one with a quality
+              picker, so the incoming resolution changes whenever the viewer
+              chooses a layer (or the auto policy chooses one for them).
+
+              `height: 100%` did not hold the box still. A percentage height
+              needs a definite parent height, and one derived from the parent's
+              own `aspect-ratio` is not reliably that, so the replaced element
+              fell back to the track's INTRINSIC height and the whole panel
+              jumped on every quality change. `aspect-ratio` with `height: auto`
+              overrides the intrinsic ratio outright: the box is 16/9 of
+              whatever width it is given, whatever arrives on the wire.
+
+              `object-fit: contain` then letterboxes a source that is not 16/9
+              inside that fixed box rather than resizing the box to suit it.
+            */}
+            <video
+              ref={videoRef}
+              playsInline
+              style={{
+                display: "block",
+                width: "100%",
+                height: "auto",
+                aspectRatio: "16 / 9",
+                objectFit: "contain",
+              }}
+            />
             <audio ref={audioRef} />
 
             {(!isAudioLoaded || !isVideoLoaded) && (
@@ -654,6 +820,8 @@ export function BroadcastPlayer({ broadcast, broadcastPass, renderPlayer }: Broa
           {t("forge.broadcast_player.chat")}
         </p>
 
+        <BroadcastPollPanel poll={poll} />
+
         {pinnedComment && (
           <div
             data-testid="broadcast-pinned-comment"

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

@@ -0,0 +1,124 @@
+import { BarChart3 } from "lucide-react";
+
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { pollPercentages } from "./pollResults";
+import type { BroadcastPollApi } from "../../headless/broadcast/useBroadcastPoll";
+
+/**
+ * The poll, beside the stream.
+ *
+ * This is the interactive half of the feature. The other half is a results
+ * block composited into the video itself by the studio, which is what an
+ * audience on YouTube or Twitch sees: they get the outcome, and only viewers on
+ * the creator's own site can actually answer.
+ *
+ * ## Results are shown after voting, not before
+ *
+ * A poll that shows the tallies while you are still choosing is not measuring
+ * what the room thinks, it is measuring what the room saw the room think. So
+ * the options are buttons until this browser has answered, and bars afterwards.
+ * A closed poll goes straight to bars for everybody.
+ */
+export function BroadcastPollPanel({ poll: api }: { poll: BroadcastPollApi }) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const { poll, votedOptionId, voting, error } = api;
+
+  if (!poll || poll.status === "draft") return null;
+
+  const showResults = !!votedOptionId || poll.status !== "live";
+  const results = pollPercentages(poll);
+
+  return (
+    <div
+      data-testid="broadcast-poll"
+      style={{
+        margin: "8px 16px 0",
+        padding: 12,
+        backgroundColor: `${theme.colors.primary}15`,
+        border: `1px solid ${theme.colors.primary}50`,
+        borderRadius: theme.cornerRadius,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
+        <BarChart3 size={14} style={{ color: theme.colors.primary, flexShrink: 0 }} />
+        <span style={{ fontSize: 12, fontWeight: 500, color: theme.colors.primary }}>
+          {poll.status === "live" ? t("forge.broadcast_poll.live") : t("forge.broadcast_poll.closed")}
+        </span>
+      </div>
+
+      <p style={{ fontSize: 14, fontWeight: 500, marginBottom: 10 }}>{poll.question}</p>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        {results.map((option) => {
+          const chosen = option.id === votedOptionId;
+
+          if (!showResults) {
+            return (
+              <button
+                key={option.id}
+                type="button"
+                disabled={voting}
+                onClick={() => api.vote(option.id)}
+                style={{
+                  textAlign: "left",
+                  padding: "8px 12px",
+                  fontSize: 14,
+                  cursor: voting ? "default" : "pointer",
+                  borderRadius: theme.cornerRadius,
+                  border: `1px solid ${theme.colors.primary}50`,
+                  background: "transparent",
+                  color: "inherit",
+                  opacity: voting ? 0.6 : 1,
+                }}
+              >
+                {option.label}
+              </button>
+            );
+          }
+
+          return (
+            <div key={option.id}>
+              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 2 }}>
+                <span style={{ fontWeight: chosen ? 600 : 400 }}>
+                  {option.label}
+                  {chosen ? ` ${t("forge.broadcast_poll.your_vote")}` : ""}
+                </span>
+                <span style={{ opacity: 0.7 }}>{option.percent}%</span>
+              </div>
+              <div
+                style={{
+                  height: 6,
+                  borderRadius: 3,
+                  overflow: "hidden",
+                  backgroundColor: `${theme.colors.primary}25`,
+                }}
+              >
+                <div
+                  style={{
+                    height: "100%",
+                    width: `${option.percent}%`,
+                    backgroundColor: theme.colors.primary,
+                    transition: "width 200ms",
+                  }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <p style={{ fontSize: 12, opacity: 0.7, marginTop: 8 }}>
+        {poll.totalVotes === 1
+          ? t("forge.broadcast_poll.votes_one", { count: poll.totalVotes })
+          : t("forge.broadcast_poll.votes_other", { count: poll.totalVotes })}
+      </p>
+
+      {/* An error the viewer has to act on (press it again), so it is visible. */}
+      {error && <p style={{ fontSize: 12, marginTop: 4, color: theme.colors.primary }}>{error}</p>}
+    </div>
+  );
+}
+
+export default BroadcastPollPanel;

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

@@ -48,9 +48,12 @@ import { programTracks, type BroadcastRoomState } from "./broadcastStage";
  * mute plus a blank screen plus a lie about being able to go back. The HLS
  * stage keeps its transport controls because there the buffer makes them true.
  *
- * There is no quality selector either. The plane has no simulcast: every viewer
- * receives the program feed's single encoding, so a picker offering High,
- * Medium and Low would be three buttons that all do the same nothing.
+ * There is no quality selector either, though not for the reason there used to
+ * be: the program feed publishes three simulcast layers, and the node moves a
+ * viewer between them on its own reading of their connection. A manual override
+ * is mostly a way to pin yourself above what your link can carry, so the choice
+ * stays with the node. What this file owes the viewer instead is that the
+ * SWITCH is invisible, which is what the sizing below is about.
  */
 
 export type BroadcastRealtimeStageProps = {