@tribe-nest/forge 3.42.1 → 3.50.0

package/src/ui/media/stage/CallControlsBar.tsx

@@ -0,0 +1,547 @@
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import {
+  Circle,
+  Hand,
+  MessageSquare,
+  Mic,
+  MicOff,
+  MonitorUp,
+  MonitorX,
+  PhoneOff,
+  SmilePlus,
+  Square,
+  Users,
+  Video,
+  VideoOff,
+} from "lucide-react";
+import { useGrants, useLocalMedia, useLocalPublications, useMediaRoom, type LocalSource } from "@tribe-nest/media-client/react";
+
+import { useForgeT, type ForgeT } from "../../../i18n";
+import { CallHelpHint } from "../CallHelpHint";
+import { canPublishSource } from "../callState";
+import type { CallStageRecording } from "../CallStage";
+import { REACTION_EMOJI, type ReactionEmoji } from "./callSignals";
+import { DeviceMenu } from "./DeviceMenu";
+import type { StageTokens } from "./stageTheme";
+
+/**
+ * The dark bottom bar: every control the call has, pinned where Leave lives.
+ *
+ * Mute stays a PAUSE, not a republish (Safari re-prompts on every
+ * `getUserMedia`), every toggle is disabled while its operation is in
+ * flight (`useLocalMedia` holds the real lock; this only says so), and every
+ * grant-gated control is drawn only when the token was minted for it. All of
+ * that is the previous stage's hard-won behavior, kept verbatim.
+ */
+
+const LOST_SOURCE_KEYS: Record<LocalSource, string> = {
+  microphone: "forge.call_stage.lost_microphone",
+  camera: "forge.call_stage.lost_camera",
+  screen: "forge.call_stage.lost_screen",
+};
+
+const barButton = (tokens: StageTokens, active: boolean, busy = false, danger = false): CSSProperties => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  padding: "0.5rem 0.7rem",
+  borderRadius: tokens.cornerRadius,
+  border: `1px solid ${danger ? tokens.danger : active ? tokens.accent : tokens.stageBorder}`,
+  backgroundColor: active ? tokens.accent : "transparent",
+  color: active ? tokens.accentText : tokens.stageText,
+  cursor: busy ? "progress" : "pointer",
+  opacity: busy ? 0.6 : 1,
+  font: "inherit",
+  fontSize: "0.8125rem",
+  whiteSpace: "nowrap",
+});
+
+export type CallControlsBarProps = {
+  tokens: StageTokens;
+  connected: boolean;
+  onLeave?: (() => void) | undefined;
+  recordingControl?: CallStageRecording | undefined;
+  /** Group calls opt the camera into simulcast so viewers can pick layers. */
+  cameraSimulcast?: boolean | undefined;
+  myHandRaised: boolean;
+  onRaiseHand: () => void;
+  onLowerHand: () => void;
+  onSendReaction: (emoji: ReactionEmoji) => void;
+  chatAvailable: boolean;
+  chatUnread: number;
+  onToggleChat: () => void;
+  onTogglePeople: () => void;
+  peopleOpen: boolean;
+  chatOpen: boolean;
+  /** Presses of any control unlock the chime AudioContext. */
+  onGesture?: (() => void) | undefined;
+};
+
+export function CallControlsBar(props: CallControlsBarProps) {
+  const { tokens } = props;
+  const t = useForgeT();
+  const grants = useGrants();
+  const { room } = useMediaRoom();
+  const media = useLocalMedia();
+  const publications = useLocalPublications();
+
+  const [reactionPickerOpen, setReactionPickerOpen] = useState(false);
+  const [confirmingLeave, setConfirmingLeave] = useState(false);
+  const [micDeviceId, setMicDeviceId] = useState<string | undefined>(undefined);
+  const [cameraDeviceId, setCameraDeviceId] = useState<string | undefined>(undefined);
+  const [mutedTalking, setMutedTalking] = useState(false);
+  const [mutedTalkingDismissed, setMutedTalkingDismissed] = useState(false);
+
+  const microphoneLive = media.isMicrophoneEnabled && !media.paused.microphone;
+  const cameraLive = media.isCameraEnabled && !media.paused.camera;
+  const localPresenting = media.screenSharing;
+
+  /**
+   * "You appear to be muted." An analyser on the PAUSED microphone track: the
+   * capture stays open across a mute by design, so the track still carries
+   * the room's side of the person even though nothing is sent. Sustained
+   * level while muted lights a dismissible bar; a beat of silence clears the
+   * sustain so a cough does not.
+   */
+  const micPublication = publications.find((p) => p.source === "microphone");
+  const mutedTrack = media.paused.microphone ? micPublication?.track : undefined;
+  useEffect(() => {
+    setMutedTalking(false);
+    if (!mutedTrack || typeof AudioContext === "undefined") return undefined;
+    let context: AudioContext | undefined;
+    let timer: ReturnType<typeof setInterval> | undefined;
+    try {
+      context = new AudioContext();
+      const source = context.createMediaStreamSource(new MediaStream([mutedTrack]));
+      const analyser = context.createAnalyser();
+      analyser.fftSize = 512;
+      source.connect(analyser);
+      const samples = new Uint8Array(analyser.frequencyBinCount);
+      let loudSince: number | null = null;
+      timer = setInterval(() => {
+        analyser.getByteTimeDomainData(samples);
+        let sum = 0;
+        for (const value of samples) sum += (value - 128) * (value - 128);
+        const rms = Math.sqrt(sum / samples.length) / 128;
+        if (rms > 0.06) {
+          loudSince = loudSince ?? Date.now();
+          if (Date.now() - loudSince > 1500) setMutedTalking(true);
+        } else {
+          loudSince = null;
+        }
+      }, 300);
+    } catch {
+      return undefined;
+    }
+    return () => {
+      if (timer) clearInterval(timer);
+      void context?.close().catch(() => undefined);
+    };
+  }, [mutedTrack]);
+  useEffect(() => {
+    // A fresh mute gets a fresh chance to warn.
+    if (!media.paused.microphone) setMutedTalkingDismissed(false);
+  }, [media.paused.microphone]);
+
+  const gesture = () => props.onGesture?.();
+
+  const toggleMicrophone = () => {
+    gesture();
+    if (!media.isMicrophoneEnabled) {
+      void media.publishMicrophone(micDeviceId ? { deviceId: micDeviceId } : undefined);
+      return;
+    }
+    void media.setPaused("microphone", microphoneLive);
+  };
+  const toggleCamera = () => {
+    gesture();
+    if (!media.isCameraEnabled) {
+      void media.publishCamera({
+        ...(cameraDeviceId ? { deviceId: cameraDeviceId } : {}),
+        ...(props.cameraSimulcast ? { simulcast: true } : {}),
+      });
+      return;
+    }
+    void media.setPaused("camera", cameraLive);
+  };
+  const toggleScreen = () => {
+    gesture();
+    void (localPresenting ? media.unpublish("screen") : media.publishScreen());
+  };
+
+  const leave = useCallback(() => {
+    void room?.close().catch(() => undefined);
+    props.onLeave?.();
+  }, [room, props.onLeave]);
+
+  const recordingIsMine = !!props.recordingControl?.isRecording && !!props.recordingControl?.canControl;
+  const requestLeave = () => {
+    if (recordingIsMine) {
+      setConfirmingLeave(true);
+      return;
+    }
+    leave();
+  };
+
+  const pickerRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!reactionPickerOpen) return undefined;
+    const close = (event: PointerEvent) => {
+      if (!pickerRef.current?.contains(event.target as Node)) setReactionPickerOpen(false);
+    };
+    window.addEventListener("pointerdown", close);
+    return () => window.removeEventListener("pointerdown", close);
+  }, [reactionPickerOpen]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "0.5rem",
+        padding: "0.5rem 0.75rem",
+        borderRadius: tokens.cornerRadius,
+        backgroundColor: tokens.stageChrome,
+        color: tokens.stageText,
+        marginTop: "auto",
+        flexShrink: 0,
+      }}
+    >
+      {canPublishSource(grants, "microphone") && (
+        <span style={{ display: "inline-flex" }}>
+          <button
+            type="button"
+            onClick={toggleMicrophone}
+            disabled={media.pending.microphone}
+            aria-busy={media.pending.microphone}
+            style={{
+              ...barButton(tokens, microphoneLive, media.pending.microphone),
+              ...(media.isMicrophoneEnabled ? { borderRadius: `${tokens.cornerRadius}px 0 0 ${tokens.cornerRadius}px` } : {}),
+            }}
+          >
+            {microphoneLive ? <Mic width={16} height={16} aria-hidden="true" /> : <MicOff width={16} height={16} aria-hidden="true" />}
+            {microphoneLive ? t("forge.call_stage.mute") : t("forge.call_stage.unmute")}
+          </button>
+          {media.isMicrophoneEnabled && (
+            <DeviceMenu
+              kind="audioinput"
+              currentDeviceId={micDeviceId}
+              onPick={(deviceId) => {
+                setMicDeviceId(deviceId);
+                void media.switchDevice("microphone", deviceId);
+              }}
+              tokens={tokens}
+              t={t}
+              label={t("forge.call_stage.pick_microphone")}
+            />
+          )}
+        </span>
+      )}
+
+      {canPublishSource(grants, "camera") && (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
+          <span style={{ display: "inline-flex" }}>
+            <button
+              type="button"
+              onClick={toggleCamera}
+              disabled={media.pending.camera}
+              aria-busy={media.pending.camera}
+              style={{
+                ...barButton(tokens, cameraLive, media.pending.camera),
+                ...(media.isCameraEnabled ? { borderRadius: `${tokens.cornerRadius}px 0 0 ${tokens.cornerRadius}px` } : {}),
+              }}
+            >
+              {cameraLive ? <Video width={16} height={16} aria-hidden="true" /> : <VideoOff width={16} height={16} aria-hidden="true" />}
+              {cameraLive ? t("forge.call_stage.camera_stop") : t("forge.call_stage.camera_start")}
+            </button>
+            {media.isCameraEnabled && (
+              <DeviceMenu
+                kind="videoinput"
+                currentDeviceId={cameraDeviceId}
+                onPick={(deviceId) => {
+                  setCameraDeviceId(deviceId);
+                  void media.switchDevice("camera", deviceId);
+                }}
+                tokens={tokens}
+                t={t}
+                label={t("forge.call_stage.pick_camera")}
+              />
+            )}
+          </span>
+          <CallHelpHint label={t("forge.call_stage.help_camera_stop_label")}>{t("forge.call_stage.help_camera_stop")}</CallHelpHint>
+        </span>
+      )}
+
+      {canPublishSource(grants, "screen") && (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
+          <button
+            type="button"
+            onClick={toggleScreen}
+            disabled={media.pending.screen}
+            aria-busy={media.pending.screen}
+            style={barButton(tokens, localPresenting, media.pending.screen)}
+          >
+            {localPresenting ? <MonitorX width={16} height={16} aria-hidden="true" /> : <MonitorUp width={16} height={16} aria-hidden="true" />}
+            {localPresenting ? t("forge.call_stage.screen_stop") : t("forge.call_stage.screen_start")}
+          </button>
+          <CallHelpHint label={t("forge.call_stage.help_screen_label")}>{t("forge.call_stage.help_screen")}</CallHelpHint>
+        </span>
+      )}
+
+      {props.recordingControl?.canControl && (
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
+          <button
+            type="button"
+            onClick={props.recordingControl.isRecording ? props.recordingControl.onStop : props.recordingControl.onStart}
+            disabled={props.recordingControl.pending}
+            aria-busy={props.recordingControl.pending}
+            style={barButton(tokens, !!props.recordingControl.isRecording, props.recordingControl.pending)}
+          >
+            {props.recordingControl.isRecording ? (
+              <Square width={16} height={16} aria-hidden="true" />
+            ) : (
+              <Circle width={16} height={16} aria-hidden="true" />
+            )}
+            {props.recordingControl.isRecording ? t("forge.call_stage.record_stop") : t("forge.call_stage.record_start")}
+          </button>
+          <CallHelpHint label={t("forge.call_stage.help_record_label")}>{t("forge.call_stage.help_record")}</CallHelpHint>
+        </span>
+      )}
+
+      {/* Raise hand: participation data, grant-gated like every publish. */}
+      <button
+        type="button"
+        data-testid="raise-hand"
+        onClick={() => {
+          gesture();
+          void (props.myHandRaised ? props.onLowerHand() : props.onRaiseHand());
+        }}
+        aria-pressed={props.myHandRaised}
+        style={barButton(tokens, props.myHandRaised)}
+      >
+        <Hand width={16} height={16} aria-hidden="true" />
+        {props.myHandRaised ? t("forge.call_stage.lower_hand") : t("forge.call_stage.raise_hand")}
+      </button>
+
+      <div ref={pickerRef} style={{ position: "relative", display: "inline-flex" }}>
+        <button
+          type="button"
+          data-testid="reaction-picker"
+          onClick={() => {
+            gesture();
+            setReactionPickerOpen((current) => !current);
+          }}
+          aria-expanded={reactionPickerOpen}
+          aria-label={t("forge.call_stage.reactions")}
+          style={barButton(tokens, reactionPickerOpen)}
+        >
+          <SmilePlus width={16} height={16} aria-hidden="true" />
+        </button>
+        {reactionPickerOpen && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: "calc(100% + 0.375rem)",
+              left: "50%",
+              transform: "translateX(-50%)",
+              display: "flex",
+              gap: "0.25rem",
+              padding: "0.375rem 0.5rem",
+              borderRadius: 9999,
+              backgroundColor: tokens.stageSurface,
+              border: `1px solid ${tokens.stageBorder}`,
+              boxShadow: "0 6px 24px rgba(0,0,0,0.5)",
+              zIndex: 10,
+            }}
+          >
+            {REACTION_EMOJI.map((emoji) => (
+              <button
+                key={emoji}
+                type="button"
+                onClick={() => {
+                  props.onSendReaction(emoji);
+                  setReactionPickerOpen(false);
+                }}
+                style={{ border: "none", background: "transparent", cursor: "pointer", fontSize: "1.25rem", padding: "0 0.125rem" }}
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <span style={{ marginLeft: "auto", display: "inline-flex", gap: "0.5rem" }}>
+        {props.chatAvailable && (
+          <button
+            type="button"
+            data-testid="toggle-chat"
+            onClick={() => {
+              gesture();
+              props.onToggleChat();
+            }}
+            aria-pressed={props.chatOpen}
+            style={{ ...barButton(tokens, props.chatOpen), position: "relative" }}
+          >
+            <MessageSquare width={16} height={16} aria-hidden="true" />
+            {t("forge.call_stage.chat")}
+            {props.chatUnread > 0 && !props.chatOpen && (
+              <span
+                data-testid="chat-unread"
+                style={{
+                  position: "absolute",
+                  top: -6,
+                  right: -6,
+                  minWidth: 18,
+                  height: 18,
+                  borderRadius: 9999,
+                  backgroundColor: tokens.danger,
+                  color: "#ffffff",
+                  fontSize: "0.6875rem",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "0 0.25rem",
+                }}
+              >
+                {props.chatUnread > 99 ? "99+" : props.chatUnread}
+              </span>
+            )}
+          </button>
+        )}
+        <button
+          type="button"
+          data-testid="toggle-people"
+          onClick={() => {
+            gesture();
+            props.onTogglePeople();
+          }}
+          aria-pressed={props.peopleOpen}
+          style={barButton(tokens, props.peopleOpen)}
+        >
+          <Users width={16} height={16} aria-hidden="true" />
+          {t("forge.call_stage.people")}
+        </button>
+        <button type="button" onClick={requestLeave} style={barButton(tokens, false, false, true)}>
+          <PhoneOff width={16} height={16} aria-hidden="true" color={tokens.danger} />
+          {t("forge.call_stage.leave")}
+        </button>
+      </span>
+
+      {confirmingLeave && (
+        <LeaveRecordingDialog
+          tokens={tokens}
+          t={t}
+          onStopAndLeave={() => {
+            // Stop FIRST, then leave: the other order closes the connection
+            // the stop request rides on.
+            props.recordingControl?.onStop();
+            setConfirmingLeave(false);
+            leave();
+          }}
+          onLeaveKeep={() => {
+            setConfirmingLeave(false);
+            leave();
+          }}
+          onStay={() => setConfirmingLeave(false)}
+        />
+      )}
+
+      {media.error && (
+        <span role="alert" style={{ width: "100%", fontSize: "0.8125rem", color: tokens.stageText }}>
+          {media.error.message}
+        </span>
+      )}
+
+      {mutedTalking && !mutedTalkingDismissed && media.paused.microphone && (
+        <span
+          role="status"
+          data-testid="muted-talking"
+          style={{ width: "100%", display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.8125rem", color: tokens.stageText }}
+        >
+          {t("forge.call_stage.muted_talking")}
+          <button type="button" onClick={toggleMicrophone} style={barButton(tokens, true)}>
+            {t("forge.call_stage.unmute")}
+          </button>
+          <button type="button" onClick={() => setMutedTalkingDismissed(true)} style={barButton(tokens, false)}>
+            {t("forge.call_stage.dismiss")}
+          </button>
+        </span>
+      )}
+
+      {props.connected && media.lostSources.length > 0 && (
+        <span role="alert" style={{ width: "100%", fontSize: "0.8125rem", color: tokens.stageText }}>
+          {media.lostSources.map((source) => (
+            <span key={source} style={{ display: "block" }}>
+              {t(LOST_SOURCE_KEYS[source])}
+            </span>
+          ))}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function LeaveRecordingDialog({
+  tokens,
+  t,
+  onStopAndLeave,
+  onLeaveKeep,
+  onStay,
+}: {
+  tokens: StageTokens;
+  t: ForgeT;
+  onStopAndLeave: () => void;
+  onLeaveKeep: () => void;
+  onStay: () => void;
+}) {
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t("forge.call_stage.leave_recording_title")}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+        background: "rgba(0,0,0,0.6)",
+      }}
+    >
+      <div
+        style={{
+          maxWidth: 420,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+          padding: "1.25rem",
+          borderRadius: tokens.cornerRadius,
+          background: tokens.stageSurface,
+          border: `1px solid ${tokens.stageBorder}`,
+          color: tokens.stageText,
+        }}
+      >
+        <strong style={{ fontSize: "1rem" }}>{t("forge.call_stage.leave_recording_title")}</strong>
+        {/* A warning about what a control is about to do must be read, so it
+            is content in the dialog, never a `?` hint. */}
+        <p style={{ margin: 0, fontSize: "0.875rem", opacity: 0.85 }}>{t("forge.call_stage.leave_recording_body")}</p>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
+          <button type="button" onClick={onStopAndLeave} style={barButton(tokens, true)}>
+            {t("forge.call_stage.leave_recording_stop")}
+          </button>
+          <button type="button" onClick={onLeaveKeep} style={barButton(tokens, false)}>
+            {t("forge.call_stage.leave_recording_keep")}
+          </button>
+          <button type="button" onClick={onStay} style={{ ...barButton(tokens, false), marginLeft: "auto" }}>
+            {t("forge.call_stage.leave_recording_cancel")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/media/stage/CallHealthPanel.tsx

@@ -0,0 +1,132 @@
+import { X } from "lucide-react";
+
+import { useCallDiagnostics, type TileDiagnostics } from "@tribe-nest/media-client/react";
+
+import type { ForgeT } from "../../../i18n";
+import { CallHelpHint } from "../CallHelpHint";
+import type { StageTokens } from "./stageTheme";
+
+/**
+ * Call health, in the call, replacing an hour in webrtc-internals.
+ *
+ * Per video tile: the simulcast layer this client ASKED for, the layer the
+ * node is GIVING, and the picture actually being decoded. Above them, the
+ * node's bandwidth estimate (the number that pins everyone when it sits at
+ * the floor) and this side's own publish health (a layer scored 0 is a layer
+ * the node never receives). Together they answer "why is this blurry" with
+ * WHICH of the three culprits it is, live, once a second while open.
+ */
+
+/** 0/1/2 to the rid names every WebRTC log uses. */
+const LAYER_NAMES = ["q", "h", "f"] as const;
+const layerName = (layer: number | undefined): string =>
+  layer === undefined ? "-" : (LAYER_NAMES[layer] ?? String(layer));
+
+export function CallHealthPanel({
+  tokens,
+  t,
+  names,
+  onClose,
+}: {
+  tokens: StageTokens;
+  t: ForgeT;
+  /** Identity to display name, from the participants the stage already holds. */
+  names: ReadonlyMap<string, string>;
+  onClose: () => void;
+}) {
+  const diagnostics = useCallDiagnostics(true);
+
+  const row = (label: string, value: string, warn = false) => (
+    <div style={{ display: "flex", justifyContent: "space-between", gap: "0.75rem" }}>
+      <span style={{ color: tokens.stageMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{label}</span>
+      <span style={{ color: warn ? tokens.danger : tokens.stageText, whiteSpace: "nowrap" }}>{value}</span>
+    </div>
+  );
+
+  const videoTiles = (diagnostics?.tiles ?? []).filter((tile) => tile.kind === "video");
+
+  return (
+    <div
+      role="region"
+      aria-label={t("forge.call_stage.health_title")}
+      style={{
+        position: "absolute",
+        top: "0.5rem",
+        right: "0.5rem",
+        width: "min(20rem, calc(100% - 1rem))",
+        maxHeight: "calc(100% - 1rem)",
+        overflowY: "auto",
+        zIndex: 20,
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.375rem",
+        padding: "0.625rem 0.75rem",
+        backgroundColor: tokens.stageChrome,
+        border: `1px solid ${tokens.stageBorder}`,
+        borderRadius: tokens.cornerRadius,
+        fontSize: "0.72rem",
+        fontVariantNumeric: "tabular-nums",
+        color: tokens.stageText,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: "0.375rem" }}>
+        <span style={{ fontWeight: 600 }}>{t("forge.call_stage.health_title")}</span>
+        <CallHelpHint label={t("forge.call_stage.help_health_label")}>{t("forge.call_stage.help_health")}</CallHelpHint>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t("forge.call_stage.health_close")}
+          style={{ marginLeft: "auto", background: "none", border: "none", cursor: "pointer", color: tokens.stageMuted, display: "inline-flex", padding: 2 }}
+        >
+          <X width={14} height={14} aria-hidden="true" />
+        </button>
+      </div>
+
+      {!diagnostics && <div style={{ color: tokens.stageMuted }}>{t("forge.call_stage.health_measuring")}</div>}
+
+      {diagnostics && (
+        <>
+          {diagnostics.availableOutgoingBitrate !== undefined &&
+            row(
+              t("forge.call_stage.health_estimate"),
+              `${Math.round(diagnostics.availableOutgoingBitrate / 1000)} kbps`,
+              // The floor mediasoup starts at; an estimate still there with
+              // several tiles is the estimator pinning everyone low.
+              diagnostics.availableOutgoingBitrate <= 700_000 && videoTiles.length > 1,
+            )}
+          {(diagnostics.localProducers ?? [])
+            .filter((producer) => producer.kind === "video")
+            .map((producer) =>
+              row(
+                `${t("forge.call_stage.health_sending")}${producer.source ? ` (${producer.source})` : ""}`,
+                producer.layers.map((layer) => `${layer.rid ?? "?"}:${layer.score}`).join(" "),
+                producer.layers.some((layer) => layer.score === 0),
+              ),
+            )}
+          {videoTiles.map((tile) => row(tileLabel(tile, names), tileValue(tile), isDowngraded(tile)))}
+          {videoTiles.length === 0 && <div style={{ color: tokens.stageMuted }}>{t("forge.call_stage.health_no_video")}</div>}
+        </>
+      )}
+    </div>
+  );
+}
+
+function tileLabel(tile: TileDiagnostics, names: ReadonlyMap<string, string>): string {
+  const name = names.get(tile.identity) ?? tile.identity;
+  return tile.source === "screen" ? `${name} (screen)` : name;
+}
+
+function tileValue(tile: TileDiagnostics): string {
+  const layers = `${layerName(tile.requestedLayer)}>${layerName(tile.currentLayer)}`;
+  const picture =
+    tile.frameWidth !== undefined && tile.frameHeight !== undefined
+      ? ` ${tile.frameWidth}x${tile.frameHeight}${tile.framesPerSecond !== undefined ? `@${Math.round(tile.framesPerSecond)}` : ""}`
+      : "";
+  const rate = tile.bitrateKbps !== undefined ? ` ${tile.bitrateKbps}kbps` : "";
+  return `${layers}${picture}${rate}`;
+}
+
+/** Getting less than asked is the line worth coloring. */
+function isDowngraded(tile: TileDiagnostics): boolean {
+  return tile.requestedLayer !== undefined && tile.currentLayer !== undefined && tile.currentLayer < tile.requestedLayer;
+}