tuikit-atomicx-vue3 3.3.4 → 3.4.2

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

@@ -0,0 +1,73 @@
+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 { 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 = {
+  key: 0,
+  class: "battle-user-decorate-container"
+}, P = {
+  key: 0,
+  class: "battle-decorate"
+}, 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 { t: w } = M(), I = f, { currentLive: v } = k(), { connected: b } = T(), { currentBattleInfo: B, battleScore: s } = G(), 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;
+    }
+    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)
+        }, [
+          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))
+    ])) : m("", !0);
+  }
+}), ee = /* @__PURE__ */ Z(K, [["__scopeId", "data-v-0a9bc14e"]]);
+export {
+  ee as default
+};

package/dist/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue.d.ts

@@ -0,0 +1,35 @@
+import { SeatUserInfo } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,54 @@
+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 { CoHostStatus as u } from "../../../types/coHost.js";
+import { _ as E } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const M = {
+  key: 0,
+  class: "co-host-decorate"
+}, 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());
+    let n = null;
+    S(() => {
+      i();
+    });
+    function v() {
+      i(), n = setInterval(() => {
+        a.value = Date.now();
+      }, 1e3);
+    }
+    function i() {
+      n && (clearInterval(n), n = null);
+    }
+    C(m, (t) => {
+      t === u.Connected && (o.value = Date.now(), a.value = Date.now(), v()), t === u.Disconnected && (o.value = 0, i());
+    }, { immediate: !0 });
+    function l(t) {
+      return t.toString().padStart(2, "0");
+    }
+    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);
+      return `${l(s)}:${l(c)}`;
+    });
+    return (t, s) => {
+      var c;
+      return e(m) === e(u).Connected && !((c = e(p)) != null && c.battleId) ? (g(), H("div", M, [
+        s[0] || (s[0] = r("div", { class: "co-host-decorate-container" }, null, -1)),
+        r("div", U, [
+          r("span", V, f(e(_)("co-Hosting")), 1),
+          r("span", $, f(h.value), 1),
+          w(e(k), { size: "10" })
+        ])
+      ])) : T("", !0);
+    };
+  }
+}), J = /* @__PURE__ */ E(b, [["__scopeId", "data-v-673defc5"]]);
+export {
+  J as default
+};

package/dist/components/LiveView/CoreViewDecorate/CoHostDecorate.vue.d.ts

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

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

@@ -0,0 +1,35 @@
+import { defineComponent as d, ref as v, watch as f, computed as a, createElementBlock as o, openBlock as n, Fragment as L, createCommentVNode as u, createVNode as p, normalizeStyle as g } from "vue";
+import x from "./BattleDecorate.js";
+import _ from "./BattleUserDecorate.js";
+import { _ as z } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const S = {
+  key: 0,
+  class: "live-core-decorate"
+}, W = /* @__PURE__ */ d({
+  __name: "LiveCoreDecorate",
+  props: {
+    seatListWithRealSize: {}
+  },
+  setup(s) {
+    const r = s, i = v(!1);
+    f(() => r.seatListWithRealSize, (e) => {
+      e.length > 0 && (i.value = !0);
+    });
+    const l = a(() => r.seatListWithRealSize.reduce((e, t) => Math.min(e, parseInt(t.region.top)), 1 / 0)), c = a(() => r.seatListWithRealSize.reduce((e, t) => Math.min(e, parseInt(t.region.left)), 1 / 0)), h = a(() => r.seatListWithRealSize.reduce((e, t) => Math.max(e, parseInt(t.region.top) + parseInt(t.region.height) - l.value), 0)), m = a(() => r.seatListWithRealSize.reduce((e, t) => Math.max(e, parseInt(t.region.left) + parseInt(t.region.width) - c.value), 0));
+    return (e, t) => (n(), o(L, null, [
+      i.value ? (n(), o("div", S, [
+        p(_, { seatListWithRealSize: s.seatListWithRealSize }, null, 8, ["seatListWithRealSize"])
+      ])) : u("", !0),
+      i.value ? (n(), o("div", {
+        key: 1,
+        class: "live-core-decorate-cover-stream",
+        style: g({ top: `${l.value}px`, height: `${h.value}px`, left: `${c.value}px`, width: `${m.value}px` })
+      }, [
+        p(x)
+      ], 4)) : u("", !0)
+    ], 64));
+  }
+}), D = /* @__PURE__ */ z(W, [["__scopeId", "data-v-666d0e70"]]);
+export {
+  D as default
+};

package/dist/components/LiveView/CoreViewDecorate/LiveCoreDecorate.vue.d.ts

