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

package/dist/components/{LiveCoreView → LiveView}/CoreViewDecorate/BattleUserDecorate.js

@@ -1,66 +1,73 @@
-import { defineComponent as I, ref as S, computed as m, onMounted as U, onUnmounted as V, createElementBlock as n, createCommentVNode as B, openBlock as s, Fragment as D, renderList as C, normalizeStyle as G, createElementVNode as i, normalizeClass as M, unref as p, toDisplayString as w } from "vue";
-import { useBattleState as T } from "../../../states/BattleState.js";
-import { useLiveState as Z } from "../../../states/LiveState/index.js";
-import { TUILiveBattleManagerEvents as c } from "@tencentcloud/tuiroom-engine-js";
+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 { 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 k } 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", P = {
+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 = {
   key: 0,
   class: "battle-user-decorate-container"
-}, A = {
+}, P = {
   key: 0,
   class: "battle-decorate"
-}, H = ["src"], R = { class: "battle-level" }, W = { class: "battle-score-value" }, N = /* @__PURE__ */ I({
+}, A = {
+  key: 0,
+  class: "battle-score-value"
+}, R = ["src"], W = { class: "battle-level" }, N = { class: "battle-score-value" }, K = /* @__PURE__ */ S({
   __name: "BattleUserDecorate",
   props: {
     seatListWithRealSize: {}
   },
   setup(f) {
-    const b = f, { currentLive: v } = Z(), { battleUsers: F, battleScore: d, subscribeEvent: h, unsubscribeEvent: _ } = T(), u = S(!1), x = m(() => {
-      var o, l;
-      const t = ((o = v.value) == null ? void 0 : o.layoutTemplate) === y.HostDynamicGrid && F.value.length > 2, r = ((l = v.value) == null ? void 0 : l.layoutTemplate) === y.HostDynamic1v6, e = t || r;
-      return b.seatListWithRealSize.length > 0 && u.value && e;
-    }), E = m(() => [...d.value.values()].sort((t, r) => r - t));
-    function a(t) {
-      return E.value.indexOf(d.value.get(t) || 0) + 1;
-    }
-    function g() {
-      u.value = !0;
-    }
-    function L() {
-      setTimeout(() => {
-        u.value = !1;
-      }, 5e3);
+    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;
+    }), x = g(() => [...s.value.values()].sort((e, n) => n - e));
+    function i(e) {
+      return x.value.indexOf(s.value.get(e) || 0) + 1;
     }
-    return U(() => {
-      h(c.onBattleStarted, g), h(c.onBattleEnded, L);
-    }), V(() => {
-      _(c.onBattleStarted, g), _(c.onBattleEnded, L);
-    }), (t, r) => x.value ? (s(), n("div", P, [
-      (s(!0), n(D, null, C(f.seatListWithRealSize, (e, o) => {
-        var l;
-        return s(), n("div", {
-          key: `seat-${o}`,
-          style: G(e.region)
+    let _ = null;
+    return V(() => {
+      var e;
+      return (e = B.value) == null ? void 0 : e.battleId;
+    }, (e) => {
+      if (e != null)
+        u.value = !0;
+      else {
+        if (_) return;
+        _ = setTimeout(() => {
+          u.value = !1;
+        }, 5e3);
+      }
+    }, { immediate: !0 }), (e, n) => F.value ? (a(), l("div", H, [
+      (a(!0), l(L, null, D(f.seatListWithRealSize, (t, c) => {
+        var r, h;
+        return a(), l("div", {
+          key: `seat-${c}`,
+          style: C(t.region)
         }, [
-          a(e.userInfo.userId) > 0 ? (s(), n("div", A, [
-            i("div", {
-              class: M(["battle-badge-container", a(e.userInfo.userId) === 1 ? "top-badge" : "ordinary-badge"])
-            }, [
-              i("img", {
-                src: a(e.userInfo.userId) === 1 ? p(z) : p(O),
-                alt: "battle-badge",
-                class: "battle-badge"
-              }, null, 8, H),
-              i("span", R, w(a(e.userInfo.userId)), 1)
-            ], 2),
-            i("span", W, w(((l = p(d)) == null ? void 0 : l.get(e.userInfo.userId)) || 0), 1)
-          ])) : B("", !0)
+          i(t.userInfo.userId) > 0 ? (a(), l("div", P, [
+            (r = o(s)) != null && r.has(t.userInfo.userId) ? (a(), l(L, { key: 1 }, [
+              d("div", {
+                class: E(["battle-badge-container", i(t.userInfo.userId) === 1 ? "top-badge" : "ordinary-badge"])
+              }, [
+                d("img", {
+                  src: i(t.userInfo.userId) === 1 ? o(z) : o(O),
+                  alt: "battle-badge",
+                  class: "battle-badge"
+                }, null, 8, R),
+                d("span", W, p(i(t.userInfo.userId)), 1)
+              ], 2),
+              d("span", N, p(((h = o(s)) == null ? void 0 : h.get(t.userInfo.userId)) || 0), 1)
+            ], 64)) : (a(), l("span", A, p(o(w)("Connecting")), 1))
+          ])) : m("", !0)
         ], 4);
       }), 128))
-    ])) : B("", !0);
+    ])) : m("", !0);
   }
-}), X = /* @__PURE__ */ k(N, [["__scopeId", "data-v-643ef0a9"]]);
+}), ee = /* @__PURE__ */ Z(K, [["__scopeId", "data-v-4b3dcf3b"]]);
 export {
-  X as default
+  ee as default
 };

package/dist/components/{LiveCoreView → 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) => {
@@ -48,7 +48,7 @@ const M = {
       ])) : T("", !0);
     };
   }
-}), J = /* @__PURE__ */ E(b, [["__scopeId", "data-v-d6dae3fa"]]);
+}), J = /* @__PURE__ */ E(b, [["__scopeId", "data-v-673defc5"]]);
 export {
   J as default
 };

