tuikit-atomicx-vue3 4.5.2 → 4.5.4

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

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