tuikit-atomicx-vue3 3.3.4 → 3.4.1

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

@@ -1,252 +1,129 @@
-import { defineComponent, ref, computed, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, withDirectives, unref, createBlock, normalizeClass, toDisplayString, vShow, toRaw } from "vue";
-import { useUIKit, IconSpeakerOff, IconSpeakerOn } from "@tencentcloud/uikit-base-component-vue3";
-import { isMobile } from "../../../utils/env.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = ["title"];
-const _hoisted_2 = { class: "volume-slider-container" };
-const _hoisted_3 = { class: "volume-slider-wrapper-inner" };
-const _hoisted_4 = { class: "slider-track" };
-const _hoisted_5 = { class: "volume-value" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+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 { 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: true }
+    enableVolumeControl: { type: Boolean, default: !0 }
   },
   emits: ["volume-change", "muted-change"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { t } = useUIKit();
-    const volumeState = ref({
+  setup(T, { emit: w }) {
+    const o = T, m = w, { t: _ } = Z(), t = v({
       current: 1,
       previous: 1
-    });
-    const isMuted = ref(false);
-    const isVolumeSliderVisible = ref(false);
-    const isDragging = ref(false);
-    const volumeSliderElement = ref();
-    const volumeSliderAutoHideTimer = ref(null);
-    const AUTO_HIDE_DELAY = {
+    }), u = v(!1), l = v(!1), a = v(!1), V = v(), s = v(null), E = {
       PC: 500,
       // 0.5 seconds for PC
       MOBILE: 3e3
       // 3 seconds for mobile
-    };
-    const volumePercentage = computed(() => {
-      if (props.enableVolumeControl === false) {
-        return isMuted.value ? 0 : 100;
-      }
-      return Math.round(volumeState.value.current * 100);
-    });
-    const iconSizeStyle = computed(() => ({
-      width: `${props.iconSize || 20}px`,
-      height: `${props.iconSize || 20}px`
-    }));
-    const updateVolume = (newVolume) => {
-      volumeState.value.previous = toRaw(volumeState.value.current);
-      volumeState.value.current = newVolume;
-      isMuted.value = newVolume === 0;
-      emit("volume-change", newVolume);
-    };
-    const toggleMute = () => {
-      if (isMuted.value) {
-        isMuted.value = false;
-        volumeState.value.current = volumeState.value.previous || 0.2;
-        emit("muted-change", false);
-        emit("volume-change", volumeState.value.current);
-      } else {
-        isMuted.value = true;
-        volumeState.value.previous = volumeState.value.current;
-        volumeState.value.current = 0;
-        emit("muted-change", true);
-        emit("volume-change", volumeState.value.current);
-      }
-    };
-    const handleVolumeIconClick = () => {
-      if (props.enableVolumeControl === false) {
-        toggleMute();
-      } else {
-        if (isMobile) {
-          isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
-          if (isVolumeSliderVisible.value) {
-            startVolumeSliderAutoHideTimer();
-          } else {
-            stopVolumeSliderAutoHideTimer();
-          }
-        } else {
-          toggleMute();
-        }
-      }
-    };
-    const startVolumeSliderAutoHideTimer = () => {
-      stopVolumeSliderAutoHideTimer();
-      const delay = isMobile ? AUTO_HIDE_DELAY.MOBILE : AUTO_HIDE_DELAY.PC;
-      volumeSliderAutoHideTimer.value = window.setTimeout(() => {
-        if (props.enableVolumeControl) {
-          isVolumeSliderVisible.value = false;
-        }
-      }, delay);
-    };
-    const stopVolumeSliderAutoHideTimer = () => {
-      if (volumeSliderAutoHideTimer.value) {
-        clearTimeout(volumeSliderAutoHideTimer.value);
-        volumeSliderAutoHideTimer.value = null;
-      }
-    };
-    const handleMouseEnter = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      isVolumeSliderVisible.value = true;
-      startVolumeSliderAutoHideTimer();
-    };
-    const handleMouseLeave = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      if (!isDragging.value) {
-        startVolumeSliderAutoHideTimer();
-      }
-    };
-    const calculateVolumeFromPosition = (clientY, target) => {
-      const rect = target.getBoundingClientRect();
-      const clickY = clientY - rect.top;
-      const height = rect.height;
-      return Math.max(0, Math.min(1, 1 - clickY / height));
-    };
-    const addGlobalEventListeners = () => {
-      document.addEventListener("mousemove", handleSliderMove);
-      document.addEventListener("mouseup", handleSliderEnd);
-      document.addEventListener("touchmove", handleSliderMove);
-      document.addEventListener("touchend", handleSliderEnd);
-    };
-    const removeGlobalEventListeners = () => {
-      document.removeEventListener("mousemove", handleSliderMove);
-      document.removeEventListener("mouseup", handleSliderEnd);
-      document.removeEventListener("touchmove", handleSliderMove);
-      document.removeEventListener("touchend", handleSliderEnd);
-    };
-    const startDragging = () => {
-      isDragging.value = true;
-      if (props.enableVolumeControl) {
-        stopVolumeSliderAutoHideTimer();
-      }
-      addGlobalEventListeners();
-    };
-    const handleSliderMove = (event) => {
-      if (!isDragging.value) return;
-      event.preventDefault();
-      let clientY;
-      if (event instanceof MouseEvent) {
-        clientY = event.clientY;
-      } else {
-        clientY = event.touches[0].clientY;
-      }
-      const volumeValue = calculateVolumeFromPosition(clientY, volumeSliderElement.value);
-      updateVolume(volumeValue);
-    };
-    const handleSliderEnd = () => {
-      isDragging.value = false;
-      if (props.enableVolumeControl && isVolumeSliderVisible.value) {
-        startVolumeSliderAutoHideTimer();
-      }
-      removeGlobalEventListeners();
-    };
-    const handleSliderMouseDown = (event) => {
-      if (props.enableVolumeControl === false) return;
-      startDragging();
-      event.preventDefault();
-    };
-    const handleSliderTouchStart = (event) => {
-      if (props.enableVolumeControl === false) return;
-      startDragging();
-      event.preventDefault();
-    };
-    const handleVolumeSliderAreaClick = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) {
-        isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
-        if (isVolumeSliderVisible.value) {
-          startVolumeSliderAutoHideTimer();
-        } else {
-          stopVolumeSliderAutoHideTimer();
-        }
-      }
-    };
-    const handleVolumeSliderMouseEnter = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      stopVolumeSliderAutoHideTimer();
-    };
-    const handleVolumeSliderMouseLeave = () => {
-      if (props.enableVolumeControl === false) return;
-      if (isMobile) return;
-      if (!isDragging.value) {
-        startVolumeSliderAutoHideTimer();
-      }
-    };
-    onUnmounted(() => {
-      removeGlobalEventListeners();
-      if (volumeSliderAutoHideTimer.value) {
-        clearTimeout(volumeSliderAutoHideTimer.value);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "audio-control",
-        style: normalizeStyle(iconSizeStyle.value),
-        onMouseenter: handleMouseEnter,
-        onMouseleave: handleMouseLeave
+    }, b = 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 ? E.MOBILE : E.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, V.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) => (g(), j("div", {
+      class: "audio-control",
+      style: C(z.value),
+      onMouseenter: B,
+      onMouseleave: x
+    }, [
+      n("span", {
+        class: "control-btn volume-btn",
+        title: u.value ? S(_)("Unmute") : S(_)("Mute"),
+        onClick: I
       }, [
-        createElementVNode("span", {
-          class: "control-btn volume-btn",
-          title: isMuted.value ? unref(t)("Unmute") : unref(t)("Mute"),
-          onClick: handleVolumeIconClick
+        u.value ? (g(), D(S(ee), {
+          key: 0,
+          size: "20"
+        })) : (g(), D(S(oe), {
+          key: 1,
+          size: "20"
+        }))
+      ], 8, le),
+      q(n("div", ne, [
+        n("div", {
+          class: "volume-slider-wrapper",
+          onMouseenter: $,
+          onMouseleave: G
         }, [
-          isMuted.value ? (openBlock(), createBlock(unref(IconSpeakerOff), {
-            key: 0,
-            size: "20"
-          })) : (openBlock(), createBlock(unref(IconSpeakerOn), {
-            key: 1,
-            size: "20"
-          }))
-        ], 8, _hoisted_1),
-        withDirectives(createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", {
-            class: "volume-slider-wrapper",
-            onMouseenter: handleVolumeSliderMouseEnter,
-            onMouseleave: handleVolumeSliderMouseLeave
-          }, [
-            createElementVNode("div", _hoisted_3, [
-              createElementVNode("div", {
-                ref_key: "volumeSliderElement",
-                ref: volumeSliderElement,
-                class: "custom-volume-slider",
-                onMousedown: handleSliderMouseDown,
-                onTouchstart: handleSliderTouchStart,
-                onClick: handleVolumeSliderAreaClick
-              }, [
-                createElementVNode("div", _hoisted_4, [
-                  createElementVNode("div", {
-                    class: "slider-progress",
-                    style: normalizeStyle({ height: `${volumePercentage.value}%` })
-                  }, null, 4),
-                  createElementVNode("div", {
-                    class: normalizeClass(["slider-thumb", { "no-transition": isDragging.value }]),
-                    style: normalizeStyle({ bottom: `${volumePercentage.value}%` })
-                  }, null, 6)
-                ])
-              ], 544)
-            ]),
-            createElementVNode("div", _hoisted_5, toDisplayString(volumePercentage.value), 1)
-          ], 32)
-        ], 512), [
-          [vShow, isVolumeSliderVisible.value]
-        ])
-      ], 36);
-    };
+          n("div", ue, [
+            n("div", {
+              ref_key: "volumeSliderElement",
+              ref: V,
+              class: "custom-volume-slider",
+              onMousedown: H,
+              onTouchstart: P,
+              onClick: U
+            }, [
+              n("div", re, [
+                n("div", {
+                  class: "slider-progress",
+                  style: C({ height: `${b.value}%` })
+                }, null, 4),
+                n("div", {
+                  class: J(["slider-thumb", { "no-transition": a.value }]),
+                  style: C({ bottom: `${b.value}%` })
+                }, null, 6)
+              ])
+            ], 544)
+          ]),
+          n("div", ae, Q(b.value), 1)
+        ], 32)
+      ], 512), [
+        [W, l.value]
+      ])
+    ], 36));
   }
