@tribe-nest/forge 3.42.0 → 3.48.0

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

@@ -0,0 +1,49 @@
+import type { ForgeT } from "../../../i18n";
+import type { StageTokens } from "./stageTheme";
+
+export type CallToast = {
+  id: string;
+  /** Already-translated text: the stage composes it where the facts are. */
+  text: string;
+};
+
+/**
+ * Join/leave/hand notices, top-centre, `aria-live="polite"` so a screen
+ * reader hears an arrival without being interrupted by it. The stage owns
+ * the list (capped, collapsed under bursts, timed out); this only draws it.
+ */
+export function CallToasts({ toasts, tokens }: { toasts: readonly CallToast[]; tokens: StageTokens; t: ForgeT }) {
+  return (
+    <div
+      aria-live="polite"
+      style={{
+        position: "absolute",
+        top: "0.75rem",
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "0.375rem",
+        pointerEvents: "none",
+        zIndex: 5,
+      }}
+    >
+      {toasts.map((toast) => (
+        <span
+          key={toast.id}
+          data-testid="call-toast"
+          style={{
+            fontSize: "0.8125rem",
+            padding: "0.3rem 0.75rem",
+            borderRadius: 9999,
+            backgroundColor: "rgba(0,0,0,0.65)",
+            color: tokens.stageText,
+          }}
+        >
+          {toast.text}
+        </span>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,257 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { Activity, AlertTriangle, Grid3x3, Hand, Loader2, User } from "lucide-react";
+
+import type { ForgeT } from "../../../i18n";
+import { CallHelpHint } from "../CallHelpHint";
+import type { CallStatus } from "../callState";
+import type { ViewChoice } from "./callLayout";
+import type { StageTokens } from "./stageTheme";
+
+/**
+ * The top bar: title, elapsed time, the recording consent pill, the
+ * connection pill and the view toggle. Terminal states moved to the CENTRE
+ * of the stage (`CallCenterNotice`); this pill keeps the transient ones,
+ * where covering the stage would hide the tiles a person is watching.
+ */
+export function CallTopBar({
+  title,
+  tokens,
+  t,
+  status,
+  recording,
+  connectedAt,
+  view,
+  onView,
+  headCount,
+  showViewToggle,
+  healthOpen,
+  onToggleHealth,
+  raisedHands,
+  onOpenHands,
+  compact = false,
+}: {
+  title?: ReactNode;
+  tokens: StageTokens;
+  t: ForgeT;
+  status: CallStatus;
+  recording: boolean;
+  /** Epoch ms of the first successful connect, for the timer. Null before. */
+  connectedAt: number | null;
+  view: ViewChoice;
+  onView: (view: ViewChoice) => void;
+  headCount: number;
+  showViewToggle: boolean;
+  healthOpen: boolean;
+  onToggleHealth: () => void;
+  /** Raised hands, oldest first: the same queue order the panel shows. */
+  raisedHands: readonly { identity: string; name: string }[];
+  onOpenHands: () => void;
+  /** Phone width: drop the title and the head-count hint so the controls and
+   * the connection state stay on one row. */
+  compact?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "0.75rem",
+        flexWrap: "wrap",
+        padding: "0.5rem 0.75rem",
+        backgroundColor: tokens.stageChrome,
+        borderRadius: tokens.cornerRadius,
+        color: tokens.stageText,
+      }}
+    >
+      {title && !compact ? (
+        <div style={{ fontWeight: 600, fontFamily: tokens.headingFontFamily, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+          {title}
+        </div>
+      ) : (
+        <span />
+      )}
+      <CallTimer connectedAt={connectedAt} tokens={tokens} />
+      <span style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", fontSize: "0.75rem", color: tokens.stageMuted }}>
+        {t("forge.call_stage.head_count", { count: headCount })}
+        {!compact && (
+          <CallHelpHint label={t("forge.call_stage.help_hear_not_see_label")}>
+            {t("forge.call_stage.help_hear_not_see")}
+          </CallHelpHint>
+        )}
+      </span>
+
+      {raisedHands.length > 0 && (
+        <button
+          type="button"
+          onClick={onOpenHands}
+          aria-label={t("forge.call_stage.hands_raised_open", { count: raisedHands.length })}
+          title={raisedHands.map((h) => h.name).join(", ")}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.375rem",
+            fontSize: "0.75rem",
+            fontWeight: 600,
+            border: `1px solid ${tokens.accent}`,
+            borderRadius: 9999,
+            padding: "0.125rem 0.6rem",
+            background: "none",
+            color: tokens.accent,
+            cursor: "pointer",
+          }}
+        >
+          <Hand width={13} height={13} aria-hidden="true" />
+          {/* The first raised hand IS the one a host takes next, so name it;
+              the rest are a count, and the full list is the button's title. */}
+          {raisedHands.length === 1
+            ? raisedHands[0]!.name
+            : t("forge.call_stage.hands_raised_named", { name: raisedHands[0]!.name, count: raisedHands.length - 1 })}
+        </button>
+      )}
+
+      <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "0.75rem" }}>
+        {recording && (
+          <span
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.375rem",
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              border: `1px solid ${tokens.stageBorder}`,
+              borderRadius: 9999,
+              padding: "0.125rem 0.6rem",
+            }}
+          >
+            <span aria-hidden="true" style={{ width: 8, height: 8, borderRadius: 9999, backgroundColor: tokens.danger }} />
+            {t("forge.call_stage.recording")}
+          </span>
+        )}
+        <button
+          type="button"
+          onClick={onToggleHealth}
+          aria-pressed={healthOpen}
+          aria-label={t("forge.call_stage.health_toggle")}
+          title={t("forge.call_stage.health_toggle")}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "0.25rem",
+            background: "none",
+            border: `1px solid ${healthOpen ? tokens.accent : tokens.stageBorder}`,
+            borderRadius: tokens.cornerRadius,
+            color: healthOpen ? tokens.accent : tokens.stageMuted,
+            cursor: "pointer",
+          }}
+        >
+          <Activity width={14} height={14} aria-hidden="true" />
+        </button>
+        <ConnectionPill status={status} tokens={tokens} t={t} />
+        {showViewToggle && (
+          <span style={{ display: "inline-flex", borderRadius: tokens.cornerRadius, overflow: "hidden", border: `1px solid ${tokens.stageBorder}` }}>
+            <ToggleHalf
+              active={view === "gallery"}
+              label={t("forge.call_stage.view_gallery")}
+              onClick={() => onView("gallery")}
+              tokens={tokens}
+            >
+              <Grid3x3 width={14} height={14} aria-hidden="true" />
+            </ToggleHalf>
+            <ToggleHalf
+              active={view === "speaker"}
+              label={t("forge.call_stage.view_speaker")}
+              onClick={() => onView("speaker")}
+              tokens={tokens}
+            >
+              <User width={14} height={14} aria-hidden="true" />
+            </ToggleHalf>
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+function ToggleHalf({
+  active,
+  label,
+  onClick,
+  tokens,
+  children,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  tokens: StageTokens;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      aria-label={label}
+      title={label}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.25rem",
+        padding: "0.3rem 0.55rem",
+        border: "none",
+        cursor: "pointer",
+        backgroundColor: active ? tokens.accent : "transparent",
+        color: active ? tokens.accentText : tokens.stageText,
+        font: "inherit",
+        fontSize: "0.75rem",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * Elapsed time, ticking in ISOLATION. The one component on the stage allowed
+ * a per-second interval, so nothing else re-renders with the clock.
+ */
+export function CallTimer({ connectedAt, tokens }: { connectedAt: number | null; tokens: StageTokens }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (connectedAt === null) return undefined;
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [connectedAt]);
+  if (connectedAt === null) return null;
+
+  const seconds = Math.max(0, Math.floor((now - connectedAt) / 1000));
+  const hh = Math.floor(seconds / 3600);
+  const mm = Math.floor((seconds % 3600) / 60);
+  const ss = seconds % 60;
+  const pad = (value: number) => String(value).padStart(2, "0");
+  return (
+    <span data-testid="call-timer" style={{ fontSize: "0.75rem", color: tokens.stageMuted, fontVariantNumeric: "tabular-nums" }}>
+      {hh > 0 ? `${hh}:${pad(mm)}:${pad(ss)}` : `${mm}:${pad(ss)}`}
+    </span>
+  );
+}
+
+/** Transient connection states only; terminal ones own the stage centre. */
+function ConnectionPill({ status, tokens, t }: { status: CallStatus; tokens: StageTokens; t: ForgeT }) {
+  const busy = status.tone === "connecting" || status.tone === "reconnecting";
+  const detail = status.detailKey ? t(status.detailKey) : status.detailText;
+  return (
+    <span
+      role="status"
+      aria-live="polite"
+      style={{ display: "inline-flex", alignItems: "center", gap: "0.4rem", fontSize: "0.75rem", color: tokens.stageMuted }}
+    >
+      {busy && <Loader2 width={13} height={13} aria-hidden="true" style={{ animation: "forge-call-spin 1.2s linear infinite" }} />}
+      {status.tone === "failed" && <AlertTriangle width={13} height={13} aria-hidden="true" color={tokens.danger} />}
+      {status.tone === "live" && (
+        <span aria-hidden="true" style={{ width: 7, height: 7, borderRadius: 9999, backgroundColor: tokens.accent, display: "inline-block" }} />
+      )}
+      <span style={{ fontWeight: status.tone === "failed" ? 600 : 400 }}>{t(status.headlineKey)}</span>
+      {detail && status.tone !== "live" && <span>{detail}</span>}
+    </span>
+  );
+}

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

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import { ChevronUp } from "lucide-react";
+
+import type { ForgeT } from "../../../i18n";
+import type { StageTokens } from "./stageTheme";
+
+export type DeviceKind = "audioinput" | "videoinput" | "audiooutput";
+
+/**
+ * The device picker behind a control's chevron.
+ *
+ * `enumerateDevices` yields labels only after a capture permission was
+ * granted, so the list is read when the menu OPENS, not at mount: by then
+ * the person has usually published something. A device with no label is
+ * shown by its ordinal, which is unhelpful but honest.
+ *
+ * The speaker entry only exists where `setSinkId` does (not Safari); the
+ * caller simply does not render an output menu there.
+ */
+export function DeviceMenu({
+  kind,
+  currentDeviceId,
+  onPick,
+  tokens,
+  t,
+  label,
+}: {
+  kind: DeviceKind;
+  currentDeviceId?: string;
+  onPick: (deviceId: string) => void;
+  tokens: StageTokens;
+  t: ForgeT;
+  label: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    let cancelled = false;
+    void navigator.mediaDevices
+      ?.enumerateDevices()
+      .then((all) => {
+        if (!cancelled) setDevices(all.filter((d) => d.kind === kind));
+      })
+      .catch(() => undefined);
+    const close = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    window.addEventListener("pointerdown", close);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("pointerdown", close);
+    };
+  }, [open, kind]);
+
+  return (
+    <div ref={menuRef} style={{ position: "relative", display: "inline-flex" }}>
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={label}
+        title={label}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          padding: "0.5rem 0.25rem",
+          border: `1px solid ${tokens.stageBorder}`,
+          borderLeft: "none",
+          borderRadius: `0 ${tokens.cornerRadius}px ${tokens.cornerRadius}px 0`,
+          backgroundColor: "transparent",
+          color: tokens.stageText,
+          cursor: "pointer",
+        }}
+      >
+        <ChevronUp width={12} height={12} aria-hidden="true" />
+      </button>
+      {open && (
+        <div
+          role="listbox"
+          aria-label={label}
+          style={{
+            position: "absolute",
+            bottom: "calc(100% + 0.375rem)",
+            right: 0,
+            minWidth: "14rem",
+            maxHeight: "14rem",
+            overflowY: "auto",
+            display: "flex",
+            flexDirection: "column",
+            padding: "0.25rem",
+            borderRadius: tokens.cornerRadius,
+            backgroundColor: tokens.stageChrome,
+            border: `1px solid ${tokens.stageBorder}`,
+            boxShadow: "0 6px 24px rgba(0,0,0,0.5)",
+            zIndex: 10,
+          }}
+        >
+          {devices.length === 0 && (
+            <span style={{ padding: "0.4rem 0.6rem", fontSize: "0.8125rem", color: tokens.stageMuted }}>
+              {t("forge.call_stage.no_devices")}
+            </span>
+          )}
+          {devices.map((device, index) => {
+            const active = device.deviceId === currentDeviceId;
+            return (
+              <button
+                key={device.deviceId || index}
+                type="button"
+                role="option"
+                aria-selected={active}
+                onClick={() => {
+                  setOpen(false);
+                  onPick(device.deviceId);
+                }}
+                style={{
+                  textAlign: "left",
+                  padding: "0.4rem 0.6rem",
+                  border: "none",
+                  borderRadius: tokens.cornerRadius,
+                  cursor: "pointer",
+                  backgroundColor: active ? tokens.accent : "transparent",
+                  color: active ? tokens.accentText : tokens.stageText,
+                  font: "inherit",
+                  fontSize: "0.8125rem",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {device.label || t("forge.call_stage.unnamed_device", { number: index + 1 })}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import type { FlyingReaction } from "./callSignals";
+
+/**
+ * The flying emoji layer. Pointer-events none, so a reaction never blocks a
+ * click on the tile under it; the list itself is owned by the stage (culled
+ * and capped in `callSignals`), this only animates what it is given.
+ */
+export function ReactionOverlay({ reactions }: { reactions: readonly FlyingReaction[] }) {
+  if (reactions.length === 0) return null;
+  return (
+    <div aria-hidden="true" style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
+      {reactions.map((reaction) => (
+        <span
+          key={reaction.id}
+          data-testid="flying-reaction"
+          style={{
+            position: "absolute",
+            bottom: 0,
+            // Lanes spread across the middle 80% so nothing rises under the
+            // controls at the edges.
+            left: `${10 + reaction.lane * 80}%`,
+            fontSize: "1.75rem",
+            animation: "forge-call-reaction-rise 3.5s ease-out forwards",
+          }}
+        >
+          {reaction.emoji}
+        </span>
+      ))}
+      <style>{`
+        @keyframes forge-call-reaction-rise {
+          0% { transform: translateY(0) scale(0.8); opacity: 0; }
+          10% { opacity: 1; }
+          100% { transform: translateY(-60vh) scale(1.15); opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+}

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

@@ -0,0 +1,146 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { EyeOff } from "lucide-react";
+import { useLocalPublications, useRoomState } from "@tribe-nest/media-client/react";
+
+import type { ForgeT } from "../../../i18n";
+import type { StageTokens } from "./stageTheme";
+
+export type SelfViewCorner = "br" | "bl" | "tr" | "tl";
+
+/**
+ * The floating self-view: small, corner-snapped, hideable.
+ *
+ * Dragging snaps to the NEAREST corner on release rather than free-floating,
+ * because a preview parked over somebody's face mid-call is the thing people
+ * actually complain about, and four corners are four predictable homes.
+ * Muted, or it is a feedback loop.
+ */
+export function SelfView({
+  tokens,
+  t,
+  corner,
+  onCorner,
+  onHide,
+}: {
+  tokens: StageTokens;
+  t: ForgeT;
+  corner: SelfViewCorner;
+  onCorner: (corner: SelfViewCorner) => void;
+  onHide: () => void;
+}) {
+  const state = useRoomState();
+  const publications = useLocalPublications();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [dragging, setDragging] = useState<{ x: number; y: number } | null>(null);
+
+  const camera = useMemo(() => publications.find((p) => p.source === "camera"), [publications]);
+  const track = camera && !camera.paused ? camera.track : undefined;
+
+  useEffect(() => {
+    const element = videoRef.current;
+    if (!element) return;
+    element.srcObject = track ? new MediaStream([track]) : null;
+    return () => {
+      element.srcObject = null;
+    };
+  }, [track]);
+
+  const place: Record<SelfViewCorner, React.CSSProperties> = {
+    br: { right: "0.75rem", bottom: "0.75rem" },
+    bl: { left: "0.75rem", bottom: "0.75rem" },
+    tr: { right: "0.75rem", top: "0.75rem" },
+    tl: { left: "0.75rem", top: "0.75rem" },
+  };
+
+  const name = state.identity ? t("forge.call_stage.you") : t("forge.call_stage.you_joining");
+
+  return (
+    <div
+      data-testid="tile-local"
+      style={{
+        position: "absolute",
+        ...place[corner],
+        width: "clamp(7rem, 18%, 13rem)",
+        aspectRatio: "16 / 9",
+        borderRadius: tokens.cornerRadius,
+        overflow: "hidden",
+        backgroundColor: tokens.stageSurface,
+        border: `1px solid ${tokens.stageBorder}`,
+        boxShadow: "0 4px 16px rgba(0,0,0,0.45)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 4,
+        cursor: "grab",
+        touchAction: "none",
+        ...(dragging ? { transform: `translate(${dragging.x}px, ${dragging.y}px)`, transition: "none" } : { transition: "transform 120ms" }),
+      }}
+      onPointerDown={(event) => {
+        // The element is read NOW: React's currentTarget is not valid inside
+        // listeners that fire after the handler returns.
+        const element = event.currentTarget as HTMLElement;
+        // Pointer capture, so a touch drag does not lose the element the
+        // moment the finger leaves it.
+        element.setPointerCapture?.(event.pointerId);
+        const startX = event.clientX;
+        const startY = event.clientY;
+        setDragging({ x: 0, y: 0 });
+        const move = (moveEvent: PointerEvent) => setDragging({ x: moveEvent.clientX - startX, y: moveEvent.clientY - startY });
+        const up = (upEvent: PointerEvent) => {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          setDragging(null);
+          const box = element.parentElement?.getBoundingClientRect();
+          if (!box) return;
+          const horizontal = upEvent.clientX - box.left < box.width / 2 ? "l" : "r";
+          const vertical = upEvent.clientY - box.top < box.height / 2 ? "t" : "b";
+          onCorner(`${vertical}${horizontal}` as SelfViewCorner);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      }}
+    >
+      {track ? (
+        <video ref={videoRef} autoPlay playsInline muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+      ) : (
+        <span style={{ fontSize: "0.8125rem", fontWeight: 600, color: tokens.stageText }}>{name}</span>
+      )}
+      <span
+        style={{
+          position: "absolute",
+          left: "0.375rem",
+          bottom: "0.375rem",
+          fontSize: "0.6875rem",
+          padding: "0.1rem 0.375rem",
+          borderRadius: tokens.cornerRadius,
+          backgroundColor: "rgba(0,0,0,0.55)",
+          color: tokens.stageText,
+        }}
+      >
+        {name}
+      </span>
+      <button
+        type="button"
+        onClick={onHide}
+        aria-label={t("forge.call_stage.hide_self_view")}
+        style={{
+          position: "absolute",
+          top: "0.25rem",
+          right: "0.25rem",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 22,
+          height: 22,
+          borderRadius: 9999,
+          border: "none",
+          cursor: "pointer",
+          backgroundColor: "rgba(0,0,0,0.5)",
+          color: tokens.stageText,
+        }}
+      >
+        <EyeOff width={12} height={12} aria-hidden="true" />
+      </button>
+    </div>
+  );
+}