tuikit-atomicx-vue3 3.3.4 → 3.4.2

package/dist/VideoPicker.vue_vue_type_script_setup_true_lang-CmxjbNDJ.js

@@ -1,76 +0,0 @@
-import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createElementBlock, createElementVNode, normalizeStyle, normalizeClass, createVNode, toDisplayString } from "vue";
-import { IconVideo } from "@tencentcloud/uikit-base-component-vue3";
-import { View as _sfc_main$1 } from "./baseComp/View/index.js";
-import { s as styles } from "./AttachmentPicker.module-BesmtGyl.js";
-import { useMessageInputState } from "./states/MessageInputState/MessageInputState.js";
-import { MessageContentType } from "./states/MessageInputState/type.js";
-const _hoisted_1 = ["accept"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "VideoPicker",
-  props: {
-    label: { default: "" },
-    iconSize: { default: 24 },
-    onClose: { type: Function, default: () => {
-    } },
-    className: { default: "" },
-    style: { default: void 0 }
-  },
-  setup(__props) {
-    const PICKER_CONSTANTS = {
-      ACCEPT_TYPE: ".mp4,.mov,.qt"
-    };
-    const props = __props;
-    const { sendMessage } = useMessageInputState();
-    const fileInputRef = ref(null);
-    function handleButtonClick() {
-      var _a;
-      (_a = fileInputRef.value) == null ? void 0 : _a.click();
-    }
-    function handleFileInput(e) {
-      var _a, _b;
-      const target = e.target;
-      const file = (_a = target.files) == null ? void 0 : _a[0];
-      if (!file) {
-        return;
-      }
-      sendMessage([{ type: MessageContentType.VIDEO, content: file }]);
-      target.value = "";
-      (_b = props.onClose) == null ? void 0 : _b.call(props);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), null, {
-        default: withCtx(() => [
-          _ctx.label ? (openBlock(), createElementBlock("button", {
-            key: 0,
-            class: normalizeClass([unref(styles)["attachment-picker__item"], _ctx.className]),
-            style: normalizeStyle(_ctx.style),
-            onClick: handleButtonClick
-          }, [
-            createVNode(unref(IconVideo), {
-              size: _ctx.iconSize,
-              class: normalizeClass(unref(styles)["attachment-picker__item-icon"])
-            }, null, 8, ["size", "class"]),
-            createElementVNode("div", null, toDisplayString(_ctx.label), 1)
-          ], 6)) : (openBlock(), createBlock(unref(IconVideo), {
-            key: 1,
-            size: _ctx.iconSize,
-            class: normalizeClass(unref(styles)["attachment-picker__item-icon"]),
-            onClick: handleButtonClick
-          }, null, 8, ["size", "class"])),
-          createElementVNode("input", {
-            ref_key: "fileInputRef",
-            ref: fileInputRef,
-            type: "file",
-            accept: PICKER_CONSTANTS.ACCEPT_TYPE,
-            hidden: "",
-            onChange: handleFileInput
-          }, null, 40, _hoisted_1)
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/VideoRequestDialog.vue_vue_type_script_setup_true_lang-CnE-LwNh.js

@@ -1,108 +0,0 @@
-import { defineComponent, ref, onUnmounted, createBlock, openBlock, unref, withCtx, createElementVNode, toDisplayString, createVNode, createTextVNode } from "vue";
-import TUIRoomEngine, { TUIRoomEvents, TUIRequestAction, TUIRole } from "@tencentcloud/tuiroom-engine-js";
-import DialogPC from "./baseComp/Dialog/DialogPC.js";
-import { useI18n } from "./locales/index.js";
-import { TUIButton } from "@tencentcloud/uikit-base-component-vue3";
-import { useUserState } from "./states/UserState/index.js";
-import { useRoomEngine } from "./hooks/useRoomEngine.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "VideoRequestDialog",
-  setup(__props) {
-    const roomEngine = useRoomEngine();
-    const dialogContent = ref("");
-    const { getUserInfo } = useUserState();
-    const { t } = useI18n();
-    const showRequestOpenCameraDialog = ref(false);
-    const requestOpenCameraRequestId = ref("");
-    async function onRequestReceived(eventInfo) {
-      var _a;
-      const { userId, requestAction, requestId } = eventInfo.request;
-      if (requestAction === TUIRequestAction.kRequestToOpenRemoteCamera) {
-        const userRole = ((_a = getUserInfo({ userId })) == null ? void 0 : _a.userRole) === TUIRole.kRoomOwner ? t("RoomOwner") : t("Admin");
-        dialogContent.value = t("Sb invites you to turn on the camera", {
-          role: userRole
-        });
-        requestOpenCameraRequestId.value = requestId;
-        showRequestOpenCameraDialog.value = true;
-      }
-    }
-    async function handleAccept() {
-      var _a;
-      await ((_a = roomEngine.instance) == null ? void 0 : _a.responseRemoteRequest({
-        requestId: requestOpenCameraRequestId.value,
-        agree: true
-      }));
-      requestOpenCameraRequestId.value = "";
-      showRequestOpenCameraDialog.value = false;
-    }
-    async function handleReject() {
-      var _a;
-      await ((_a = roomEngine.instance) == null ? void 0 : _a.responseRemoteRequest({
-        requestId: requestOpenCameraRequestId.value,
-        agree: false
-      }));
-      requestOpenCameraRequestId.value = "";
-      showRequestOpenCameraDialog.value = false;
-    }
-    async function onRequestCancelled(eventInfo) {
-      const { requestId } = eventInfo;
-      if (requestOpenCameraRequestId.value === requestId) {
-        showRequestOpenCameraDialog.value = false;
-      }
-    }
-    TUIRoomEngine.once("ready", () => {
-      var _a, _b;
-      (_a = roomEngine.instance) == null ? void 0 : _a.on(TUIRoomEvents.onRequestReceived, onRequestReceived);
-      (_b = roomEngine.instance) == null ? void 0 : _b.on(TUIRoomEvents.onRequestCancelled, onRequestCancelled);
-    });
-    onUnmounted(() => {
-      var _a, _b;
-      (_a = roomEngine.instance) == null ? void 0 : _a.off(TUIRoomEvents.onRequestReceived, onRequestReceived);
-      (_b = roomEngine.instance) == null ? void 0 : _b.off(
-        TUIRoomEvents.onRequestCancelled,
-        onRequestCancelled
-      );
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DialogPC), {
-        modelValue: showRequestOpenCameraDialog.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showRequestOpenCameraDialog.value = $event),
-        title: unref(t)("Tips"),
-        modal: true,
-        "show-close": false,
-        "close-on-click-modal": false,
-        width: "500px",
-        "append-to-room-container": true,
-        "confirm-button": unref(t)("Turn on the camera"),
-        "cancel-button": unref(t)("Keep it closed"),
-        onConfirm: handleAccept,
-        onCancel: handleReject
-      }, {
-        footer: withCtx(() => [
-          createVNode(unref(TUIButton), {
-            onClick: handleAccept,
-            type: "primary"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("Turn on the camera")), 1)
-            ]),
-            _: 1
-          }),
-          createVNode(unref(TUIButton), { onClick: handleReject }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("Keep it closed")), 1)
-            ]),
-            _: 1
-          })
-        ]),
-        default: withCtx(() => [
-          createElementVNode("span", null, toDisplayString(dialogContent.value), 1)
-        ]),
-        _: 1
-      }, 8, ["modelValue", "title", "confirm-button", "cancel-button"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/_commonjsHelpers-CUmg6egw.js

@@ -1,6 +0,0 @@
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-export {
-  getDefaultExportFromCjs as g
-};

package/dist/_plugin-vue_export-helper-1tPrXgE0.js

@@ -1,10 +0,0 @@
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-export {
-  _export_sfc as _
-};

package/dist/components/LiveCoreView/DefaultStreamViewUI.js

@@ -1,177 +0,0 @@
-import { defineComponent, ref, computed, watch, nextTick, onUnmounted, createElementBlock, openBlock, createCommentVNode, Fragment, createVNode, unref, createBlock, createElementVNode, toDisplayString } from "vue";
-import { useCoGuestState } from "../../states/CoGuestState.js";
-import Avatar from "../Avatar/Avatar.js";
-import AudioIcon from "../../baseComp/AudioIcon.js";
-import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { DeviceStatus } from "../../types/device.js";
-import { CoGuestStatus } from "../../types/coGuest.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "stream-cover" };
-const _hoisted_2 = {
-  key: 0,
-  class: "no-video-container"
-};
-const _hoisted_3 = {
-  key: 1,
-  class: "mask"
-};
-const _hoisted_4 = {
-  key: 1,
-  class: "user-details"
-};
-const _hoisted_5 = { class: "username" };
-const _hoisted_6 = {
-  key: 1,
-  class: "empty-position"
-};
-const _hoisted_7 = ["title"];
-const _hoisted_8 = ["title"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "DefaultStreamViewUI",
-  props: {
-    userInfo: {},
-    streamViewInfoList: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const { t } = useUIKit();
-    const canvasRef = ref(null);
-    const { localCoGuestStatus } = useCoGuestState();
-    const { speakingUsers, seatList } = useLiveSeatState();
-    const seatListWithUser = computed(() => {
-      return seatList.value.filter((item) => item.userInfo && item.userInfo.userId !== "");
-    });
-    const currentStreamViewSize = computed(() => {
-      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
-        var _a, _b;
-        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
-      });
-      if (!currentStreamViewInfo) return { width: 0, height: 0 };
-      return {
-        width: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width),
-        height: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height)
-      };
-    });
-    const avatarSize = computed(() => {
-      const defaultAvatarSize = 54;
-      const minSize = Math.min(currentStreamViewSize.value.width, currentStreamViewSize.value.height);
-      if (minSize < defaultAvatarSize + 10) {
-        return minSize - 10;
-      }
-      return defaultAvatarSize;
-    });
-    const needCanvasMaskList = computed(() => {
-      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
-        var _a, _b;
-        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
-      });
-      if (!currentStreamViewInfo) return [];
-      return props.streamViewInfoList.filter((item) => {
-        const isHigher = item.region.zIndex > (currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.zIndex);
-        const isHorizontalOverlap = parseInt(item.region.left) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) && parseInt(item.region.left) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width);
-        const isVerticalOverlap = parseInt(item.region.top) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) && parseInt(item.region.top) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height);
-        return isHigher && isHorizontalOverlap && isVerticalOverlap;
-      }).map((item) => {
-        return {
-          left: parseInt(item.region.left) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left),
-          top: parseInt(item.region.top) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top),
-          width: parseInt(item.region.width),
-          height: parseInt(item.region.height)
-        };
-      });
-    });
-    const drawCanvas = () => {
-      if (!canvasRef.value) return;
-      const canvas = canvasRef.value;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = rect.width;
-      canvas.height = rect.height;
-      ctx.fillStyle = "#1F2024";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      needCanvasMaskList.value.forEach((item) => {
-        ctx.clearRect(item.left, item.top, item.width, item.height);
-      });
-    };
-    let resizeObserver = null;
-    watch(() => needCanvasMaskList.value.length, async () => {
-      if (needCanvasMaskList.value.length > 0) {
-        await nextTick();
-        if (canvasRef.value) {
-          drawCanvas();
-          resizeObserver = new ResizeObserver(() => {
-            drawCanvas();
-          });
-          resizeObserver.observe(canvasRef.value);
-        }
-      } else {
-        if (resizeObserver && canvasRef.value) {
-          resizeObserver.unobserve(canvasRef.value);
-        }
-      }
-    }, { immediate: true });
-    onUnmounted(() => {
-      if (resizeObserver && canvasRef.value) {
-        resizeObserver.unobserve(canvasRef.value);
-      }
-    });
-    const displayName = computed(() => {
-      var _a, _b;
-      return ((_a = props.userInfo) == null ? void 0 : _a.userName) || ((_b = props.userInfo) == null ? void 0 : _b.userId);
-    });
-    const isAudioAvailable = computed(() => {
-      var _a;
-      return ((_a = props.userInfo) == null ? void 0 : _a.microphoneStatus) === DeviceStatus.On;
-    });
-    const isVideoAvailable = computed(() => {
-      var _a;
-      return ((_a = props.userInfo) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.userInfo.userId ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          !isVideoAvailable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            needCanvasMaskList.value.length > 0 ? (openBlock(), createElementBlock("canvas", {
-              key: 0,
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "canvas-mask"
-            }, null, 512)) : (openBlock(), createElementBlock("div", _hoisted_3)),
-            createVNode(unref(Avatar), {
-              class: "avatar",
-              size: avatarSize.value,
-              src: _ctx.userInfo.avatarUrl,
-              alt: displayName.value
-            }, null, 8, ["size", "src", "alt"])
-          ])) : createCommentVNode("", true),
-          seatListWithUser.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            !isAudioAvailable.value ? (openBlock(), createBlock(AudioIcon, {
-              key: 0,
-              class: "audio-icon",
-              isMuted: !isAudioAvailable.value,
-              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0
-            }, null, 8, ["isMuted", "audioVolume"])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_5, toDisplayString(displayName.value), 1)
-          ])) : createCommentVNode("", true)
-        ], 64)) : createCommentVNode("", true),
-        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("span", {
-            key: 0,
-            class: "text",
-            title: unref(t)("Waiting for connection")
-          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_7)) : (openBlock(), createElementBlock("span", {
-            key: 1,
-            class: "text",
-            title: unref(t)("Waiting for connection")
-          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_8))
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9237082b"]]);
-export {
-  DefaultStreamViewUI as default
-};

package/dist/components/LiveCoreView/PlayerControl/AudioControl.js

@@ -1,252 +0,0 @@
-import { defineComponent, ref, computed, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, withDirectives, unref, createBlock, normalizeClass, toDisplayString, vShow, toRaw } from "vue";
-import { useUIKit, IconSpeakerOff, IconSpeakerOn } from "@tencentcloud/uikit-base-component-vue3";
-import { isMobile } from "../../../utils/env.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = ["title"];
-const _hoisted_2 = { class: "volume-slider-container" };
-const _hoisted_3 = { class: "volume-slider-wrapper-inner" };
-const _hoisted_4 = { class: "slider-track" };
-const _hoisted_5 = { class: "volume-value" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "AudioControl",
-  props: {
-    iconSize: { default: 20 },
-    enableVolumeControl: { type: Boolean, default: true }
-  },
-  emits: ["volume-change", "muted-change"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { t } = useUIKit();
-    const volumeState = ref({
-      current: 1,
-      previous: 1
-    });
-    const isMuted = ref(false);
-    const isVolumeSliderVisible = ref(false);
-    const isDragging = ref(false);
-    const volumeSliderElement = ref();
-    const volumeSliderAutoHideTimer = ref(null);
-    const AUTO_HIDE_DELAY = {
-      PC: 500,
-      // 0.5 seconds for PC
-      MOBILE: 3e3
-      // 3 seconds for mobile
-    };
-    const volumePercentage = computed(() => {
-      if (props.enableVolumeControl === false) {
-        return isMuted.value ? 0 : 100;
-      }
-      return Math.round(volumeState.value.current * 100);
-    });
-    const iconSizeStyle = computed(() => ({
-      width: `${props.iconSize || 20}px`,
-      height: `${props.iconSize || 20}px`
-    }));
-    const updateVolume = (newVolume) => {
-      volumeState.value.previous = toRaw(volumeState.value.current);
-      volumeState.value.current = newVolume;
-      isMuted.value = newVolume === 0;
-      emit("volume-change", newVolume);
-    };
-    const toggleMute = () => {
-      if (isMuted.value) {
-        isMuted.value = false;
-        volumeState.value.current = volumeState.value.previous || 0.2;
-        emit("muted-change", false);
-        emit("volume-change", volumeState.value.current);
-      } else {
-        isMuted.value = true;
-        volumeState.value.previous = volumeState.value.current;
-        volumeState.value.current = 0;
-        emit("muted-change", true);
-        emit("volume-change", volumeState.value.current);
-      }
-    };
-    const handleVolumeIconClick = () => {
-      if (props.enableVolumeControl === false) {
-        toggleMute();
-      } else {
-        if (isMobile) {
-          isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
-          if (isVolumeSliderVisible.value) {
-            startVolumeSliderAutoHideTimer();
-          } else {
-            stopVolumeSliderAutoHideTimer();
-          }
-        } else {
-          toggleMute();
-        }
-      }
-    };
-    const startVolumeSliderAutoHideTimer = () => {
-      stopVolumeSliderAutoHideTimer();
-      const delay = isMobile ? AUTO_HIDE_DELAY.MOBILE : AUTO_HIDE_DELAY.PC;
-      volumeSliderAutoHideTimer.value = window.setTimeout(() => {
-        if (props.enableVolumeControl) {
-          isVolumeSliderVisible.value = false;
-        }
-      }, delay);
-    };
-    const stopVolumeSliderAutoHideTimer = () => {
-      if (volumeSliderAutoHideTimer.value) {
-        clearTimeout(volumeSliderAutoHideTimer.value);
-        volumeSliderAutoHideTimer.value = null;
-      }
-    };
-    const handleMouseEnter = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      isVolumeSliderVisible.value = true;
-      startVolumeSliderAutoHideTimer();
-    };
-    const handleMouseLeave = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      if (!isDragging.value) {
-        startVolumeSliderAutoHideTimer();
-      }
-    };
-    const calculateVolumeFromPosition = (clientY, target) => {
-      const rect = target.getBoundingClientRect();
-      const clickY = clientY - rect.top;
-      const height = rect.height;
-      return Math.max(0, Math.min(1, 1 - clickY / height));
-    };
-    const addGlobalEventListeners = () => {
-      document.addEventListener("mousemove", handleSliderMove);
-      document.addEventListener("mouseup", handleSliderEnd);
-      document.addEventListener("touchmove", handleSliderMove);
-      document.addEventListener("touchend", handleSliderEnd);
-    };
-    const removeGlobalEventListeners = () => {
-      document.removeEventListener("mousemove", handleSliderMove);
-      document.removeEventListener("mouseup", handleSliderEnd);
-      document.removeEventListener("touchmove", handleSliderMove);
-      document.removeEventListener("touchend", handleSliderEnd);
-    };
-    const startDragging = () => {
-      isDragging.value = true;
-      if (props.enableVolumeControl) {
-        stopVolumeSliderAutoHideTimer();
-      }
-      addGlobalEventListeners();
-    };
-    const handleSliderMove = (event) => {
-      if (!isDragging.value) return;
-      event.preventDefault();
-      let clientY;
-      if (event instanceof MouseEvent) {
-        clientY = event.clientY;
-      } else {
-        clientY = event.touches[0].clientY;
-      }
-      const volumeValue = calculateVolumeFromPosition(clientY, volumeSliderElement.value);
-      updateVolume(volumeValue);
-    };
-    const handleSliderEnd = () => {
-      isDragging.value = false;
-      if (props.enableVolumeControl && isVolumeSliderVisible.value) {
-        startVolumeSliderAutoHideTimer();
-      }
-      removeGlobalEventListeners();
-    };
-    const handleSliderMouseDown = (event) => {
-      if (props.enableVolumeControl === false) return;
-      startDragging();
-      event.preventDefault();
-    };
-    const handleSliderTouchStart = (event) => {
-      if (props.enableVolumeControl === false) return;
-      startDragging();
-      event.preventDefault();
-    };
-    const handleVolumeSliderAreaClick = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) {
-        isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
-        if (isVolumeSliderVisible.value) {
-          startVolumeSliderAutoHideTimer();
-        } else {
-          stopVolumeSliderAutoHideTimer();
-        }
-      }
-    };
-    const handleVolumeSliderMouseEnter = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      stopVolumeSliderAutoHideTimer();
-    };
-    const handleVolumeSliderMouseLeave = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      if (!isDragging.value) {
-        startVolumeSliderAutoHideTimer();
-      }
-    };
-    onUnmounted(() => {
-      removeGlobalEventListeners();
-      if (volumeSliderAutoHideTimer.value) {
-        clearTimeout(volumeSliderAutoHideTimer.value);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "audio-control",
-        style: normalizeStyle(iconSizeStyle.value),
-        onMouseenter: handleMouseEnter,
-        onMouseleave: handleMouseLeave
-      }, [
-        createElementVNode("span", {
-          class: "control-btn volume-btn",
-          title: isMuted.value ? unref(t)("Unmute") : unref(t)("Mute"),
-          onClick: handleVolumeIconClick
-        }, [
-          isMuted.value ? (openBlock(), createBlock(unref(IconSpeakerOff), {
-            key: 0,
-            size: "20"
-          })) : (openBlock(), createBlock(unref(IconSpeakerOn), {
-            key: 1,
-            size: "20"
-          }))
-        ], 8, _hoisted_1),
-        withDirectives(createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", {
-            class: "volume-slider-wrapper",
-            onMouseenter: handleVolumeSliderMouseEnter,
-            onMouseleave: handleVolumeSliderMouseLeave
-          }, [
-            createElementVNode("div", _hoisted_3, [
-              createElementVNode("div", {
-                ref_key: "volumeSliderElement",
-                ref: volumeSliderElement,
-                class: "custom-volume-slider",
-                onMousedown: handleSliderMouseDown,
-                onTouchstart: handleSliderTouchStart,
-                onClick: handleVolumeSliderAreaClick
-              }, [
-                createElementVNode("div", _hoisted_4, [
-                  createElementVNode("div", {
-                    class: "slider-progress",
-                    style: normalizeStyle({ height: `${volumePercentage.value}%` })
-                  }, null, 4),
-                  createElementVNode("div", {
-                    class: normalizeClass(["slider-thumb", { "no-transition": isDragging.value }]),
-                    style: normalizeStyle({ bottom: `${volumePercentage.value}%` })
-                  }, null, 6)
-                ])
-              ], 544)
-            ]),
-            createElementVNode("div", _hoisted_5, toDisplayString(volumePercentage.value), 1)
-          ], 32)
-        ], 512), [
-          [vShow, isVolumeSliderVisible.value]
-        ])
-      ], 36);
-    };
-  }
-});
-const AudioControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22bb0b88"]]);
-export {
-  AudioControl as default
-};