vue-parley 4.0.0

package/dist/chunks/Call-Dwuyd-Ut.mjs

@@ -0,0 +1,818 @@
+import { u as useCallStore, a as useLocalI18n, c as chat, b as useDirection, _ as _sfc_main$1, d as _sfc_main$2, e as _sfc_main$3 } from "./index-JU_JZkSC.mjs";
+import { ref, onMounted, onUnmounted, watch, nextTick, defineComponent, computed, openBlock, createElementBlock, Fragment, unref, normalizeClass, normalizeStyle, createElementVNode, toDisplayString, createVNode, withModifiers, withCtx, createCommentVNode, withDirectives, mergeProps, vShow, renderList, createBlock } from "vue";
+import { useWindowSize, useDraggable } from "@vueuse/core";
+import Button from "primevue/button";
+import Listbox from "primevue/listbox";
+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 attach = (el, stream) => {
+    if (!el) return;
+    if (el.srcObject !== stream) el.srcObject = stream;
+    el.play().catch(() => {
+    });
+  };
+  watch(
+    [localStream, opts.isMinimized],
+    async () => {
+      await nextTick();
+      if (localStream.value && localVideo.value)
+        localVideo.value.srcObject = localStream.value;
+    },
+    { immediate: true }
+  );
+  watch(
+    [screenStream, opts.isMinimized],
+    async () => {
+      await nextTick();
+      if (localScreen.value) localScreen.value.srcObject = screenStream.value;
+    },
+    { immediate: true }
+  );
+  watch(
+    [() => ({ ...remoteVideos.value }), opts.isMinimized],
+    async () => {
+      await nextTick();
+      for (const [id, { stream }] of Object.entries(remoteVideos.value))
+        attach(remoteRefs.value[id], stream);
+    },
+    { immediate: true }
+  );
+  watch(
+    [() => ({ ...remoteScreens.value }), opts.isMinimized],
+    async () => {
+      await 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 = 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: 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__ */ defineComponent({
+  __name: "Call",
+  setup(__props) {
+    const callStore = useCallStore();
+    const minimizedRef = ref(null);
+    const bodyRef = ref(null);
+    const cameraPickerOpen = ref(false);
+    const { t, locale } = useLocalI18n(chat);
+    const { dir } = 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 = 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;
+    }
+    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: typeof window !== "undefined" ? window.innerHeight - PIP_HEIGHT - PADDING : PADDING
+      },
+      // غیرفعال کردن درگ در صورتی که کامپوننت مینیمایز نباشد
+      disabled: computed(() => !callStore.isMinimized)
+    });
+    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;
+      }
+    });
+    watch(
+      () => callStore.isMinimized,
+      (isMinimized) => {
+        if (isMinimized) {
+          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 = 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 = _sfc_main$2;
+      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),
+          class: 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", [!unref(isDragging) ? "transition-all duration-300 ease-out" : ""]])
+        }, [
+          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] = 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] = createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20" }, null, -1)),
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                _cache[16] || (_cache[16] = createElementVNode("div", { class: "relative" }, [
+                  createElementVNode("div", { class: "h-2.5 w-2.5 animate-pulse rounded-full bg-diamond-error" }),
+                  createElementVNode("div", { class: "absolute inset-0 h-2.5 w-2.5 animate-ping rounded-full bg-diamond-error/30" })
+                ], -1)),
+                createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("Call active")), 1),
+                _cache[17] || (_cache[17] = createElementVNode("div", { class: "flex -space-x-1" }, [
+                  createElementVNode("div", {
+                    class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
+                    style: { "animation-delay": "0s" }
+                  }),
+                  createElementVNode("div", {
+                    class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
+                    style: { "animation-delay": "0.2s" }
+                  }),
+                  createElementVNode("div", {
+                    class: "h-1.5 w-1.5 animate-pulse rounded-full bg-green-400",
+                    style: { "animation-delay": "0.4s" }
+                  })
+                ], -1))
+              ]),
+              createVNode(_sfc_main$1, {
+                icon: "PhPhoneX",
+                label: unref(t)("chat.call.controls.endCall"),
+                severity: "danger",
+                text: false,
+                "icon-class": "size-4",
+                "data-testid": "call-pip-end",
+                onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop"])),
+                onClick: withModifiers(unref(endCall), ["stop"])
+              }, null, 8, ["label", "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: callButtonDt,
+                  severity: "secondary",
+                  size: "small",
+                  rounded: "",
+                  onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+                  }, ["stop"])),
+                  onClick: withModifiers(cycleRemote, ["stop"])
+                }, {
+                  icon: withCtx(() => [
+                    createVNode(_component_BIcon, {
+                      icon: "PhUsers",
+                      class: "size-3"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["label", "aria-label", "disabled"]),
+                !unref(isAudioOn) || !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                  !unref(isAudioOn) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                    createVNode(_component_BIcon, {
+                      icon: "PhMicrophoneSlash",
+                      class: "h-3 w-3 fill-white"
+                    })
+                  ])) : createCommentVNode("", true),
+                  !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                    createVNode(_component_BIcon, {
+                      icon: "PhVideoCameraSlash",
+                      class: "h-3 w-3 fill-white"
+                    })
+                  ])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ]),
+              createVNode(_sfc_main$1, {
+                icon: "PhResize",
+                label: unref(t)("chat.call.controls.maximize"),
+                dt: callButtonDt,
+                text: false,
+                "icon-class": "size-4",
+                "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"])
+            ])
+          ])
+        ], 6)) : createCommentVNode("", true),
+        withDirectives(createElementVNode("div", _hoisted_10, [
+          !unref(callStore).isMinimized ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["flex h-16 items-center justify-between px-4 transition-all duration-300 sm:h-20", unref(showControls) ? "opacity-100" : "opacity-0"]),
+            onMouseenter: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args)),
+            onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
+          }, [
+            createElementVNode("div", _hoisted_11, [
+              createElementVNode("div", _hoisted_12, toDisplayString(unref(t)("Behayand Meeting")), 1),
+              createElementVNode("div", _hoisted_13, [
+                createVNode(_component_BIcon, {
+                  icon: "PhUsers",
+                  class: "h-4 w-4 fill-white"
+                }),
+                createElementVNode("span", _hoisted_14, toDisplayString(unref(participantCount)) + " " + toDisplayString(unref(participantCount) > 1 ? unref(t)("participants") : unref(t)("participant")), 1)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_15, [
+              createElementVNode("div", _hoisted_16, [
+                createElementVNode("div", _hoisted_17, toDisplayString((/* @__PURE__ */ new Date()).toLocaleTimeString(unref(locale), {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: true
+                })), 1)
+              ]),
+              createVNode(_sfc_main$1, mergeProps({
+                icon: "PhCaretDown",
+                label: unref(t)("chat.call.controls.minimize")
+              }, footerButton, {
+                "data-testid": "call-minimize",
+                onClick: unref(callStore).minimize
+              }), null, 16, ["label", "onClick"])
+            ])
+          ], 34)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["relative grid w-full overflow-hidden", unref(callStore).isMinimized ? "h-full p-0" : "h-full p-4"]),
+            onMousemove: _cache[10] || (_cache[10] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
+          }, [
+            withDirectives(createElementVNode("div", _hoisted_18, [
+              withDirectives(createElementVNode("div", {
+                ref: (el) => 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"
+              }, [
+                createElementVNode("video", {
+                  ref_key: "localScreen",
+                  ref: localScreen,
+                  autoplay: "",
+                  muted: "",
+                  playsinline: "",
+                  class: "absolute inset-0 z-0 h-full w-full object-cover"
+                }, null, 512),
+                createElementVNode("div", _hoisted_19, [
+                  createElementVNode("div", _hoisted_20, toDisplayString(unref(t)("Your Presentation")), 1),
+                  createElementVNode("div", _hoisted_21, [
+                    createVNode(_component_BIcon, {
+                      icon: "PhMonitor",
+                      class: "h-4 w-4 fill-white"
+                    })
+                  ]),
+                  createVNode(_sfc_main$1, {
+                    icon: unref(videoPaused)["self_screen"] ? "PhPlay" : "PhPause",
+                    label: unref(videoPaused)["self_screen"] ? unref(t)("chat.call.controls.playVideo") : unref(t)("chat.call.controls.pauseVideo"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[6] || (_cache[6] = ($event) => unref(toggleVideoPause)("self_screen", unref(localScreen)))
+                  }, null, 8, ["icon", "label"]),
+                  createVNode(_sfc_main$1, {
+                    icon: unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                    label: unref(isFullscreen) ? unref(t)("chat.call.controls.exitFullscreen") : unref(t)("chat.call.controls.fullscreen"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[7] || (_cache[7] = ($event) => unref(toggleRemote)(`self_screen`))
+                  }, null, 8, ["icon", "label"])
+                ])
+              ], 512), [
+                [vShow, unref(isScreenSharing)]
+              ]),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(remoteVideos), (stream, remoteUserId) => {
+                return openBlock(), createElementBlock("div", {
+                  key: `remote-${remoteUserId}`,
+                  "data-testid": "call-remote-video",
+                  ref_for: true,
+                  ref: (el) => 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"
+                }, [
+                  createElementVNode("video", {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) unref(remoteRefs)[remoteUserId] = el;
+                    },
+                    autoplay: "",
+                    playsinline: "",
+                    class: "absolute inset-0 z-0 h-full w-full object-cover"
+                  }, null, 512),
+                  createElementVNode("div", _hoisted_22, [
+                    createElementVNode("div", _hoisted_23, toDisplayString(stream.name.slice(0, 15)), 1),
+                    createVNode(_sfc_main$1, {
+                      icon: unref(videoPaused)[`remote_video_${remoteUserId}`] ? "PhPlay" : "PhPause",
+                      label: unref(videoPaused)[`remote_video_${remoteUserId}`] ? unref(t)("chat.call.controls.playVideo") : unref(t)("chat.call.controls.pauseVideo"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => unref(toggleVideoPause)(
+                        `remote_video_${remoteUserId}`,
+                        unref(remoteRefs)[remoteUserId]
+                      )
+                    }, null, 8, ["icon", "label", "onClick"]),
+                    createVNode(_sfc_main$1, {
+                      icon: unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                      label: unref(isFullscreen) ? unref(t)("chat.call.controls.exitFullscreen") : unref(t)("chat.call.controls.fullscreen"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => unref(toggleRemote)(`remote_video_${remoteUserId}`)
+                    }, null, 8, ["icon", "label", "onClick"])
+                  ])
+                ]);
+              }), 128)),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(remoteScreens), (stream, remoteUserId) => {
+                return openBlock(), createElementBlock("div", {
+                  key: `remote-screen-${remoteUserId}`,
+                  "data-testid": "call-remote-screen",
+                  ref_for: true,
+                  ref: (el) => 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"
+                }, [
+                  createElementVNode("video", {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) unref(remoteScreenRefs)[remoteUserId] = el;
+                    },
+                    autoplay: "",
+                    muted: "",
+                    playsinline: "",
+                    class: "absolute inset-0 z-0 h-full w-full object-cover"
+                  }, null, 512),
+                  createElementVNode("div", _hoisted_24, [
+                    createElementVNode("div", _hoisted_25, toDisplayString(unref(t)("Presentation of")) + " " + toDisplayString(stream.name.slice(0, 15)), 1),
+                    createElementVNode("div", _hoisted_26, [
+                      createVNode(_component_BIcon, {
+                        icon: "PhMonitor",
+                        class: "h-4 w-4 fill-white"
+                      })
+                    ]),
+                    createVNode(_sfc_main$1, {
+                      icon: unref(videoPaused)[`remote_screen_${remoteUserId}`] ? "PhPlay" : "PhPause",
+                      label: unref(videoPaused)[`remote_screen_${remoteUserId}`] ? unref(t)("chat.call.controls.playVideo") : unref(t)("chat.call.controls.pauseVideo"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => unref(toggleVideoPause)(
+                        `remote_screen_${remoteUserId}`,
+                        unref(remoteScreenRefs)[remoteUserId] || null
+                      )
+                    }, null, 8, ["icon", "label", "onClick"]),
+                    createVNode(_sfc_main$1, {
+                      icon: unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                      label: unref(isFullscreen) ? unref(t)("chat.call.controls.exitFullscreen") : unref(t)("chat.call.controls.fullscreen"),
+                      dt: callButtonDt,
+                      text: false,
+                      "icon-class": "size-4",
+                      onClick: ($event) => unref(toggleRemote)(`remote_screen_${remoteUserId}`)
+                    }, null, 8, ["icon", "label", "onClick"])
+                  ])
+                ]);
+              }), 128))
+            ], 512), [
+              [vShow, unref(tileCount)]
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["flex min-h-0", [unref(tileCount) && "absolute inset-0 m-4"]])
+            }, [
+              !unref(callStore).isMinimized ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["relative flex flex-col items-center justify-center overflow-hidden rounded-2xl border-2 border-chat-primary/0 bg-black-600 p-2", [
+                  unref(tileCount) ? "absolute z-10 h-[132px] w-[236px]" : "h-full w-full"
+                ]])
+              }, [
+                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] = createElementVNode("div", { class: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" }, null, -1)),
+                createElementVNode("div", _hoisted_27, [
+                  createElementVNode("div", _hoisted_28, toDisplayString(unref(t)("You")), 1),
+                  !unref(isAudioOn) ? (openBlock(), createElementBlock("div", _hoisted_29, [
+                    createVNode(_component_BIcon, {
+                      icon: "PhMicrophoneSlash",
+                      class: "h-3 w-3 fill-white"
+                    })
+                  ])) : createCommentVNode("", true),
+                  createVNode(_sfc_main$1, {
+                    icon: unref(videoPaused)["self_cam"] ? "PhPlay" : "PhPause",
+                    label: unref(videoPaused)["self_cam"] ? unref(t)("chat.call.controls.playVideo") : unref(t)("chat.call.controls.pauseVideo"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[8] || (_cache[8] = ($event) => unref(toggleVideoPause)("self_cam", unref(localVideo)))
+                  }, null, 8, ["icon", "label"]),
+                  createVNode(_sfc_main$1, {
+                    icon: unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+                    label: unref(isFullscreen) ? unref(t)("chat.call.controls.exitFullscreen") : unref(t)("chat.call.controls.fullscreen"),
+                    dt: callButtonDt,
+                    text: false,
+                    "icon-class": "size-4",
+                    onClick: _cache[9] || (_cache[9] = ($event) => unref(toggleRemote)("self_cam"))
+                  }, null, 8, ["icon", "label"])
+                ]),
+                !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_30, [
+                  createElementVNode("div", _hoisted_31, [
+                    createElementVNode("div", _hoisted_32, [
+                      createElementVNode("span", _hoisted_33, toDisplayString(unref(t)("You")), 1)
+                    ]),
+                    createElementVNode("p", _hoisted_34, toDisplayString(unref(t)("Camera is off")), 1)
+                  ])
+                ])) : createCommentVNode("", true)
+              ], 2)) : createCommentVNode("", true)
+            ], 2)
+          ], 34),
+          !unref(callStore).isMinimized ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: 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", unref(showControls) ? "opacity-100" : "opacity-0"]),
+            onMouseenter: _cache[14] || (_cache[14] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args)),
+            onMousemove: _cache[15] || (_cache[15] = //@ts-ignore
+            (...args) => unref(resetControlsTimeout) && unref(resetControlsTimeout)(...args))
+          }, [
+            createVNode(_sfc_main$1, mergeProps({
+              icon: unref(isAudioOn) ? "PhMicrophone" : "PhMicrophoneSlash",
+              label: unref(isAudioOn) ? unref(t)("chat.call.controls.mute") : unref(t)("chat.call.controls.unmute"),
+              severity: unref(isAudioOn) ? "secondary" : "contrast"
+            }, footerButton, {
+              "data-testid": "call-toggle-audio",
+              "data-active": unref(isAudioOn),
+              onClick: unref(toggleAudio)
+            }), null, 16, ["icon", "label", "severity", "data-active", "onClick"]),
+            createVNode(_sfc_main$1, mergeProps({
+              icon: unref(isVideoOn) ? "PhVideo" : "PhVideoCameraSlash",
+              label: unref(isVideoOn) ? unref(t)("chat.call.controls.cameraOff") : unref(t)("chat.call.controls.cameraOn"),
+              severity: unref(isVideoOn) ? "secondary" : "contrast"
+            }, footerButton, {
+              "data-testid": "call-toggle-video",
+              "data-active": unref(isVideoOn),
+              onClick: unref(toggleVideo)
+            }), null, 16, ["icon", "label", "severity", "data-active", "onClick"]),
+            unref(cameras).length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createVNode(_sfc_main$1, mergeProps({
+                icon: "PhCaretUp",
+                label: unref(t)("chat.call.controls.chooseCamera")
+              }, footerButton, {
+                onClick: _cache[11] || (_cache[11] = ($event) => cameraPickerOpen.value = true)
+              }), null, 16, ["label"]),
+              createVNode(_sfc_main$3, {
+                visible: cameraPickerOpen.value,
+                "onUpdate:visible": _cache[13] || (_cache[13] = ($event) => cameraPickerOpen.value = $event),
+                header: unref(t)("chat.call.controls.cameras"),
+                width: "24rem"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Listbox), {
+                    options: 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)) : createCommentVNode("", true),
+            createVNode(_sfc_main$1, mergeProps({
+              icon: "PhMonitorArrowUp",
+              label: unref(isScreenSharing) ? unref(t)("chat.call.controls.stopSharing") : unref(t)("chat.call.controls.shareScreen"),
+              severity: unref(isScreenSharing) ? "contrast" : "secondary"
+            }, footerButton, {
+              "data-testid": "call-toggle-screen",
+              "data-active": unref(isScreenSharing),
+              onClick: unref(toggleScreenShare)
+            }), null, 16, ["label", "severity", "data-active", "onClick"]),
+            createVNode(_sfc_main$1, mergeProps({
+              icon: unref(isFullscreen) ? "PhCornersIn" : "PhFrameCorners",
+              label: unref(isFullscreen) ? unref(t)("chat.call.controls.exitFullscreen") : unref(t)("chat.call.controls.fullscreen")
+            }, footerButton, { onClick: unref(toggleFullscreen) }), null, 16, ["icon", "label", "onClick"]),
+            unref(isFlashlightSupported) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: 1,
+              icon: unref(isFlashlightOn) ? "PhLightning" : "PhLightningSlash",
+              label: unref(t)("chat.call.controls.flashlight"),
+              severity: unref(isFlashlightOn) ? "contrast" : "secondary"
+            }, footerButton, { onClick: unref(toggleFlashlight) }), null, 16, ["icon", "label", "severity", "onClick"])) : createCommentVNode("", true),
+            createVNode(_sfc_main$1, {
+              icon: "PhPhoneX",
+              label: unref(t)("chat.call.controls.endCall"),
+              severity: "danger",
+              text: false,
+              size: "large",
+              "icon-class": "size-6",
+              "data-testid": "call-end",
+              onClick: unref(endCall)
+            }, null, 8, ["label", "onClick"])
+          ], 34)) : createCommentVNode("", true)
+        ], 512), [
+          [vShow, unref(callStore).isActive && !unref(callStore).isMinimized]
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Call-Dwuyd-Ut.mjs.map