@tribe-nest/forge 3.31.0 → 3.34.0

package/src/ui/media/CallStage.tsx

@@ -23,8 +23,10 @@ import {
   useRemoteTrack,
   useRoomState,
   useVisibleProducers,
+  type LocalSource,
 } from "@tribe-nest/media-client/react";
 
+import { useForgeT, type ForgeT } from "../../i18n";
 import { useThemeTokens, type ResolvedThemeTokens } from "../theme/ForgeThemeProvider";
 import { CallHelpHint } from "./CallHelpHint";
 import {
@@ -57,6 +59,17 @@ import {
  * screen that looks like somebody else's product on every site that installs
  * it.
  *
+ * ## Where the words come from
+ *
+ * `useForgeT()`, like every other Forge component, with keys under
+ * `forge.call_stage.*`. `callStatus` returns KEYS for the same reason it is
+ * pure: it has no locale. The one thing rendered verbatim is the server's own
+ * sentence (a refusal, a close reason), because a friendlier translation of a
+ * refusal is a lie about why you were refused. Admin renders this same
+ * component inside `<ForgeI18nProvider>` with the dashboard's locale; outside
+ * any provider the hook answers in English, so a site that has not mounted one
+ * still gets a working call.
+ *
  * ## What it does NOT decide
  *
  * Whether a control may be used. `useGrants()` says what the node minted this
@@ -85,6 +98,7 @@ export type CallStageProps = {
 
 export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStageProps) {
   const tokens = useThemeTokens();
+  const t = useForgeT();
   const { connectionState, error, recovering, retry } = useMediaRoom();
   const state = useRoomState();
   const peers = useParticipants();
@@ -132,21 +146,26 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
         fontFamily: tokens.fontFamily,
       }}
     >
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.75rem", flexWrap: "wrap" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "0.75rem",
+          flexWrap: "wrap",
+        }}
+      >
         {title ? <div style={{ fontWeight: 600, fontFamily: tokens.headingFontFamily }}>{title}</div> : <span />}
         <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          {recording && <RecordingIndicator tokens={tokens} />}
-          <ConnectionStatus status={status} tokens={tokens} onRetry={retry} />
+          {recording && <RecordingIndicator tokens={tokens} t={t} />}
+          <ConnectionStatus status={status} tokens={tokens} t={t} onRetry={retry} />
         </div>
       </div>
 
       <div style={{ display: "flex", alignItems: "center", gap: "0.375rem", fontSize: "0.75rem", color: tokens.muted }}>
-        <span>
-          In this call: {callHeadCount(tiles)}
-        </span>
-        <CallHelpHint label="Why can I hear someone but not see them?">
-          A tile with a name and no picture means that person has their camera off, or the call is busy enough that only
-          the people currently speaking are sent in full. Both are normal, and their audio is unaffected.
+        <span>{t("forge.call_stage.head_count", { count: callHeadCount(tiles) })}</span>
+        <CallHelpHint label={t("forge.call_stage.help_hear_not_see_label")}>
+          {t("forge.call_stage.help_hear_not_see")}
         </CallHelpHint>
       </div>
 
@@ -157,9 +176,9 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
           gap: "0.75rem",
         }}
       >
-        <LocalPreview tokens={tokens} aspectRatio={aspectRatio} />
+        <LocalPreview tokens={tokens} aspectRatio={aspectRatio} t={t} />
         {tiles.map((tile) => (
-          <ParticipantTile key={tile.key} tile={tile} tokens={tokens} aspectRatio={aspectRatio} />
+          <ParticipantTile key={tile.key} tile={tile} tokens={tokens} aspectRatio={aspectRatio} t={t} />
         ))}
       </div>
 
@@ -167,7 +186,7 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
         <RemoteAudio key={producerId} producerId={producerId} />
       ))}
 
-      <CallControls tokens={tokens} onLeave={onLeave} />
+      <CallControls tokens={tokens} t={t} connected={connectionState === "connected"} onLeave={onLeave} />
     </div>
   );
 }