package/dist/components/{LiveCoreView → LiveView}/CoreViewDecorate/LiveCoreDecorate.js

@@ -29,7 +29,7 @@ const S = {
       ], 4)) : u("", !0)
     ], 64));
   }
-}), D = /* @__PURE__ */ z(W, [["__scopeId", "data-v-bd899db7"]]);
+}), D = /* @__PURE__ */ z(W, [["__scopeId", "data-v-666d0e70"]]);
 export {
   D as default
 };

package/dist/components/{LiveCoreView → 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);
@@ -35,17 +35,17 @@ const q = { class: "stream-cover" }, J = {
         width: parseInt(e == null ? void 0 : e.region.width),
         height: parseInt(e == null ? void 0 : e.region.height)
       } : { width: 0, height: 0 };
-    }), b = u(() => {
-      const t = Math.min(g.value.width, g.value.height);
+    }), A = u(() => {
+      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), L = 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 && L;
+        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;
-    }), A = 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 }, [
-        A.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: b.value,
+            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-9237082b"]]);
+}), ue = /* @__PURE__ */ q(V, [["__scopeId", "data-v-3615261b"]]);
 export {
-  le as default
+  ue as default
 };

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

@@ -0,0 +1,133 @@
+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 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 },
+    isMuted: { type: Boolean, default: !1 },
+    volume: { default: 100 }
+  },
+  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
+    }, 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);
+    }, 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 = () => {
+      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 = () => {
+      i.value = !0, r(), x();
+    }, d = (e) => {
+      if (!i.value) return;
+      e.preventDefault();
+      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 K(() => {
+      V(), u.value && clearTimeout(u.value);
+    }), (e, n) => (M(), R("div", {
+      class: "audio-control",
+      style: _(y.value),
+      onMouseenter: U,
+      onMouseleave: b
+    }, [
+      o("span", {
+        class: "control-btn volume-btn",
+        title: l.isMuted ? f(E)("Open Speaker") : f(E)("Close Speaker"),
+        onClick: D
+      }, [
+        l.isMuted ? (M(), C(f(Z), {
+          key: 0,
+          size: l.iconSize
+        }, null, 8, ["size"])) : (M(), C(f(ee), {
+          key: 1,
+          size: l.iconSize
+        }, null, 8, ["size"]))
+      ], 8, oe),
+      j(o("div", ne, [
+        o("div", {
+          class: "volume-slider-wrapper",
+          onMouseenter: Y,
+          onMouseleave: H
+        }, [
+          o("div", le, [
+            o("div", {
+              ref_key: "volumeSliderElement",
+              ref: g,
+              class: "custom-volume-slider",
+              onMousedown: B,
+              onTouchstart: N,
+              onClick: P
+            }, [
+              o("div", se, [
+                o("div", {
+                  class: "slider-progress",
+                  style: _({ height: `${p.value}%` })
+                }, null, 4),
+                o("div", {
+                  class: q(["slider-thumb", { "no-transition": i.value }]),
+                  style: _({ bottom: `${p.value}%` })
+                }, null, 6)
+              ])
+            ], 544)
+          ]),
+          o("div", ie, J(p.value), 1)
+        ], 32)
+      ], 512), [
+        [Q, t.value]
+      ])
+    ], 36));
+  }
+}), me = /* @__PURE__ */ te(ue, [["__scopeId", "data-v-7d5dfb75"]]);
+export {
+  me as default
+};

package/dist/components/{LiveCoreView → 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

@@ -0,0 +1,73 @@
+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 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"
+}, T = ["data-resolution"], V = 1e3, b = /* @__PURE__ */ g({
+  __name: "MultiResolution",
+  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;
+          try {
+            s.value = !0, await v(u);
+          } catch (P) {
+            console.error("[MultiResolution] Failed to switch resolution:", P);
+          } finally {
+            setTimeout(() => {
+              s.value = !1;
+            }, V);
+          }
+        }
+      }
+    };
+    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
+      }, [
+        (m(!0), c(S, null, L(t(l), (e) => (m(), c("span", {
+          key: e,
+          class: "multi-resolution-item",
+          "data-resolution": e
+        }, h(t(p)(d[e])), 9, T))), 128))
+      ], 2), [
+        [M, o.value]
+      ]),
+      R("span", {
+        class: "current-resolution",
+        onClick: w
+      }, h(t(p)(d[t(n)])), 1)
+    ])), [
+      [t(I), C]
+    ]) : y("", !0);
+  }
+}), K = /* @__PURE__ */ D(b, [["__scopeId", "data-v-2a135832"]]);
+export {
+  K as default
+};