@@ -0,0 +1,35 @@
+import { SeatUserInfo } from '../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    seatListWithRealSize: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/LiveView/DefaultStreamViewUI.js

@@ -0,0 +1,124 @@
+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 { 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 = {
+  key: 0,
+  class: "no-video-container"
+}, P = {
+  key: 1,
+  class: "mask"
+}, Q = {
+  key: 1,
+  class: "user-details"
+}, X = { class: "username" }, Y = {
+  key: 1,
+  class: "empty-position"
+}, Z = ["title"], $ = ["title"], S = /* @__PURE__ */ U({
+  __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 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 ? {
+        width: parseInt(e == null ? void 0 : e.region.width),
+        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);
+      return t < 64 ? t - 10 : 54;
+    }), f = 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;
+      }).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),
+        width: parseInt(t.region.width),
+        height: parseInt(t.region.height)
+      })) : [];
+    }), I = () => {
+      if (!i.value) return;
+      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) => {
+        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(() => {
+        I();
+      }), c.observe(i.value))) : c && i.value && c.unobserve(i.value);
+    }, { immediate: !0 }), W(() => {
+      c && i.value && c.unobserve(i.value);
+    });
+    const m = u(() => {
+      var e, t;
+      return ((e = a.userInfo) == null ? void 0 : e.userName) || ((t = a.userInfo) == null ? void 0 : t.userId);
+    }), _ = u(() => {
+      var e;
+      return ((e = a.userInfo) == null ? void 0 : e.microphoneStatus) === k.On;
+    }), L = 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", {
+            key: 0,
+            ref_key: "canvasRef",
+            ref: i,
+            class: "canvas-mask"
+          }, null, 512)) : (o(), r("div", P)),
+          D(l(w), {
+            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, {
+            key: 0,
+            class: "audio-icon",
+            isMuted: !_.value,
+            audioVolume: l(z).get(d.userInfo.userId) || 0
+          }, null, 8, ["isMuted", "audioVolume"])),
+          E("div", X, p(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", {
+          key: 0,
+          class: "text",
+          title: l(h)("Waiting for connection")
+        }, p(l(h)("Waiting for connection")), 9, Z)) : (o(), r("span", {
+          key: 1,
+          class: "text",
+          title: l(h)("Waiting for connection")
+        }, p(l(h)("Waiting for connection")), 9, $))
+      ]))
+    ]));
+  }
+}), le = /* @__PURE__ */ j(S, [["__scopeId", "data-v-0e1033e9"]]);
+export {
+  le as default
+};

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

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

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

@@ -0,0 +1,78 @@
+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 = {
+  key: 0,
+  class: "multi-resolution"
+}, b = ["data-resolution"], z = /* @__PURE__ */ w({
+  __name: "MultiResolution",
+  setup(F) {
+    const { t: l } = N(), { currentLive: a } = B(), {
+      resolutionList: s,
+      currentResolution: r,
+      switchResolution: h,
+      initializeResolution: R
+    } = D(), u = {
+      [n.R360P]: "360P",
+      [n.R540P]: "540P",
+      [n.R720P]: "720P",
+      [n.R1080P]: "1080P"
+    }, i = g(!1), k = () => {
+      i.value = !1;
+    }, C = () => {
+      i.value = !i.value;
+    }, P = async (e) => {
+      var o;
+      e.stopPropagation();
+      const c = (o = e.target) == null ? void 0 : o.dataset.resolution;
+      if (c) {
+        const m = Number(c);
+        if (s.value.includes(m)) {
+          if (i.value = !1, m === r.value)
+            return;
+          await h(m);
+        }
+      }
+    };
+    return y(() => {
+      I(
+        () => {
+          var e;
+          return (e = a.value) == null ? void 0 : e.liveId;
+        },
+        async () => {
+          var e;
+          (e = a.value) != null && e.liveId && await R(a.value.liveId);
+        },
+        {
+          immediate: !0
+        }
+      );
+    }), (e, c) => t(s).length > 0 ? f((p(), d("span", O, [
+      f(v("span", {
+        class: "multi-resolution-list",
+        onClick: P
+      }, [
+        (p(!0), d(S, null, M(t(s), (o) => (p(), d("span", {
+          key: o,
+          class: "multi-resolution-item",
+          "data-resolution": o
+        }, _(t(l)(u[o])), 9, b))), 128))
+      ], 512), [
+        [x, i.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)
+    ])), [
+      [t(V), k]
+    ]) : L("", !0);
+  }
+}), H = /* @__PURE__ */ E(z, [["__scopeId", "data-v-013ca8f7"]]);
+export {
+  H as default
+};

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

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