tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/dist/components/LiveView/DefaultStreamViewUI.js

@@ -1,4 +1,4 @@
-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 { 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 p } from "vue";
 import { useCoGuestState as F } from "../../states/CoGuestState.js";
 import H from "../Avatar/Avatar.js";
 import G from "../../baseComp/AudioIcon.js";
@@ -26,7 +26,7 @@ const J = { class: "stream-cover" }, P = {
     streamViewInfoList: {}
   },
   setup(d) {
-    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 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 !== "")), g = 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,7 +36,7 @@ const J = { class: "stream-cover" }, P = {
         height: parseInt(e == null ? void 0 : e.region.height)
       } : { width: 0, height: 0 };
     }), A = u(() => {
-      const t = Math.min(p.value.width, p.value.height);
+      const t = Math.min(g.value.width, g.value.height);
       return t < 64 ? t - 10 : 54;
     }), h = u(() => {
       const e = a.streamViewInfoList.find((t) => {
@@ -44,8 +44,8 @@ const J = { class: "stream-cover" }, P = {
         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), 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;
+        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), U = 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 && U;
       }).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),
@@ -75,13 +75,13 @@ const J = { class: "stream-cover" }, P = {
     }), _ = u(() => {
       var e;
       return ((e = a.userInfo) == null ? void 0 : e.microphoneStatus) === k.On;
-    }), U = u(() => {
+    }), C = u(() => {
       var e;
       return ((e = a.userInfo) == null ? void 0 : e.cameraStatus) === k.On;
     });
     return (e, t) => (o(), r("div", J, [
       d.userInfo.userId ? (o(), r(D, { key: 0 }, [
-        U.value ? v("", !0) : (o(), r("div", P, [
+        C.value ? v("", !0) : (o(), r("div", P, [
           h.value.length > 0 ? (o(), r("canvas", {
             key: 0,
             ref_key: "canvasRef",
@@ -102,7 +102,7 @@ const J = { class: "stream-cover" }, P = {
             isMuted: !_.value,
             audioVolume: l(x).get(d.userInfo.userId) || 0
           }, null, 8, ["isMuted", "audioVolume"])),
-          w("div", Y, g(m.value), 1)
+          w("div", Y, p(m.value), 1)
         ])) : v("", !0)
       ], 64)) : v("", !0),
       d.userInfo.userId ? v("", !0) : (o(), r("div", Z, [
@@ -113,11 +113,11 @@ const J = { class: "stream-cover" }, P = {
           key: 0,
           class: "text",
           title: l(f)("Waiting for connection")
-        }, g(l(f)("Waiting for connection")), 9, $)) : (o(), r("span", {
+        }, p(l(f)("Waiting for connection")), 9, $)) : (o(), r("span", {
           key: 1,
           class: "text",
           title: l(f)("Waiting for connection")
-        }, g(l(f)("Waiting for connection")), 9, S))
+        }, p(l(f)("Waiting for connection")), 9, S))
       ]))
     ]));
   }

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 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 { 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
-    }, 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) => {
-      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);
+      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 = () => {
-      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;
+      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(), k();
-    }, H = (e) => {
-      o.enableVolumeControl !== !1 && (L(), e.preventDefault());
-    }, P = (e) => {
-      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());
+      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(() => {
-      k(), s.value && clearTimeout(s.value);
-    }), (e, c) => (g(), 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)("Open Speaker") : S(V)("Close Speaker"),
-        onClick: I
+        title: l.isMuted ? f(E)("Open Speaker") : f(E)("Close Speaker"),
+        onClick: D
       }, [
-        u.value ? (g(), D(S(ee), {
+        l.isMuted ? (M(), C(f(Z), {
           key: 0,
-          size: "20"
-        })) : (g(), 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: U,
-          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: $
+              onMousedown: B,
+              onTouchstart: N,
+              onClick: P
             }, [
-              n("div", re, [
-                n("div", {
+              o("div", se, [
+                o("div", {
                   class: "slider-progress",
-                  style: _({ height: `${C.value}%` })
+                  style: _({ height: `${p.value}%` })
                 }, null, 4),
-                n("div", {
-                  class: J(["slider-thumb", { "no-transition": a.value }]),
-                  style: _({ bottom: `${C.value}%` })
+                o("div", {
+                  class: q(["slider-thumb", { "no-transition": i.value }]),
+                  style: _({ bottom: `${p.value}%` })
                 }, null, 6)
               ])
             ], 544)
           ]),
-          n("div", ae, Q(C.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-7c1576e7"]]);
+}), 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,79 +1,73 @@
-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 = {
+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"
-}, F = ["data-resolution"], K = /* @__PURE__ */ y({
+}, T = ["data-resolution"], V = 1e3, b = /* @__PURE__ */ g({
   __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)
+  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 R(n), C("resolution-change", n);
+          try {
+            s.value = !0, await v(u);
+          } catch (P) {
+            console.error("[MultiResolution] Failed to switch resolution:", P);
+          } finally {
+            setTimeout(() => {
+              s.value = !1;
+            }, V);
+          }
         }
       }
     };
-    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
+    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(x, null, N(e(i), (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
-        }, _(e(a)(c[o])), 9, F))), 128))
-      ], 512), [
-        [V, s.value]
+          "data-resolution": e
+        }, h(t(p)(d[e])), 9, T))), 128))
+      ], 2), [
+        [M, o.value]
       ]),
-      v("span", {
+      R("span", {
         class: "current-resolution",
-        onClick: g
-      }, _(e(u) ? e(a)(c[e(u)]) : e(i).length > 0 ? e(a)(c[e(i)[0]]) : ""), 1)
+        onClick: w
+      }, h(t(p)(d[t(n)])), 1)
     ])), [
-      [e(D), P]
-    ]) : M("", !0);
+      [t(I), C]
+    ]) : y("", !0);
   }
-}), Q = /* @__PURE__ */ b(K, [["__scopeId", "data-v-fae0c822"]]);
+}), K = /* @__PURE__ */ D(b, [["__scopeId", "data-v-2a135832"]]);
 export {
-  Q as default
+  K as default
 };

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

@@ -1,8 +1,2 @@
-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>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;