tuikit-atomicx-vue3 3.4.1 → 4.3.0

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/{LiveCoreView → 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 g, normalizeStyle as C, 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";
@@ -10,15 +10,15 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
   },
   emits: ["volume-change", "muted-change"],
   setup(T, { emit: w }) {
-    const o = T, m = w, { t: _ } = Z(), t = v({
+    const o = T, m = w, { t: V } = Z(), t = v({
       current: 1,
       previous: 1
-    }), u = v(!1), l = v(!1), a = v(!1), V = v(), s = v(null), E = {
+    }), u = v(!1), l = v(!1), a = v(!1), E = v(), s = v(null), b = {
       PC: 500,
       // 0.5 seconds for PC
       MOBILE: 3e3
       // 3 seconds for mobile
-    }, b = 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) => {
@@ -29,7 +29,7 @@ const le = ["title"], ne = { class: "volume-slider-container" }, ue = { class: "
       o.enableVolumeControl === !1 ? M() : r ? (l.value = !l.value, l.value ? i() : d()) : M();
     }, i = () => {
       d();
-      const e = r ? E.MOBILE : E.PC;
+      const e = r ? b.MOBILE : b.PC;
       s.value = window.setTimeout(() => {
         o.enableVolumeControl && (l.value = !1);
       }, e);
@@ -44,41 +44,41 @@ 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;
       e.preventDefault();
       let c;
       e instanceof MouseEvent ? c = e.clientY : c = e.touches[0].clientY;
-      const p = O(c, V.value);
+      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);
+      k(), s.value && clearTimeout(s.value);
     }), (e, c) => (g(), j("div", {
       class: "audio-control",
-      style: C(z.value),
+      style: _(z.value),
       onMouseenter: B,
       onMouseleave: x
     }, [
       n("span", {
         class: "control-btn volume-btn",
-        title: u.value ? S(_)("Unmute") : S(_)("Mute"),
+        title: u.value ? S(V)("Open Speaker") : S(V)("Close Speaker"),
         onClick: I
       }, [
         u.value ? (g(), D(S(ee), {
@@ -92,38 +92,38 @@ 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, [
             n("div", {
               ref_key: "volumeSliderElement",
-              ref: V,
+              ref: E,
               class: "custom-volume-slider",
               onMousedown: H,
               onTouchstart: P,
-              onClick: U
+              onClick: $
             }, [
               n("div", re, [
                 n("div", {
                   class: "slider-progress",
-                  style: C({ height: `${b.value}%` })
+                  style: _({ height: `${C.value}%` })
                 }, null, 4),
                 n("div", {
                   class: J(["slider-thumb", { "no-transition": a.value }]),
-                  style: C({ bottom: `${b.value}%` })
+                  style: _({ bottom: `${C.value}%` })
                 }, null, 6)
               ])
             ], 544)
           ]),
-          n("div", ae, Q(b.value), 1)
+          n("div", ae, Q(C.value), 1)
         ], 32)
       ], 512), [
         [W, l.value]
       ])
     ], 36));
   }
-}), de = /* @__PURE__ */ te(se, [["__scopeId", "data-v-22bb0b88"]]);
+}), de = /* @__PURE__ */ te(se, [["__scopeId", "data-v-7c1576e7"]]);
 export {
   de as default
 };

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

@@ -0,0 +1,79 @@
+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"
+}, F = ["data-resolution"], K = /* @__PURE__ */ y({
+  __name: "MultiResolution",
+  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;
+      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 R(n), C("resolution-change", n);
+        }
+      }
+    };
+    return I(() => {
+      S(
+        () => {
+          var t;
+          return (t = r.value) == null ? void 0 : t.liveId;
+        },
+        async () => {
+          var t;
+          (t = r.value) != null && t.liveId && await k(r.value.liveId);
+        },
+        {
+          immediate: !0
+        }
+      );
+    }), (t, m) => e(i).length > 0 ? f((p(), d("span", z, [
+      f(v("span", {
+        class: "multi-resolution-list",
+        onClick: w
+      }, [
+        (p(!0), d(x, null, N(e(i), (o) => (p(), d("span", {
+          key: o,
+          class: "multi-resolution-item",
+          "data-resolution": o
+        }, _(e(a)(c[o])), 9, F))), 128))
+      ], 512), [
+        [V, s.value]
+      ]),
+      v("span", {
+        class: "current-resolution",
+        onClick: g
+      }, _(e(u) ? e(a)(c[e(u)]) : e(i).length > 0 ? e(a)(c[e(i)[0]]) : ""), 1)
+    ])), [
+      [e(D), P]
+    ]) : M("", !0);
+  }
+}), Q = /* @__PURE__ */ b(K, [["__scopeId", "data-v-fae0c822"]]);
+export {
+  Q as default
+};

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

@@ -0,0 +1,8 @@
+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;