vue-parley 4.9.2 → 5.2.0

package/dist/chunks/Call-DvVJ7IsY.mjs

@@ -0,0 +1,1717 @@
+import { ref, onMounted, onUnmounted, watch, nextTick, reactive, onBeforeUnmount, computed, defineComponent, openBlock, createElementBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, normalizeStyle, createSlots, toDisplayString, createCommentVNode, withDirectives, Fragment, useModel, renderList, createTextVNode, mergeModels, withModifiers, Transition, vShow } from "vue";
+import { u as useCallStore, a as useLocalI18n, c as chat, n as nameInitials, b as avatarToneStyle, _ as _sfc_main$5, d as useDirection, e as useChatStore, f as formatDuration } from "./index-C5yf_PW0.mjs";
+import { useElementSize, useEventListener, useWindowSize, useDraggable } from "@vueuse/core";
+import Button from "primevue/button";
+import Menu from "primevue/menu";
+import Tooltip from "primevue/tooltip";
+import Avatar from "primevue/avatar";
+import Drawer from "primevue/drawer";
+const CONTROLS_HIDE_AFTER_MS = 3e3;
+function useCallUi(opts) {
+  const { localStream, screenStream, remoteVideos, remoteScreens } = opts;
+  const localVideo = ref(null);
+  const localScreen = ref(null);
+  const remoteRefs = ref({});
+  const remoteScreenRefs = ref({});
+  const remoteParents = ref({});
+  const showControls = ref(true);
+  let controlsTimeout;
+  function resetControlsTimeout() {
+    showControls.value = true;
+    clearTimeout(controlsTimeout);
+    controlsTimeout = setTimeout(
+      () => showControls.value = false,
+      CONTROLS_HIDE_AFTER_MS
+    );
+  }
+  const inputEvents = ["mousemove", "click", "keydown"];
+  onMounted(() => {
+    resetControlsTimeout();
+    inputEvents.forEach((e) => document.addEventListener(e, resetControlsTimeout));
+  });
+  onUnmounted(() => {
+    inputEvents.forEach((e) => document.removeEventListener(e, resetControlsTimeout));
+    clearTimeout(controlsTimeout);
+    detachAll();
+  });
+  const isFullscreen = ref(false);
+  function toggleFullscreen(target = document.documentElement) {
+    var _a;
+    if (!document.fullscreenElement) {
+      void ((_a = target.requestFullscreen) == null ? void 0 : _a.call(target));
+      isFullscreen.value = true;
+    } else {
+      void document.exitFullscreen();
+      isFullscreen.value = false;
+    }
+  }
+  const toggleRemote = (tileId, el) => {
+    const container = el ?? remoteParents.value[tileId];
+    if (container) toggleFullscreen(container);
+  };
+  const videoPaused = ref({});
+  function toggleVideoPause(tileId, el) {
+    if (!(el instanceof HTMLVideoElement)) return;
+    if (videoPaused.value[tileId]) void el.play();
+    else el.pause();
+    videoPaused.value[tileId] = !videoPaused.value[tileId];
+  }
+  const soundBlocked = ref(false);
+  async function play(el) {
+    try {
+      await el.play();
+    } catch (err) {
+      if ((err == null ? void 0 : err.name) !== "NotAllowedError" || el.muted) return;
+      el.muted = true;
+      soundBlocked.value = true;
+      await el.play().catch((e) => console.error("[vue-chat] Remote video can't play:", e));
+    }
+  }
+  function enableSound() {
+    soundBlocked.value = false;
+    for (const el of Object.values(remoteRefs.value)) {
+      if (!el) continue;
+      el.muted = false;
+      void play(el);
+    }
+  }
+  const attach = (el, stream) => {
+    if (!el) return;
+    if (el.srcObject !== stream) el.srcObject = stream;
+    void play(el);
+  };
+  async function reattach() {
+    await nextTick();
+    if (localStream.value && localVideo.value && localVideo.value.srcObject !== localStream.value)
+      localVideo.value.srcObject = localStream.value;
+    if (localScreen.value && localScreen.value.srcObject !== screenStream.value)
+      localScreen.value.srcObject = screenStream.value;
+    for (const [id, { stream }] of Object.entries(remoteVideos.value))
+      attach(remoteRefs.value[id], stream);
+    for (const [id, { stream }] of Object.entries(remoteScreens.value))
+      attach(remoteScreenRefs.value[id], stream);
+  }
+  watch(
+    [
+      localStream,
+      screenStream,
+      () => ({ ...remoteVideos.value }),
+      () => ({ ...remoteScreens.value }),
+      opts.isMinimized,
+      () => {
+        var _a;
+        return (_a = opts.layoutKey) == null ? void 0 : _a.call(opts);
+      }
+    ],
+    reattach,
+    { immediate: true }
+  );
+  function detachAll() {
+    const all = [
+      localVideo.value,
+      localScreen.value,
+      ...Object.values(remoteRefs.value),
+      ...Object.values(remoteScreenRefs.value)
+    ];
+    for (const el of all) if (el) el.srcObject = null;
+  }
+  return {
+    localVideo,
+    localScreen,
+    remoteRefs,
+    remoteScreenRefs,
+    remoteParents,
+    showControls,
+    resetControlsTimeout,
+    isFullscreen,
+    toggleFullscreen: () => toggleFullscreen(),
+    toggleRemote,
+    videoPaused,
+    toggleVideoPause,
+    soundBlocked,
+    enableSound,
+    detachAll,
+    reattach
+  };
+}
+function useCall({ layoutKey } = {}) {
+  const callStore = useCallStore();
+  const session = callStore.session;
+  if (!session) {
+    throw new Error("[vue-chat] useCall() needs a running call: callStore.startCall() first");
+  }
+  const { media, peers } = session;
+  const ui = useCallUi({
+    localStream: media.localStream,
+    screenStream: media.screenStream,
+    remoteVideos: peers.remoteVideos,
+    remoteScreens: peers.remoteScreens,
+    isMinimized: () => callStore.isMinimized,
+    layoutKey
+  });
+  async function switchCamera(deviceId) {
+    const stream = await session.switchCamera(deviceId);
+    if (stream && ui.localVideo.value) ui.localVideo.value.srcObject = stream;
+  }
+  return {
+    // Call state
+    participantCount: session.participantCount,
+    tileCount: session.tileCount,
+    participants: session.participants,
+    phase: session.phase,
+    hadOthers: session.hadOthers,
+    maxParticipants: session.maxParticipants,
+    remoteMedia: peers.remoteMedia,
+    peerStatus: peers.peerStatus,
+    remoteNames: peers.remoteNames,
+    localStream: media.localStream,
+    remoteVideos: peers.remoteVideos,
+    remoteScreens: peers.remoteScreens,
+    // Local media
+    cameras: media.cameras,
+    isAudioOn: media.isAudioOn,
+    isVideoOn: media.isVideoOn,
+    isScreenSharing: media.isScreenSharing,
+    isFlashlightOn: media.isFlashlightOn,
+    isFlashlightSupported: media.isFlashlightSupported,
+    toggleAudio: media.toggleAudio,
+    toggleVideo: media.toggleVideo,
+    toggleFlashlight: media.toggleFlashlight,
+    toggleScreenShare: session.toggleScreenShare,
+    switchCamera,
+    endCall: callStore.endCall,
+    // View
+    showCameraModal: ref(false),
+    showControls: ui.showControls,
+    resetControlsTimeout: ui.resetControlsTimeout,
+    isFullscreen: ui.isFullscreen,
+    toggleFullscreen: ui.toggleFullscreen,
+    toggleRemote: ui.toggleRemote,
+    videoPaused: ui.videoPaused,
+    soundBlocked: ui.soundBlocked,
+    enableSound: ui.enableSound,
+    toggleVideoPause: ui.toggleVideoPause,
+    localVideo: ui.localVideo,
+    localScreen: ui.localScreen,
+    remoteRefs: ui.remoteRefs,
+    remoteScreenRefs: ui.remoteScreenRefs,
+    remoteParents: ui.remoteParents,
+    reattach: ui.reattach,
+    retryPeer: session.retryPeer
+  };
+}
+const THRESHOLD = 0.04;
+const HOLD_MS = 400;
+const POLL_MS = 120;
+function useSpeaking(streams) {
+  const speaking = reactive({});
+  const meters = /* @__PURE__ */ new Map();
+  let context = null;
+  let timer;
+  const drop = (id) => {
+    const meter = meters.get(id);
+    if (!meter) return;
+    meter.source.disconnect();
+    meters.delete(id);
+    delete speaking[id];
+  };
+  const poll = () => {
+    const now = performance.now();
+    for (const [id, meter] of meters) {
+      meter.analyser.getByteTimeDomainData(meter.buffer);
+      let sum = 0;
+      for (const sample of meter.buffer) {
+        const centred = (sample - 128) / 128;
+        sum += centred * centred;
+      }
+      if (Math.sqrt(sum / meter.buffer.length) > THRESHOLD) meter.lastLoud = now;
+      const lit2 = now - meter.lastLoud < HOLD_MS;
+      if (speaking[id] !== lit2) speaking[id] = lit2;
+    }
+  };
+  watch(
+    streams,
+    (current) => {
+      for (const id of [...meters.keys()]) {
+        if (current[id] !== meters.get(id).stream) drop(id);
+      }
+      for (const [id, stream] of Object.entries(current)) {
+        if (!stream || meters.has(id) || !stream.getAudioTracks().length) continue;
+        if (typeof AudioContext === "undefined") return;
+        context ?? (context = new AudioContext());
+        if (context.state === "suspended") void context.resume().catch(() => {
+        });
+        const source = context.createMediaStreamSource(stream);
+        const analyser = context.createAnalyser();
+        analyser.fftSize = 512;
+        source.connect(analyser);
+        meters.set(id, {
+          stream,
+          source,
+          analyser,
+          buffer: new Uint8Array(analyser.fftSize),
+          lastLoud: 0
+        });
+      }
+      if (meters.size && !timer) timer = setInterval(poll, POLL_MS);
+      if (!meters.size && timer) {
+        clearInterval(timer);
+        timer = void 0;
+      }
+    },
+    { immediate: true, deep: 1 }
+  );
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+    for (const id of [...meters.keys()]) drop(id);
+    void (context == null ? void 0 : context.close().catch(() => {
+    }));
+  });
+  return speaking;
+}
+function useCallLayout({ participants, width, height }) {
+  const cameraTile = (p) => p.isSelf ? { id: "self_cam", kind: "self", participantId: p.id } : { id: `remote_video_${p.id}`, kind: "camera", participantId: p.id };
+  const screenTile = (p) => ({
+    id: p.isSelf ? "self_screen" : `remote_screen_${p.id}`,
+    kind: "screen",
+    participantId: p.id
+  });
+  const cameraTiles = computed(() => participants.value.map(cameraTile));
+  const screenTiles = computed(
+    () => participants.value.filter((p) => p.screen).map(screenTile)
+  );
+  const tiles = computed(
+    () => participants.value.flatMap((p) => p.screen ? [cameraTile(p), screenTile(p)] : [cameraTile(p)])
+  );
+  const screenSince = /* @__PURE__ */ new Map();
+  let screenOrder = 0;
+  const newestScreen = ref(null);
+  watch(
+    screenTiles,
+    (current) => {
+      const ids = new Set(current.map((t) => t.id));
+      for (const id of [...screenSince.keys()]) if (!ids.has(id)) screenSince.delete(id);
+      for (const id of ids) if (!screenSince.has(id)) screenSince.set(id, ++screenOrder);
+      const ranked = [...ids].sort(
+        (a, b) => Number(a === "self_screen") - Number(b === "self_screen") || screenSince.get(b) - screenSince.get(a)
+      );
+      newestScreen.value = ranked[0] ?? null;
+    },
+    { immediate: true }
+  );
+  const pinnedId = ref(null);
+  function togglePin(tileId) {
+    pinnedId.value = pinnedId.value === tileId ? null : tileId;
+  }
+  watch(tiles, (current) => {
+    if (pinnedId.value && !current.some((t) => t.id === pinnedId.value)) pinnedId.value = null;
+  });
+  const remoteCount = computed(() => participants.value.length - 1);
+  const mode = computed(() => {
+    if (pinnedId.value || newestScreen.value) return "stage";
+    if (remoteCount.value <= 0) return "solo";
+    if (remoteCount.value === 1) return "pair";
+    return "grid";
+  });
+  const stageTile = computed(() => {
+    if (mode.value !== "stage") return null;
+    const id = pinnedId.value ?? newestScreen.value;
+    return tiles.value.find((t) => t.id === id) ?? null;
+  });
+  const stripTiles = computed(
+    () => mode.value === "stage" ? tiles.value.filter((t) => {
+      var _a;
+      return t.id !== ((_a = stageTile.value) == null ? void 0 : _a.id);
+    }) : []
+  );
+  const gridTiles = computed(() => mode.value === "grid" ? cameraTiles.value : []);
+  const orientation = computed(
+    () => height.value > width.value ? "portrait" : "landscape"
+  );
+  const gridClass = "grid size-full grid-cols-2 grid-rows-2 gap-(--call-gap)";
+  const cellClass = (index) => gridTiles.value.length === 3 && index === 2 ? "col-span-2 w-[calc(50%-var(--call-gap)/2)] justify-self-center" : "";
+  const key = computed(
+    () => {
+      var _a;
+      return `${mode.value}|${((_a = stageTile.value) == null ? void 0 : _a.id) ?? ""}|${tiles.value.map((t) => t.id).join()}`;
+    }
+  );
+  return {
+    mode,
+    tiles,
+    gridTiles,
+    stageTile,
+    stripTiles,
+    pinnedId,
+    togglePin,
+    orientation,
+    gridClass,
+    cellClass,
+    key
+  };
+}
+const NOTICE_MS = 3e3;
+function useCallNotices(participants, t, and, locale) {
+  const current = ref(null);
+  const liveText = ref("");
+  let joined = [];
+  let left = [];
+  let timer;
+  let counter = 0;
+  const list = (names) => {
+    if (names.length <= 1) return names[0] ?? "";
+    const comma = locale().startsWith("fa") || locale().startsWith("ar") ? "، " : ", ";
+    return `${names.slice(0, -1).join(comma)} ${and()} ${names[names.length - 1]}`;
+  };
+  function show() {
+    const parts = [
+      joined.length ? t("chat.call.joined", { names: list(joined) }, joined.length) : "",
+      left.length ? t("chat.call.left", { names: list(left) }, left.length) : ""
+    ].filter(Boolean);
+    if (!parts.length) return;
+    const text = parts.join(" · ");
+    current.value = { text, id: ++counter };
+    liveText.value = text;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      current.value = null;
+      joined = [];
+      left = [];
+    }, NOTICE_MS);
+  }
+  watch(
+    () => participants.value.filter((p) => !p.isSelf).map((p) => [p.id, p.name]),
+    (now, before) => {
+      if (!before) return;
+      const was = new Map(before);
+      const is = new Map(now);
+      let changed = false;
+      for (const [id, name] of is) {
+        if (was.has(id)) continue;
+        const i = left.indexOf(name);
+        if (i >= 0) left.splice(i, 1);
+        else joined.push(name);
+        changed = true;
+      }
+      for (const [id, name] of was) {
+        if (is.has(id)) continue;
+        const i = joined.indexOf(name);
+        if (i >= 0) joined.splice(i, 1);
+        left.push(name);
+        changed = true;
+      }
+      if (changed) {
+        if (joined.length || left.length) show();
+        else current.value = null;
+      }
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => clearTimeout(timer));
+  return { current, liveText };
+}
+const _hoisted_1$3 = ["innerHTML"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "CallIcon",
+  props: {
+    name: {}
+  },
+  setup(__props) {
+    const ICONS = {
+      mic: '<path fill="currentColor" d="M9.875 13.125Q9 12.25 9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14t-2.125-.875M11 20v-2.075q-2.3-.325-3.937-1.95t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q1.8 0 3.175-1.137T16.9 12q.1-.425.388-.712T18 11t.7.3t.225.725q-.35 2.275-1.975 3.925T13 17.925V20q0 .425-.288.713T12 21t-.712-.288T11 20"/>',
+      micOff: '<path fill="currentColor" d="M16.8 14.575q-.35-.2-.45-.612t.1-.763q.175-.275.288-.587t.162-.638q.1-.425.388-.7T18 11t.7.3t.225.725q-.075.575-.262 1.125t-.488 1.05q-.2.35-.612.463t-.763-.088m-3.5-4.125L9.575 6.725Q9.3 6.45 9.15 6.088T9 5.325V5q0-1.25.875-2.125T12 2t2.125.875T15 5v4.725q0 .675-.612.938T13.3 10.45M11 20v-2.1q-2.3-.3-3.937-1.925t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q.85 0 1.613-.262T15 15l1.425 1.425q-.725.575-1.588.963T13 17.9V20q0 .425-.288.713T12 21t-.712-.288T11 20m8.1 1.9l-17-17q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275"/>',
+      videocam: '<path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h12q.825 0 1.413.588T18 6v4.5l3.15-3.15q.25-.25.55-.125t.3.475v8.6q0 .35-.3.475t-.55-.125L18 13.5V18q0 .825-.587 1.413T16 20z"/>',
+      videocamOff: '<path fill="currentColor" d="m18 10.5l3.15-3.15q.25-.25.55-.125t.3.475v8.6q0 .35-.3.475t-.55-.125l-3.325-3.325q-.25.35-.712.425t-.813-.275L8.525 5.7q-.25-.25-.288-.525t.088-.55t.35-.45T9.25 4H16q.825 0 1.413.588T18 6zm1.85 12.15L1.35 4.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l18.5 18.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275M4 4l14 14q0 .825-.587 1.413T16 20H4q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4"/>',
+      presentToAll: '<path fill="currentColor" d="M11 11.825V15q0 .425.288.713T12 16t.713-.288T13 15v-3.15l.9.875q.3.275.7.288t.7-.288t.3-.712t-.3-.713l-2.6-2.6q-.3-.3-.7-.3t-.7.3l-2.6 2.6q-.3.3-.287.7t.312.7q.3.275.7.288t.7-.288zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20z"/>',
+      cancelPresentation: '<path fill="currentColor" d="m10.6 12l-1.9 1.9q-.275.275-.275.7t.275.7t.7.275t.7-.275l1.9-1.9l1.9 1.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l1.9-1.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6l-1.9-1.9q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20z"/>',
+      callEnd: '<path fill="currentColor" d="M12 8q2.95 0 5.813 1.188T22.9 12.75q.3.3.3.7t-.3.7l-2.3 2.25q-.275.275-.638.3t-.662-.2l-2.9-2.2q-.2-.15-.3-.35t-.1-.45v-2.85q-.95-.3-1.95-.475T12 10t-2.05.175T8 10.65v2.85q0 .25-.1.45t-.3.35l-2.9 2.2q-.3.225-.663.2t-.637-.3l-2.3-2.25q-.3-.3-.3-.7t.3-.7q2.2-2.375 5.075-3.562T12 8"/>',
+      fullscreen: '<path fill="currentColor" d="M5 19h2q.425 0 .713.288T8 20t-.288.713T7 21H4q-.425 0-.712-.288T3 20v-3q0-.425.288-.712T4 16t.713.288T5 17zm14 0v-2q0-.425.288-.712T20 16t.713.288T21 17v3q0 .425-.288.713T20 21h-3q-.425 0-.712-.288T16 20t.288-.712T17 19zM5 5v2q0 .425-.288.713T4 8t-.712-.288T3 7V4q0-.425.288-.712T4 3h3q.425 0 .713.288T8 4t-.288.713T7 5zm14 0h-2q-.425 0-.712-.288T16 4t.288-.712T17 3h3q.425 0 .713.288T21 4v3q0 .425-.288.713T20 8t-.712-.288T19 7z"/>',
+      fullscreenExit: '<path fill="currentColor" d="M6 18H4q-.425 0-.712-.288T3 17t.288-.712T4 16h3q.425 0 .713.288T8 17v3q0 .425-.288.713T7 21t-.712-.288T6 20zm12 0v2q0 .425-.288.713T17 21t-.712-.288T16 20v-3q0-.425.288-.712T17 16h3q.425 0 .713.288T21 17t-.288.713T20 18zM6 6V4q0-.425.288-.712T7 3t.713.288T8 4v3q0 .425-.288.713T7 8H4q-.425 0-.712-.288T3 7t.288-.712T4 6zm12 0h2q.425 0 .713.288T21 7t-.288.713T20 8h-3q-.425 0-.712-.288T16 7V4q0-.425.288-.712T17 3t.713.288T18 4z"/>',
+      flashlightOn: '<path fill="currentColor" d="M6 5V4q0-.825.588-1.412T8 2h8q.825 0 1.413.588T18 4v1zm7.063 10.063q.437-.438.437-1.063t-.437-1.062T12 12.5t-1.062.438T10.5 14t.438 1.063T12 15.5t1.063-.437M8 20v-9L6.325 8.5q-.175-.25-.25-.525T6 7.4V7h12v.4q0 .3-.075.575t-.25.525L16 11v9q0 .825-.587 1.413T14 22h-4q-.825 0-1.412-.587T8 20"/>',
+      flashlightOff: '<path fill="currentColor" d="M8 20v-9.2L2.1 4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275L16 18.8V20q0 .825-.587 1.413T14 22h-4q-.825 0-1.412-.587T8 20M7.85 5l-1.7-1.7q.2-.575.7-.937T8 2h8q.825 0 1.413.588T18 4v1zM16 13.15L9.85 7H18v.4q0 .3-.075.575t-.25.525L16 11z"/>',
+      pause: '<path fill="currentColor" d="M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5t1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5t1.413.588T10 7v10q0 .825-.587 1.413T8 19"/>',
+      play: '<path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/>',
+      group: '<path fill="currentColor" d="M1 17.2q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18zM18.45 20q.275-.45.413-.962T19 18v-1q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v1q0 .825-.587 1.413T21 20zM6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175m11.65 0Q16.65 12 15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8t-1.175 2.825"/>',
+      pictureInPicture: '<path fill="currentColor" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-3h6q.425 0 .713-.288T19 16v-4q0-.425-.288-.712T18 11h-6q-.425 0-.712.288T11 12v4q0 .425.288.713T12 17m3-3"/>',
+      openInFull: '<path fill="currentColor" d="M4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13t.713.288T5 14v3.6L17.6 5H14q-.425 0-.712-.288T13 4t.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11t-.712-.288T19 10V6.4L6.4 19H10q.425 0 .713.288T11 20t-.288.713T10 21z"/>',
+      volumeUp: '<path fill="currentColor" d="M19 11.975q0-2.075-1.1-3.787t-2.95-2.563q-.375-.175-.55-.537t-.05-.738q.15-.4.538-.575t.787 0Q18.1 4.85 19.55 7.063T21 11.974t-1.45 4.913t-3.875 3.287q-.4.175-.788 0t-.537-.575q-.125-.375.05-.737t.55-.538q1.85-.85 2.95-2.562t1.1-3.788M7 15H4q-.425 0-.712-.288T3 14v-4q0-.425.288-.712T4 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T10.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.513.013T14 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2"/>',
+      cameraSwitch: '<path fill="currentColor" d="M8 17q-.825 0-1.412-.587T6 15V9q0-.825.588-1.412T8 7h1l.7-.7q.15-.15.338-.225T10.425 6h3.15q.2 0 .388.075t.337.225l.7.7h1q.825 0 1.412.588T18 9v6q0 .825-.587 1.413T16 17zm4-3q.825 0 1.413-.587T14 12t-.587-1.412T12 10t-1.412.588T10 12t.588 1.413T12 14m0 10q-4.4 0-7.712-2.762T.174 14.275Q.1 13.85.337 13.5T1 13.1t.75.213t.4.687q.65 3.275 3.113 5.475T11.1 21.95l-.85-.85q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.3 3.3q.175.175.113.4t-.288.275q-.675.175-1.362.25T12 24m0-24q4.4 0 7.713 2.75t4.112 6.975q.075.425-.162.775t-.663.4t-.75-.213t-.4-.687q-.65-3.275-3.113-5.475T12.9 2.05l.85.85q.275.275.275.7t-.275.7t-.7.275t-.7-.275L9.05 1Q8.875.825 8.938.6t.287-.275Q9.9.15 10.588.075T12 0"/>',
+      arrowDropUp: '<path fill="currentColor" d="M8.2 14q-.225 0-.362-.15T7.7 13.5q0-.05.15-.35l3.625-3.625q.125-.125.25-.175T12 9.3t.275.05t.25.175l3.625 3.625q.075.075.113.163t.037.187q0 .2-.137.35T15.8 14z"/>',
+      moreVert: '<path fill="currentColor" d="M12 20q-.825 0-1.412-.587T10 18t.588-1.412T12 16t1.413.588T14 18t-.587 1.413T12 20m0-6q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m0-6q-.825 0-1.412-.587T10 6t.588-1.412T12 4t1.413.588T14 6t-.587 1.413T12 8"/>',
+      check: '<path fill="currentColor" d="m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"/>',
+      keep: '<path fill="currentColor" d="M16 5v7l1.7 1.7q.15.15.225.338t.075.387V15q0 .425-.288.712T17 16h-4v5.85q0 .425-.288.713T12 22.85t-.712-.288T11 21.85V16H7q-.425 0-.712-.288T6 15v-.575q0-.2.075-.387T6.3 13.7L8 12V5q-.425 0-.712-.288T7 4t.288-.712T8 3h8q.425 0 .713.288T17 4t-.288.713T16 5"/>',
+      keepOff: '<path fill="currentColor" d="m14.3 11.475l-7.05-7.05q-.125-.125-.187-.275T7 3.85q0-.325.225-.588t.6-.262H16q.425 0 .713.287T17 4q0 .4-.363.563T16 5v5.75q0 .675-.612.938t-1.088-.213M11 22v-6H7.4q-.625 0-1-.437t-.375-.988q0-.275.113-.55T6.5 13.5L8 12v-1.15L2.1 4.9q-.275-.275-.288-.687T2.1 3.5q.275-.275.7-.275t.7.275l16.975 16.975q.3.3.288.713t-.313.712q-.3.275-.7.288t-.7-.288l-5.9-5.9H13v6q0 .425-.288.713T12 23t-.712-.288T11 22"/>',
+      close: '<path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/>',
+      refresh: '<path fill="currentColor" d="M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20"/>'
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        focusable: "false",
+        innerHTML: ICONS[__props.name]
+      }, null, 8, _hoisted_1$3);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "CallButton",
+  props: {
+    icon: {},
+    label: {},
+    iconClass: { default: "size-5" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Button), mergeProps({
+        rounded: "",
+        text: "",
+        severity: "secondary"
+      }, _ctx.$attrs, { "aria-label": __props.label }), {
+        icon: withCtx(() => [
+          createVNode(_sfc_main$4, {
+            name: __props.icon,
+            class: normalizeClass(__props.iconClass)
+          }, null, 8, ["name", "class"])
+        ]),
+        _: 1
+      }, 16, ["aria-label"]);
+    };
+  }
+});
+const translucent = {
+  background: "rgb(255 255 255 / 0.12)",
+  hoverBackground: "rgb(255 255 255 / 0.2)",
+  activeBackground: "rgb(255 255 255 / 0.28)",
+  borderColor: "transparent",
+  hoverBorderColor: "transparent",
+  activeBorderColor: "transparent",
+  color: "#ffffff",
+  hoverColor: "#ffffff",
+  activeColor: "#ffffff"
+};
+const lit = {
+  background: "#ffffff",
+  hoverBackground: "rgb(255 255 255 / 0.9)",
+  activeBackground: "rgb(255 255 255 / 0.8)",
+  borderColor: "#ffffff",
+  hoverBorderColor: "#ffffff",
+  activeBorderColor: "#ffffff",
+  color: "#171717",
+  hoverColor: "#171717",
+  activeColor: "#171717"
+};
+const off = {
+  background: "#ef4444",
+  hoverBackground: "#dc2626",
+  activeBackground: "#b91c1c",
+  borderColor: "transparent",
+  hoverBorderColor: "transparent",
+  activeBorderColor: "transparent",
+  color: "#ffffff",
+  hoverColor: "#ffffff",
+  activeColor: "#ffffff"
+};
+const callScheme = { root: { secondary: translucent, contrast: lit, danger: off } };
+const callButtonDt = { colorScheme: { light: callScheme, dark: callScheme } };
+const callMenuDt = {
+  root: { background: "#262626", borderColor: "rgb(255 255 255 / 0.1)", color: "#f5f5f5" },
+  item: {
+    focusBackground: "rgb(255 255 255 / 0.1)",
+    color: "#f5f5f5",
+    focusColor: "#ffffff",
+    icon: { color: "#a3a3a3", focusColor: "#ffffff" }
+  },
+  submenuLabel: { background: "transparent", color: "#a3a3a3" }
+};
+const callDrawerDt = {
+  root: { background: "#262626", borderColor: "rgb(255 255 255 / 0.1)", color: "#f5f5f5" },
+  header: { padding: "1rem 1rem 0.5rem" },
+  content: { padding: "0 0.5rem 1rem" }
+};
+const tileButton = {
+  dt: callButtonDt,
+  text: false,
+  size: "small",
+  iconClass: "size-4.5",
+  class: "size-9! [@media(hover:none)]:size-11!"
+};
+const tileActions = "absolute end-2 bottom-2 z-20 flex items-center gap-x-1.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100";
+const nameChip = "min-w-0 truncate rounded-md bg-black/60 px-2 py-0.5 text-label-sm text-white backdrop-blur-sm select-none";
+const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-900";
+const tip = (value) => ({ value, class: "vue-chat font-chat-family" });
+const _hoisted_1$2 = ["data-participant-id", "data-kind"];
+const _hoisted_2$2 = ["data-testid"];
+const _hoisted_3$2 = ["data-testid", "muted"];
+const _hoisted_4$2 = {
+  key: 0,
+  "data-testid": "call-tile-avatar",
+  class: "absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-neutral-800 px-2 text-center"
+};
+const _hoisted_5$2 = {
+  key: 0,
+  class: "text-label-md text-neutral-300 select-none"
+};
+const _hoisted_6$2 = {
+  key: 1,
+  "data-testid": "call-tile-unreachable",
+  role: "status",
+  class: "absolute inset-0 z-30 flex flex-col items-center justify-center gap-y-3 bg-neutral-900/85 px-3 text-center"
+};
+const _hoisted_7$2 = {
+  key: 0,
+  class: "flex size-7 shrink-0 items-center justify-center rounded-full bg-black/60 backdrop-blur-sm"
+};
+const _hoisted_8$2 = ["aria-label"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "CallTile",
+  props: {
+    tile: {},
+    participant: {},
+    stream: { default: null },
+    speaking: { type: Boolean, default: false },
+    pinned: { type: Boolean, default: false },
+    canPin: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    paused: { type: Boolean, default: false },
+    isFullscreen: { type: Boolean, default: false },
+    hint: {}
+  },
+  emits: ["pin", "pause", "fullscreen", "retry", "video"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const vTooltip = Tooltip;
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocalI18n(chat);
+    const root = ref(null);
+    const videoEl = ref(null);
+    onMounted(() => emit("video", videoEl.value, null));
+    onBeforeUnmount(() => emit("video", null, videoEl.value));
+    __expose({ videoEl, root });
+    const isSelf = computed(() => props.participant.isSelf);
+    const isScreen = computed(() => props.tile.kind === "screen");
+    const status = computed(() => props.participant.status);
+    const name = computed(() => props.participant.name || (isSelf.value ? t("chat.call.you") : ""));
+    const label = computed(() => {
+      if (isScreen.value)
+        return isSelf.value ? t("chat.call.yourPresentation") : t("chat.call.presentationOf", { name: name.value });
+      return isSelf.value ? t("chat.call.you") : name.value;
+    });
+    const initials = computed(() => nameInitials(props.participant.name));
+    const toneStyle = computed(() => avatarToneStyle(props.participant.name, null, "dark"));
+    const hasVideo = computed(() => {
+      var _a;
+      return !!((_a = props.stream) == null ? void 0 : _a.getVideoTracks().length);
+    });
+    const showAvatar = computed(
+      () => {
+        var _a;
+        return !isScreen.value && (((_a = props.participant.media) == null ? void 0 : _a.video) === false || !hasVideo.value);
+      }
+    );
+    const muted = computed(() => {
+      var _a;
+      return !isScreen.value && ((_a = props.participant.media) == null ? void 0 : _a.audio) === false;
+    });
+    const unreachable = computed(() => !isSelf.value && status.value === "unreachable");
+    const statusText = computed(() => {
+      if (isSelf.value) return props.hint;
+      if (status.value === "connecting") return t("chat.call.connecting");
+      if (status.value === "recovering") return t("chat.call.reconnecting");
+      return props.hint;
+    });
+    const innerTestId = computed(() => {
+      if (isSelf.value) return void 0;
+      if (isScreen.value) return "call-remote-screen";
+      return props.stream ? "call-remote-video" : void 0;
+    });
+    const pinLabel = computed(
+      () => props.pinned ? t("chat.call.controls.unpin") : t("chat.call.controls.pin")
+    );
+    const pauseLabel = computed(
+      () => props.paused ? t("chat.call.controls.playVideo") : t("chat.call.controls.pauseVideo")
+    );
+    const fullscreenLabel = computed(
+      () => props.isFullscreen ? t("chat.call.controls.exitFullscreen") : t("chat.call.controls.fullscreen")
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        "data-testid": "call-tile",
+        "data-participant-id": __props.participant.id,
+        "data-kind": __props.tile.kind,
+        class: normalizeClass(["group relative min-h-0 min-w-0 overflow-hidden rounded-2xl bg-neutral-800 ring-3 ring-inset transition-shadow [clip-path:inset(0_round_var(--radius-2xl))] motion-reduce:transition-none", __props.speaking && !isScreen.value ? "ring-sky-400" : "ring-transparent"])
+      }, [
+        createElementVNode("div", {
+          class: "absolute inset-0",
+          "data-testid": innerTestId.value
+        }, [
+          createElementVNode("video", {
+            ref_key: "videoEl",
+            ref: videoEl,
+            "data-testid": __props.tile.kind === "self" ? "call-local-video" : void 0,
+            autoplay: "",
+            playsinline: "",
+            muted: isSelf.value || isScreen.value,
+            class: normalizeClass(["absolute inset-0 size-full rounded-[inherit]", [
+              isScreen.value ? "object-contain" : "object-cover",
+              __props.tile.kind === "self" && "pointer-events-none -scale-x-100"
+            ]])
+          }, null, 10, _hoisted_3$2),
+          showAvatar.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+            createVNode(unref(Avatar), {
+              label: initials.value || void 0,
+              shape: "circle",
+              size: __props.compact ? "large" : "xlarge",
+              class: "font-semibold select-none",
+              style: normalizeStyle(toneStyle.value)
+            }, createSlots({ _: 2 }, [
+              !initials.value ? {
+                name: "icon",
+                fn: withCtx(() => [
+                  createVNode(_sfc_main$5, {
+                    icon: "PhUser",
+                    class: "size-1/2"
+                  })
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["label", "size", "style"]),
+            statusText.value && !__props.compact ? (openBlock(), createElementBlock("p", _hoisted_5$2, toDisplayString(statusText.value), 1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          unreachable.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+            createElementVNode("p", {
+              class: normalizeClass(["text-label-md text-neutral-100", __props.compact && "sr-only"])
+            }, toDisplayString(unref(t)("chat.call.cantConnect", { name: name.value })), 3),
+            createVNode(unref(Button), {
+              label: __props.compact ? void 0 : unref(t)("chat.call.controls.retry"),
+              "aria-label": unref(t)("chat.call.controls.retry"),
+              dt: unref(callButtonDt),
+              severity: "contrast",
+              rounded: "",
+              size: "small",
+              "data-testid": "call-tile-retry",
+              class: normalizeClass(["min-h-11 min-w-11", unref(focusRing)]),
+              onClick: _cache[0] || (_cache[0] = ($event) => emit("retry"))
+            }, {
+              icon: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  name: "refresh",
+                  class: "size-5"
+                })
+              ]),
+              _: 1
+            }, 8, ["label", "aria-label", "dt", "class"])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["absolute start-2 bottom-2 z-20 flex items-center gap-x-1.5", __props.compact ? "max-w-[calc(100%-3.5rem)]" : "max-w-[60%]"])
+          }, [
+            isScreen.value ? (openBlock(), createElementBlock("span", _hoisted_7$2, [
+              createVNode(_sfc_main$4, {
+                name: "presentToAll",
+                class: "size-4"
+              })
+            ])) : createCommentVNode("", true),
+            muted.value ? (openBlock(), createElementBlock("span", {
+              key: 1,
+              "data-testid": "call-tile-muted",
+              role: "img",
+              "aria-label": unref(t)("chat.call.muted"),
+              class: "flex size-7 shrink-0 items-center justify-center rounded-full bg-red-500 text-white"
+            }, [
+              createVNode(_sfc_main$4, {
+                name: "micOff",
+                class: "size-4"
+              })
+            ], 8, _hoisted_8$2)) : createCommentVNode("", true),
+            createElementVNode("span", {
+              class: normalizeClass(unref(nameChip))
+            }, [
+              createElementVNode("bdi", null, toDisplayString(label.value), 1)
+            ], 2)
+          ], 2),
+          !unreachable.value ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: normalizeClass(unref(tileActions))
+          }, [
+            __props.canPin ? withDirectives((openBlock(), createBlock(_sfc_main$3, mergeProps({
+              key: 0,
+              icon: __props.pinned ? "keepOff" : "keep",
+              label: pinLabel.value,
+              "aria-pressed": __props.pinned
+            }, unref(tileButton), {
+              class: unref(focusRing),
+              "data-testid": "call-pin",
+              onClick: _cache[1] || (_cache[1] = ($event) => emit("pin"))
+            }), null, 16, ["icon", "label", "aria-pressed", "class"])), [
+              [
+                unref(vTooltip),
+                unref(tip)(pinLabel.value),
+                void 0,
+                { top: true }
+              ]
+            ]) : createCommentVNode("", true),
+            !__props.compact && !showAvatar.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              withDirectives(createVNode(_sfc_main$3, mergeProps({
+                icon: __props.paused ? "play" : "pause",
+                label: pauseLabel.value
+              }, unref(tileButton), {
+                class: unref(focusRing),
+                onClick: _cache[2] || (_cache[2] = ($event) => emit("pause", videoEl.value))
+              }), null, 16, ["icon", "label", "class"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(pauseLabel.value),
+                  void 0,
+                  { top: true }
+                ]
+              ]),
+              withDirectives(createVNode(_sfc_main$3, mergeProps({
+                icon: __props.isFullscreen ? "fullscreenExit" : "fullscreen",
+                label: fullscreenLabel.value
+              }, unref(tileButton), {
+                class: unref(focusRing),
+                onClick: _cache[3] || (_cache[3] = ($event) => emit("fullscreen", root.value))
+              }), null, 16, ["icon", "label", "class"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(fullscreenLabel.value),
+                  void 0,
+                  { top: true }
+                ]
+              ])
+            ], 64)) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$2)
+      ], 10, _hoisted_1$2);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "flex w-full items-center justify-between gap-x-2" };
+const _hoisted_2$1 = { class: "text-title-md text-white" };
+const _hoisted_3$1 = { class: "ms-1 text-neutral-400" };
+const _hoisted_4$1 = { class: "flex flex-col" };
+const _hoisted_5$1 = ["data-participant-id"];
+const _hoisted_6$1 = { class: "min-w-0 flex-1" };
+const _hoisted_7$1 = { class: "truncate text-body-md text-neutral-100" };
+const _hoisted_8$1 = {
+  key: 0,
+  class: "text-neutral-400"
+};
+const _hoisted_9$1 = ["data-testid"];
+const _hoisted_10$1 = {
+  key: 0,
+  class: "flex shrink-0 items-center gap-x-1.5 text-neutral-300"
+};
+const _hoisted_11$1 = ["aria-label"];
+const _hoisted_12$1 = ["aria-label"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "CallParticipants",
+  props: /* @__PURE__ */ mergeModels({
+    participants: {}
+  }, {
+    "visible": { type: Boolean, ...{ default: false } },
+    "visibleModifiers": {}
+  }),
+  emits: ["update:visible"],
+  setup(__props) {
+    const visible = useModel(__props, "visible");
+    const { t } = useLocalI18n(chat);
+    const { dir } = useDirection();
+    const position = computed(() => dir.value === "rtl" ? "left" : "right");
+    const nameOf = (p) => p.name || (p.isSelf ? t("chat.call.you") : "");
+    const initialsOf = (p) => nameInitials(p.name);
+    const statusOf = (p) => p.isSelf ? "" : p.status === "unreachable" ? t("chat.call.cantConnect", { name: nameOf(p) }) : p.status === "recovering" ? t("chat.call.reconnecting") : p.status === "connecting" ? t("chat.call.connecting") : "";
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Drawer), {
+        visible: visible.value,
+        "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+        position: position.value,
+        dt: unref(callDrawerDt),
+        "show-close-icon": false,
+        dir: unref(dir),
+        class: "vue-chat font-chat-family w-full! sm:w-80!",
+        "data-testid": "call-people-list"
+      }, {
+        header: withCtx(() => [
+          createElementVNode("div", _hoisted_1$1, [
+            createElementVNode("h2", _hoisted_2$1, [
+              createTextVNode(toDisplayString(unref(t)("chat.call.people")) + " ", 1),
+              createElementVNode("span", _hoisted_3$1, "(" + toDisplayString(__props.participants.length) + ")", 1)
+            ]),
+            createVNode(_sfc_main$3, {
+              icon: "close",
+              label: unref(t)("chat.call.controls.closePeople"),
+              dt: unref(callButtonDt),
+              text: false,
+              "icon-class": "size-5",
+              class: normalizeClass(["size-11!", unref(focusRing)]),
+              "data-testid": "call-people-close",
+              onClick: _cache[0] || (_cache[0] = ($event) => visible.value = false)
+            }, null, 8, ["label", "dt", "class"])
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("ul", _hoisted_4$1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.participants, (p) => {
+              return openBlock(), createElementBlock("li", {
+                key: p.id,
+                "data-testid": "call-participant",
+                "data-participant-id": p.id,
+                class: "flex min-h-14 items-center gap-x-3 rounded-xl px-2 py-2"
+              }, [
+                createVNode(unref(Avatar), {
+                  label: initialsOf(p) || void 0,
+                  shape: "circle",
+                  class: "shrink-0 font-semibold select-none",
+                  style: normalizeStyle(unref(avatarToneStyle)(p.name, null, "dark"))
+                }, createSlots({ _: 2 }, [
+                  !initialsOf(p) ? {
+                    name: "icon",
+                    fn: withCtx(() => [
+                      createVNode(_sfc_main$5, {
+                        icon: "PhUser",
+                        class: "size-1/2"
+                      })
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["label", "style"]),
+                createElementVNode("div", _hoisted_6$1, [
+                  createElementVNode("p", _hoisted_7$1, [
+                    createElementVNode("bdi", null, toDisplayString(nameOf(p)), 1),
+                    p.isSelf ? (openBlock(), createElementBlock("span", _hoisted_8$1, " (" + toDisplayString(unref(t)("chat.call.you")) + ")", 1)) : createCommentVNode("", true)
+                  ]),
+                  statusOf(p) ? (openBlock(), createElementBlock("p", {
+                    key: 0,
+                    "data-testid": p.status === "unreachable" ? "call-participant-unreachable" : void 0,
+                    class: normalizeClass(["truncate text-label-sm", p.status === "unreachable" ? "text-red-400" : "text-neutral-400"])
+                  }, toDisplayString(statusOf(p)), 11, _hoisted_9$1)) : createCommentVNode("", true)
+                ]),
+                p.media ? (openBlock(), createElementBlock("span", _hoisted_10$1, [
+                  createElementVNode("span", {
+                    role: "img",
+                    "aria-label": p.media.audio ? unref(t)("chat.call.micOn") : unref(t)("chat.call.muted"),
+                    class: normalizeClass(!p.media.audio && "text-red-400")
+                  }, [
+                    createVNode(_sfc_main$4, {
+                      name: p.media.audio ? "mic" : "micOff",
+                      class: "size-5"
+                    }, null, 8, ["name"])
+                  ], 10, _hoisted_11$1),
+                  createElementVNode("span", {
+                    role: "img",
+                    "aria-label": p.media.video ? unref(t)("chat.call.cameraOn") : unref(t)("chat.call.cameraOff"),
+                    class: normalizeClass(!p.media.video && "text-red-400")
+                  }, [
+                    createVNode(_sfc_main$4, {
+                      name: p.media.video ? "videocam" : "videocamOff",
+                      class: "size-5"
+                    }, null, 8, ["name"])
+                  ], 10, _hoisted_12$1)
+                ])) : createCommentVNode("", true)
+              ], 8, _hoisted_5$1);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible", "position", "dt", "dir"]);
+    };
+  }
+});
+const _hoisted_1 = ["dir"];
+const _hoisted_2 = { class: "absolute inset-x-3 top-3 flex items-center justify-between" };
+const _hoisted_3 = { class: "flex items-center gap-x-2 rounded-full bg-black/45 px-3 py-1.5 text-label-sm text-white backdrop-blur-sm select-none" };
+const _hoisted_4 = {
+  dir: "ltr",
+  class: "tabular-nums"
+};
+const _hoisted_5 = { class: "absolute inset-x-3 bottom-3 flex items-center justify-between" };
+const _hoisted_6 = { class: "flex items-center gap-1.5" };
+const _hoisted_7 = {
+  key: 0,
+  class: "flex size-8 items-center justify-center rounded-full bg-red-500 text-white"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "flex size-8 items-center justify-center rounded-full bg-red-500 text-white"
+};
+const _hoisted_9 = ["dir"];
+const _hoisted_10 = { class: "flex min-w-0 flex-1 items-center gap-x-3 select-none" };
+const _hoisted_11 = { class: "truncate text-title-sm text-white" };
+const _hoisted_12 = {
+  dir: "ltr",
+  class: "shrink-0 text-body-md text-neutral-300 tabular-nums"
+};
+const _hoisted_13 = {
+  "data-testid": "call-participants",
+  class: "flex shrink-0 items-center gap-x-2"
+};
+const _hoisted_14 = {
+  "data-testid": "call-participant-count",
+  "aria-hidden": "true",
+  class: "text-label-md tabular-nums"
+};
+const _hoisted_15 = { class: "max-w-full truncate rounded-full bg-black/70 px-4 py-1.5 text-label-md text-white shadow-lg backdrop-blur-sm" };
+const _hoisted_16 = {
+  class: "sr-only",
+  "aria-live": "polite"
+};
+const _hoisted_17 = {
+  key: 0,
+  "data-testid": "call-waiting",
+  role: "status",
+  class: "pointer-events-none absolute inset-x-0 top-8 z-30 flex justify-center px-4"
+};
+const _hoisted_18 = { class: "max-w-full rounded-2xl bg-black/65 px-5 py-3 text-center shadow-lg backdrop-blur-sm" };
+const _hoisted_19 = { class: "truncate text-title-sm text-white" };
+const _hoisted_20 = { class: "mt-0.5 text-label-md text-neutral-200" };
+const _hoisted_21 = { class: "flex items-center justify-center gap-x-2 sm:gap-x-3" };
+const _hoisted_22 = {
+  key: 1,
+  class: "size-5"
+};
+const PIP_WIDTH = 280;
+const PIP_HEIGHT = 160;
+const PADDING = 16;
+const PIP_INSET_Y = 96;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Call",
+  setup(__props) {
+    const vTooltip = Tooltip;
+    const callStore = useCallStore();
+    const minimizedRef = ref(null);
+    const bodyRef = ref(null);
+    const { t, locale } = useLocalI18n(chat);
+    const { dir } = useDirection();
+    const chatStore = useChatStore();
+    const callTitle = computed(() => {
+      const contact = callStore.channelId ? chatStore.getContactById(callStore.channelId) : null;
+      const name = contact ? `${contact.name} ${contact.lastName ?? ""}`.trim() : "";
+      return name || t("chat.call.title");
+    });
+    const layoutKey = ref("");
+    const {
+      toggleVideoPause,
+      toggleRemote,
+      participantCount,
+      participants,
+      phase,
+      hadOthers,
+      endCall,
+      toggleFullscreen,
+      toggleFlashlight,
+      toggleScreenShare,
+      toggleAudio,
+      toggleVideo,
+      switchCamera,
+      isFlashlightSupported,
+      isAudioOn,
+      isVideoOn,
+      isFlashlightOn,
+      isFullscreen,
+      isScreenSharing,
+      showControls,
+      resetControlsTimeout,
+      cameras,
+      videoPaused,
+      localStream,
+      localVideo,
+      localScreen,
+      remoteRefs,
+      remoteScreenRefs,
+      remoteVideos,
+      soundBlocked,
+      enableSound,
+      reattach,
+      retryPeer
+    } = useCall({ layoutKey: () => layoutKey.value });
+    const stageRef = ref(null);
+    const { width: stageWidth, height: stageHeight } = useElementSize(stageRef);
+    const layout = useCallLayout({ participants, width: stageWidth, height: stageHeight });
+    watch(layout.key, (key) => layoutKey.value = key, { immediate: true });
+    const portrait = computed(() => layout.orientation.value === "portrait");
+    const participantById = computed(
+      () => new Map(participants.value.map((p) => [p.id, p]))
+    );
+    const participantOf = (tile) => participantById.value.get(tile.participantId);
+    const streamOf = (tile) => {
+      const p = participantOf(tile);
+      return (tile.kind === "screen" ? p == null ? void 0 : p.screen : p == null ? void 0 : p.camera) ?? null;
+    };
+    const speakingOf = (tile) => tile.kind === "self" ? !!speaking.self : tile.kind === "camera" && !!speaking[tile.participantId];
+    const pairRemote = computed(() => layout.tiles.value.find((t2) => t2.kind === "camera") ?? null);
+    const selfTile = computed(() => layout.tiles.value.find((t2) => t2.kind === "self"));
+    const canPin = computed(() => participants.value.length > 1 || isScreenSharing.value);
+    function bindVideo(tile, el, previous) {
+      const pid = tile.participantId;
+      const next = (current) => el ?? (current === previous ? null : current);
+      if (tile.kind === "self") localVideo.value = next(localVideo.value);
+      else if (tile.id === "self_screen") localScreen.value = next(localScreen.value);
+      else if (tile.kind === "camera") remoteRefs.value[pid] = next(remoteRefs.value[pid] ?? null);
+      else remoteScreenRefs.value[pid] = next(remoteScreenRefs.value[pid] ?? null) ?? void 0;
+      if (el) void reattach();
+    }
+    const togglePause = (tile, el) => toggleVideoPause(tile.id, el);
+    const toggleTileFullscreen = (tile, el) => {
+      if (el) toggleRemote(tile.id, el);
+    };
+    const waitingText = computed(
+      () => hadOthers.value ? t("chat.call.everyoneLeft") : t("chat.call.waiting")
+    );
+    const showWaiting = computed(() => layout.mode.value === "solo" && phase.value === "waiting");
+    const notices = useCallNotices(
+      participants,
+      (key, params, plural) => t(key, params, plural),
+      () => t("chat.call.andJoin"),
+      () => String(locale.value)
+    );
+    const peopleOpen = ref(false);
+    const peopleLabel = computed(
+      () => `${t("chat.call.controls.people")} (${t("chat.call.participants", participantCount.value)})`
+    );
+    const barButton = {
+      dt: callButtonDt,
+      text: false,
+      size: "large",
+      iconClass: "size-6",
+      class: `h-12! w-12! sm:w-14! ${focusRing}`
+    };
+    const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+    const keys = (key) => isMac ? `⌘ ${key}` : `Ctrl + ${key}`;
+    const withKeys = (label, key) => `${label} (${keys(key)})`;
+    const audioLabel = computed(
+      () => isAudioOn.value ? t("chat.call.controls.mute") : t("chat.call.controls.unmute")
+    );
+    const videoLabel = computed(
+      () => isVideoOn.value ? t("chat.call.controls.cameraOff") : t("chat.call.controls.cameraOn")
+    );
+    const shareLabel = computed(
+      () => isScreenSharing.value ? t("chat.call.controls.stopSharing") : t("chat.call.controls.shareScreen")
+    );
+    const fullscreenLabel = computed(
+      () => isFullscreen.value ? t("chat.call.controls.exitFullscreen") : t("chat.call.controls.fullscreen")
+    );
+    useEventListener(window, "keydown", (event) => {
+      if (!callStore.isActive || callStore.isMinimized) return;
+      if (!(isMac ? event.metaKey : event.ctrlKey) || event.altKey || event.shiftKey) return;
+      const key = event.key.toLowerCase();
+      if (key !== "d" && key !== "e") return;
+      event.preventDefault();
+      if (key === "d") toggleAudio();
+      else toggleVideo();
+    });
+    const currentCameraId = ref(null);
+    watch(
+      localStream,
+      (stream) => {
+        var _a;
+        currentCameraId.value = ((_a = stream == null ? void 0 : stream.getVideoTracks()[0]) == null ? void 0 : _a.getSettings().deviceId) ?? null;
+      },
+      { immediate: true }
+    );
+    const cameraMenu = ref(null);
+    const cameraItems = computed(() => [
+      {
+        label: t("chat.call.controls.cameras"),
+        items: cameras.value.map((camera, index) => ({
+          label: camera.label || `${t("chat.call.controls.chooseCamera")} ${index + 1}`,
+          callIcon: camera.deviceId === currentCameraId.value ? "check" : void 0,
+          command: () => {
+            currentCameraId.value = camera.deviceId;
+            void switchCamera(camera.deviceId);
+          }
+        }))
+      }
+    ]);
+    const moreMenu = ref(null);
+    const moreItems = computed(() => [
+      {
+        label: fullscreenLabel.value,
+        callIcon: isFullscreen.value ? "fullscreenExit" : "fullscreen",
+        command: () => toggleFullscreen()
+      },
+      ...isFlashlightSupported.value ? [
+        {
+          label: isFlashlightOn.value ? t("chat.call.controls.flashlightOff") : t("chat.call.controls.flashlightOn"),
+          callIcon: isFlashlightOn.value ? "flashlightOff" : "flashlightOn",
+          command: () => toggleFlashlight()
+        }
+      ] : []
+    ]);
+    const speaking = useSpeaking(() => ({
+      self: isAudioOn.value ? localStream.value : null,
+      ...Object.fromEntries(
+        Object.entries(remoteVideos.value).map(([id, remote]) => [id, remote.stream])
+      )
+    }));
+    const pipVideoRef = ref(null);
+    const activeRemoteIndex = ref(0);
+    const remoteVideoEntries = computed(() => Object.entries(remoteVideos.value));
+    const hasRemoteVideos = computed(() => remoteVideoEntries.value.length > 0);
+    const activeRemoteUserId = computed(() => {
+      const entries = remoteVideoEntries.value;
+      if (entries.length === 0) return null;
+      return entries[activeRemoteIndex.value % entries.length][0];
+    });
+    const pipStream = computed(() => {
+      var _a;
+      if (hasRemoteVideos.value) {
+        const id = activeRemoteUserId.value;
+        return id ? ((_a = remoteVideos.value[id]) == null ? void 0 : _a.stream) ?? null : null;
+      }
+      return localStream.value ?? null;
+    });
+    function cycleRemote() {
+      const count = remoteVideoEntries.value.length;
+      if (count === 0) return;
+      activeRemoteIndex.value = (activeRemoteIndex.value + 1) % count;
+    }
+    const speakerIndex = computed(
+      () => remoteVideoEntries.value.findIndex(([id]) => speaking[id])
+    );
+    let speakerTimer;
+    watch(speakerIndex, (index) => {
+      clearTimeout(speakerTimer);
+      if (index < 0 || index === activeRemoteIndex.value % remoteVideoEntries.value.length) return;
+      speakerTimer = setTimeout(() => activeRemoteIndex.value = index, 1500);
+    });
+    onBeforeUnmount(() => clearTimeout(speakerTimer));
+    watch(
+      [pipStream, () => callStore.isMinimized],
+      async () => {
+        await nextTick();
+        const el = pipVideoRef.value;
+        if (!el) return;
+        const stream = pipStream.value;
+        if (stream && el.srcObject !== stream) {
+          el.srcObject = stream;
+          el.play().catch(() => {
+          });
+        } else if (!stream && el.srcObject) {
+          el.srcObject = null;
+        }
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      bodyRef.value = document.body;
+    });
+    const { width: windowWidth, height: windowHeight } = useWindowSize();
+    const { x, y, isDragging } = useDraggable(minimizedRef, {
+      initialValue: {
+        x: typeof window !== "undefined" ? window.innerWidth - PIP_WIDTH - PADDING : PADDING,
+        y: PIP_INSET_Y
+      },
+      disabled: computed(() => !callStore.isMinimized)
+    });
+    watch(isDragging, (dragging) => {
+      if (!dragging && callStore.isMinimized) {
+        const maxX = windowWidth.value - PIP_WIDTH - PADDING;
+        const maxY = windowHeight.value - PIP_HEIGHT - PIP_INSET_Y;
+        x.value = x.value < windowWidth.value / 2 ? PADDING : maxX;
+        y.value = y.value < windowHeight.value / 2 ? PIP_INSET_Y : maxY;
+      }
+    });
+    watch(
+      () => callStore.isMinimized,
+      (isMinimized) => {
+        if (isMinimized) {
+          nextTick(() => {
+            const isRtl = dir.value === "rtl";
+            x.value = isRtl ? PADDING : windowWidth.value - PIP_WIDTH - PADDING;
+            y.value = PIP_INSET_Y;
+          });
+        }
+      },
+      { immediate: true }
+    );
+    const clampedStyle = computed(() => {
+      if (!callStore.isMinimized) return {};
+      const maxX = windowWidth.value - PIP_WIDTH - PADDING;
+      const maxY = windowHeight.value - PIP_HEIGHT - PADDING;
+      return {
+        left: `${Math.max(PADDING, Math.min(x.value, maxX))}px`,
+        top: `${Math.max(PADDING, Math.min(y.value, maxY))}px`
+      };
+    });
+    const tileProps = (tile, compact = false) => ({
+      tile,
+      participant: participantOf(tile),
+      stream: streamOf(tile),
+      speaking: speakingOf(tile),
+      pinned: layout.pinnedId.value === tile.id,
+      canPin: canPin.value,
+      compact,
+      paused: !!videoPaused.value[tile.id],
+      isFullscreen: isFullscreen.value
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        unref(callStore).isActive && unref(callStore).isMinimized ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "minimizedRef",
+          ref: minimizedRef,
+          "data-testid": "call-pip",
+          style: normalizeStyle(clampedStyle.value),
+          dir: unref(dir),
+          class: normalizeClass(["vue-chat font-chat-family fixed z-9999 h-40 w-70 cursor-move touch-none overflow-hidden rounded-2xl bg-neutral-900 shadow-2xl ring-1 ring-white/10", [!unref(isDragging) && "transition-all duration-300 ease-out motion-reduce:transition-none"]])
+        }, [
+          createElementVNode("video", {
+            ref_key: "pipVideoRef",
+            ref: pipVideoRef,
+            muted: "",
+            autoplay: "",
+            playsinline: "",
+            class: "pointer-events-none absolute inset-0 size-full object-cover"
+          }, null, 512),
+          _cache[17] || (_cache[17] = createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-black/30" }, null, -1)),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              _cache[16] || (_cache[16] = createElementVNode("span", { class: "relative flex size-2.5" }, [
+                createElementVNode("span", { class: "absolute inline-flex size-full animate-ping rounded-full bg-red-500/60 motion-reduce:animate-none" }),
+                createElementVNode("span", { class: "relative inline-flex size-2.5 rounded-full bg-red-500" })
+              ], -1)),
+              createElementVNode("span", _hoisted_4, toDisplayString(unref(formatDuration)(unref(callStore).elapsedTime)), 1)
+            ]),
+            createVNode(_sfc_main$3, {
+              icon: "callEnd",
+              label: unref(t)("chat.call.controls.endCall"),
+              severity: "danger",
+              dt: unref(callButtonDt),
+              text: false,
+              "icon-class": "size-5",
+              class: "h-9! w-12!",
+              "data-testid": "call-pip-end",
+              onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"])),
+              onClick: withModifiers(unref(endCall), ["stop"])
+            }, null, 8, ["label", "dt", "onClick"])
+          ]),
+          createElementVNode("div", _hoisted_5, [
+            createElementVNode("div", _hoisted_6, [
+              createVNode(unref(Button), {
+                label: String(unref(participantCount)),
+                "aria-label": unref(t)("chat.call.controls.nextParticipant"),
+                disabled: !hasRemoteVideos.value,
+                dt: unref(callButtonDt),
+                severity: "secondary",
+                size: "small",
+                rounded: "",
+                class: "h-8!",
+                onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["stop"])),
+                onClick: withModifiers(cycleRemote, ["stop"])
+              }, {
+                icon: withCtx(() => [
+                  createVNode(_sfc_main$4, {
+                    name: "group",
+                    class: "size-4"
+                  })
+                ]),
+                _: 1
+              }, 8, ["label", "aria-label", "disabled", "dt"]),
+              !unref(isAudioOn) ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                createVNode(_sfc_main$4, {
+                  name: "micOff",
+                  class: "size-4"
+                })
+              ])) : createCommentVNode("", true),
+              !unref(isVideoOn) ? (openBlock(), createElementBlock("span", _hoisted_8, [
+                createVNode(_sfc_main$4, {
+                  name: "videocamOff",
+                  class: "size-4"
+                })
+              ])) : createCommentVNode("", true)
+            ]),
+            createVNode(_sfc_main$3, {
+              icon: "openInFull",
+              label: unref(t)("chat.call.controls.maximize"),
+              dt: unref(callButtonDt),
+              text: false,
+              "icon-class": "size-4.5",
+              class: "size-9!",
+              "data-testid": "call-maximize",
+              onPointerdown: _cache[2] || (_cache[2] = withModifiers(() => {
+              }, ["stop"])),
+              onClick: _cache[3] || (_cache[3] = withModifiers(($event) => unref(callStore).maximize(), ["stop"]))
+            }, null, 8, ["label", "dt"])
+          ])
+        ], 14, _hoisted_1)) : createCommentVNode("", true),
+        withDirectives(createElementVNode("div", {
+          "data-testid": "call-view",
+          dir: unref(dir),
+          class: "vue-chat font-chat-family fixed inset-0 z-60 flex size-full flex-col bg-neutral-900 text-white"
+        }, [
+          createElementVNode("div", {
+            "data-testid": "call-top-bar",
+            class: normalizeClass(["flex h-14 shrink-0 items-center gap-x-3 px-3 transition-opacity duration-300 motion-reduce:transition-none md:h-16 md:px-6", unref(showControls) ? "opacity-100" : "opacity-0"]),
+            onMouseenter: _cache[5] || (_cache[5] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
+          }, [
+            createElementVNode("div", _hoisted_10, [
+              createElementVNode("h1", _hoisted_11, toDisplayString(callTitle.value), 1),
+              _cache[18] || (_cache[18] = createElementVNode("span", {
+                "aria-hidden": "true",
+                class: "h-4 w-px shrink-0 bg-white/30"
+              }, null, -1)),
+              createElementVNode("span", _hoisted_12, toDisplayString(unref(formatDuration)(unref(callStore).elapsedTime)), 1)
+            ]),
+            createElementVNode("div", _hoisted_13, [
+              withDirectives((openBlock(), createBlock(unref(Button), {
+                "aria-label": peopleLabel.value,
+                "aria-haspopup": "dialog",
+                "aria-expanded": peopleOpen.value,
+                dt: unref(callButtonDt),
+                severity: "secondary",
+                rounded: "",
+                "data-testid": "call-people-button",
+                class: normalizeClass(["h-11! gap-x-1.5! px-3.5!", unref(focusRing)]),
+                onClick: _cache[4] || (_cache[4] = ($event) => peopleOpen.value = true)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$4, {
+                    name: "group",
+                    class: "size-5"
+                  }),
+                  createElementVNode("span", _hoisted_14, toDisplayString(unref(participantCount)), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-label", "aria-expanded", "dt", "class"])), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(peopleLabel.value),
+                  void 0,
+                  { bottom: true }
+                ]
+              ]),
+              withDirectives(createVNode(_sfc_main$3, {
+                icon: "pictureInPicture",
+                label: unref(t)("chat.call.controls.minimize"),
+                dt: unref(callButtonDt),
+                text: false,
+                "icon-class": "size-5",
+                class: normalizeClass(["size-11!", unref(focusRing)]),
+                "data-testid": "call-minimize",
+                onClick: unref(callStore).minimize
+              }, null, 8, ["label", "dt", "class", "onClick"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(unref(t)("chat.call.controls.minimize")),
+                  void 0,
+                  { bottom: true }
+                ]
+              ])
+            ])
+          ], 34),
+          createElementVNode("div", {
+            ref_key: "stageRef",
+            ref: stageRef,
+            class: "relative min-h-0 flex-1 px-2 pb-2 md:px-4 md:pb-4",
+            style: { "--call-gap": "0.5rem" },
+            onMousemove: _cache[10] || (_cache[10] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
+          }, [
+            unref(soundBlocked) ? (openBlock(), createBlock(unref(Button), {
+              key: 0,
+              label: unref(t)("chat.call.controls.enableSound"),
+              dt: unref(callButtonDt),
+              severity: "contrast",
+              rounded: "",
+              "data-testid": "call-enable-sound",
+              class: "absolute! top-4 left-1/2 z-40 -translate-x-1/2 shadow-lg",
+              onClick: unref(enableSound)
+            }, {
+              icon: withCtx(() => [
+                createVNode(_sfc_main$4, {
+                  name: "volumeUp",
+                  class: "size-5"
+                })
+              ]),
+              _: 1
+            }, 8, ["label", "dt", "onClick"])) : createCommentVNode("", true),
+            createVNode(Transition, {
+              "enter-active-class": "transition duration-200 motion-reduce:transition-none",
+              "enter-from-class": "opacity-0 -translate-y-2",
+              "leave-active-class": "transition duration-200 motion-reduce:transition-none",
+              "leave-to-class": "opacity-0"
+            }, {
+              default: withCtx(() => [
+                unref(notices).current.value && !unref(soundBlocked) ? (openBlock(), createElementBlock("div", {
+                  key: unref(notices).current.value.id,
+                  "data-testid": "call-notice",
+                  class: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4"
+                }, [
+                  createElementVNode("span", _hoisted_15, [
+                    createElementVNode("bdi", null, toDisplayString(unref(notices).current.value.text), 1)
+                  ])
+                ])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }),
+            createElementVNode("span", _hoisted_16, toDisplayString(unref(notices).liveText.value), 1),
+            unref(layout).mode.value === "solo" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                key: selfTile.value.id
+              }, tileProps(selfTile.value), {
+                hint: unref(t)("chat.call.cameraIsOff"),
+                class: "size-full",
+                onVideo: _cache[6] || (_cache[6] = (el, prev) => bindVideo(selfTile.value, el, prev)),
+                onPause: _cache[7] || (_cache[7] = (el) => togglePause(selfTile.value, el)),
+                onFullscreen: _cache[8] || (_cache[8] = (el) => toggleTileFullscreen(selfTile.value, el))
+              }), null, 16, ["hint"])),
+              showWaiting.value ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                createElementVNode("div", _hoisted_18, [
+                  createElementVNode("p", _hoisted_19, toDisplayString(callTitle.value), 1),
+                  createElementVNode("p", _hoisted_20, toDisplayString(waitingText.value), 1)
+                ])
+              ])) : createCommentVNode("", true)
+            ], 64)) : unref(layout).mode.value === "pair" && pairRemote.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList([pairRemote.value], (tile) => {
+                return openBlock(), createBlock(_sfc_main$2, mergeProps({
+                  key: tile.id
+                }, { ref_for: true }, tileProps(tile), {
+                  class: "size-full",
+                  onPin: ($event) => unref(layout).togglePin(tile.id),
+                  onRetry: ($event) => unref(retryPeer)(tile.participantId),
+                  onVideo: (el, prev) => bindVideo(tile, el, prev),
+                  onPause: (el) => togglePause(tile, el),
+                  onFullscreen: (el) => toggleTileFullscreen(tile, el)
+                }), null, 16, ["onPin", "onRetry", "onVideo", "onPause", "onFullscreen"]);
+              }), 128)),
+              (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                key: selfTile.value.id
+              }, tileProps(selfTile.value, true), {
+                "can-pin": false,
+                class: "absolute! end-5 bottom-4 z-10 aspect-video w-36 shadow-xl outline outline-white/25 sm:w-56 md:end-6 md:bottom-6 md:w-64",
+                onVideo: _cache[9] || (_cache[9] = (el, prev) => bindVideo(selfTile.value, el, prev))
+              }), null, 16))
+            ], 64)) : unref(layout).mode.value === "grid" ? (openBlock(), createElementBlock("div", {
+              key: 3,
+              class: normalizeClass(unref(layout).gridClass)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layout).gridTiles.value, (tile, index) => {
+                return openBlock(), createBlock(_sfc_main$2, mergeProps({
+                  key: tile.id
+                }, { ref_for: true }, tileProps(tile), {
+                  class: ["size-full", unref(layout).cellClass(index)],
+                  onPin: ($event) => unref(layout).togglePin(tile.id),
+                  onRetry: ($event) => unref(retryPeer)(tile.participantId),
+                  onVideo: (el, prev) => bindVideo(tile, el, prev),
+                  onPause: (el) => togglePause(tile, el),
+                  onFullscreen: (el) => toggleTileFullscreen(tile, el)
+                }), null, 16, ["class", "onPin", "onRetry", "onVideo", "onPause", "onFullscreen"]);
+              }), 128))
+            ], 2)) : unref(layout).stageTile.value ? (openBlock(), createElementBlock("div", {
+              key: 4,
+              class: normalizeClass(["flex size-full gap-(--call-gap)", portrait.value ? "flex-col" : "flex-row"])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList([unref(layout).stageTile.value], (tile) => {
+                return openBlock(), createBlock(_sfc_main$2, mergeProps({
+                  key: tile.id
+                }, { ref_for: true }, tileProps(tile), {
+                  "data-stage": "true",
+                  class: "min-h-0 min-w-0 flex-1",
+                  onPin: ($event) => unref(layout).togglePin(tile.id),
+                  onRetry: ($event) => unref(retryPeer)(tile.participantId),
+                  onVideo: (el, prev) => bindVideo(tile, el, prev),
+                  onPause: (el) => togglePause(tile, el),
+                  onFullscreen: (el) => toggleTileFullscreen(tile, el)
+                }), null, 16, ["onPin", "onRetry", "onVideo", "onPause", "onFullscreen"]);
+              }), 128)),
+              unref(layout).stripTiles.value.length ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                "data-testid": "call-strip",
+                class: normalizeClass(["hide-scrollbar flex shrink-0 gap-(--call-gap)", portrait.value ? "h-24 flex-row overflow-x-auto sm:h-28" : "w-40 flex-col overflow-y-auto lg:w-56"])
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layout).stripTiles.value, (tile) => {
+                  return openBlock(), createBlock(_sfc_main$2, mergeProps({
+                    key: tile.id
+                  }, { ref_for: true }, tileProps(tile, true), {
+                    class: ["aspect-video shrink-0", portrait.value ? "h-full" : "w-full"],
+                    onPin: ($event) => unref(layout).togglePin(tile.id),
+                    onRetry: ($event) => unref(retryPeer)(tile.participantId),
+                    onVideo: (el, prev) => bindVideo(tile, el, prev)
+                  }), null, 16, ["class", "onPin", "onRetry", "onVideo"]);
+                }), 128))
+              ], 2)) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true)
+          ], 544),
+          createElementVNode("div", {
+            class: normalizeClass(["flex h-20 shrink-0 items-center justify-center px-3 transition-opacity duration-300 motion-reduce:transition-none md:px-6", unref(showControls) ? "opacity-100" : "opacity-0"]),
+            onMouseenter: _cache[13] || (_cache[13] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args)),
+            onMousemove: _cache[14] || (_cache[14] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
+          }, [
+            createElementVNode("div", _hoisted_21, [
+              withDirectives(createVNode(_sfc_main$3, mergeProps({
+                icon: unref(isAudioOn) ? "mic" : "micOff",
+                label: audioLabel.value,
+                severity: unref(isAudioOn) ? "secondary" : "danger",
+                "aria-keyshortcuts": unref(isMac) ? "Meta+D" : "Control+D"
+              }, barButton, {
+                "data-testid": "call-toggle-audio",
+                "data-active": unref(isAudioOn),
+                onClick: unref(toggleAudio)
+              }), null, 16, ["icon", "label", "severity", "aria-keyshortcuts", "data-active", "onClick"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(withKeys(audioLabel.value, "D")),
+                  void 0,
+                  { top: true }
+                ]
+              ]),
+              createElementVNode("div", {
+                class: normalizeClass(["flex items-center rounded-full", unref(cameras).length > 1 && "bg-white/12"])
+              }, [
+                unref(cameras).length > 1 ? withDirectives((openBlock(), createBlock(_sfc_main$3, {
+                  key: 0,
+                  icon: "arrowDropUp",
+                  label: unref(t)("chat.call.controls.chooseCamera"),
+                  dt: unref(callButtonDt),
+                  text: "",
+                  severity: "secondary",
+                  "icon-class": "size-6",
+                  class: normalizeClass(["h-12! w-8! rounded-e-none! ps-1!", unref(focusRing)]),
+                  "aria-haspopup": "true",
+                  onClick: _cache[11] || (_cache[11] = ($event) => {
+                    var _a;
+                    return (_a = cameraMenu.value) == null ? void 0 : _a.toggle($event);
+                  })
+                }, null, 8, ["label", "dt", "class"])), [
+                  [
+                    unref(vTooltip),
+                    unref(tip)(unref(t)("chat.call.controls.chooseCamera")),
+                    void 0,
+                    { top: true }
+                  ]
+                ]) : createCommentVNode("", true),
+                withDirectives(createVNode(_sfc_main$3, mergeProps({
+                  icon: unref(isVideoOn) ? "videocam" : "videocamOff",
+                  label: videoLabel.value,
+                  severity: unref(isVideoOn) ? "secondary" : "danger",
+                  "aria-keyshortcuts": unref(isMac) ? "Meta+E" : "Control+E"
+                }, barButton, {
+                  "data-testid": "call-toggle-video",
+                  "data-active": unref(isVideoOn),
+                  onClick: unref(toggleVideo)
+                }), null, 16, ["icon", "label", "severity", "aria-keyshortcuts", "data-active", "onClick"]), [
+                  [
+                    unref(vTooltip),
+                    unref(tip)(withKeys(videoLabel.value, "E")),
+                    void 0,
+                    { top: true }
+                  ]
+                ])
+              ], 2),
+              withDirectives(createVNode(_sfc_main$3, mergeProps({
+                icon: unref(isScreenSharing) ? "cancelPresentation" : "presentToAll",
+                label: shareLabel.value,
+                severity: unref(isScreenSharing) ? "contrast" : "secondary"
+              }, barButton, {
+                "data-testid": "call-toggle-screen",
+                "data-active": unref(isScreenSharing),
+                onClick: unref(toggleScreenShare)
+              }), null, 16, ["icon", "label", "severity", "data-active", "onClick"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(shareLabel.value),
+                  void 0,
+                  { top: true }
+                ]
+              ]),
+              withDirectives(createVNode(_sfc_main$3, mergeProps({
+                icon: "moreVert",
+                label: unref(t)("chat.call.controls.more")
+              }, barButton, {
+                class: "h-12! w-10! sm:w-12!",
+                "aria-haspopup": "true",
+                "data-testid": "call-more",
+                onClick: _cache[12] || (_cache[12] = ($event) => {
+                  var _a;
+                  return (_a = moreMenu.value) == null ? void 0 : _a.toggle($event);
+                })
+              }), null, 16, ["label"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(unref(t)("chat.call.controls.more")),
+                  void 0,
+                  { top: true }
+                ]
+              ]),
+              withDirectives(createVNode(_sfc_main$3, {
+                icon: "callEnd",
+                label: unref(t)("chat.call.controls.endCall"),
+                severity: "danger",
+                dt: unref(callButtonDt),
+                text: false,
+                size: "large",
+                "icon-class": "size-6",
+                class: normalizeClass(["h-12! w-16! sm:w-18!", unref(focusRing)]),
+                "data-testid": "call-end",
+                onClick: unref(endCall)
+              }, null, 8, ["label", "dt", "class", "onClick"]), [
+                [
+                  unref(vTooltip),
+                  unref(tip)(unref(t)("chat.call.controls.endCall")),
+                  void 0,
+                  { top: true }
+                ]
+              ])
+            ])
+          ], 34),
+          createVNode(_sfc_main$1, {
+            visible: peopleOpen.value,
+            "onUpdate:visible": _cache[15] || (_cache[15] = ($event) => peopleOpen.value = $event),
+            participants: unref(participants)
+          }, null, 8, ["visible", "participants"]),
+          createVNode(unref(Menu), {
+            ref_key: "cameraMenu",
+            ref: cameraMenu,
+            model: cameraItems.value,
+            popup: "",
+            dir: unref(dir),
+            dt: unref(callMenuDt),
+            class: "vue-chat"
+          }, {
+            itemicon: withCtx(({ item }) => [
+              item.callIcon ? (openBlock(), createBlock(_sfc_main$4, {
+                key: 0,
+                name: item.callIcon,
+                class: "size-5 text-sky-400"
+              }, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_22))
+            ]),
+            _: 1
+          }, 8, ["model", "dir", "dt"]),
+          createVNode(unref(Menu), {
+            ref_key: "moreMenu",
+            ref: moreMenu,
+            model: moreItems.value,
+            popup: "",
+            dir: unref(dir),
+            dt: unref(callMenuDt),
+            class: "vue-chat"
+          }, {
+            itemicon: withCtx(({ item }) => [
+              createVNode(_sfc_main$4, {
+                name: item.callIcon,
+                class: "size-5 text-neutral-400"
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+          }, 8, ["model", "dir", "dt"])
+        ], 8, _hoisted_9), [
+          [vShow, unref(callStore).isActive && !unref(callStore).isMinimized]
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Call-DvVJ7IsY.mjs.map