vue-parley 4.0.0

package/dist/chunks/Call-CTIujxDi.cjs

@@ -0,0 +1,818 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./index-D50Yn7q4.cjs");
+const vue = require("vue");
+const core = require("@vueuse/core");
+const Button = require("primevue/button");
+const Listbox = require("primevue/listbox");
+const CONTROLS_HIDE_AFTER_MS = 3e3;
+function useCallUi(opts) {
+  const { localStream, screenStream, remoteVideos, remoteScreens } = opts;
+  const localVideo = vue.ref(null);
+  const localScreen = vue.ref(null);
+  const remoteRefs = vue.ref({});
+  const remoteScreenRefs = vue.ref({});
+  const remoteParents = vue.ref({});
+  const showControls = vue.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"];
+  vue.onMounted(() => {
+    resetControlsTimeout();
+    inputEvents.forEach((e) => document.addEventListener(e, resetControlsTimeout));
+  });
+  vue.onUnmounted(() => {
+    inputEvents.forEach((e) => document.removeEventListener(e, resetControlsTimeout));
+    clearTimeout(controlsTimeout);
+    detachAll();
+  });
+  const isFullscreen = vue.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 = vue.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 attach = (el, stream) => {
+    if (!el) return;
+    if (el.srcObject !== stream) el.srcObject = stream;
+    el.play().catch(() => {
+    });
+  };
+  vue.watch(
+    [localStream, opts.isMinimized],
+    async () => {
+      await vue.nextTick();
+      if (localStream.value && localVideo.value)
+        localVideo.value.srcObject = localStream.value;
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    [screenStream, opts.isMinimized],
+    async () => {
+      await vue.nextTick();
+      if (localScreen.value) localScreen.value.srcObject = screenStream.value;
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    [() => ({ ...remoteVideos.value }), opts.isMinimized],
+    async () => {
+      await vue.nextTick();
+      for (const [id, { stream }] of Object.entries(remoteVideos.value))
+        attach(remoteRefs.value[id], stream);
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    [() => ({ ...remoteScreens.value }), opts.isMinimized],
+    async () => {
+      await vue.nextTick();
+      for (const [id, { stream }] of Object.entries(remoteScreens.value))
+        attach(remoteScreenRefs.value[id], stream);
+    },
+    { 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,
+    detachAll
+  };
+}
+function useCall() {
+  const callStore = index.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
+  });
+  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,
+    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: vue.ref(false),
+    showControls: ui.showControls,
+    resetControlsTimeout: ui.resetControlsTimeout,
+    isFullscreen: ui.isFullscreen,
+    toggleFullscreen: ui.toggleFullscreen,
+    toggleRemote: ui.toggleRemote,
+    videoPaused: ui.videoPaused,
+    toggleVideoPause: ui.toggleVideoPause,
+    localVideo: ui.localVideo,
+    localScreen: ui.localScreen,
+    remoteRefs: ui.remoteRefs,
+    remoteScreenRefs: ui.remoteScreenRefs,
+    remoteParents: ui.remoteParents
+  };
+}
+const _hoisted_1 = { class: "relative h-full w-full" };
+const _hoisted_2 = { class: "absolute top-3 right-3 left-3 z-10 flex items-center justify-between" };
+const _hoisted_3 = { class: "flex items-center gap-x-2 rounded-full bg-black/40 px-3 py-1.5 backdrop-blur-sm" };
+const _hoisted_4 = { class: "text-label-sm text-white/90 select-none" };
+const _hoisted_5 = { class: "absolute right-3 bottom-3 left-3 z-10 flex items-center justify-between" };
+const _hoisted_6 = { class: "flex items-center gap-2" };
+const _hoisted_7 = {
+  key: 0,
+  class: "flex gap-1"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "flex h-7 w-7 items-center justify-center rounded-full bg-diamond-error"
+};
+const _hoisted_9 = {
+  key: 1,
+  class: "flex h-7 w-7 items-center justify-center rounded-full bg-diamond-error"
+};
+const _hoisted_10 = {
+  "data-testid": "call-view",
+  class: "vue-chat fixed inset-0 z-[60] flex h-full w-full flex-col bg-diamond-black"
+};
+const _hoisted_11 = { class: "flex items-center gap-x-4" };
+const _hoisted_12 = { class: "hidden select-none text-label-lg text-white md:block" };
+const _hoisted_13 = { class: "flex items-center gap-x-2 text-white text-body-sm" };
+const _hoisted_14 = { "data-testid": "call-participants" };
+const _hoisted_15 = { class: "flex items-center gap-x-4.5" };
+const _hoisted_16 = { class: "flex h-6 items-center justify-center rounded-full bg-diamond-error px-2 text-white select-none" };
+const _hoisted_17 = { class: "text-body-sm" };
+const _hoisted_18 = { class: "grid h-full min-h-0 w-full min-w-0 grid-cols-1 gap-4 md:grid-cols-[repeat(auto-fit,minmax(300px,1fr))]" };
+const _hoisted_19 = { class: "absolute bottom-3 left-3 z-20 flex items-center gap-x-2" };
+const _hoisted_20 = { class: "rounded bg-black-500 px-2 py-1 text-label-sm text-white select-none" };
+const _hoisted_21 = { class: "flex h-10 w-10 items-center justify-center rounded-full bg-black-500" };
+const _hoisted_22 = { class: "absolute bottom-2 left-2 z-20 flex items-center gap-x-1" };
+const _hoisted_23 = { class: "rounded bg-black-500 px-1.5 py-0.5 text-label-sm text-white select-none" };
+const _hoisted_24 = { class: "absolute bottom-3 left-3 z-20 flex items-center gap-x-2" };
+const _hoisted_25 = { class: "rounded bg-black-500 px-2 py-1 text-label-sm text-white select-none" };
+const _hoisted_26 = { class: "flex h-10 w-10 items-center justify-center rounded-full bg-black-500" };
+const _hoisted_27 = { class: "absolute bottom-3 left-3 z-20 flex items-center gap-x-2" };
+const _hoisted_28 = { class: "rounded bg-black-500 px-2 py-1 text-label-sm text-white select-none" };
+const _hoisted_29 = {
+  key: 0,
+  class: "flex h-7 w-7 items-center justify-center rounded-full bg-diamond-error"
+};
+const _hoisted_30 = {
+  key: 0,
+  class: "absolute inset-0 flex items-center justify-center bg-black-600"
+};
+const _hoisted_31 = { class: "text-center text-white" };
+const _hoisted_32 = { class: "mx-auto mb-2 flex h-16 w-16 items-center justify-center rounded-full bg-chat-primary" };
+const _hoisted_33 = { class: "text-title-lg font-semibold" };
+const _hoisted_34 = { class: "text-label-md" };
+const PIP_WIDTH = 280;
+const PIP_HEIGHT = 160;
+const PADDING = 16;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Call",
+  setup(__props) {
+    const callStore = index.useCallStore();
+    const minimizedRef = vue.ref(null);
+    const bodyRef = vue.ref(null);
+    const cameraPickerOpen = vue.ref(false);
+    const { t, locale } = index.useLocalI18n(index.chat);
+    const { dir } = index.useDirection();
+    const {
+      toggleVideoPause,
+      toggleRemote,
+      participantCount,
+      endCall,
+      toggleFullscreen,
+      toggleFlashlight,
+      toggleScreenShare,
+      toggleAudio,
+      toggleVideo,
+      switchCamera,
+      isFlashlightSupported,
+      tileCount,
+      isAudioOn,
+      isVideoOn,
+      isFlashlightOn,
+      isFullscreen,
+      isScreenSharing,
+      showControls,
+      resetControlsTimeout,
+      cameras,
+      videoPaused,
+      localStream,
+      localVideo,
+      localScreen,
+      remoteParents,
+      remoteRefs,
+      remoteScreens,
+      remoteScreenRefs,
+      remoteVideos
+    } = useCall();
+    const pickCamera = (deviceId) => {
+      cameraPickerOpen.value = false;
+      switchCamera(deviceId);
+    };
+    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: "#151823",
+      hoverColor: "#151823",
+      activeColor: "#151823"
+    };
+    const callScheme = { root: { secondary: translucent, contrast: lit } };
+    const callButtonDt = { colorScheme: { light: callScheme, dark: callScheme } };
+    const footerButton = {
+      dt: callButtonDt,
+      text: false,
+      size: "large",
+      iconClass: "size-6"
+    };
+    const pipVideoRef = vue.ref(null);
+    const activeRemoteIndex = vue.ref(0);
+    const remoteVideoEntries = vue.computed(() => Object.entries(remoteVideos.value));
+    const hasRemoteVideos = vue.computed(() => remoteVideoEntries.value.length > 0);
+    const activeRemoteUserId = vue.computed(() => {
+      const entries = remoteVideoEntries.value;
+      if (entries.length === 0) return null;
+      return entries[activeRemoteIndex.value % entries.length][0];
+    });
+    const pipStream = vue.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;
+    }
+    vue.watch(
+      [pipStream, () => callStore.isMinimized],
+      async () => {
+        await vue.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 }
+    );
+    vue.onMounted(() => {
+      bodyRef.value = document.body;
+    });
+    const { width: windowWidth, height: windowHeight } = core.useWindowSize();
+    const { x, y, isDragging } = core.useDraggable(minimizedRef, {
+      initialValue: {
+        x: typeof window !== "undefined" ? window.innerWidth - PIP_WIDTH - PADDING : PADDING,
+        y: typeof window !== "undefined" ? window.innerHeight - PIP_HEIGHT - PADDING : PADDING
+      },
+      // غیرفعال کردن درگ در صورتی که کامپوننت مینیمایز نباشد
+      disabled: vue.computed(() => !callStore.isMinimized)
+    });
+    vue.watch(isDragging, (dragging) => {
+      if (!dragging && callStore.isMinimized) {
+        const maxX = windowWidth.value - PIP_WIDTH - PADDING;
+        const maxY = windowHeight.value - PIP_HEIGHT - PADDING;
+        dir.value === "rtl";
+        const targetX = x.value < windowWidth.value / 2 ? PADDING : maxX;
+        const targetY = y.value < windowHeight.value / 2 ? PADDING : maxY;
+        x.value = targetX;
+        y.value = targetY;
+      }
+    });
+    vue.watch(
+      () => callStore.isMinimized,
+      (isMinimized) => {
+        if (isMinimized) {
+          vue.nextTick(() => {
+            const isRtl = dir.value === "rtl";
+            x.value = isRtl ? PADDING : windowWidth.value - PIP_WIDTH - PADDING;
+            y.value = windowHeight.value - PIP_HEIGHT - PADDING;
+          });
+        }
+      },
+      { immediate: true }
+    );
+    const clampedStyle = vue.computed(() => {
+      if (!callStore.isMinimized) return {};
+      const maxX = windowWidth.value - PIP_WIDTH - PADDING;
+      const maxY = windowHeight.value - PIP_HEIGHT - PADDING;
+      const safeX = Math.max(PADDING, Math.min(x.value, maxX));
+      const safeY = Math.max(PADDING, Math.min(y.value, maxY));
+      return {
+        left: `${safeX}px`,
+        top: `${safeY}px`
+      };
+    });
+    return (_ctx, _cache) => {
+      const _component_BIcon = index._sfc_main$1;
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.unref(callStore).isActive && vue.unref(callStore).isMinimized ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          ref_key: "minimizedRef",
+          ref: minimizedRef,
+          "data-testid": "call-pip",
+          style: vue.normalizeStyle(clampedStyle.value),
+          class: vue.normalizeClass(["vue-chat fixed w-70 h-40 bg-black-600 rounded-2xl shadow-floating z-9999 overflow-hidden border border-white/10 flex flex-col items-center justify-center cursor-move touch-none", [!vue.unref(isDragging) ? "transition-all duration-300 ease-out" : ""]])
+        }, [
+          vue.createElementVNode("video", {
+            ref_key: "pipVideoRef",
+            ref: pipVideoRef,
+            muted: "",
+            autoplay: "",
+            playsinline: "",
+            class: "pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
+          }, null, 512),
+          _cache[18] || (_cache[18] = vue.createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 opacity-0 transition-opacity duration-500 group-hover:opacity-100" }, null, -1)),
+          _cache[19] || (_cache[19] = vue.createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20" }, null, -1)),
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.createElementVNode("div", _hoisted_3, [
+                _cache[16] || (_cache[16] = vue.createElementVNode("div", { class: "relative" }, [
+                  vue.createElementVNode("div", { class: "h-2.5 w-2.5 animate-pulse rounded-full bg-diamond-error" }),
+                  vue.createElementVNode("div", { class: "absolute inset-0 h-2.5 w-2.5 animate-ping rounded-full bg-diamond-error/30" })
+                ], -1)),
+                vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(vue.unref(t)("Call active")), 1),
+                _cache[17] || (_cache[17] = vue.createElementVNode("div", { class: "flex -space-x-1" }, [
+                  vue.createElementVNode("div", {
+                    class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
+                    style: { "animation-delay": "0s" }
+                  }),
+                  vue.createElementVNode("div", {
+                    class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
+                    style: { "animation-delay": "0.2s" }
+                  }),
+                  vue.createElementVNode("div", {
+                    class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
+                    style: { "animation-delay": "0.4s" }
+                  })
+                ], -1))
+              ]),
+              vue.createVNode(index._sfc_main, {
+                icon: "PhPhoneX",
+                label: vue.unref(t)("chat.call.controls.endCall"),
+                severity: "danger",
+                text: false,
+                "icon-class": "size-4",
+                "data-testid": "call-pip-end",
+                onPointerdown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["stop"])),
+                onClick: vue.withModifiers(vue.unref(endCall), ["stop"])
+              }, null, 8, ["label", "onClick"])
+            ]),
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createElementVNode("div", _hoisted_6, [
+                vue.createVNode(vue.unref(Button), {
+                  label: String(vue.unref(participantCount)),
+                  "aria-label": vue.unref(t)("chat.call.controls.nextParticipant"),
+                  disabled: !hasRemoteVideos.value,
+                  dt: callButtonDt,
+                  severity: "secondary",
+                  size: "small",
+                  rounded: "",
+                  onPointerdown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                  }, ["stop"])),
+                  onClick: vue.withModifiers(cycleRemote, ["stop"])
+                }, {
+                  icon: vue.withCtx(() => [
+                    vue.createVNode(_component_BIcon, {
+                      icon: "PhUsers",
+                      class: "size-3"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["label", "aria-label", "disabled"]),
+                !vue.unref(isAudioOn) || !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                  !vue.unref(isAudioOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                    vue.createVNode(_component_BIcon, {
+                      icon: "PhMicrophoneSlash",
+                      class: "h-3 w-3 fill-white"
+                    })
+                  ])) : vue.createCommentVNode("", true),
+                  !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
+                    vue.createVNode(_component_BIcon, {
+                      icon: "PhVideoCameraSlash",
+                      class: "h-3 w-3 fill-white"
+                    })
+                  ])) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true)
+              ]),
+              vue.createVNode(index._sfc_main, {
+                icon: "PhResize",
+                label: vue.unref(t)("chat.call.controls.maximize"),
+                dt: callButtonDt,
+                text: false,
+                "icon-class": "size-4",
+                "data-testid": "call-maximize",
+                onPointerdown: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+                }, ["stop"])),
+                onClick: _cache[3] || (_cache[3] = vue.withModifiers(($event) => vue.unref(callStore).maximize(), ["stop"]))
+              }, null, 8, ["label"])
+            ])
+          ])
+        ], 6)) : vue.createCommentVNode("", true),
+        vue.withDirectives(vue.createElementVNode("div", _hoisted_10, [
+          !vue.unref(callStore).isMinimized ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["flex h-16 items-center justify-between px-4 transition-all duration-300 sm:h-20", vue.unref(showControls) ? "opacity-100" : "opacity-0"]),
+            onMouseenter: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => vue.unref(resetControlsTimeout) && vue.unref(resetControlsTimeout)(...args)),
+            onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+            (...args) => vue.unref(resetControlsTimeout) && vue.unref(resetControlsTimeout)(...args))
+          }, [
+            vue.createElementVNode("div", _hoisted_11, [
+              vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(vue.unref(t)("Behayand Meeting")), 1),
+              vue.createElementVNode("div", _hoisted_13, [
+                vue.createVNode(_component_BIcon, {
+                  icon: "PhUsers",
+                  class: "h-4 w-4 fill-white"
+                }),
+                vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(vue.unref(participantCount)) + " " + vue.toDisplayString(vue.unref(participantCount) > 1 ? vue.unref(t)("participants") : vue.unref(t)("participant")), 1)
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_15, [
+              vue.createElementVNode("div", _hoisted_16, [
+                vue.createElementVNode("div", _hoisted_17, vue.toDisplayString((/* @__PURE__ */ new Date()).toLocaleTimeString(vue.unref(locale), {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: true
+                })), 1)
+              ]),
+              vue.createVNode(index._sfc_main, vue.mergeProps({
+                icon: "PhCaretDown",
+                label: vue.unref(t)("chat.call.controls.minimize")
+              }, footerButton, {
+                "data-testid": "call-minimize",
+                onClick: vue.unref(callStore).minimize
+              }), null, 16, ["label", "onClick"])
+            ])
+          ], 34)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["relative grid w-full overflow-hidden", vue.unref(callStore).isMinimized ? "h-full p-0" : "h-full p-4"]),
+            onMousemove: _cache[10] || (_cache[10] = //@ts-ignore
+            (...args) => vue.unref(resetControlsTimeout) && vue.unref(resetControlsTimeout)(...args))
+          }, [
+            vue.withDirectives(vue.createElementVNode("div", _hoisted_18, [
+              vue.withDirectives(vue.createElementVNode("div", {
+                ref: (el) => vue.unref(remoteParents)[`self_screen`] = el,
+                class: "group relative flex aspect-video h-full w-full flex-col items-center justify-center overflow-hidden rounded-2xl border-2 border-chat-primary/0 bg-black-600 p-2"
+              }, [
+                vue.createElementVNode("video", {
+                  ref_key: "localScreen",
+                  ref: localScreen,
+                  autoplay: "",
+                  muted: "",
+                  playsinline: "",
+                  class: "absolute inset-0 z-0 h-full w-full object-cover"
+                }, null, 512),
+                vue.createElementVNode("div", _hoisted_19, [
+                  vue.createElementVNode("div", _hoisted_20, vue.toDisplayString(vue.unref(t)("Your Presentation")), 1),
+                  vue.createElementVNode("div", _hoisted_21, [
+                    vue.createVNode(_component_BIcon, {
+                      icon: "PhMonitor",
+                      class: "h-4 w-4 fill-white"
+                    })
+                  ]),
+                  vue.createVNode(index._sfc_main, {
+                    icon: vue.unref(videoPaused)["self_screen"] ? "PhPlay" : "PhPause",
+                    label: vue.unref(videoPaused)["self_screen"] ? vue.unref(t)("chat.call.controls.playVideo") : vue.unref(t)("chat.call.controls.pauseVideo"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(toggleVideoPause)("self_screen", vue.unref(localScreen)))
+                  }, null, 8, ["icon", "label"]),
+                  vue.createVNode(index._sfc_main, {
+                    icon: vue.unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                    label: vue.unref(isFullscreen) ? vue.unref(t)("chat.call.controls.exitFullscreen") : vue.unref(t)("chat.call.controls.fullscreen"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[7] || (_cache[7] = ($event) => vue.unref(toggleRemote)(`self_screen`))
+                  }, null, 8, ["icon", "label"])
+                ])
+              ], 512), [
+                [vue.vShow, vue.unref(isScreenSharing)]
+              ]),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(remoteVideos), (stream, remoteUserId) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: `remote-${remoteUserId}`,
+                  "data-testid": "call-remote-video",
+                  ref_for: true,
+                  ref: (el) => vue.unref(remoteParents)[`remote_video_${remoteUserId}`] = el,
+                  class: "group relative flex aspect-video h-full w-full flex-col items-center justify-center overflow-hidden rounded-2xl border-2 border-chat-primary/0 bg-black-600 p-2"
+                }, [
+                  vue.createElementVNode("video", {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) vue.unref(remoteRefs)[remoteUserId] = el;
+                    },
+                    autoplay: "",
+                    playsinline: "",
+                    class: "absolute inset-0 z-0 h-full w-full object-cover"
+                  }, null, 512),
+                  vue.createElementVNode("div", _hoisted_22, [
+                    vue.createElementVNode("div", _hoisted_23, vue.toDisplayString(stream.name.slice(0, 15)), 1),
+                    vue.createVNode(index._sfc_main, {
+                      icon: vue.unref(videoPaused)[`remote_video_${remoteUserId}`] ? "PhPlay" : "PhPause",
+                      label: vue.unref(videoPaused)[`remote_video_${remoteUserId}`] ? vue.unref(t)("chat.call.controls.playVideo") : vue.unref(t)("chat.call.controls.pauseVideo"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => vue.unref(toggleVideoPause)(
+                        `remote_video_${remoteUserId}`,
+                        vue.unref(remoteRefs)[remoteUserId]
+                      )
+                    }, null, 8, ["icon", "label", "onClick"]),
+                    vue.createVNode(index._sfc_main, {
+                      icon: vue.unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                      label: vue.unref(isFullscreen) ? vue.unref(t)("chat.call.controls.exitFullscreen") : vue.unref(t)("chat.call.controls.fullscreen"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => vue.unref(toggleRemote)(`remote_video_${remoteUserId}`)
+                    }, null, 8, ["icon", "label", "onClick"])
+                  ])
+                ]);
+              }), 128)),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(remoteScreens), (stream, remoteUserId) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: `remote-screen-${remoteUserId}`,
+                  "data-testid": "call-remote-screen",
+                  ref_for: true,
+                  ref: (el) => vue.unref(remoteParents)[`remote_screen_${remoteUserId}`] = el,
+                  class: "group relative flex aspect-video h-full w-full flex-col items-center justify-center overflow-hidden rounded-2xl border-2 border-chat-primary/0 bg-black-600 p-2"
+                }, [
+                  vue.createElementVNode("video", {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) vue.unref(remoteScreenRefs)[remoteUserId] = el;
+                    },
+                    autoplay: "",
+                    muted: "",
+                    playsinline: "",
+                    class: "absolute inset-0 z-0 h-full w-full object-cover"
+                  }, null, 512),
+                  vue.createElementVNode("div", _hoisted_24, [
+                    vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(vue.unref(t)("Presentation of")) + " " + vue.toDisplayString(stream.name.slice(0, 15)), 1),
+                    vue.createElementVNode("div", _hoisted_26, [
+                      vue.createVNode(_component_BIcon, {
+                        icon: "PhMonitor",
+                        class: "h-4 w-4 fill-white"
+                      })
+                    ]),
+                    vue.createVNode(index._sfc_main, {
+                      icon: vue.unref(videoPaused)[`remote_screen_${remoteUserId}`] ? "PhPlay" : "PhPause",
+                      label: vue.unref(videoPaused)[`remote_screen_${remoteUserId}`] ? vue.unref(t)("chat.call.controls.playVideo") : vue.unref(t)("chat.call.controls.pauseVideo"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => vue.unref(toggleVideoPause)(
+                        `remote_screen_${remoteUserId}`,
+                        vue.unref(remoteScreenRefs)[remoteUserId] || null
+                      )
+                    }, null, 8, ["icon", "label", "onClick"]),
+                    vue.createVNode(index._sfc_main, {
+                      icon: vue.unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                      label: vue.unref(isFullscreen) ? vue.unref(t)("chat.call.controls.exitFullscreen") : vue.unref(t)("chat.call.controls.fullscreen"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => vue.unref(toggleRemote)(`remote_screen_${remoteUserId}`)
+                    }, null, 8, ["icon", "label", "onClick"])
+                  ])
+                ]);
+              }), 128))
+            ], 512), [
+              [vue.vShow, vue.unref(tileCount)]
+            ]),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["flex min-h-0", [vue.unref(tileCount) && "absolute inset-0 m-4"]])
+            }, [
+              !vue.unref(callStore).isMinimized ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(["relative flex flex-col items-center justify-center overflow-hidden rounded-2xl border-2 border-chat-primary/0 bg-black-600 p-2", [
+                  vue.unref(tileCount) ? "absolute z-10 h-[132px] w-[236px]" : "h-full w-full"
+                ]])
+              }, [
+                vue.createElementVNode("video", {
+                  ref_key: "localVideo",
+                  ref: localVideo,
+                  "data-testid": "call-local-video",
+                  autoplay: "",
+                  muted: "",
+                  playsinline: "",
+                  class: "pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
+                }, null, 512),
+                _cache[20] || (_cache[20] = vue.createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }, null, -1)),
+                vue.createElementVNode("div", _hoisted_27, [
+                  vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(vue.unref(t)("You")), 1),
+                  !vue.unref(isAudioOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_29, [
+                    vue.createVNode(_component_BIcon, {
+                      icon: "PhMicrophoneSlash",
+                      class: "h-3 w-3 fill-white"
+                    })
+                  ])) : vue.createCommentVNode("", true),
+                  vue.createVNode(index._sfc_main, {
+                    icon: vue.unref(videoPaused)["self_cam"] ? "PhPlay" : "PhPause",
+                    label: vue.unref(videoPaused)["self_cam"] ? vue.unref(t)("chat.call.controls.playVideo") : vue.unref(t)("chat.call.controls.pauseVideo"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[8] || (_cache[8] = ($event) => vue.unref(toggleVideoPause)("self_cam", vue.unref(localVideo)))
+                  }, null, 8, ["icon", "label"]),
+                  vue.createVNode(index._sfc_main, {
+                    icon: vue.unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                    label: vue.unref(isFullscreen) ? vue.unref(t)("chat.call.controls.exitFullscreen") : vue.unref(t)("chat.call.controls.fullscreen"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[9] || (_cache[9] = ($event) => vue.unref(toggleRemote)("self_cam"))
+                  }, null, 8, ["icon", "label"])
+                ]),
+                !vue.unref(isVideoOn) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_30, [
+                  vue.createElementVNode("div", _hoisted_31, [
+                    vue.createElementVNode("div", _hoisted_32, [
+                      vue.createElementVNode("span", _hoisted_33, vue.toDisplayString(vue.unref(t)("You")), 1)
+                    ]),
+                    vue.createElementVNode("p", _hoisted_34, vue.toDisplayString(vue.unref(t)("Camera is off")), 1)
+                  ])
+                ])) : vue.createCommentVNode("", true)
+              ], 2)) : vue.createCommentVNode("", true)
+            ], 2)
+          ], 34),
+          !vue.unref(callStore).isMinimized ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: vue.normalizeClass(["flex h-21 w-full items-center justify-center gap-x-1.5 border-t border-t-[#2C2C2E] bg-black-600 transition-all duration-300 sm:gap-x-3", vue.unref(showControls) ? "opacity-100" : "opacity-0"]),
+            onMouseenter: _cache[14] || (_cache[14] = //@ts-ignore
+            (...args) => vue.unref(resetControlsTimeout) && vue.unref(resetControlsTimeout)(...args)),
+            onMousemove: _cache[15] || (_cache[15] = //@ts-ignore
+            (...args) => vue.unref(resetControlsTimeout) && vue.unref(resetControlsTimeout)(...args))
+          }, [
+            vue.createVNode(index._sfc_main, vue.mergeProps({
+              icon: vue.unref(isAudioOn) ? "PhMicrophone" : "PhMicrophoneSlash",
+              label: vue.unref(isAudioOn) ? vue.unref(t)("chat.call.controls.mute") : vue.unref(t)("chat.call.controls.unmute"),
+              severity: vue.unref(isAudioOn) ? "secondary" : "contrast"
+            }, footerButton, {
+              "data-testid": "call-toggle-audio",
+              "data-active": vue.unref(isAudioOn),
+              onClick: vue.unref(toggleAudio)
+            }), null, 16, ["icon", "label", "severity", "data-active", "onClick"]),
+            vue.createVNode(index._sfc_main, vue.mergeProps({
+              icon: vue.unref(isVideoOn) ? "PhVideo" : "PhVideoCameraSlash",
+              label: vue.unref(isVideoOn) ? vue.unref(t)("chat.call.controls.cameraOff") : vue.unref(t)("chat.call.controls.cameraOn"),
+              severity: vue.unref(isVideoOn) ? "secondary" : "contrast"
+            }, footerButton, {
+              "data-testid": "call-toggle-video",
+              "data-active": vue.unref(isVideoOn),
+              onClick: vue.unref(toggleVideo)
+            }), null, 16, ["icon", "label", "severity", "data-active", "onClick"]),
+            vue.unref(cameras).length > 1 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createVNode(index._sfc_main, vue.mergeProps({
+                icon: "PhCaretUp",
+                label: vue.unref(t)("chat.call.controls.chooseCamera")
+              }, footerButton, {
+                onClick: _cache[11] || (_cache[11] = ($event) => cameraPickerOpen.value = true)
+              }), null, 16, ["label"]),
+              vue.createVNode(index._sfc_main$2, {
+                visible: cameraPickerOpen.value,
+                "onUpdate:visible": _cache[13] || (_cache[13] = ($event) => cameraPickerOpen.value = $event),
+                header: vue.unref(t)("chat.call.controls.cameras"),
+                width: "24rem"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(Listbox), {
+                    options: vue.unref(cameras),
+                    "option-value": "deviceId",
+                    "option-label": (camera) => camera.label || `Camera ${camera.deviceId}`,
+                    class: "w-full",
+                    onChange: _cache[12] || (_cache[12] = (event) => pickCamera(event.value))
+                  }, null, 8, ["options", "option-label"])
+                ]),
+                _: 1
+              }, 8, ["visible", "header"])
+            ], 64)) : vue.createCommentVNode("", true),
+            vue.createVNode(index._sfc_main, vue.mergeProps({
+              icon: "PhMonitorArrowUp",
+              label: vue.unref(isScreenSharing) ? vue.unref(t)("chat.call.controls.stopSharing") : vue.unref(t)("chat.call.controls.shareScreen"),
+              severity: vue.unref(isScreenSharing) ? "contrast" : "secondary"
+            }, footerButton, {
+              "data-testid": "call-toggle-screen",
+              "data-active": vue.unref(isScreenSharing),
+              onClick: vue.unref(toggleScreenShare)
+            }), null, 16, ["label", "severity", "data-active", "onClick"]),
+            vue.createVNode(index._sfc_main, vue.mergeProps({
+              icon: vue.unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+              label: vue.unref(isFullscreen) ? vue.unref(t)("chat.call.controls.exitFullscreen") : vue.unref(t)("chat.call.controls.fullscreen")
+            }, footerButton, { onClick: vue.unref(toggleFullscreen) }), null, 16, ["icon", "label", "onClick"]),
+            vue.unref(isFlashlightSupported) ? (vue.openBlock(), vue.createBlock(index._sfc_main, vue.mergeProps({
+              key: 1,
+              icon: vue.unref(isFlashlightOn) ? "PhLightning" : "PhLightningSlash",
+              label: vue.unref(t)("chat.call.controls.flashlight"),
+              severity: vue.unref(isFlashlightOn) ? "contrast" : "secondary"
+            }, footerButton, { onClick: vue.unref(toggleFlashlight) }), null, 16, ["icon", "label", "severity", "onClick"])) : vue.createCommentVNode("", true),
+            vue.createVNode(index._sfc_main, {
+              icon: "PhPhoneX",
+              label: vue.unref(t)("chat.call.controls.endCall"),
+              severity: "danger",
+              text: false,
+              size: "large",
+              "icon-class": "size-6",
+              "data-testid": "call-end",
+              onClick: vue.unref(endCall)
+            }, null, 8, ["label", "onClick"])
+          ], 34)) : vue.createCommentVNode("", true)
+        ], 512), [
+          [vue.vShow, vue.unref(callStore).isActive && !vue.unref(callStore).isMinimized]
+        ])
+      ], 64);
+    };
+  }
+});
+exports.default = _sfc_main;
+//# sourceMappingURL=Call-CTIujxDi.cjs.map