tuikit-atomicx-vue3 3.3.3 → 3.4.1

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

@@ -1,279 +1,168 @@
-import AudioControl from "./AudioControl.js";
-import { defineComponent, ref, onMounted, onBeforeUnmount, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, unref, createVNode, vShow } from "vue";
-import { useUIKit, IconPause, IconPlay, IconPictureInPicture, IconFullScreen, TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
-import { usePlayerControlState } from "./PlayerControlState.js";
-import { isSafariBrowser, isFirefoxBrowser } from "./utils/deviceDetection.js";
-import { isMobile } from "../../../utils/env.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "control-buttons" };
-const _hoisted_2 = ["title"];
-const _hoisted_3 = { class: "right-controls" };
-const _hoisted_4 = { class: "control-btn audio-control-btn" };
-const _hoisted_5 = ["title"];
-const _hoisted_6 = ["title"];
-const AUTO_HIDE_DELAY = 3e3;
-const _sfc_main = /* @__PURE__ */ defineComponent({
+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({
   __name: "PlayerControl",
   props: {
     isLandscapeStyleMode: { type: Boolean }
   },
-  setup(__props) {
+  setup(g) {
     const {
-      isPlaying,
-      isFullscreen,
-      isPictureInPicture,
-      pause,
-      resume,
-      requestPictureInPicture,
-      exitPictureInPicture,
-      requestFullscreen,
-      exitFullscreen,
-      setVolume,
-      cleanup
-    } = usePlayerControlState();
-    const props = __props;
-    const { t } = useUIKit();
-    const currentVolume = ref(1);
-    const isMuted = ref(false);
-    const playerControlRef = ref();
-    const showControls = ref(false);
-    const hideTimeout = ref(null);
-    const isEnableVolumeControl = () => {
-      if (!isMobile) return true;
-      if (isSafariBrowser()) return false;
-      if (isFirefoxBrowser()) return false;
-      return true;
-    };
-    const handlePlayPause = () => {
-      if (isPlaying.value) {
-        pause();
-      } else {
-        resume();
-      }
-    };
-    const handlePictureInPicture = async () => {
-      let flag = false;
-      if (isPictureInPicture.value) {
-        flag = await exitPictureInPicture();
-      } else {
-        flag = await requestPictureInPicture();
-      }
-      if (!flag) {
-        TUIToast({
-          type: TOAST_TYPE.ERROR,
-          message: t("The system does not support picture-in-picture mode")
-        });
-      }
-    };
-    const handleFullscreen = () => {
-      console.log("handleFullscreen");
-      if (isFullscreen.value) {
-        exitFullscreen();
-      } else {
-        requestFullscreen();
-      }
-    };
-    const handleVolumeChange = async (volume) => {
-      currentVolume.value = volume;
-      if (isMobile) {
-        startAutoHideControl();
-      }
-      await setVolume(volume);
-    };
-    const startAutoHideControl = () => {
-      stopAutoHideControl();
-      hideTimeout.value = window.setTimeout(() => {
-        showControls.value = false;
-        hideTimeout.value = null;
-      }, AUTO_HIDE_DELAY);
-    };
-    const stopAutoHideControl = () => {
-      if (hideTimeout.value) {
-        clearTimeout(hideTimeout.value);
-        hideTimeout.value = null;
-      }
-    };
-    const handleMouseEnter = () => {
-      stopAutoHideControl();
-      showControls.value = true;
-    };
-    const handleMouseLeave = () => {
-      startAutoHideControl();
-    };
-    const setupParentMouseListener = () => {
-      if (!isMobile && playerControlRef.value) {
-        const parentElement = playerControlRef.value.parentElement;
-        if (parentElement) {
-          parentElement.addEventListener("mouseenter", handleMouseEnter);
-          parentElement.addEventListener("mouseleave", handleMouseLeave);
-        }
-      }
-    };
-    const removeParentMouseListener = () => {
-      if (!isMobile && playerControlRef.value) {
-        const parentElement = playerControlRef.value.parentElement;
-        if (parentElement) {
-          parentElement.removeEventListener("mouseenter", handleMouseEnter);
-          parentElement.removeEventListener("mouseleave", handleMouseLeave);
-        }
-      }
-    };
-    const touchStartCoords = ref(null);
-    const calculateTouchDistance = (start, end) => {
-      return Math.sqrt(Math.pow(end.clientX - start.x, 2) + Math.pow(end.clientY - start.y, 2));
-    };
-    const isPlayerControlTarget = (target) => {
-      var _a;
-      return ((_a = playerControlRef.value) == null ? void 0 : _a.contains(target)) || false;
-    };
-    const isLiveCoreViewTarget = (target) => {
-      const container = document.getElementById("live-core-view-container");
-      return (container == null ? void 0 : container.contains(target)) || false;
-    };
-    const handlePlayerControlTouch = () => {
-      stopAutoHideControl();
-      startAutoHideControl();
-    };
-    const handleLiveCoreViewTouch = () => {
-      showControls.value = !showControls.value;
-      if (showControls.value) {
-        startAutoHideControl();
-      }
-    };
-    const handleScreenTouchStart = (event) => {
-      if (event.touches.length === 1) {
-        const touch = event.touches[0];
-        touchStartCoords.value = {
-          x: touch.clientX,
-          y: touch.clientY
+      isPlaying: f,
+      isFullscreen: _,
+      isPictureInPicture: 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();
+    }, O = async () => {
+      let e = !1;
+      P.value ? e = await A() : e = await x(), e || me({
+        type: fe.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);
+    }, E = () => {
+      i(), r.value = !0;
+    }, T = () => {
+      v();
+    }, X = () => {
+      if (!c && n.value) {
+        const { parentElement: e } = n.value;
+        e && (e.addEventListener("mouseover", E), e.addEventListener("mouseout", T));
+      }
+    }, Y = () => {
+      if (!c && 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) => {
+      var t;
+      return ((t = n.value) == null ? void 0 : t.contains(e)) || !1;
+    }, K = (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();
+    }, L = (e) => {
+      if (e.touches.length === 1) {
+        const t = e.touches[0];
+        d.value = {
+          x: t.clientX,
+          y: t.clientY
         };
       }
-    };
-    const handleScreenTouchMove = (event) => {
-      if (playerControlRef.value && playerControlRef.value.contains(event.target)) {
-        stopAutoHideControl();
+    }, w = (e) => {
+      if (n.value && n.value.contains(e.target)) {
+        i();
         return;
       }
-    };
-    const handleScreenTouchEnd = (event) => {
-      if (!touchStartCoords.value) {
+    }, I = (e) => {
+      if (!d.value)
         return;
-      }
-      const touchEnd = event.changedTouches[0];
-      const distance = calculateTouchDistance(touchStartCoords.value, touchEnd);
-      const MAX_CLICK_DISTANCE = 20;
-      if (distance > MAX_CLICK_DISTANCE) {
-        touchStartCoords.value = null;
+      const t = e.changedTouches[0];
+      if (q(d.value, t) > 20) {
+        d.value = null;
         return;
       }
-      const target = event.target;
-      if (isPlayerControlTarget(target)) {
-        handlePlayerControlTouch();
-      } else if (isLiveCoreViewTarget(target)) {
-        handleLiveCoreViewTouch();
-      } else {
-        showControls.value = false;
-      }
-      touchStartCoords.value = null;
-    };
-    const setupTouchEventListeners = () => {
-      if (isMobile) {
-        document.addEventListener("touchstart", handleScreenTouchStart, true);
-        document.addEventListener("touchmove", handleScreenTouchMove, true);
-        document.addEventListener("touchend", handleScreenTouchEnd, true);
-      }
-    };
-    const removeTouchEventListeners = () => {
-      if (isMobile) {
-        document.removeEventListener("touchstart", handleScreenTouchStart, true);
-        document.removeEventListener("touchmove", handleScreenTouchMove, true);
-        document.removeEventListener("touchend", handleScreenTouchEnd, true);
-      }
-    };
-    const handleMutedChange = async (muted) => {
-      isMuted.value = muted;
-      if (muted) {
-        await setVolume(0);
-      } else {
-        await setVolume(currentVolume.value);
-      }
-    };
-    const cleanupEventListeners = () => {
-      removeTouchEventListeners();
-      removeParentMouseListener();
-      stopAutoHideControl();
-    };
-    onMounted(() => {
-      setupTouchEventListeners();
-      setupParentMouseListener();
-    });
-    onBeforeUnmount(() => {
-      cleanupEventListeners();
-      cleanup();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, { name: "player-control" }, {
-        default: withCtx(() => [
-          withDirectives(createElementVNode("div", {
-            ref_key: "playerControlRef",
-            ref: playerControlRef,
-            class: normalizeClass([
-              "playback-controls",
-              unref(isMobile) ? "mobile-mode" : "pc-mode",
-              { "mobile-landscape-mode": props.isLandscapeStyleMode }
-            ])
-          }, [
-            createElementVNode("div", _hoisted_1, [
-              createElementVNode("span", {
-                class: "control-btn play-pause-btn",
-                title: unref(isPlaying) ? unref(t)("Pause") : unref(t)("Play"),
-                onClick: handlePlayPause
+      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));
+    }, 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();
+    };
+    return te(() => {
+      J(), X();
+    }), oe(() => {
+      Z(), V();
+    }), (e, t) => (C(), p(ne, { name: "player-control" }, {
+      default: se(() => [
+        le(s("div", {
+          ref_key: "playerControlRef",
+          ref: n,
+          class: re([
+            "playback-controls",
+            o(c) ? "mobile-mode" : "pc-mode",
+            { "mobile-landscape-mode": B.isLandscapeStyleMode }
+          ])
+        }, [
+          s("div", ye, [
+            s("span", {
+              class: "control-btn play-pause-btn",
+              title: o(f) ? o(l)("Pause") : o(l)("Play"),
+              onClick: R
+            }, [
+              o(f) ? (C(), p(o(ue), {
+                key: 0,
+                size: "20"
+              })) : (C(), p(o(ie), {
+                key: 1,
+                size: "20"
+              }))
+            ], 8, Ee),
+            t[0] || (t[0] = s("div", { class: "center-controls" }, null, -1)),
+            s("div", Te, [
+              m(pe),
+              s("span", Le, [
+                m($, {
+                  class: "audio-control-icon",
+                  "icon-size": 20,
+                  "enable-volume-control": D(),
+                  onVolumeChange: U,
+                  onMutedChange: W
+                }, 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
+              }, [
+                m(o(de), { size: "20" })
+              ], 8, we),
+              s("span", {
+                class: "control-btn fullscreen-btn",
+                title: o(_) ? o(l)("Exit Fullscreen") : o(l)("Fullscreen"),
+                onClick: N
               }, [
-                unref(isPlaying) ? (openBlock(), createBlock(unref(IconPause), {
-                  key: 0,
-                  size: "20"
-                })) : (openBlock(), createBlock(unref(IconPlay), {
-                  key: 1,
-                  size: "20"
-                }))
-              ], 8, _hoisted_2),
-              _cache[0] || (_cache[0] = createElementVNode("div", { class: "center-controls" }, null, -1)),
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("span", _hoisted_4, [
-                  createVNode(AudioControl, {
-                    class: "audio-control-icon",
-                    "icon-size": 20,
-                    "enable-volume-control": isEnableVolumeControl(),
-                    onVolumeChange: handleVolumeChange,
-                    onMutedChange: handleMutedChange
-                  }, null, 8, ["enable-volume-control"])
-                ]),
-                createElementVNode("span", {
-                  class: "control-btn",
-                  title: unref(isPictureInPicture) ? unref(t)("Exit Picture in Picture") : unref(t)("Picture in Picture"),
-                  onClick: handlePictureInPicture
-                }, [
-                  createVNode(unref(IconPictureInPicture), { size: "20" })
-                ], 8, _hoisted_5),
-                createElementVNode("span", {
-                  class: "control-btn fullscreen-btn",
-                  title: unref(isFullscreen) ? unref(t)("Exit Fullscreen") : unref(t)("Fullscreen"),
-                  onClick: handleFullscreen
-                }, [
-                  createVNode(unref(IconFullScreen), { size: "20" })
-                ], 8, _hoisted_6)
-              ])
+                m(o(ve), { size: "20" })
+              ], 8, Ie)
             ])
-          ], 2), [
-            [vShow, showControls.value]
           ])
-        ]),
-        _: 1
-      });
-    };
+        ], 2), [
+          [ce, r.value]
+        ])
+      ]),
+      _: 1
+    }));
   }
-});
-const PlayerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28ed6eb9"]]);
+}), Re = /* @__PURE__ */ Pe(ge, [["__scopeId", "data-v-307287f1"]]);
 export {
-  PlayerControl as default
+  Re as default
 };

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

@@ -6,6 +6,12 @@ export declare enum FillMode {
     COVER = "cover",
     FILL = "fill"
 }
+export declare enum Resolution {
+    R360P = 1,
+    R540P = 2,
+    R720P = 3,
+    R1080P = 4
+}
 export interface PlayerControlState {
     isPlaying: Ref<boolean>;
     currentFillMode: Ref<FillMode>;
@@ -13,12 +19,17 @@ export interface PlayerControlState {
     isLandscapeStyleMode: Ref<boolean>;
     isPictureInPicture: Ref<boolean>;
     currentVolume: Ref<number>;
+    resolutionList: Ref<Resolution[]>;
+    currentResolution: Ref<Resolution | undefined>;
     resume: () => Promise<boolean>;
     pause: () => Promise<boolean>;
     requestFullscreen: () => Promise<FullscreenResult>;
     exitFullscreen: () => Promise<FullscreenResult>;
     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>;
     changeFillMode: (fillMode: FillMode) => Promise<boolean>;
     cleanup: () => void;