tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

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

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

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

@@ -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;
 }