tuikit-atomicx-vue3 3.4.2 → 4.3.1

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,4 +1,4 @@
-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 { defineComponent as K, ref as v, computed as y, onUnmounted as N, createElementBlock as j, openBlock as g, 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 { _ as te } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
@@ -18,7 +18,7 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
       // 0.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(() => ({
+    }, C = 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) => {
@@ -44,9 +44,9 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
       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);
     }, k = () => {
+      document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", h), document.removeEventListener("touchmove", f), document.removeEventListener("touchend", h);
+    }, L = () => {
       a.value = !0, o.enableVolumeControl && d(), Y();
     }, f = (e) => {
       if (!a.value) return;
@@ -56,21 +56,21 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
       const p = O(c, E.value);
       A(p);
     }, h = () => {
-      a.value = !1, o.enableVolumeControl && l.value && i(), L();
+      a.value = !1, o.enableVolumeControl && l.value && i(), k();
     }, H = (e) => {
-      o.enableVolumeControl !== !1 && (k(), e.preventDefault());
+      o.enableVolumeControl !== !1 && (L(), 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 && (L(), e.preventDefault());
     }, $ = () => {
+      o.enableVolumeControl !== !1 && r && (l.value = !l.value, l.value ? i() : d());
+    }, U = () => {
       o.enableVolumeControl !== !1 && (r || d());
     }, G = () => {
       o.enableVolumeControl !== !1 && (r || a.value || i());
     };
     return N(() => {
-      L(), s.value && clearTimeout(s.value);
-    }), (e, c) => (C(), j("div", {
+      k(), s.value && clearTimeout(s.value);
+    }), (e, c) => (g(), j("div", {
       class: "audio-control",
       style: _(z.value),
       onMouseenter: B,
@@ -78,13 +78,13 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
     }, [
       n("span", {
         class: "control-btn volume-btn",
-        title: u.value ? S(V)("Unmute") : S(V)("Mute"),
+        title: u.value ? S(V)("Open Speaker") : S(V)("Close Speaker"),
         onClick: I
       }, [
-        u.value ? (C(), D(S(ee), {
+        u.value ? (g(), D(S(ee), {
           key: 0,
           size: "20"
-        })) : (C(), D(S(oe), {
+        })) : (g(), D(S(oe), {
           key: 1,
           size: "20"
         }))
@@ -92,7 +92,7 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
       q(n("div", ne, [
         n("div", {
           class: "volume-slider-wrapper",
-          onMouseenter: $,
+          onMouseenter: U,
           onMouseleave: G
         }, [
           n("div", ue, [
@@ -102,28 +102,28 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
               class: "custom-volume-slider",
               onMousedown: H,
               onTouchstart: P,
-              onClick: U
+              onClick: $
             }, [
               n("div", re, [
                 n("div", {
                   class: "slider-progress",
-                  style: _({ height: `${g.value}%` })
+                  style: _({ height: `${C.value}%` })
                 }, null, 4),
                 n("div", {
                   class: J(["slider-thumb", { "no-transition": a.value }]),
-                  style: _({ bottom: `${g.value}%` })
+                  style: _({ bottom: `${C.value}%` })
                 }, null, 6)
               ])
             ], 544)
           ]),
-          n("div", ae, Q(g.value), 1)
+          n("div", ae, Q(C.value), 1)
         ], 32)
       ], 512), [
         [W, l.value]
       ])
     ], 36));
   }
-}), de = /* @__PURE__ */ te(se, [["__scopeId", "data-v-4dd002d9"]]);
+}), de = /* @__PURE__ */ te(se, [["__scopeId", "data-v-7c1576e7"]]);
 export {
   de as default
 };

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

@@ -1,78 +1,79 @@
-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 { 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 { defineComponent as y, ref as L, onMounted as I, watch as S, withDirectives as f, createCommentVNode as M, unref as e, createElementBlock as d, openBlock as p, createElementVNode as v, Fragment as x, renderList as N, toDisplayString as _, vShow as V } from "vue";
+import { useUIKit as B } from "@tencentcloud/uikit-base-component-vue3";
+import D from "../../../directives/vClickOutside.js";
+import { usePlayerControlState as E, Resolution as l } from "./PlayerControlState.js";
+import { useLiveListState as O } from "../../../states/LiveListState/LiveListState.js";
+import { _ as b } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const z = {
   key: 0,
   class: "multi-resolution"
-}, b = ["data-resolution"], z = /* @__PURE__ */ w({
+}, F = ["data-resolution"], K = /* @__PURE__ */ y({
   __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) => {
+  emits: ["resolution-change"],
+  setup(U, { emit: h }) {
+    const { t: a } = B(), { currentLive: r } = O(), {
+      resolutionList: i,
+      currentResolution: u,
+      switchResolution: R,
+      initializeResolution: k
+    } = E(), C = h, c = {
+      [l.R360P]: "360P",
+      [l.R540P]: "540P",
+      [l.R720P]: "720P",
+      [l.R1080P]: "1080P"
+    }, s = L(!1), P = () => {
+      s.value = !1;
+    }, g = () => {
+      s.value = !s.value;
+    }, w = async (t) => {
       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)
+      t.stopPropagation();
+      const m = (o = t.target) == null ? void 0 : o.dataset.resolution;
+      if (m) {
+        const n = Number(m);
+        if (i.value.includes(n)) {
+          if (s.value = !1, n === u.value)
             return;
-          await h(m);
+          await R(n), C("resolution-change", n);
         }
       }
     };
-    return y(() => {
-      I(
+    return I(() => {
+      S(
         () => {
-          var e;
-          return (e = a.value) == null ? void 0 : e.liveId;
+          var t;
+          return (t = r.value) == null ? void 0 : t.liveId;
         },
         async () => {
-          var e;
-          (e = a.value) != null && e.liveId && await R(a.value.liveId);
+          var t;
+          (t = r.value) != null && t.liveId && await k(r.value.liveId);
         },
         {
           immediate: !0
         }
       );
-    }), (e, c) => t(s).length > 0 ? f((p(), d("span", O, [
+    }), (t, m) => e(i).length > 0 ? f((p(), d("span", z, [
       f(v("span", {
         class: "multi-resolution-list",
-        onClick: P
+        onClick: w
       }, [
-        (p(!0), d(S, null, M(t(s), (o) => (p(), d("span", {
+        (p(!0), d(x, null, N(e(i), (o) => (p(), d("span", {
           key: o,
           class: "multi-resolution-item",
           "data-resolution": o
-        }, _(t(l)(u[o])), 9, b))), 128))
+        }, _(e(a)(c[o])), 9, F))), 128))
       ], 512), [
-        [x, i.value]
+        [V, s.value]
       ]),
       v("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: g
+      }, _(e(u) ? e(a)(c[e(u)]) : e(i).length > 0 ? e(a)(c[e(i)[0]]) : ""), 1)
     ])), [
-      [t(V), k]
-    ]) : L("", !0);
+      [e(D), P]
+    ]) : M("", !0);
   }
-}), H = /* @__PURE__ */ E(z, [["__scopeId", "data-v-013ca8f7"]]);
+}), Q = /* @__PURE__ */ b(K, [["__scopeId", "data-v-fae0c822"]]);
 export {
-  H as default
+  Q as default
 };

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

@@ -1,2 +1,8 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+import { Resolution } from './PlayerControlState';
+
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "resolution-change": (resolution: Resolution) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onResolution-change"?: ((resolution: Resolution) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;