@@ -182,14 +201,18 @@ export function CallStage({ onLeave, title, aspectRatio = 16 / 9 }: CallStagePro
 function ConnectionStatus({
   status,
   tokens,
+  t,
   onRetry,
 }: {
   status: CallStatus;
   tokens: ResolvedThemeTokens;
+  t: ForgeT;
   onRetry: () => void;
 }) {
   const busy = status.tone === "connecting" || status.tone === "reconnecting";
   const alarming = status.tone === "failed";
+  // Our own copy is translated; the server's sentence is shown as it came.
+  const detail = status.detailKey ? t(status.detailKey) : status.detailText;
 
   return (
     <div
@@ -211,8 +234,8 @@ function ConnectionStatus({
           style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.primary, display: "inline-block" }}
         />
       )}
-      <span style={{ fontWeight: alarming ? 600 : 400 }}>{status.headline}</span>
-      {status.detail && <span style={{ color: tokens.muted }}>{status.detail}</span>}
+      <span style={{ fontWeight: alarming ? 600 : 400 }}>{t(status.headlineKey)}</span>
+      {detail && <span style={{ color: tokens.muted }}>{detail}</span>}
       {status.canRetry && (
         <button
           type="button"
@@ -232,7 +255,7 @@ function ConnectionStatus({
           }}
         >
           <RefreshCw width={12} height={12} aria-hidden="true" />
-          Try again
+          {t("forge.call_stage.retry")}
         </button>
       )}
     </div>
@@ -240,7 +263,7 @@ function ConnectionStatus({
 }
 
 /** Somebody is recording. A consent signal, so it is content and always shown. */
-function RecordingIndicator({ tokens }: { tokens: ResolvedThemeTokens }) {
+function RecordingIndicator({ tokens, t }: { tokens: ResolvedThemeTokens; t: ForgeT }) {
   return (
     <span
       style={{
@@ -259,7 +282,7 @@ function RecordingIndicator({ tokens }: { tokens: ResolvedThemeTokens }) {
         aria-hidden="true"
         style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.secondary, display: "inline-block" }}
       />
-      This call is being recorded
+      {t("forge.call_stage.recording")}
     </span>
   );
 }
@@ -306,10 +329,12 @@ function ParticipantTile({
   tile,
   tokens,
   aspectRatio,
+  t,
 }: {
   tile: CallTile;
   tokens: ResolvedThemeTokens;
   aspectRatio: number;
+  t: ForgeT;
 }) {
   // `useRemoteTrack` takes a producer id unconditionally so the hook order is
   // the same for a tile with video and a tile without. An id that matches
@@ -327,21 +352,23 @@ function ParticipantTile({
       data-speaking={tile.isSpeaking ? "true" : "false"}
     >
       {showVideo ? (
-        <video
-          ref={attach}
-          autoPlay
-          playsInline
-          muted
-          style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        />
+        <video ref={attach} autoPlay playsInline muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
       ) : (
-        <span style={{ fontSize: "0.9375rem", fontWeight: 600, color: tokens.text, padding: "0 0.75rem", textAlign: "center" }}>
+        <span
+          style={{
+            fontSize: "0.9375rem",
+            fontWeight: 600,
+            color: tokens.text,
+            padding: "0 0.75rem",
+            textAlign: "center",
+          }}
+        >
           {tile.name}
         </span>
       )}
       <span style={tileName(tokens)}>
         {tile.name}
-        {!tile.hasAudio && <span style={{ color: tokens.muted }}> (listening)</span>}
+        {!tile.hasAudio && <span style={{ color: tokens.muted }}> {t("forge.call_stage.listening")}</span>}
       </span>
     </div>
   );
@@ -361,13 +388,15 @@ function RemoteAudio({ producerId }: { producerId: string }) {
 }
 
 /** This viewer, as they are being sent. Muted, or it is a feedback loop. */
-function LocalPreview({ tokens, aspectRatio }: { tokens: ResolvedThemeTokens; aspectRatio: number }) {
+function LocalPreview({ tokens, aspectRatio, t }: { tokens: ResolvedThemeTokens; aspectRatio: number; t: ForgeT }) {
   const state = useRoomState();
   const publications = useLocalPublications();
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const camera = useMemo(() => publications.find((p) => p.source === "camera"), [publications]);
-  const track = camera?.track;
+  // A paused camera is still captured and still a publication, but nothing is
+  // being sent, so the preview shows the name the others are seeing.
+  const track = camera && !camera.paused ? camera.track : undefined;
 
   useEffect(() => {
     const element = videoRef.current;
@@ -381,7 +410,7 @@ function LocalPreview({ tokens, aspectRatio }: { tokens: ResolvedThemeTokens; as
     };
   }, [track]);
 
-  const name = state.identity ? "You" : "You (not connected yet)";
+  const name = state.identity ? t("forge.call_stage.you") : t("forge.call_stage.you_not_connected");
 
   return (
     <div style={tileFrame(tokens, aspectRatio, false)} data-testid="tile-local">
@@ -401,6 +430,13 @@ function LocalPreview({ tokens, aspectRatio }: { tokens: ResolvedThemeTokens; as
   );
 }
 
+/** One sentence per source a drop took away, keyed by the SDK's word for it. */
+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 controlButton = (tokens: ResolvedThemeTokens, active: boolean, busy = false): CSSProperties => ({
   display: "inline-flex",
   alignItems: "center",
@@ -423,31 +459,66 @@ const controlButton = (tokens: ResolvedThemeTokens, active: boolean, busy = fals
  * a listen-only seat is not offered a microphone it would be refused. That is a
  * rendering decision; the node refuses the publish itself either way.
  *
+ * ## Mute is a pause, not a republish
+ *
+ * The first press on Unmute or Start camera captures and publishes. Every press
+ * after that PAUSES or RESUMES the publication the room already holds, through
+ * `setPaused`. A toggle built as unpublish-then-publish starts every unmute
+ * with `getUserMedia`, and Safari puts a permission prompt in front of every
+ * call to it, so a person on an iPad was asked whether the site may use the
+ * microphone each time they spoke. Pausing keeps the capture open (the
+ * browser's device indicator stays on, which the camera hint says) and the way
+ * back asks nobody anything. Screen share is the exception: stopping it ends
+ * the capture, because sharing again has to go through the picker anyway.
+ *
  * ## Why every toggle is disabled while it is working
  *
  * Each of these is a read-then-write: it reads whether the source is live and
- * publishes or unpublishes accordingly. The flag it reads does not move until
- * the publish has resolved, and a publish starts with a permission prompt that
- * can sit on screen for seconds - so a button that looks untouched is a button
- * a person presses again, and two presses used to mean two producers from one
- * identity and everyone else hearing them doubled. `useLocalMedia` holds the
- * real lock (a synchronous ref, since both clicks land before React re-renders
- * anything); this is the part that says so on screen, because a control that
- * silently ignores you is only marginally better than one that misbehaves.
+ * publishes, pauses or resumes accordingly. The flag it reads does not move
+ * until the publish has resolved, and a publish starts with a permission
+ * prompt that can sit on screen for seconds - so a button that looks untouched
+ * is a button a person presses again, and two presses used to mean two
+ * producers from one identity and everyone else hearing them doubled.
+ * `useLocalMedia` holds the real lock (a synchronous ref, since both clicks
+ * land before React re-renders anything); this is the part that says so on
+ * screen, because a control that silently ignores you is only marginally
+ * better than one that misbehaves.
  */
-function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeave?: () => void }) {
+function CallControls({
+  tokens,
+  t,
+  connected,
+  onLeave,
+}: {
+  tokens: ResolvedThemeTokens;
+  t: ForgeT;
+  connected: boolean;
+  onLeave?: () => void;
+}) {
   const grants = useGrants();
   const { room } = useMediaRoom();
   const media = useLocalMedia();
 
+  // What the person is actually SENDING, which is what the button says.
+  const microphoneLive = media.isMicrophoneEnabled && !media.paused.microphone;
+  const cameraLive = media.isCameraEnabled && !media.paused.camera;
+
   // Plain handlers, deliberately not `useCallback`. `useLocalMedia()` returns a
   // fresh object every render, so memoising on it would rebuild the callback
   // every render anyway while looking as though it did not.
   const toggleMicrophone = () => {
-    void (media.isMicrophoneEnabled ? media.unpublish("microphone") : media.publishMicrophone());
+    if (!media.isMicrophoneEnabled) {
+      void media.publishMicrophone();
+      return;
+    }
+    void media.setPaused("microphone", microphoneLive);
   };
   const toggleCamera = () => {
-    void (media.isCameraEnabled ? media.unpublish("camera") : media.publishCamera());
+    if (!media.isCameraEnabled) {
+      void media.publishCamera();
+      return;
+    }
+    void media.setPaused("camera", cameraLive);
   };
   const toggleScreen = () => {
     void (media.screenSharing ? media.unpublish("screen") : media.publishScreen());
@@ -469,32 +540,37 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
           onClick={toggleMicrophone}
           disabled={media.pending.microphone}
           aria-busy={media.pending.microphone}
-          style={controlButton(tokens, media.isMicrophoneEnabled, media.pending.microphone)}
+          style={controlButton(tokens, microphoneLive, media.pending.microphone)}
         >
-          {media.isMicrophoneEnabled ? (
+          {microphoneLive ? (
             <Mic width={16} height={16} aria-hidden="true" />
           ) : (
             <MicOff width={16} height={16} aria-hidden="true" />
           )}
-          {media.isMicrophoneEnabled ? "Mute" : "Unmute"}
+          {microphoneLive ? t("forge.call_stage.mute") : t("forge.call_stage.unmute")}
         </button>
       )}
 
       {canPublishSource(grants, "camera") && (
-        <button
-          type="button"
-          onClick={toggleCamera}
-          disabled={media.pending.camera}
-          aria-busy={media.pending.camera}
-          style={controlButton(tokens, media.isCameraEnabled, media.pending.camera)}
-        >
-          {media.isCameraEnabled ? (
-            <Video width={16} height={16} aria-hidden="true" />
-          ) : (
-            <VideoOff width={16} height={16} aria-hidden="true" />
-          )}
-          {media.isCameraEnabled ? "Stop camera" : "Start camera"}
-        </button>
+        <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
+          <button
+            type="button"
+            onClick={toggleCamera}
+            disabled={media.pending.camera}
+            aria-busy={media.pending.camera}
+            style={controlButton(tokens, cameraLive, media.pending.camera)}
+          >
+            {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>
+          <CallHelpHint label={t("forge.call_stage.help_camera_stop_label")}>
+            {t("forge.call_stage.help_camera_stop")}
+          </CallHelpHint>
+        </span>
       )}
 
       {canPublishSource(grants, "screen") && (
@@ -511,11 +587,10 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
             ) : (
               <MonitorUp width={16} height={16} aria-hidden="true" />
             )}
-            {media.screenSharing ? "Stop sharing" : "Share screen"}
+            {media.screenSharing ? t("forge.call_stage.screen_stop") : t("forge.call_stage.screen_start")}
           </button>
-          <CallHelpHint label="What does sharing my screen send?">
-            Whatever you pick in the browser prompt, live, to everyone in the call. Your camera keeps running alongside
-            it rather than being replaced, so people can still see you while you present.
+          <CallHelpHint label={t("forge.call_stage.help_screen_label")}>
+            {t("forge.call_stage.help_screen")}
           </CallHelpHint>
         </span>
       )}
@@ -526,7 +601,7 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
         style={{ ...controlButton(tokens, false), marginLeft: "auto", borderColor: tokens.secondary }}
       >
         <PhoneOff width={16} height={16} aria-hidden="true" />
-        Leave
+        {t("forge.call_stage.leave")}
       </button>
 
       {/* A denied permission prompt is something the person has to be told
@@ -537,6 +612,22 @@ function CallControls({ tokens, onLeave }: { tokens: ResolvedThemeTokens; onLeav
           {media.error.message}
         </span>
       )}
+
+      {/* State the person has to act on, so it is content and stays visible: a
+          drop stopped their capture (the light went out, on purpose), the room
+          is back, and nothing will turn the microphone on again but them. Shown
+          once the room is back rather than during the drop, when the status
+          line above is already saying "reconnecting". An alert rather than a
+          status: somebody who misses it is talking to nobody. */}
+      {connected && media.lostSources.length > 0 && (
+        <span role="alert" style={{ width: "100%", fontSize: "0.8125rem", color: tokens.text }}>
+          {media.lostSources.map((source) => (
+            <span key={source} style={{ display: "block" }}>
+              {t(LOST_SOURCE_KEYS[source])}
+            </span>
+          ))}
+        </span>
+      )}
     </div>
   );
 }