tuikit-atomicx-vue3 3.3.1 → 3.3.2

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

@@ -0,0 +1,279 @@
+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({
+  __name: "PlayerControl",
+  props: {
+    isLandscapeStyleMode: { type: Boolean }
+  },
+  setup(__props) {
+    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
+        };
+      }
+    };
+    const handleScreenTouchMove = (event) => {
+      if (playerControlRef.value && playerControlRef.value.contains(event.target)) {
+        stopAutoHideControl();
+        return;
+      }
+    };
+    const handleScreenTouchEnd = (event) => {
+      if (!touchStartCoords.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;
+        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
+              }, [
+                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)
+              ])
+            ])
+          ], 2), [
+            [vShow, showControls.value]
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const PlayerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-28ed6eb9"]]);
+export {
+  PlayerControl as default
+};

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

@@ -0,0 +1,15 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isLandscapeStyleMode?: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isLandscapeStyleMode?: boolean;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,29 @@
+import { Ref } from 'vue';
+import { FullscreenResult } from './utils/fullscreenManager';
+
+export declare enum FillMode {
+    CONTAIN = "contain",
+    COVER = "cover",
+    FILL = "fill"
+}
+export interface PlayerControlState {
+    isPlaying: Ref<boolean>;
+    currentFillMode: Ref<FillMode>;
+    isFullscreen: Ref<boolean>;
+    isLandscapeStyleMode: Ref<boolean>;
+    isPictureInPicture: Ref<boolean>;
+    currentVolume: Ref<number>;
+    resume: () => Promise<boolean>;
+    pause: () => Promise<boolean>;
+    requestFullscreen: () => Promise<FullscreenResult>;
+    exitFullscreen: () => Promise<FullscreenResult>;
+    requestPictureInPicture: () => Promise<boolean>;
+    exitPictureInPicture: () => Promise<boolean>;
+    setVolume: (volume: number) => Promise<boolean>;
+    changeFillMode: (fillMode: FillMode) => Promise<boolean>;
+    cleanup: () => void;
+}
+/**
+ * Player control state management hook
+ */
+export declare function usePlayerControlState(): PlayerControlState;