tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

package/dist/components/LiveView/CoreViewDecorate/BattleUserDecorate.js

@@ -1,8 +1,8 @@
 import { defineComponent as S, ref as U, computed as g, watch as V, createElementBlock as l, createCommentVNode as m, openBlock as a, Fragment as L, renderList as D, normalizeStyle as C, unref as o, toDisplayString as p, createElementVNode as d, normalizeClass as E } from "vue";
-import { useBattleState as G } from "../../../states/BattleState.js";
-import { useLiveState as k } from "../../../states/LiveState/index.js";
-import { useUIKit as M } from "@tencentcloud/uikit-base-component-vue3";
-import { useCoHostState as T } from "../../../states/CoHostState/CoHostState.js";
+import { useUIKit as G } from "@tencentcloud/uikit-base-component-vue3";
+import { useCoHostState as k } from "../../../states/CoHostState/CoHostState.js";
+import { useBattleState as M } from "../../../states/BattleState/BattleState.js";
+import { useLiveListState as T } from "../../../states/LiveListState/LiveListState.js";
 import { CoHostLayoutTemplate as y } from "../../../types/coHost.js";
 import { _ as Z } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const z = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_18421_20177)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200.70166L14.9282%204.52622V12.1753L8%2015.9999L1.0718%2012.1753V4.52622L8%200.70166Z'%20fill='%23EF6428'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200L14.9282%203.82456V11.4737L8%2015.2982L1.0718%2011.4737V3.82456L8%200Z'%20fill='url(%23paint0_linear_18421_20177)'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.99957%201.69971L13.3882%204.67437V10.6237L7.99957%2013.5983L2.61096%2010.6237V4.67437L7.99957%201.69971Z'%20fill='%23FFD37A'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_18421_20177'%20x1='0'%20y1='0'%20x2='0'%20y2='15.2982'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFAE5F'/%3e%3cstop%20offset='1'%20stop-color='%23FF8C3C'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_18421_20177'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", O = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_18421_20178)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200.69458L14.9282%204.48401V12.0629L8%2015.8523L1.0718%2012.0629V4.48401L8%200.69458Z'%20fill='%237D9AC6'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200L14.9282%203.78943V11.3683L8%2015.1577L1.0718%2011.3683V3.78943L8%200Z'%20fill='url(%23paint0_linear_18421_20178)'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.99957%201.68311L13.3882%204.63044V10.5251L7.99957%2013.4724L2.61096%2010.5251V4.63044L7.99957%201.68311Z'%20fill='url(%23paint1_linear_18421_20178)'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_18421_20178'%20x1='0'%20y1='0'%20x2='0'%20y2='15.1577'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23E6F1FE'/%3e%3cstop%20offset='1'%20stop-color='%23B7C6E2'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_18421_20178'%20x1='1.77734'%20y1='1.68311'%20x2='1.77734'%20y2='13.4724'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EDF6FF'/%3e%3cstop%20offset='1'%20stop-color='%23E1F0FF'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_18421_20178'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", H = {
@@ -20,7 +20,7 @@ const z = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200
     seatListWithRealSize: {}
   },
   setup(f) {
-    const { t: w } = M(), I = f, { currentLive: v } = k(), { connected: b } = T(), { currentBattleInfo: B, battleScore: s } = G(), u = U(!1), F = g(() => {
+    const { t: w } = G(), I = f, { currentLive: v } = T(), { connected: b } = k(), { currentBattleInfo: B, battleScore: s } = M(), u = U(!1), F = g(() => {
       var c, r;
       const e = ((c = v.value) == null ? void 0 : c.layoutTemplate) === y.HostDynamicGrid, n = ((r = v.value) == null ? void 0 : r.layoutTemplate) === y.HostDynamic1v6, t = e || n;
       return I.seatListWithRealSize.length > 0 && u.value && t && b.value.length > 2;
@@ -67,7 +67,7 @@ const z = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200
       }), 128))
     ])) : m("", !0);
   }
-}), ee = /* @__PURE__ */ Z(K, [["__scopeId", "data-v-0a9bc14e"]]);
+}), ee = /* @__PURE__ */ Z(K, [["__scopeId", "data-v-4b3dcf3b"]]);
 export {
   ee as default
 };

