@tribe-nest/forge 3.39.0 → 3.42.0

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

@@ -28,7 +28,16 @@ import type { ConnectionState, DisconnectCause, ProducerEntry, RoomState } from
  * picture.
  */
 
-/** `realtime` is the media plane. `hls` is the stream everybody can always watch. */
+/**
+ * `moq` is a relay, `realtime` is the media plane, and `hls` is the stream
+ * everybody can always watch.
+ *
+ * `moq` outranks `realtime` because the two show the same picture at the same
+ * latency and cost very different amounts: a relay viewer is one more
+ * subscriber on a cached object, and a plane viewer is a WebRTC consumer with
+ * its own SRTP context and its own bandwidth estimate, capped at
+ * `STREAM_V2_REALTIME_VIEWER_CAP` because the node runs out.
+ */
 /**
  * Which stage the player shows.
  *
@@ -37,7 +46,7 @@ import type { ConnectionState, DisconnectCause, ProducerEntry, RoomState } from
  * was showing HLS meanwhile, and an HLS engine starts fetching the moment it
  * mounts, so a realtime viewer pulled segments they would never watch.
  */
-export type BroadcastStage = "realtime" | "hls" | "pending";
+export type BroadcastStage = "moq" | "realtime" | "hls" | "pending";
 
 /**
  * The viewer-token endpoint said no.
@@ -78,6 +87,25 @@ export type BroadcastStageInput = {
   /** The refusal, when the fetch failed. `null` while it has not. */
   credentialsError: BroadcastCredentialsError | null;
   roomState?: BroadcastRoomState;
+  /** The token endpoint returned a relay ticket for this viewer. */
+  moqAvailable?: boolean;
+  /**
+   * The relay lane was tried and is over.
+   *
+   * Separate from `moqAvailable` for the same reason `realtimeIsOver` is
+   * separate from `credentialsReady`: a ticket that exists is not a lane that
+   * is working, and the fallback has to be able to happen after a connection
+   * that started fine.
+   */
+  moqFailed?: boolean;
+  /**
+   * Is the plane lane offered at all?
+   *
+   * `false` on an instance that runs relays and no media plane, which is what
+   * `credentials: null` from `viewer-token` means. Without it the chooser would
+   * fall to `realtime` after a relay failure and mount a room that is not there.
+   */
+  planeAvailable?: boolean;
 };
 
 /**
@@ -115,7 +143,12 @@ export function chooseBroadcastStage(input: BroadcastStageInput): BroadcastStage
   // about to be replaced, so a realtime viewer downloaded the broadcast twice.
   // Nothing is drawn until the answer is known.
   if (!input.credentialsReady) return "pending";
+  // The relay first, and only while it is actually working.
+  if (input.moqAvailable && !input.moqFailed) return "moq";
   if (realtimeIsOver(input.roomState)) return "hls";
+  // The relay failed and there is no plane behind it. `planeAvailable` defaults
+  // to true so every existing caller keeps its behaviour unchanged.
+  if (input.planeAvailable === false) return "hls";
   return "realtime";
 }
 
@@ -135,6 +168,9 @@ export function broadcastFellBack(input: BroadcastStageInput): boolean {
   if (!input.realtimeAvailable) return false;
   if (input.credentialsError) return true;
   if (!input.credentialsReady) return false;
+  // A working relay is not a fallback, it is the best lane there is.
+  if (input.moqAvailable && !input.moqFailed) return false;
+  if (input.moqAvailable && input.moqFailed && input.planeAvailable === false) return true;
   return realtimeIsOver(input.roomState);
 }
 

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

@@ -0,0 +1,66 @@
+/**
+ * Poll tallies as the studio, the stage overlay and the player all render them.
+ *
+ * One function because three surfaces show the same numbers, and three
+ * roundings of the same votes would disagree with each other on screen.
+ */
+
+export type PollLike = {
+  totalVotes: number;
+  options: Array<{ id: string; label: string; voteCount: number }>;
+};
+
+export type PollResult = {
+  id: string;
+  label: string;
+  voteCount: number;
+  /** 0..100, integer. */
+  percent: number;
+};
+
+/**
+ * Percentages that add up to 100.
+ *
+ * Rounding each share on its own is what usually goes wrong: three options on
+ * one vote each show as 33% three times and a viewer reads 99, and 1/3 + 2/3
+ * shows as 33 + 67 only by luck. This uses largest remainder, so the displayed
+ * numbers sum to exactly 100 whenever anybody has voted at all.
+ *
+ * With no votes every option is 0, NOT an even split. A poll that has just
+ * opened showing "50% / 50%" claims two votes that were never cast.
+ */
+export function pollPercentages(poll: PollLike): PollResult[] {
+  const options = poll.options ?? [];
+  const total = options.reduce((sum, option) => sum + option.voteCount, 0);
+  if (total <= 0) {
+    return options.map((option) => ({ ...option, percent: 0 }));
+  }
+
+  const exact = options.map((option) => {
+    const share = (option.voteCount / total) * 100;
+    return { option, floor: Math.floor(share), remainder: share - Math.floor(share) };
+  });
+
+  let left = 100 - exact.reduce((sum, entry) => sum + entry.floor, 0);
+  // Biggest remainder first; a tie goes to the option with more votes, then to
+  // the one listed first, so the same tally always renders the same way.
+  const order = [...exact].sort(
+    (a, b) =>
+      b.remainder - a.remainder ||
+      b.option.voteCount - a.option.voteCount ||
+      options.indexOf(a.option) - options.indexOf(b.option),
+  );
+  const bonus = new Set<string>();
+  for (const entry of order) {
+    if (left <= 0) break;
+    bonus.add(entry.option.id);
+    left--;
+  }
+
+  return exact.map(({ option, floor }) => ({
+    id: option.id,
+    label: option.label,
+    voteCount: option.voteCount,
+    percent: floor + (bonus.has(option.id) ? 1 : 0),
+  }));
+}

package/src/ui/styled/broadcast/vendor/moq-watch.bundle.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `@moq/watch`, vendored as a self-contained ESM bundle.
+ *
+ * Side-effect only: importing it registers the `<moq-watch>` custom element.
+ * There is nothing to import by name, which is why this declares an empty
+ * module rather than a surface.
+ *
+ * Built by `scripts/build-moq-player.mjs`; see its header for why this is an
+ * asset rather than a dependency.
+ */
+declare const _default: void;
+export default _default;