vue-parley 4.2.0 → 4.3.1

package/dist/chat.css

@@ -505,8 +505,8 @@
     top: calc(var(--spacing) * 4);
   }
 
-  :where(.vue-chat, .vue-chat *).top-12 {
-    top: calc(var(--spacing) * 12);
+  :where(.vue-chat, .vue-chat *).top-6 {
+    top: calc(var(--spacing) * 6);
   }
 
   :where(.vue-chat, .vue-chat *).right-0 {
@@ -1362,6 +1362,10 @@
     flex-direction: row !important;
   }
 
+  :where(.vue-chat, .vue-chat *).flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
   :where(.vue-chat, .vue-chat *).flex-wrap {
     flex-wrap: wrap;
   }
@@ -1588,33 +1592,33 @@
     border-radius: var(--radius-xl) !important;
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-ss-md {
-    border-start-start-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-tl-md {
+    border-top-left-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-se-md {
-    border-start-end-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-tr-md {
+    border-top-right-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-ee-md {
-    border-end-end-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-b-none\! {
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-ee-xs {
-    border-end-end-radius: var(--radius-xs);
+  :where(.vue-chat, .vue-chat *).rounded-br-md {
+    border-bottom-right-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-es-md {
-    border-end-start-radius: var(--radius-md);
+  :where(.vue-chat, .vue-chat *).rounded-br-xs {
+    border-bottom-right-radius: var(--radius-xs);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-es-xs {
-    border-end-start-radius: var(--radius-xs);
+  :where(.vue-chat, .vue-chat *).rounded-bl-md {
+    border-bottom-left-radius: var(--radius-md);
   }
 
-  :where(.vue-chat, .vue-chat *).rounded-b-none\! {
-    border-bottom-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+  :where(.vue-chat, .vue-chat *).rounded-bl-xs {
+    border-bottom-left-radius: var(--radius-xs);
   }
 
   :where(.vue-chat, .vue-chat *).border {
@@ -2014,6 +2018,16 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-white\/15 {
+    background-color: #ffffff26;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-white\/15 {
+      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-linear-to-b {
     --tw-gradient-position: to bottom;
   }
@@ -2046,10 +2060,6 @@
     background-image: var(--background-image-diamond-error);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-diamond-primary-secondary {
-    background-image: var(--background-image-diamond-primary-secondary);
-  }
-
   :where(.vue-chat, .vue-chat *).bg-gradient-primary-secondary {
     background-image: var(--background-image-gradient-primary-secondary);
   }
@@ -2949,6 +2959,10 @@
     user-select: text;
   }
 
+  :where(.vue-chat, .vue-chat *).\[unicode-bidi\:plaintext\] {
+    unicode-bidi: plaintext;
+  }
+
   :where(.vue-chat, .vue-chat *).\[vue-chat\:call\] {
     vue-chat: call;
   }
@@ -3274,10 +3288,22 @@
     rotate: 180deg;
   }
 
+  :where(.vue-chat, .vue-chat *).rtl\:flex-row:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    flex-direction: row;
+  }
+
   :where(.vue-chat, .vue-chat *).rtl\:flex-row\!:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     flex-direction: row !important;
   }
 
+  :where(.vue-chat, .vue-chat *).rtl\:justify-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    justify-content: flex-end;
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:justify-start:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    justify-content: flex-start;
+  }
+
   :where(.vue-chat, .vue-chat *):where(.rtl\:space-x-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
     --tw-space-x-reverse: 1;
   }
@@ -3809,15 +3835,15 @@
 }
 
 /* Styles remain exactly the same */
-:where(.vue-chat, .vue-chat *).flip-vertical[data-v-01ea74e6] {
+:where(.vue-chat, .vue-chat *).flip-vertical[data-v-cb7cc93f] {
   transform: scaleY(-1);
   will-change: transform;
 }
-:where(.vue-chat, .vue-chat *)[data-index][data-v-01ea74e6] {
+:where(.vue-chat, .vue-chat *)[data-index][data-v-cb7cc93f] {
   will-change: transform;
   backface-visibility: hidden;
 }
-@keyframes slide-in-right-01ea74e6 {
+@keyframes slide-in-right-cb7cc93f {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(30px);
@@ -3827,7 +3853,7 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-@keyframes slide-in-left-01ea74e6 {
+@keyframes slide-in-left-cb7cc93f {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(-30px);
@@ -3837,23 +3863,23 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-01ea74e6] {
-  animation: slide-in-right-01ea74e6 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-cb7cc93f] {
+  animation: slide-in-right-cb7cc93f 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-01ea74e6] {
-  animation: slide-in-left-01ea74e6 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-cb7cc93f] {
+  animation: slide-in-left-cb7cc93f 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *)#list[data-v-01ea74e6] {
+:where(.vue-chat, .vue-chat *)#list[data-v-cb7cc93f] {
   will-change: padding-top;
 }
-:where(.vue-chat, .vue-chat *).animate-request-in[data-v-01ea74e6] {
-  animation: request-in-01ea74e6 0.4s ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-request-in[data-v-cb7cc93f] {
+  animation: request-in-cb7cc93f 0.4s ease-out forwards;
   overflow: hidden;
   transform: scaleY(-1);
 }
-@keyframes request-in-01ea74e6 {
+@keyframes request-in-cb7cc93f {
 0% {
     opacity: 0;
     max-height: 0;

package/dist/chunks/{Call-7lGaUPcp.mjs → Call-CPHjSt8T.mjs}

@@ -1,5 +1,5 @@
-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-C8N5eSUe.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 { u as useCallStore, a as useLocalI18n, c as chat, b as useDirection, d as useChatStore, _ as _sfc_main$1, e as _sfc_main$2, f as formatDuration, g as _sfc_main$3 } from "./index-DI5ok4ow.mjs";
+import { ref, onMounted, onUnmounted, watch, nextTick, defineComponent, computed, openBlock, createElementBlock, Fragment, unref, normalizeClass, normalizeStyle, createElementVNode, toDisplayString, createVNode, withModifiers, withCtx, createCommentVNode, withDirectives, mergeProps, createBlock, vShow, renderList } from "vue";
 import { useWindowSize, useDraggable } from "@vueuse/core";
 import Button from "primevue/button";
 import Listbox from "primevue/listbox";
@@ -53,11 +53,29 @@ function useCallUi(opts) {
     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;
-    el.play().catch(() => {
-    });
+    void play(el);
   };
   watch(
     [localStream, opts.isMinimized],
@@ -116,6 +134,8 @@ function useCallUi(opts) {
     toggleRemote,
     videoPaused,
     toggleVideoPause,
+    soundBlocked,
+    enableSound,
     detachAll
   };
 }
@@ -165,6 +185,8 @@ function useCall() {
     toggleFullscreen: ui.toggleFullscreen,
     toggleRemote: ui.toggleRemote,
     videoPaused: ui.videoPaused,
+    soundBlocked: ui.soundBlocked,
+    enableSound: ui.enableSound,
     toggleVideoPause: ui.toggleVideoPause,
     localVideo: ui.localVideo,
     localScreen: ui.localScreen,
@@ -173,35 +195,35 @@ function useCall() {
     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 = {
+const _hoisted_1 = ["dir"];
+const _hoisted_2 = { class: "relative h-full w-full" };
+const _hoisted_3 = { class: "absolute top-3 right-3 left-3 z-10 flex items-center justify-between" };
+const _hoisted_4 = { class: "flex items-center gap-x-2 rounded-full bg-black/40 px-3 py-1.5 backdrop-blur-sm" };
+const _hoisted_5 = { class: "text-label-sm text-white/90 select-none" };
+const _hoisted_6 = { class: "absolute right-3 bottom-3 left-3 z-10 flex items-center justify-between" };
+const _hoisted_7 = { class: "flex items-center gap-2" };
+const _hoisted_8 = {
   key: 0,
   class: "flex gap-1"
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
   key: 0,
   class: "flex h-7 w-7 items-center justify-center rounded-full bg-diamond-error"
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   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 = ["dir"];
+const _hoisted_12 = { class: "flex items-center gap-x-4" };
+const _hoisted_13 = { class: "hidden select-none text-label-lg text-white md:block" };
+const _hoisted_14 = { class: "flex items-center gap-x-2 text-white text-body-sm" };
+const _hoisted_15 = { "data-testid": "call-participants" };
+const _hoisted_16 = { class: "flex items-center gap-x-4.5" };
+const _hoisted_17 = {
+  dir: "ltr",
+  class: "flex h-6 items-center justify-center rounded-full bg-white/15 px-2.5 text-body-sm text-white tabular-nums select-none"
 };
-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" };
@@ -228,6 +250,7 @@ const _hoisted_34 = { class: "text-label-md" };
 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) {
@@ -235,8 +258,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const minimizedRef = ref(null);
     const bodyRef = ref(null);
     const cameraPickerOpen = ref(false);
-    const { t, locale } = useLocalI18n(chat);
+    const { t } = 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 {
       toggleVideoPause,
       toggleRemote,
@@ -266,7 +295,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       remoteRefs,
       remoteScreens,
       remoteScreenRefs,
-      remoteVideos
+      remoteVideos,
+      soundBlocked,
+      enableSound
     } = useCall();
     const pickCamera = (deviceId) => {
       cameraPickerOpen.value = false;
@@ -348,7 +379,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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
+        y: PIP_INSET_Y
       },
       // غیرفعال کردن درگ در صورتی که کامپوننت مینیمایز نباشد
       disabled: computed(() => !callStore.isMinimized)
@@ -356,10 +387,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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 maxY = windowHeight.value - PIP_HEIGHT - PIP_INSET_Y;
         const targetX = x.value < windowWidth.value / 2 ? PADDING : maxX;
-        const targetY = y.value < windowHeight.value / 2 ? PADDING : maxY;
+        const targetY = y.value < windowHeight.value / 2 ? PIP_INSET_Y : maxY;
         x.value = targetX;
         y.value = targetY;
       }
@@ -371,7 +401,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           nextTick(() => {
             const isRtl = dir.value === "rtl";
             x.value = isRtl ? PADDING : windowWidth.value - PIP_WIDTH - PADDING;
-            y.value = windowHeight.value - PIP_HEIGHT - PADDING;
+            y.value = PIP_INSET_Y;
           });
         }
       },
@@ -397,7 +427,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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" : ""]])
+          dir: unref(dir),
+          class: normalizeClass(["vue-chat font-chat-family 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",
@@ -409,14 +440,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 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, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", _hoisted_4, [
                 _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),
+                createElementVNode("span", _hoisted_5, toDisplayString(unref(t)("chat.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",
@@ -444,8 +475,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onClick: withModifiers(unref(endCall), ["stop"])
               }, null, 8, ["label", "onClick"])
             ]),
-            createElementVNode("div", _hoisted_5, [
-              createElementVNode("div", _hoisted_6, [
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_7, [
                 createVNode(unref(Button), {
                   label: String(unref(participantCount)),
                   "aria-label": unref(t)("chat.call.controls.nextParticipant"),
@@ -466,14 +497,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["label", "aria-label", "disabled"]),
-                !unref(isAudioOn) || !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_7, [
-                  !unref(isAudioOn) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                !unref(isAudioOn) || !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                  !unref(isAudioOn) ? (openBlock(), createElementBlock("div", _hoisted_9, [
                     createVNode(_component_BIcon, {
                       icon: "PhMicrophoneSlash",
                       class: "h-3 w-3 fill-white"
                     })
                   ])) : createCommentVNode("", true),
-                  !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                  !unref(isVideoOn) ? (openBlock(), createElementBlock("div", _hoisted_10, [
                     createVNode(_component_BIcon, {
                       icon: "PhVideoCameraSlash",
                       class: "h-3 w-3 fill-white"
@@ -494,8 +525,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 8, ["label"])
             ])
           ])
-        ], 6)) : createCommentVNode("", true),
-        withDirectives(createElementVNode("div", _hoisted_10, [
+        ], 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 h-full w-full flex-col bg-diamond-black"
+        }, [
           !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"]),
@@ -504,24 +539,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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, [
+            createElementVNode("div", _hoisted_12, [
+              createElementVNode("div", _hoisted_13, toDisplayString(callTitle.value), 1),
+              createElementVNode("div", _hoisted_14, [
                 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("span", _hoisted_15, toDisplayString(unref(t)("chat.call.participants", unref(participantCount))), 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)
-              ]),
+            createElementVNode("div", _hoisted_16, [
+              createElementVNode("div", _hoisted_17, toDisplayString(unref(formatDuration)(unref(callStore).elapsedTime)), 1),
               createVNode(_sfc_main$1, mergeProps({
                 icon: "PhCaretDown",
                 label: unref(t)("chat.call.controls.minimize")
@@ -536,6 +565,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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: callButtonDt,
+              severity: "secondary",
+              rounded: "",
+              "data-testid": "call-enable-sound",
+              class: "absolute! top-6 left-1/2 z-30 -translate-x-1/2",
+              onClick: unref(enableSound)
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_BIcon, {
+                  icon: "PhSpeakerHigh",
+                  class: "size-4"
+                })
+              ]),
+              _: 1
+            }, 8, ["label", "onClick"])) : createCommentVNode("", true),
             withDirectives(createElementVNode("div", _hoisted_18, [
               withDirectives(createElementVNode("div", {
                 ref: (el) => unref(remoteParents)[`self_screen`] = el,
@@ -550,7 +597,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   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_20, toDisplayString(unref(t)("chat.call.yourPresentation")), 1),
                   createElementVNode("div", _hoisted_21, [
                     createVNode(_component_BIcon, {
                       icon: "PhMonitor",
@@ -637,7 +684,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     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_25, toDisplayString(unref(t)("chat.call.presentationOf", { name: stream.name.slice(0, 15) })), 1),
                     createElementVNode("div", _hoisted_26, [
                       createVNode(_component_BIcon, {
                         icon: "PhMonitor",
@@ -689,7 +736,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, 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),
+                  createElementVNode("div", _hoisted_28, toDisplayString(unref(t)("chat.call.you")), 1),
                   !unref(isAudioOn) ? (openBlock(), createElementBlock("div", _hoisted_29, [
                     createVNode(_component_BIcon, {
                       icon: "PhMicrophoneSlash",
@@ -716,9 +763,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 !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("span", _hoisted_33, toDisplayString(unref(t)("chat.call.you")), 1)
                     ]),
-                    createElementVNode("p", _hoisted_34, toDisplayString(unref(t)("Camera is off")), 1)
+                    createElementVNode("p", _hoisted_34, toDisplayString(unref(t)("chat.call.cameraIsOff")), 1)
                   ])
                 ])) : createCommentVNode("", true)
               ], 2)) : createCommentVNode("", true)
@@ -805,7 +852,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onClick: unref(endCall)
             }, null, 8, ["label", "onClick"])
           ], 34)) : createCommentVNode("", true)
-        ], 512), [
+        ], 8, _hoisted_11), [
           [vShow, unref(callStore).isActive && !unref(callStore).isMinimized]
         ])
       ], 64);
@@ -815,4 +862,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=Call-7lGaUPcp.mjs.map
+//# sourceMappingURL=Call-CPHjSt8T.mjs.map