package/dist/components/LiveView/CoreViewDecorate/CoHostDecorate.js

@@ -1,8 +1,8 @@
 import { defineComponent as D, ref as d, onUnmounted as S, watch as C, computed as I, createElementBlock as H, createCommentVNode as T, unref as e, openBlock as g, createElementVNode as r, createVNode as w, toDisplayString as f } from "vue";
 import { useUIKit as B, IconChevronRight as k } from "@tencentcloud/uikit-base-component-vue3";
-import { useBattleState as x } from "../../../states/BattleState.js";
-import { convertSecondsToHMS as N } from "../../../utils/utils.js";
-import { useCoHostState as y } from "../../../states/CoHostState/CoHostState.js";
+import { convertSecondsToHMS as x } from "../../../utils/utils.js";
+import { useCoHostState as N } from "../../../states/CoHostState/CoHostState.js";
+import { useBattleState as y } from "../../../states/BattleState/BattleState.js";
 import { CoHostStatus as u } from "../../../types/coHost.js";
 import { _ as E } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const M = {
@@ -11,7 +11,7 @@ const M = {
 }, U = { class: "co-host-decorate-content" }, V = { class: "co-host-status" }, $ = { class: "co-host-time" }, b = /* @__PURE__ */ D({
   __name: "CoHostDecorate",
   setup(z) {
-    const { coHostStatus: m } = y(), { currentBattleInfo: p } = x(), { t: _ } = B(), o = d(0), a = d(Date.now());
+    const { coHostStatus: m } = N(), { currentBattleInfo: p } = y(), { t: _ } = B(), o = d(0), a = d(Date.now());
     let n = null;
     S(() => {
       i();
@@ -33,7 +33,7 @@ const M = {
     const h = I(() => {
       if (o.value === 0)
         return "00:00";
-      const t = Math.floor((a.value - o.value) / 1e3), { minutes: s, seconds: c } = N(t);
+      const t = Math.floor((a.value - o.value) / 1e3), { minutes: s, seconds: c } = x(t);
       return `${l(s)}:${l(c)}`;
     });
     return (t, s) => {

package/dist/components/LiveView/DefaultStreamViewUI.js

@@ -1,32 +1,32 @@
-import { defineComponent as U, ref as O, computed as u, watch as R, nextTick as N, onUnmounted as W, createElementBlock as r, openBlock as o, createCommentVNode as v, Fragment as B, createVNode as D, unref as l, createBlock as M, createElementVNode as E, toDisplayString as p } from "vue";
-import { useCoGuestState as G } from "../../states/CoGuestState.js";
-import w from "../Avatar/Avatar.js";
-import F from "../../baseComp/AudioIcon.js";
-import { useLiveSeatState as H } from "../../states/LiveSeatState/index.js";
-import { useUIKit as K } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent as O, ref as R, computed as u, watch as N, nextTick as W, onUnmounted as B, createElementBlock as r, openBlock as o, createCommentVNode as v, Fragment as D, createVNode as M, unref as l, createBlock as E, createElementVNode as w, toDisplayString as g } from "vue";
+import { useCoGuestState as F } from "../../states/CoGuestState.js";
+import H from "../Avatar/Avatar.js";
+import G from "../../baseComp/AudioIcon.js";
+import { useLiveSeatState as K } from "../../states/LiveSeatState/index.js";
+import { useLoginState as T } from "../../states/LoginState.js";
+import { useUIKit as j } from "@tencentcloud/uikit-base-component-vue3";
 import { DeviceStatus as k } from "../../types/device.js";
-import { CoGuestStatus as T } from "../../types/coGuest.js";
-import { _ as j } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const q = { class: "stream-cover" }, J = {
+import { _ as q } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const J = { class: "stream-cover" }, P = {
   key: 0,
   class: "no-video-container"
-}, P = {
+}, Q = {
   key: 1,
   class: "mask"
-}, Q = {
+}, X = {
   key: 1,
   class: "user-details"
-}, X = { class: "username" }, Y = {
+}, Y = { class: "username" }, Z = {
   key: 1,
   class: "empty-position"
-}, Z = ["title"], $ = ["title"], S = /* @__PURE__ */ U({
+}, $ = ["title"], S = ["title"], V = /* @__PURE__ */ O({
   __name: "DefaultStreamViewUI",
   props: {
     userInfo: {},
     streamViewInfoList: {}
   },
   setup(d) {
-    const a = d, { t: h } = K(), i = O(null), { localCoGuestStatus: y } = G(), { speakingUsers: z, seatList: x } = H(), C = u(() => x.value.filter((e) => e.userInfo && e.userInfo.userId !== "")), g = u(() => {
+    const a = d, { t: f } = j(), i = R(null), { loginUserInfo: y } = T(), { connected: z } = F(), { speakingUsers: x, seatList: L } = K(), b = u(() => L.value.filter((e) => e.userInfo && e.userInfo.userId !== "")), p = u(() => {
       const e = a.streamViewInfoList.find((t) => {
         var n, s;
         return ((n = t.userInfo) == null ? void 0 : n.userId) === ((s = a.userInfo) == null ? void 0 : s.userId);
@@ -36,16 +36,16 @@ const q = { class: "stream-cover" }, J = {
         height: parseInt(e == null ? void 0 : e.region.height)
       } : { width: 0, height: 0 };
     }), A = u(() => {
-      const t = Math.min(g.value.width, g.value.height);
+      const t = Math.min(p.value.width, p.value.height);
       return t < 64 ? t - 10 : 54;
-    }), f = u(() => {
+    }), h = u(() => {
       const e = a.streamViewInfoList.find((t) => {
         var n, s;
         return ((n = t.userInfo) == null ? void 0 : n.userId) === ((s = a.userInfo) == null ? void 0 : s.userId);
       });
       return e ? a.streamViewInfoList.filter((t) => {
-        const n = t.region.zIndex > (e == null ? void 0 : e.region.zIndex), s = parseInt(t.region.left) > parseInt(e == null ? void 0 : e.region.left) && parseInt(t.region.left) < parseInt(e == null ? void 0 : e.region.left) + parseInt(e == null ? void 0 : e.region.width), b = parseInt(t.region.top) > parseInt(e == null ? void 0 : e.region.top) && parseInt(t.region.top) < parseInt(e == null ? void 0 : e.region.top) + parseInt(e == null ? void 0 : e.region.height);
-        return n && s && b;
+        const n = t.region.zIndex > (e == null ? void 0 : e.region.zIndex), s = parseInt(t.region.left) > parseInt(e == null ? void 0 : e.region.left) && parseInt(t.region.left) < parseInt(e == null ? void 0 : e.region.left) + parseInt(e == null ? void 0 : e.region.width), C = parseInt(t.region.top) > parseInt(e == null ? void 0 : e.region.top) && parseInt(t.region.top) < parseInt(e == null ? void 0 : e.region.top) + parseInt(e == null ? void 0 : e.region.height);
+        return n && s && C;
       }).map((t) => ({
         left: parseInt(t.region.left) - parseInt(e == null ? void 0 : e.region.left),
         top: parseInt(t.region.top) - parseInt(e == null ? void 0 : e.region.top),
@@ -57,16 +57,16 @@ const q = { class: "stream-cover" }, J = {
       const e = i.value, t = e.getContext("2d");
       if (!t) return;
       const n = e.getBoundingClientRect();
-      e.width = n.width, e.height = n.height, t.fillStyle = "#1F2024", t.fillRect(0, 0, e.width, e.height), f.value.forEach((s) => {
+      e.width = n.width, e.height = n.height, t.fillStyle = "#1F2024", t.fillRect(0, 0, e.width, e.height), h.value.forEach((s) => {
         t.clearRect(s.left, s.top, s.width, s.height);
       });
     };
     let c = null;
-    R(() => f.value.length, async () => {
-      f.value.length > 0 ? (await N(), i.value && (I(), c = new ResizeObserver(() => {
+    N(() => h.value.length, async () => {
+      h.value.length > 0 ? (await W(), i.value && (I(), c = new ResizeObserver(() => {
         I();
       }), c.observe(i.value))) : c && i.value && c.unobserve(i.value);
-    }, { immediate: !0 }), W(() => {
+    }, { immediate: !0 }), B(() => {
       c && i.value && c.unobserve(i.value);
     });
     const m = u(() => {
@@ -75,50 +75,53 @@ const q = { class: "stream-cover" }, J = {
     }), _ = u(() => {
       var e;
       return ((e = a.userInfo) == null ? void 0 : e.microphoneStatus) === k.On;
-    }), L = u(() => {
+    }), U = u(() => {
       var e;
       return ((e = a.userInfo) == null ? void 0 : e.cameraStatus) === k.On;
     });
-    return (e, t) => (o(), r("div", q, [
-      d.userInfo.userId ? (o(), r(B, { key: 0 }, [
-        L.value ? v("", !0) : (o(), r("div", J, [
-          f.value.length > 0 ? (o(), r("canvas", {
+    return (e, t) => (o(), r("div", J, [
+      d.userInfo.userId ? (o(), r(D, { key: 0 }, [
+        U.value ? v("", !0) : (o(), r("div", P, [
+          h.value.length > 0 ? (o(), r("canvas", {
             key: 0,
             ref_key: "canvasRef",
             ref: i,
             class: "canvas-mask"
-          }, null, 512)) : (o(), r("div", P)),
-          D(l(w), {
+          }, null, 512)) : (o(), r("div", Q)),
+          M(l(H), {
             class: "avatar",
             size: A.value,
             src: d.userInfo.avatarUrl,
             alt: m.value
           }, null, 8, ["size", "src", "alt"])
         ])),
-        C.value.length > 1 ? (o(), r("div", Q, [
-          _.value ? v("", !0) : (o(), M(F, {
+        b.value.length > 1 ? (o(), r("div", X, [
+          _.value ? v("", !0) : (o(), E(G, {
             key: 0,
             class: "audio-icon",
             isMuted: !_.value,
-            audioVolume: l(z).get(d.userInfo.userId) || 0
+            audioVolume: l(x).get(d.userInfo.userId) || 0
           }, null, 8, ["isMuted", "audioVolume"])),
-          E("div", X, p(m.value), 1)
+          w("div", Y, g(m.value), 1)
         ])) : v("", !0)
       ], 64)) : v("", !0),
-      d.userInfo.userId ? v("", !0) : (o(), r("div", Y, [
-        l(y) === l(T).Connected ? (o(), r("span", {
+      d.userInfo.userId ? v("", !0) : (o(), r("div", Z, [
+        l(z).some((n) => {
+          var s;
+          return n.userId === ((s = l(y)) == null ? void 0 : s.userId);
+        }) ? (o(), r("span", {
           key: 0,
           class: "text",
-          title: l(h)("Waiting for connection")
-        }, p(l(h)("Waiting for connection")), 9, Z)) : (o(), r("span", {
+          title: l(f)("Waiting for connection")
+        }, g(l(f)("Waiting for connection")), 9, $)) : (o(), r("span", {
           key: 1,
           class: "text",
-          title: l(h)("Waiting for connection")
-        }, p(l(h)("Waiting for connection")), 9, $))
+          title: l(f)("Waiting for connection")
+        }, g(l(f)("Waiting for connection")), 9, S))
       ]))
     ]));
   }
-}), le = /* @__PURE__ */ j(S, [["__scopeId", "data-v-0e1033e9"]]);
+}), ue = /* @__PURE__ */ q(V, [["__scopeId", "data-v-3615261b"]]);
 export {
-  le as default
+  ue as default
 };

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

@@ -1,129 +1,133 @@
-import { defineComponent as K, ref as v, computed as y, onUnmounted as N, createElementBlock as j, openBlock as C, normalizeStyle as _, createElementVNode as n, withDirectives as q, unref as S, createBlock as D, normalizeClass as J, toDisplayString as Q, vShow as W, toRaw as X } from "vue";
-import { useUIKit as Z, IconSpeakerOff as ee, IconSpeakerOn as oe } from "@tencentcloud/uikit-base-component-vue3";
-import { isMobile as r } from "../../../utils/env.js";
+import { defineComponent as F, ref as h, computed as O, onUnmounted as K, createElementBlock as R, openBlock as M, normalizeStyle as _, createElementVNode as o, withDirectives as j, unref as f, createBlock as C, normalizeClass as q, toDisplayString as J, vShow as Q } from "vue";
+import { useUIKit as W, IconSpeakerOff as Z, IconSpeakerOn as ee } from "@tencentcloud/uikit-base-component-vue3";
+import { isMobile as s } from "../../../utils/env.js";
 import { _ as te } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "volume-slider-wrapper-inner" }, re = { class: "slider-track" }, ae = { class: "volume-value" }, se = /* @__PURE__ */ K({
+const oe = ["title"], ne = { class: "volume-slider-container" }, le = { class: "volume-slider-wrapper-inner" }, se = { class: "slider-track" }, ie = { class: "volume-value" }, ue = /* @__PURE__ */ F({
   __name: "AudioControl",
   props: {
     iconSize: { default: 20 },
-    enableVolumeControl: { type: Boolean, default: !0 }
+    isMuted: { type: Boolean, default: !1 },
+    volume: { default: 100 }
   },
-  emits: ["volume-change", "muted-change"],
-  setup(T, { emit: w }) {
-    const o = T, m = w, { t: V } = Z(), t = v({
-      current: 1,
-      previous: 1
-    }), u = v(!1), l = v(!1), a = v(!1), E = v(), s = v(null), b = {
-      PC: 500,
-      // 0.5 seconds for PC
+  emits: ["volume-change", "mute-change"],
+  setup(z, { emit: A }) {
+    const c = {
+      // Minimum allowed volume level (silent)
+      MIN_VOLUME: 0,
+      // Maximum allowed volume level (full volume)
+      MAX_VOLUME: 100
+    }, l = z, S = A, { t: E } = W(), t = h(!1), i = h(!1), g = h(), u = h(null), L = {
+      PC: 1500,
+      // 1.5 seconds for PC
       MOBILE: 3e3
       // 3 seconds for mobile
-    }, g = y(() => o.enableVolumeControl === !1 ? u.value ? 0 : 100 : Math.round(t.value.current * 100)), z = y(() => ({
-      width: `${o.iconSize || 20}px`,
-      height: `${o.iconSize || 20}px`
-    })), A = (e) => {
-      t.value.previous = X(t.value.current), t.value.current = e, u.value = e === 0, m("volume-change", e);
-    }, M = () => {
-      u.value ? (u.value = !1, t.value.current = t.value.previous || 0.2, m("muted-change", !1), m("volume-change", t.value.current)) : (u.value = !0, t.value.previous = t.value.current, t.value.current = 0, m("muted-change", !0), m("volume-change", t.value.current));
-    }, I = () => {
-      o.enableVolumeControl === !1 ? M() : r ? (l.value = !l.value, l.value ? i() : d()) : M();
-    }, i = () => {
-      d();
-      const e = r ? b.MOBILE : b.PC;
-      s.value = window.setTimeout(() => {
-        o.enableVolumeControl && (l.value = !1);
+    }, p = O(() => Math.round(l.volume)), y = O(() => ({
+      width: `${l.iconSize}px`,
+      height: `${l.iconSize}px`
+    })), I = (e) => {
+      const n = Math.max(c.MIN_VOLUME, Math.min(c.MAX_VOLUME, e));
+      S("volume-change", n);
+    }, T = () => {
+      S("mute-change");
+    }, D = () => {
+      s ? (t.value = !t.value, t.value ? a() : r()) : T();
+    }, a = () => {
+      r();
+      const e = s ? L.MOBILE : L.PC;
+      u.value = window.setTimeout(() => {
+        t.value = !1;
       }, e);
-    }, d = () => {
-      s.value && (clearTimeout(s.value), s.value = null);
-    }, B = () => {
-      o.enableVolumeControl !== !1 && (r || (l.value = !0, i()));
+    }, r = () => {
+      u.value && (clearTimeout(u.value), u.value = null);
+    }, U = () => {
+      s || (t.value = !0, a());
+    }, b = () => {
+      s || i.value || a();
+    }, w = (e, n) => {
+      const v = n.getBoundingClientRect(), $ = e - v.top, X = v.height, G = (1 - $ / X) * 100;
+      return Math.max(c.MIN_VOLUME, Math.min(c.MAX_VOLUME, G));
     }, x = () => {
-      o.enableVolumeControl !== !1 && (r || a.value || i());
-    }, O = (e, c) => {
-      const p = c.getBoundingClientRect(), R = e - p.top, F = p.height;
-      return Math.max(0, Math.min(1, 1 - R / F));
-    }, Y = () => {
-      document.addEventListener("mousemove", f), document.addEventListener("mouseup", h), document.addEventListener("touchmove", f), document.addEventListener("touchend", h);
-    }, L = () => {
-      document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", h), document.removeEventListener("touchmove", f), document.removeEventListener("touchend", h);
+      document.addEventListener("mousemove", d), document.addEventListener("mouseup", m), document.addEventListener("touchmove", d), document.addEventListener("touchend", m);
+    }, V = () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", m), document.removeEventListener("touchmove", d), document.removeEventListener("touchend", m);
     }, k = () => {
-      a.value = !0, o.enableVolumeControl && d(), Y();
-    }, f = (e) => {
-      if (!a.value) return;
+      i.value = !0, r(), x();
+    }, d = (e) => {
+      if (!i.value) return;
       e.preventDefault();
-      let c;
-      e instanceof MouseEvent ? c = e.clientY : c = e.touches[0].clientY;
-      const p = O(c, E.value);
-      A(p);
-    }, h = () => {
-      a.value = !1, o.enableVolumeControl && l.value && i(), L();
-    }, H = (e) => {
-      o.enableVolumeControl !== !1 && (k(), e.preventDefault());
-    }, P = (e) => {
-      o.enableVolumeControl !== !1 && (k(), e.preventDefault());
-    }, U = () => {
-      o.enableVolumeControl !== !1 && r && (l.value = !l.value, l.value ? i() : d());
-    }, $ = () => {
-      o.enableVolumeControl !== !1 && (r || d());
-    }, G = () => {
-      o.enableVolumeControl !== !1 && (r || a.value || i());
+      let n;
+      e instanceof MouseEvent ? n = e.clientY : n = e.touches[0].clientY;
+      const v = w(n, g.value);
+      I(v);
+    }, m = () => {
+      i.value = !1, t.value && a(), V();
+    }, B = (e) => {
+      k(), e.preventDefault();
+    }, N = (e) => {
+      k(), e.preventDefault();
+    }, P = () => {
+      s && (t.value = !t.value, t.value ? a() : r());
+    }, Y = () => {
+      s || r();
+    }, H = () => {
+      s || i.value || a();
     };
-    return N(() => {
-      L(), s.value && clearTimeout(s.value);
-    }), (e, c) => (C(), j("div", {
+    return K(() => {
+      V(), u.value && clearTimeout(u.value);
+    }), (e, n) => (M(), R("div", {
       class: "audio-control",
-      style: _(z.value),
-      onMouseenter: B,
-      onMouseleave: x
+      style: _(y.value),
+      onMouseenter: U,
+      onMouseleave: b
     }, [
-      n("span", {
+      o("span", {
         class: "control-btn volume-btn",
-        title: u.value ? S(V)("Unmute") : S(V)("Mute"),
-        onClick: I
+        title: l.isMuted ? f(E)("Open Speaker") : f(E)("Close Speaker"),
+        onClick: D
       }, [
-        u.value ? (C(), D(S(ee), {
+        l.isMuted ? (M(), C(f(Z), {
           key: 0,
-          size: "20"
-        })) : (C(), D(S(oe), {
+          size: l.iconSize
+        }, null, 8, ["size"])) : (M(), C(f(ee), {
           key: 1,
-          size: "20"
-        }))
-      ], 8, le),
-      q(n("div", ne, [
-        n("div", {
+          size: l.iconSize
+        }, null, 8, ["size"]))
+      ], 8, oe),
+      j(o("div", ne, [
+        o("div", {
           class: "volume-slider-wrapper",
-          onMouseenter: $,
-          onMouseleave: G
+          onMouseenter: Y,
+          onMouseleave: H
         }, [
-          n("div", ue, [
-            n("div", {
+          o("div", le, [
+            o("div", {
               ref_key: "volumeSliderElement",
-              ref: E,
+              ref: g,
               class: "custom-volume-slider",
-              onMousedown: H,
-              onTouchstart: P,
-              onClick: U
+              onMousedown: B,
+              onTouchstart: N,
+              onClick: P
             }, [
-              n("div", re, [
-                n("div", {
+              o("div", se, [
+                o("div", {
                   class: "slider-progress",
-                  style: _({ height: `${g.value}%` })
+                  style: _({ height: `${p.value}%` })
                 }, null, 4),
-                n("div", {
-                  class: J(["slider-thumb", { "no-transition": a.value }]),
-                  style: _({ bottom: `${g.value}%` })
+                o("div", {
+                  class: q(["slider-thumb", { "no-transition": i.value }]),
+                  style: _({ bottom: `${p.value}%` })
                 }, null, 6)
               ])
             ], 544)
           ]),
-          n("div", ae, Q(g.value), 1)
+          o("div", ie, J(p.value), 1)
         ], 32)
       ], 512), [
-        [W, l.value]
+        [Q, t.value]
       ])
     ], 36));
   }
-}), de = /* @__PURE__ */ te(se, [["__scopeId", "data-v-4dd002d9"]]);
+}), me = /* @__PURE__ */ te(ue, [["__scopeId", "data-v-7d5dfb75"]]);
 export {
-  de as default
+  me as default
 };

package/dist/components/LiveView/PlayerControl/AudioControl.vue.d.ts

@@ -1,22 +1,26 @@
 interface AudioControlProps {
     iconSize?: number;
-    enableVolumeControl?: boolean;
+    isMuted?: boolean;
+    volume?: number;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AudioControlProps>, {
     iconSize: number;
-    enableVolumeControl: boolean;
+    isMuted: boolean;
+    volume: number;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "volume-change": (value: number) => void;
-    "muted-change": (value: boolean) => void;
+    "mute-change": () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AudioControlProps>, {
     iconSize: number;
-    enableVolumeControl: boolean;
+    isMuted: boolean;
+    volume: number;
 }>>> & Readonly<{
     "onVolume-change"?: ((value: number) => any) | undefined;
-    "onMuted-change"?: ((value: boolean) => any) | undefined;
+    "onMute-change"?: (() => any) | undefined;
 }>, {
+    isMuted: boolean;
+    volume: number;
     iconSize: number;
-    enableVolumeControl: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/LiveView/PlayerControl/MultiResolution.js

@@ -1,78 +1,73 @@
-import { defineComponent as w, ref as g, onMounted as y, watch as I, withDirectives as f, createCommentVNode as L, unref as t, createElementBlock as d, openBlock as p, createElementVNode as v, Fragment as S, renderList as M, toDisplayString as _, vShow as x } from "vue";
+import { defineComponent as g, ref as f, withDirectives as _, createCommentVNode as y, unref as t, createElementBlock as c, openBlock as m, createElementVNode as R, normalizeClass as O, Fragment as S, renderList as L, toDisplayString as h, vShow as M } from "vue";
 import { useUIKit as N } from "@tencentcloud/uikit-base-component-vue3";
-import V from "../../../directives/vClickOutside.js";
-import { useLiveState as B } from "../../../states/LiveState/index.js";
-import { usePlayerControlState as D, Resolution as n } from "./PlayerControlState.js";
-import { _ as E } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const O = {
+import I from "../../../directives/vClickOutside.js";
+import { usePlayerControlState as x, Resolution as i } from "./PlayerControlState.js";
+import { _ as D } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const E = {
   key: 0,
   class: "multi-resolution"
-}, b = ["data-resolution"], z = /* @__PURE__ */ w({
+}, T = ["data-resolution"], V = 1e3, b = /* @__PURE__ */ g({
   __name: "MultiResolution",
-  setup(F) {
-    const { t: l } = N(), { currentLive: a } = B(), {
-      resolutionList: s,
-      currentResolution: r,
-      switchResolution: h,
-      initializeResolution: R
-    } = D(), u = {
-      [n.R360P]: "360P",
-      [n.R540P]: "540P",
-      [n.R720P]: "720P",
-      [n.R1080P]: "1080P"
-    }, i = g(!1), k = () => {
-      i.value = !1;
-    }, C = () => {
-      i.value = !i.value;
-    }, P = async (e) => {
-      var o;
-      e.stopPropagation();
-      const c = (o = e.target) == null ? void 0 : o.dataset.resolution;
-      if (c) {
-        const m = Number(c);
-        if (s.value.includes(m)) {
-          if (i.value = !1, m === r.value)
+  setup(B) {
+    const { t: p } = N(), {
+      resolutionList: l,
+      currentResolution: n,
+      switchResolution: v
+    } = x(), d = {
+      [i.R360P]: "360P",
+      [i.R540P]: "540P",
+      [i.R720P]: "720P",
+      [i.R1080P]: "1080P"
+    }, o = f(!1), s = f(!1), C = () => {
+      o.value = !1;
+    }, w = () => {
+      o.value = !o.value;
+    }, k = async (r) => {
+      var e;
+      if (r.stopPropagation(), s.value) {
+        console.warn("[MultiResolution] Resolution switching in progress, please wait...");
+        return;
+      }
+      const a = (e = r.target) == null ? void 0 : e.dataset.resolution;
+      if (a) {
+        const u = Number(a);
+        if (l.value.includes(u)) {
+          if (o.value = !1, u === n.value)
             return;
-          await h(m);
+          try {
+            s.value = !0, await v(u);
+          } catch (P) {
+            console.error("[MultiResolution] Failed to switch resolution:", P);
+          } finally {
+            setTimeout(() => {
+              s.value = !1;
+            }, V);
+          }
         }
       }
     };
-    return y(() => {
-      I(
-        () => {
-          var e;
-          return (e = a.value) == null ? void 0 : e.liveId;
-        },
-        async () => {
-          var e;
-          (e = a.value) != null && e.liveId && await R(a.value.liveId);
-        },
-        {
-          immediate: !0
-        }
-      );
-    }), (e, c) => t(s).length > 0 ? f((p(), d("span", O, [
-      f(v("span", {
-        class: "multi-resolution-list",
-        onClick: P
+    return (r, a) => t(l).length > 0 && t(n) ? _((m(), c("span", E, [
+      _(R("span", {
+        class: O(["multi-resolution-list", { "switching-disabled": s.value }]),
+        onClick: k
       }, [
-        (p(!0), d(S, null, M(t(s), (o) => (p(), d("span", {
-          key: o,
+        (m(!0), c(S, null, L(t(l), (e) => (m(), c("span", {
+          key: e,
           class: "multi-resolution-item",
-          "data-resolution": o
-        }, _(t(l)(u[o])), 9, b))), 128))
-      ], 512), [
-        [x, i.value]
+          "data-resolution": e
+        }, h(t(p)(d[e])), 9, T))), 128))
+      ], 2), [
+        [M, o.value]
       ]),
-      v("span", {
+      R("span", {
         class: "current-resolution",
-        onClick: C
-      }, _(t(r) ? t(l)(u[t(r)]) : t(s).length > 0 ? t(l)(u[t(s)[0]]) : ""), 1)
+        onClick: w
+      }, h(t(p)(d[t(n)])), 1)
     ])), [
-      [t(V), k]
-    ]) : L("", !0);
+      [t(I), C]
+    ]) : y("", !0);
   }
-}), H = /* @__PURE__ */ E(z, [["__scopeId", "data-v-013ca8f7"]]);
+}), K = /* @__PURE__ */ D(b, [["__scopeId", "data-v-2a135832"]]);
 export {
-  H as default
+  K as default
 };