@arbidocs/blocks 0.4.129 → 0.4.130

package/dist/calls/index.d.ts

@@ -19,3 +19,6 @@ export { MinimisedCall, IncomingCallCard, CallStateMessage, ConnectionOverlay }
 export { PreJoin, type PreJoinProps } from './PreJoin';
 export { DEFAULT_JOIN_CHOICES, describeMediaError, type JoinChoices, type MediaKind, } from './join-choices';
 export * from './webinar';
+export { LEVEL_TICK_MS, useVoiceLevel, useVoiceLevels, useIsSpeaking, useSpeakingIds, useSpotlightId, startVoiceLevels, type VoiceSource, } from './voice-levels';
+export { RINGTONE_MUTED_KEY, startRingtone, useRingtone, useRingtoneMuted } from './ringtone';
+export { COMPOSITE_FPS, COMPOSITE_MAX_WIDTH, COMPOSITE_MAX_HEIGHT, fitStage, fitMedia, drawStageFrame, startCompositeCapture, type CompositeCapture, } from './composite-canvas';

package/dist/calls/index.js

@@ -1,14 +1,14 @@
 "use client";
-import { ConfirmDialog } from '../chunk-ECERC6TI.js';
-import '../chunk-TX2ZICS7.js';
+import { ConfirmDialog } from '../chunk-VHJHY7TT.js';
 import { TabHeader } from '../chunk-4WWM3GQ5.js';
-import { NOTICE_MS, gridSlots, gridLayout, spotlightBox, CAPTION_TTL_MS, CAPTION_LINES, speakerAccent, formatElapsed, initialsOf } from '../chunk-Z3AZ7Q5X.js';
+import { NOTICE_MS, gridSlots, gridLayout, spotlightBox, CAPTION_TTL_MS, CAPTION_LINES, speakerAccent, formatElapsed, initialsOf, SPEAKING_LEVEL, nextSpotlight, INITIAL_SPOTLIGHT } from '../chunk-Z3AZ7Q5X.js';
 export { CAPTION_LINES, CAPTION_TTL_MS, INITIAL_SPOTLIGHT, MAX_GRID_TILES, NOTICE_MS, SPEAKER_ACCENTS, SPEAKING_LEVEL, TILE_ASPECT, formatElapsed, gridLayout, gridSlots, initialsOf, nearestCorner, nextSpotlight, pickSpotlight, rowCounts, speakerAccent, speakerBorder, spotlightBox, stageContentHeight } from '../chunk-Z3AZ7Q5X.js';
 import '../chunk-NPLYHR2E.js';
 import '../chunk-7F6CBP3Z.js';
+import '../chunk-TX2ZICS7.js';
 import { fromNow } from '../chunk-OXF2IFXG.js';
 import '../chunk-VUNV25KB.js';
-import { forwardRef, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { forwardRef, useState, useRef, useMemo, useEffect, useSyncExternalStore, useCallback } from 'react';
 import { Button, cn, Tooltip, TooltipTrigger, TooltipContent, Separator, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, TabsList, TabsTrigger, Tabs, TabsContent, Input, Textarea, Dialog, DialogContent, DialogTitle, DialogDescription, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@arbidocs/react/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MonitorUp, MicOff, AudioLines, SignalLow, Users, Mic, Captions, Lock, LockOpen, Video, VideoOff, ChevronUp, Loader2, Circle, PhoneOff, MoreHorizontal, LayoutGrid, UserRound, PictureInPicture2, Phone, X, Maximize2, BellOff, Bell, CalendarCheck, Radio, SquareX, EyeOff, Hand, Search, Send, MessageCircleQuestion, UserX, CheckCheck, RotateCcw, Trash2, MessageSquareText } from 'lucide-react';
@@ -2747,7 +2747,362 @@ function WebinarViewer({
     }
   );
 }