-});
-const AudioControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22bb0b88"]]);
+}), de = /* @__PURE__ */ te(se, [["__scopeId", "data-v-22bb0b88"]]);
 export {
-  AudioControl as default
+  de as default
 };

package/dist/components/LiveCoreView/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 b } from "vue";
+import { useUIKit as x } from "@tencentcloud/uikit-base-component-vue3";
+import N from "../../../directives/vClickOutside.js";
+import { useLiveState as V } from "../../../states/LiveState/index.js";
+import { usePlayerControlState as B, Resolution as n } from "./PlayerControlState.js";
+import { _ as D } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const E = {
+  key: 0,
+  class: "multi-resolution"
+}, O = ["data-resolution"], z = /* @__PURE__ */ w({
+  __name: "MultiResolution",
+  setup(F) {
+    const { t: l } = x(), { currentLive: a } = V(), {
+      resolutionList: s,
+      currentResolution: r,
+      switchResolution: h,
+      initializeResolution: R
+    } = B(), 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", E, [
+      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, O))), 128))
+      ], 512), [
+        [b, 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(N), k]
+    ]) : L("", !0);
+  }
+}), H = /* @__PURE__ */ D(z, [["__scopeId", "data-v-7fa16bb5"]]);
+export {
+  H as default
+};

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