tuikit-atomicx-vue3 3.4.2 → 4.3.0

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

@@ -1,157 +1,161 @@
-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 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 { 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({
   __name: "PlayerControl",
   props: {
     isLandscapeStyleMode: { type: Boolean }
   },
-  setup(g) {
+  setup(I) {
     const {
-      isPlaying: f,
-      isFullscreen: _,
+      isPlaying: h,
+      isFullscreen: y,
       isPictureInPicture: P,
+      currentVolume: p,
       pause: b,
       resume: S,
       requestPictureInPicture: x,
       exitPictureInPicture: A,
-      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();
+      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 = () => {
+      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 || me({
-        type: fe.ERROR,
+      P.value ? e = await A() : e = await x(), e || fe({
+        type: he.ERROR,
         message: l("The system does not support picture-in-picture mode")
       });
-    }, N = () => {
-      console.log("handleFullscreen"), _.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 = () => {
+      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);
     }, E = () => {
-      i(), r.value = !0;
+      u(), r.value = !0;
     }, T = () => {
-      v();
-    }, X = () => {
-      if (!c && n.value) {
+      m();
+    }, Y = () => {
+      if (!a && n.value) {
         const { parentElement: e } = n.value;
         e && (e.addEventListener("mouseover", E), e.addEventListener("mouseout", T));
       }
-    }, Y = () => {
-      if (!c && n.value) {
+    }, q = () => {
+      if (!a && 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 = d(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;
-    }, 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();
+      u(), m();
+    }, J = () => {
+      r.value = !r.value, r.value && m();
     }, 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();
+        u();
         return;
       }
-    }, I = (e) => {
-      if (!d.value)
+    }, 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() : r.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);
-    }, Z = () => {
-      Q(), Y(), i();
+      a && (document.addEventListener("touchstart", L, !0), document.addEventListener("touchmove", w, !0), document.addEventListener("touchend", g, !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();
     };
-    return te(() => {
-      J(), X();
-    }), oe(() => {
-      Z(), V();
-    }), (e, t) => (C(), p(ne, { name: "player-control" }, {
-      default: se(() => [
-        le(s("div", {
+    return oe(() => {
+      Q(), Y();
+    }), ne(() => {
+      $(), k();
+    }), (e, t) => (_(), C(se, { name: "player-control" }, {
+      default: le(() => [
+        re(s("div", {
           ref_key: "playerControlRef",
           ref: n,
-          class: re([
+          class: ae([
             "playback-controls",
-            o(c) ? "mobile-mode" : "pc-mode",
-            { "mobile-landscape-mode": B.isLandscapeStyleMode }
+            o(a) ? "mobile-mode" : "pc-mode",
+            { "mobile-landscape-mode": R.isLandscapeStyleMode }
           ])
         }, [
-          s("div", ye, [
+          s("div", Te, [
             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: D
             }, [
-              o(f) ? (C(), p(o(ue), {
+              o(h) ? (_(), C(o(ie), {
                 key: 0,
                 size: "20"
-              })) : (C(), p(o(ie), {
+              })) : (_(), C(o(de), {
                 key: 1,
                 size: "20"
               }))
-            ], 8, Ee),
+            ], 8, Le),
             t[0] || (t[0] = s("div", { class: "center-controls" }, null, -1)),
-            s("div", Te, [
-              m(pe),
-              s("span", Le, [
-                m($, {
+            s("div", we, [
+              f(Ce, { onResolutionChange: O }),
+              s("span", ge, [
+                f(ee, {
                   class: "audio-control-icon",
                   "icon-size": 20,
-                  "enable-volume-control": D(),
-                  onVolumeChange: U,
-                  onMutedChange: W
+                  "enable-volume-control": z(),
+                  onVolumeChange: X,
+                  onMutedChange: Z
                 }, null, 8, ["enable-volume-control"])
               ]),
               s("span", {
                 class: "control-btn",
                 title: o(P) ? o(l)("Exit Picture in Picture") : o(l)("Picture in Picture"),
-                onClick: O
+                onClick: N
               }, [
-                m(o(de), { size: "20" })
-              ], 8, we),
+                f(o(ve), { size: "20" })
+              ], 8, Me),
               s("span", {
                 class: "control-btn fullscreen-btn",
-                title: o(_) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
-                onClick: N
+                title: o(y) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
+                onClick: U
               }, [
-                m(o(ve), { size: "20" })
+                f(o(me), { size: "20" })
               ], 8, Ie)
             ])
           ])
@@ -162,7 +166,7 @@ const ye = { class: "control-buttons" }, Ee = ["title"], Te = { class: "right-co
       _: 1
     }));
   }
-}), Re = /* @__PURE__ */ Pe(ge, [["__scopeId", "data-v-a2e1bd41"]]);
+}), Ue = /* @__PURE__ */ Ee(Se, [["__scopeId", "data-v-22a5ed9e"]]);
 export {
-  Re as default
+  Ue as default
 };