+var LEVEL_TICK_MS = 60;
+var SPEAKING_RELEASE_MS = 350;
+var EMPTY2 = { levels: {}, speaking: [], spotlight: null };
+var snapshot = EMPTY2;
+var listeners = /* @__PURE__ */ new Set();
+function publish(next) {
+  snapshot = next;
+  listeners.forEach((fn) => fn());
+}
+function subscribe(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+var get = () => snapshot;
+function useVoiceLevel(identity) {
+  return useSyncExternalStore(
+    subscribe,
+    () => identity ? get().levels[identity] ?? 0 : 0,
+    () => 0
+  );
+}
+function useVoiceLevels() {
+  return useSyncExternalStore(
+    subscribe,
+    () => get().levels,
+    () => EMPTY2.levels
+  );
+}
+function useIsSpeaking(identity) {
+  return useSyncExternalStore(
+    subscribe,
+    () => identity ? get().speaking.includes(identity) : false,
+    () => false
+  );
+}
+function useSpeakingIds() {
+  const key = useSyncExternalStore(
+    subscribe,
+    () => get().speaking.join("\n"),
+    () => ""
+  );
+  return key ? key.split("\n") : [];
+}
+function useSpotlightId() {
+  return useSyncExternalStore(
+    subscribe,
+    () => get().spotlight,
+    () => null
+  );
+}
+function startVoiceLevels(sources) {
+  let ctx = null;
+  try {
+    ctx = typeof AudioContext !== "undefined" ? new AudioContext() : null;
+  } catch {
+    ctx = null;
+  }
+  const meters = /* @__PURE__ */ new Map();
+  const smoothed = /* @__PURE__ */ new Map();
+  const loudAt = /* @__PURE__ */ new Map();
+  let spot = INITIAL_SPOTLIGHT;
+  const meterFor = (s) => {
+    if (!ctx || !s.track || s.track.readyState === "ended") return null;
+    const have = meters.get(s.identity);
+    if (have && have.track === s.track) return have;
+    have?.source.disconnect();
+    try {
+      const source = ctx.createMediaStreamSource(new MediaStream([s.track]));
+      const analyser = ctx.createAnalyser();
+      analyser.fftSize = 512;
+      source.connect(analyser);
+      const m = { track: s.track, source, analyser, buf: new Float32Array(analyser.fftSize) };
+      meters.set(s.identity, m);
+      return m;
+    } catch {
+      return null;
+    }
+  };
+  const tick = () => {
+    if (ctx?.state === "suspended") void ctx.resume().catch(() => void 0);
+    const now = Date.now();
+    const list = sources();
+    const seen = /* @__PURE__ */ new Set();
+    const levels = {};
+    for (const s of list) {
+      seen.add(s.identity);
+      let raw = 0;
+      const m = s.muted ? null : meterFor(s);
+      if (m) {
+        m.analyser.getFloatTimeDomainData(m.buf);
+        let sum = 0;
+        for (let i = 0; i < m.buf.length; i++) sum += m.buf[i] * m.buf[i];
+        raw = Math.min(1, Math.sqrt(sum / m.buf.length) * 5);
+      }
+      const prev2 = smoothed.get(s.identity) ?? 0;
+      const level = raw >= prev2 ? raw : prev2 * 0.8 + raw * 0.2;
+      smoothed.set(s.identity, level);
+      if (level >= SPEAKING_LEVEL) loudAt.set(s.identity, now);
+      levels[s.identity] = Math.round(level * 20) / 20;
+    }
+    for (const id2 of [...meters.keys()]) {
+      if (!seen.has(id2)) {
+        meters.get(id2)?.source.disconnect();
+        meters.delete(id2);
+        smoothed.delete(id2);
+        loudAt.delete(id2);
+      }
+    }
+    const speaking = list.map((s) => s.identity).filter((id2) => now - (loudAt.get(id2) ?? -Infinity) <= SPEAKING_RELEASE_MS).sort((a, b) => (smoothed.get(b) ?? 0) - (smoothed.get(a) ?? 0));
+    spot = nextSpotlight(spot, Object.fromEntries(smoothed), now, {
+      exclude: list.filter((s) => s.local).map((s) => s.identity)
+    });
+    if (spot.id && !seen.has(spot.id)) spot = INITIAL_SPOTLIGHT;
+    const prev = snapshot;
+    const same = prev.spotlight === spot.id && prev.speaking.join("\n") === speaking.join("\n") && Object.keys(levels).length === Object.keys(prev.levels).length && Object.entries(levels).every(([k, v]) => prev.levels[k] === v);
+    if (!same) publish({ levels, speaking, spotlight: spot.id });
+  };
+  const id = setInterval(tick, LEVEL_TICK_MS);
+  return () => {
+    clearInterval(id);
+    for (const m of meters.values()) m.source.disconnect();
+    meters.clear();
+    void ctx?.close().catch(() => void 0);
+    publish(EMPTY2);
+  };
+}
+var RINGTONE_MUTED_KEY = "arbi-call-ringtone-muted";
+var RING_ON_S = 1.2;
+var RING_PERIOD_S = 4;
+var GAIN = 0.08;
+function audioContextCtor() {
+  if (typeof window === "undefined") return null;
+  return window.AudioContext ?? window.webkitAudioContext ?? null;
+}
+function startRingtone() {
+  const Ctor = audioContextCtor();
+  if (!Ctor) return () => {
+  };
+  let ctx;
+  try {
+    ctx = new Ctor();
+  } catch {
+    return () => {
+    };
+  }
+  const out = ctx.createGain();
+  out.gain.value = 0;
+  out.connect(ctx.destination);
+  const oscillators = [440, 480].map((frequency) => {
+    const osc = ctx.createOscillator();
+    osc.type = "sine";
+    osc.frequency.value = frequency;
+    osc.connect(out);
+    osc.start();
+    return osc;
+  });
+  let nextRingAt = ctx.currentTime + 0.05;
+  const schedule = () => {
+    while (nextRingAt < ctx.currentTime + RING_PERIOD_S * 2) {
+      out.gain.setValueAtTime(0, nextRingAt);
+      out.gain.linearRampToValueAtTime(GAIN, nextRingAt + 0.03);
+      out.gain.setValueAtTime(GAIN, nextRingAt + RING_ON_S - 0.03);
+      out.gain.linearRampToValueAtTime(0, nextRingAt + RING_ON_S);
+      nextRingAt += RING_PERIOD_S;
+    }
+  };
+  schedule();
+  const timer = setInterval(schedule, 1e3);
+  void ctx.resume().catch(() => {
+  });
+  let stopped = false;
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    clearInterval(timer);
+    for (const osc of oscillators) {
+      try {
+        osc.stop();
+      } catch {
+      }
+    }
+    void ctx.close().catch(() => {
+    });
+  };
+}
+function readMuted() {
+  try {
+    return localStorage.getItem(RINGTONE_MUTED_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function useRingtoneMuted() {
+  const [muted, setMutedState] = useState(readMuted);
+  const setMuted = useCallback((next) => {
+    setMutedState(next);
+    try {
+      if (next) localStorage.setItem(RINGTONE_MUTED_KEY, "1");
+      else localStorage.removeItem(RINGTONE_MUTED_KEY);
+    } catch {
+    }
+  }, []);
+  return [muted, setMuted];
+}
+function useRingtone(ringing, muted) {
+  useEffect(() => {
+    if (!ringing || muted) return;
+    return startRingtone();
+  }, [ringing, muted]);
+}
+
+// src/calls/composite-canvas.ts
+var COMPOSITE_FPS = 15;
+var COMPOSITE_MAX_WIDTH = 1280;
+var COMPOSITE_MAX_HEIGHT = 720;
+function fitStage(stage, canvas) {
+  if (stage.width <= 0 || stage.height <= 0) return { scale: 0, dx: 0, dy: 0 };
+  const scale = Math.min(canvas.width / stage.width, canvas.height / stage.height);
+  return {
+    scale,
+    dx: (canvas.width - stage.width * scale) / 2,
+    dy: (canvas.height - stage.height * scale) / 2
+  };
+}
+function fitMedia(src, box, mode) {
+  const srcRatio = src.width / src.height;
+  const boxRatio = box.width / box.height;
+  if (mode === "contain") {
+    const dw = srcRatio > boxRatio ? box.width : box.height * srcRatio;
+    const dh = srcRatio > boxRatio ? box.width / srcRatio : box.height;
+    return {
+      sx: 0,
+      sy: 0,
+      sw: src.width,
+      sh: src.height,
+      dx: box.x + (box.width - dw) / 2,
+      dy: box.y + (box.height - dh) / 2,
+      dw,
+      dh
+    };
+  }
+  const sw = srcRatio > boxRatio ? src.height * boxRatio : src.width;
+  const sh = srcRatio > boxRatio ? src.height : src.width / boxRatio;
+  return {
+    sx: (src.width - sw) / 2,
+    sy: (src.height - sh) / 2,
+    sw,
+    sh,
+    dx: box.x,
+    dy: box.y,
+    dw: box.width,
+    dh: box.height
+  };
+}
+function drawStageFrame(ctx, stage, width, height) {
+  ctx.fillStyle = "#111";
+  ctx.fillRect(0, 0, width, height);
+  const stageRect = stage.getBoundingClientRect();
+  const { scale, dx, dy } = fitStage(stageRect, { width, height });
+  if (!scale) {
+    ctx.fillStyle = "#bbb";
+    ctx.font = "24px sans-serif";
+    ctx.textAlign = "center";
+    ctx.fillText("Video paused", width / 2, height / 2);
+    ctx.textAlign = "start";
+    return;
+  }
+  const tiles = Array.from(stage.querySelectorAll(".lk-participant-tile"));
+  for (const tile of tiles) {
+    const r = tile.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0) continue;
+    const box = {
+      x: dx + (r.left - stageRect.left) * scale,
+      y: dy + (r.top - stageRect.top) * scale,
+      width: r.width * scale,
+      height: r.height * scale
+    };
+    ctx.fillStyle = "#222";
+    ctx.fillRect(box.x, box.y, box.width, box.height);
+    const video = tile.querySelector("video");
+    if (video && video.readyState >= 2 && video.videoWidth > 0 && video.videoHeight > 0) {
+      const screen = tile.getAttribute("data-lk-source") === "screen_share";
+      const f = fitMedia(
+        { width: video.videoWidth, height: video.videoHeight },
+        box,
+        screen ? "contain" : "cover"
+      );
+      try {
+        ctx.drawImage(video, f.sx, f.sy, f.sw, f.sh, f.dx, f.dy, f.dw, f.dh);
+      } catch {
+      }
+    }
+    if (tile.getAttribute("data-lk-speaking") === "true") {
+      ctx.strokeStyle = "#4ade80";
+      ctx.lineWidth = 3;
+      ctx.strokeRect(box.x + 1.5, box.y + 1.5, box.width - 3, box.height - 3);
+    }
+    const name = tile.querySelector(".lk-participant-name")?.textContent?.trim();
+    if (name) {
+      ctx.font = `${Math.max(11, Math.round(14 * Math.min(1, scale * 1.2)))}px sans-serif`;
+      const w = ctx.measureText(name).width;
+      ctx.fillStyle = "rgba(0,0,0,0.6)";
+      ctx.fillRect(box.x + 6, box.y + box.height - 26, w + 12, 20);
+      ctx.fillStyle = "#fff";
+      ctx.fillText(name, box.x + 12, box.y + box.height - 11);
+    }
+  }
+}
+function startCompositeCapture(stage) {
+  const canvas = document.createElement("canvas");
+  canvas.width = COMPOSITE_MAX_WIDTH;
+  canvas.height = COMPOSITE_MAX_HEIGHT;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("This browser cannot draw the recording");
+  const draw = () => drawStageFrame(ctx, stage, canvas.width, canvas.height);
+  draw();
+  const timer = setInterval(draw, Math.round(1e3 / COMPOSITE_FPS));
+  const video = canvas.captureStream(COMPOSITE_FPS);
+  const audio = new AudioContext();
+  const destination = audio.createMediaStreamDestination();
+  const sources = /* @__PURE__ */ new Map();
+  const stream = new MediaStream([
+    ...video.getVideoTracks(),
+    ...destination.stream.getAudioTracks()
+  ]);
+  return {
+    stream,
+    setAudioTracks(tracks) {
+      const wanted = new Map(tracks.map((t) => [t.id, t]));
+      for (const [id, node] of sources) {
+        if (!wanted.has(id)) {
+          node.disconnect();
+          sources.delete(id);
+        }
+      }
+      for (const [id, track] of wanted) {
+        if (sources.has(id) || track.readyState === "ended") continue;
+        try {
+          const node = audio.createMediaStreamSource(new MediaStream([track]));
+          node.connect(destination);
+          sources.set(id, node);
+        } catch {
+        }
+      }
+      if (audio.state === "suspended") void audio.resume().catch(() => void 0);
+    },
+    dispose() {
+      clearInterval(timer);
+      for (const node of sources.values()) node.disconnect();
+      sources.clear();
+      video.getTracks().forEach((t) => t.stop());
+      void audio.close().catch(() => void 0);
+    }
+  };
+}
 
-export { BackstageBanner, CallControlBar, CallControlButton, CallFocus, CallGrid, CallHeader, CallNotice, CallParticipants, CallPersonLabel, CallSidePanel, CallStageFrame, CallStateMessage, CallStatusChip, CallTile, CaptionsStrip, ChatPermissionSetting, ConnectionOverlay, ControlBadge, ControlDivider, ControlGroup, DEFAULT_JOIN_CHOICES, ElapsedTime, EncryptionStatusChip, IncomingCallCard, LeaveButton, LobbyRequests, MediaControl, MinimisedCall, MoreMenu, OnStageCheck, PanelComposer, PreJoin, QAPanel, RaiseHandButton, RecordControl, RecordingStatusChip, SpeakingNow, TranscriptionStatusChip, VoiceMeter, WebinarAudiencePanel, WebinarEndConfirm, WebinarLiveChip, WebinarLiveControl, WebinarViewer, WebinarWaiting, chatPermissionSection, describeMediaError, sortQuestions, useBriefNotice, useElementSize, useShortcutKeys };
+export { BackstageBanner, COMPOSITE_FPS, COMPOSITE_MAX_HEIGHT, COMPOSITE_MAX_WIDTH, CallControlBar, CallControlButton, CallFocus, CallGrid, CallHeader, CallNotice, CallParticipants, CallPersonLabel, CallSidePanel, CallStageFrame, CallStateMessage, CallStatusChip, CallTile, CaptionsStrip, ChatPermissionSetting, ConnectionOverlay, ControlBadge, ControlDivider, ControlGroup, DEFAULT_JOIN_CHOICES, ElapsedTime, EncryptionStatusChip, IncomingCallCard, LEVEL_TICK_MS, LeaveButton, LobbyRequests, MediaControl, MinimisedCall, MoreMenu, OnStageCheck, PanelComposer, PreJoin, QAPanel, RINGTONE_MUTED_KEY, RaiseHandButton, RecordControl, RecordingStatusChip, SpeakingNow, TranscriptionStatusChip, VoiceMeter, WebinarAudiencePanel, WebinarEndConfirm, WebinarLiveChip, WebinarLiveControl, WebinarViewer, WebinarWaiting, chatPermissionSection, describeMediaError, drawStageFrame, fitMedia, fitStage, sortQuestions, startCompositeCapture, startRingtone, startVoiceLevels, useBriefNotice, useElementSize, useIsSpeaking, useRingtone, useRingtoneMuted, useShortcutKeys, useSpeakingIds, useSpotlightId, useVoiceLevel, useVoiceLevels };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map