tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

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

@@ -1,76 +1,76 @@
-import ee from "./AudioControl.js";
-import { defineComponent as te, ref as d, onMounted as oe, onBeforeUnmount as ne, createBlock as C, openBlock as _, Transition as se, withCtx as le, withDirectives as re, createElementVNode as s, normalizeClass as ae, unref as o, createVNode as f, vShow as ce } from "vue";
-import { useUIKit as ue, IconPause as ie, IconPlay as de, IconPictureInPicture as ve, IconFullScreen as me, TUIToast as fe, TOAST_TYPE as he } from "@tencentcloud/uikit-base-component-vue3";
+import $ from "./AudioControl.js";
+import { defineComponent as ee, ref as v, onMounted as te, onBeforeUnmount as oe, createBlock as p, openBlock as f, Transition as ne, withCtx as se, withDirectives as le, createElementVNode as s, normalizeClass as ce, unref as o, createVNode as m, vShow as re } from "vue";
+import { useUIKit as ue, IconPause as ae, IconPlay as ie, IconPictureInPicture as de, IconFullScreen as ve, TUIToast as me, TOAST_TYPE as he } from "@tencentcloud/uikit-base-component-vue3";
 import { usePlayerControlState as pe } from "./PlayerControlState.js";
-import Ce from "./MultiResolution.js";
-import { isSafariBrowser as _e, isFirefoxBrowser as ye } from "./utils/deviceDetection.js";
-import { waitForVideoMounted as Pe } from "./utils/domHelpers.js";
-import { isMobile as a } from "../../../utils/env.js";
-import { _ as Ee } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const Te = { class: "control-buttons" }, Le = ["title"], we = { class: "right-controls" }, ge = { class: "control-btn audio-control-btn" }, Me = ["title"], Ie = ["title"], be = 3e3, Se = /* @__PURE__ */ te({
+import fe from "./MultiResolution.js";
+import { isMobile as r } from "../../../utils/env.js";
+import { _ as Ce } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const _e = { class: "control-buttons" }, Pe = ["title"], ye = { class: "right-controls" }, Ee = { class: "control-btn audio-control-btn" }, Te = ["title"], Le = ["title"], Me = 3e3, Ie = /* @__PURE__ */ ee({
   __name: "PlayerControl",
   props: {
     isLandscapeStyleMode: { type: Boolean }
   },
-  setup(I) {
+  setup(g) {
     const {
+      isMuted: C,
       isPlaying: h,
-      isFullscreen: y,
+      isFullscreen: _,
       isPictureInPicture: P,
-      currentVolume: p,
+      currentVolume: w,
       pause: b,
       resume: S,
       requestPictureInPicture: x,
       exitPictureInPicture: A,
-      requestFullscreen: F,
-      exitFullscreen: V,
-      setVolume: v,
-      cleanup: k
-    } = pe(), R = I, { t: l } = ue(), B = d(!1), n = d(), r = d(!1), c = d(null), z = () => a ? !(_e() || ye()) : !0, D = () => {
+      requestFullscreen: k,
+      exitFullscreen: F,
+      setVolume: V,
+      setMute: z,
+      cleanup: D
+    } = pe(), R = g, { t: l } = ue(), n = v(), c = v(!1), u = v(null), B = () => {
       h.value ? b() : S();
     }, O = async () => {
-      await Pe() && await v(p.value);
-    }, N = async () => {
       let e = !1;
-      P.value ? e = await A() : e = await x(), e || fe({
+      P.value ? e = await A() : e = await x(), e || me({
         type: he.ERROR,
         message: l("The system does not support picture-in-picture mode")
       });
-    }, U = () => {
-      console.log("handleFullscreen"), y.value ? V() : F();
-    }, X = async (e) => {
-      p.value = e, a && m(), await v(e);
-    }, m = () => {
-      u(), c.value = window.setTimeout(() => {
-        r.value = !1, c.value = null;
-      }, be);
-    }, u = () => {
-      c.value && (clearTimeout(c.value), c.value = null);
+    }, N = () => {
+      console.log("handleFullscreen"), _.value ? F() : k();
+    }, U = async (e) => {
+      r && d(), await V(e);
+    }, X = async () => {
+      await z(!C.value);
+    }, d = () => {
+      a(), u.value = window.setTimeout(() => {
+        c.value = !1, u.value = null;
+      }, Me);
+    }, a = () => {
+      u.value && (clearTimeout(u.value), u.value = null);
+    }, y = () => {
+      a(), c.value = !0;
     }, E = () => {
-      u(), r.value = !0;
-    }, T = () => {
-      m();
+      d();
     }, Y = () => {
-      if (!a && n.value) {
+      if (!r && n.value) {
         const { parentElement: e } = n.value;
-        e && (e.addEventListener("mouseover", E), e.addEventListener("mouseout", T));
+        e && (e.addEventListener("mouseover", y), e.addEventListener("mouseout", E));
       }
     }, q = () => {
-      if (!a && n.value) {
+      if (!r && n.value) {
         const { parentElement: e } = n.value;
-        e && (e.removeEventListener("mouseover", E), e.removeEventListener("mouseout", T));
+        e && (e.removeEventListener("mouseover", y), e.removeEventListener("mouseout", E));
       }
-    }, i = d(null), H = (e, t) => Math.sqrt(Math.pow(t.clientX - e.x, 2) + Math.pow(t.clientY - e.y, 2)), K = (e) => {
+    }, i = v(null), H = (e, t) => Math.sqrt(Math.pow(t.clientX - e.x, 2) + Math.pow(t.clientY - e.y, 2)), K = (e) => {
       var t;
       return ((t = n.value) == null ? void 0 : t.contains(e)) || !1;
     }, j = (e) => {
       const t = document.getElementById("live-core-view-container");
       return (t == null ? void 0 : t.contains(e)) || !1;
     }, G = () => {
-      u(), m();
+      a(), d();
     }, J = () => {
-      r.value = !r.value, r.value && m();
-    }, L = (e) => {
+      c.value = !c.value, c.value && d();
+    }, T = (e) => {
       if (e.touches.length === 1) {
         const t = e.touches[0];
         i.value = {
@@ -78,12 +78,12 @@ const Te = { class: "control-buttons" }, Le = ["title"], we = { class: "right-co
           y: t.clientY
         };
       }
-    }, w = (e) => {
+    }, L = (e) => {
       if (n.value && n.value.contains(e.target)) {
-        u();
+        a();
         return;
       }
-    }, g = (e) => {
+    }, M = (e) => {
       if (!i.value)
         return;
       const t = e.changedTouches[0];
@@ -91,82 +91,81 @@ const Te = { class: "control-buttons" }, Le = ["title"], we = { class: "right-co
         i.value = null;
         return;
       }
-      const M = e.target;
-      K(M) ? G() : j(M) ? J() : r.value = !1, i.value = null;
+      const I = e.target;
+      K(I) ? G() : j(I) ? J() : c.value = !1, i.value = null;
     }, Q = () => {
-      a && (document.addEventListener("touchstart", L, !0), document.addEventListener("touchmove", w, !0), document.addEventListener("touchend", g, !0));
+      r && (document.addEventListener("touchstart", T, !0), document.addEventListener("touchmove", L, !0), document.addEventListener("touchend", M, !0));
     }, W = () => {
-      a && (document.removeEventListener("touchstart", L, !0), document.removeEventListener("touchmove", w, !0), document.removeEventListener("touchend", g, !0));
-    }, Z = async (e) => {
-      B.value = e, e ? await v(0) : await v(p.value);
-    }, $ = () => {
-      W(), q(), u();
+      r && (document.removeEventListener("touchstart", T, !0), document.removeEventListener("touchmove", L, !0), document.removeEventListener("touchend", M, !0));
+    }, Z = () => {
+      W(), q(), a();
     };
-    return oe(() => {
+    return te(() => {
       Q(), Y();
-    }), ne(() => {
-      $(), k();
-    }), (e, t) => (_(), C(se, { name: "player-control" }, {
-      default: le(() => [
-        re(s("div", {
+    }), oe(() => {
+      Z(), D();
+    }), (e, t) => (f(), p(ne, { name: "player-control" }, {
+      default: se(() => [
+        le(s("div", {
           ref_key: "playerControlRef",
           ref: n,
-          class: ae([
+          class: ce([
             "playback-controls",
-            o(a) ? "mobile-mode" : "pc-mode",
+            o(r) ? "mobile-mode" : "pc-mode",
             { "mobile-landscape-mode": R.isLandscapeStyleMode }
           ])
         }, [
-          s("div", Te, [
+          s("div", _e, [
             s("span", {
               class: "control-btn play-pause-btn",
               title: o(h) ? o(l)("Pause") : o(l)("Play"),
-              onClick: D
+              onClick: B
             }, [
-              o(h) ? (_(), C(o(ie), {
+              o(h) ? (f(), p(o(ae), {
                 key: 0,
                 size: "20"
-              })) : (_(), C(o(de), {
+              })) : (f(), p(o(ie), {
                 key: 1,
                 size: "20"
               }))
-            ], 8, Le),
+            ], 8, Pe),
             t[0] || (t[0] = s("div", { class: "center-controls" }, null, -1)),
-            s("div", we, [
-              f(Ce, { onResolutionChange: O }),
-              s("span", ge, [
-                f(ee, {
+            s("div", ye, [
+              m(fe),
+              s("span", Ee, [
+                m($, {
                   class: "audio-control-icon",
                   "icon-size": 20,
-                  "enable-volume-control": z(),
-                  onVolumeChange: X,
-                  onMutedChange: Z
-                }, null, 8, ["enable-volume-control"])
+                  volume: o(w),
+                  "is-muted": o(C),
+                  onVolumeChange: U,
+                  onMuteChange: X
+                }, null, 8, ["volume", "is-muted"])
               ]),
               s("span", {
                 class: "control-btn",
                 title: o(P) ? o(l)("Exit Picture in Picture") : o(l)("Picture in Picture"),
-                onClick: N
+                onClick: O
               }, [
-                f(o(ve), { size: "20" })
-              ], 8, Me),
+                m(o(de), { size: "20" })
+              ], 8, Te),
               s("span", {
                 class: "control-btn fullscreen-btn",
-                title: o(y) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
-                onClick: U
+                title: o(_) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
+                onClick: N
               }, [
-                f(o(me), { size: "20" })
-              ], 8, Ie)
+                m(o(ve), { size: "20" })
+              ], 8, Le)
             ])
           ])
         ], 2), [
-          [ce, r.value]
+          [re, c.value]
         ])
       ]),
       _: 1
     }));
   }
-}), Ue = /* @__PURE__ */ Ee(Se, [["__scopeId", "data-v-22a5ed9e"]]);
+}), ze = /* @__PURE__ */ Ce(Ie, [["__scopeId", "data-v-b49684d0"]]);
 export {
-  Ue as default
+  ze as default
 };

package/dist/components/LiveView/PlayerControl/PlayerControlState.d.ts

@@ -7,10 +7,10 @@ export declare enum FillMode {
     FILL = "fill"
 }
 export declare enum Resolution {
-    R360P = 1,
-    R540P = 2,
-    R720P = 3,
-    R1080P = 4
+    R360P,
+    R540P,
+    R720P,
+    R1080P
 }
 export interface PlayerControlState {
     isPlaying: Ref<boolean>;
@@ -19,6 +19,7 @@ export interface PlayerControlState {
     isLandscapeStyleMode: Ref<boolean>;
     isPictureInPicture: Ref<boolean>;
     currentVolume: Ref<number>;
+    isMuted: Ref<boolean>;
     resolutionList: Ref<Resolution[]>;
     currentResolution: Ref<Resolution | undefined>;
     resume: () => Promise<boolean>;
@@ -28,9 +29,8 @@ export interface PlayerControlState {
     requestPictureInPicture: () => Promise<boolean>;
     exitPictureInPicture: () => Promise<boolean>;
     switchResolution: (resolution: Resolution) => Promise<boolean>;
-    getResolutionList: (roomId: string) => Promise<Resolution[]>;
-    initializeResolution: (roomId: string, applyResolution?: boolean) => Promise<void>;
     setVolume: (volume: number) => Promise<boolean>;
+    setMute: (muted: boolean) => Promise<boolean>;
     changeFillMode: (fillMode: FillMode) => Promise<boolean>;
     cleanup: () => void;
 }