tuikit-atomicx-vue3 3.3.0 → 3.3.2-beta.1

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

@@ -0,0 +1,27 @@
+import { Ref } from 'vue';
+
+export declare enum FillMode {
+    CONTAIN = "contain",
+    COVER = "cover",
+    FILL = "fill"
+}
+export interface PlayerControlState {
+    isPlaying: Ref<boolean>;
+    currentFillMode: Ref<FillMode>;
+    isFullscreen: Ref<boolean>;
+    isPictureInPicture: Ref<boolean>;
+    currentVolume: Ref<number>;
+    resume: () => Promise<boolean>;
+    pause: () => Promise<boolean>;
+    requestFullscreen: () => Promise<boolean>;
+    exitFullscreen: () => Promise<boolean>;
+    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;

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

@@ -0,0 +1,407 @@
+import { ref, computed, watch } from "vue";
+import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
+import { useLiveState } from "../../../states/LiveState/index.js";
+import { useLiveSeatState } from "../../../states/LiveSeatState/index.js";
+import { TRTCCloud } from "@tencentcloud/tuiroom-engine-js";
+import { getDeviceType, getCurrentOrientation, shouldRotateToLandscapeForFullscreen, hadLandscapeRotationToUndo } from "./utils/deviceDetection.js";
+import { OrientationManager, StyleManager, FullscreenManager, FullscreenMode } from "./utils/fullscreenManager.js";
+import { EventListenerManager, DOMElementGetter } from "./utils/domHelpers.js";
+import { LiveStatus } from "../../../types/live.js";
+var FillMode = /* @__PURE__ */ ((FillMode2) => {
+  FillMode2["CONTAIN"] = "contain";
+  FillMode2["COVER"] = "cover";
+  FillMode2["FILL"] = "fill";
+  return FillMode2;
+})(FillMode || {});
+const isPlaying = ref(true);
+const currentFillMode = ref(
+  "contain"
+  /* CONTAIN */
+);
+const isFullscreen = ref(false);
+const isPictureInPicture = ref(false);
+const currentVolume = ref(1);
+function usePlayerControlState() {
+  const { localLiveStatus } = useLiveState();
+  const { canvas } = useLiveSeatState();
+  const roomEngine = useRoomEngine();
+  const eventManager = new EventListenerManager();
+  const orientationListenerId = `player-control-${Date.now()}`;
+  const isLandscapeStream = computed(
+    () => canvas.value ? canvas.value.width > canvas.value.height : false
+  );
+  const isPortraitStream = computed(
+    () => canvas.value ? canvas.value.width < canvas.value.height : false
+  );
+  const deviceType = getDeviceType();
+  const withErrorHandling = async (operation, operationName, fallbackValue) => {
+    try {
+      return await operation();
+    } catch (error) {
+      console.error(`${operationName} operation failed:`, error);
+      return fallbackValue;
+    }
+  };
+  const syncVolumeState = () => {
+    const video = DOMElementGetter.getVideoElement();
+    if (video) {
+      const actualVolume = video.volume;
+      if (Math.abs(currentVolume.value - actualVolume) > 0.01) {
+        console.log(`Syncing volume state: ${currentVolume.value} -> ${actualVolume}`);
+        currentVolume.value = actualVolume;
+      }
+    }
+  };
+  const syncPlayingState = () => {
+    const video = DOMElementGetter.getVideoElement();
+    if (video) {
+      const actualPlayingState = !video.paused && !video.ended;
+      if (isPlaying.value !== actualPlayingState) {
+        console.log(`Syncing playing state: ${isPlaying.value} -> ${actualPlayingState}`);
+        isPlaying.value = actualPlayingState;
+      }
+    }
+  };
+  const resume = async () => {
+    return withErrorHandling(async () => {
+      const video = DOMElementGetter.getVideoElement();
+      if (!video) {
+        throw new Error("Video element not found");
+      }
+      if (DOMElementGetter.hasTcPlayerElement()) {
+        await video.play();
+      } else {
+        const trtcCloudMap = TRTCCloud.subCloudMap;
+        trtcCloudMap.forEach((trtcCloud) => {
+          const trtc = trtcCloud == null ? void 0 : trtcCloud._trtc;
+          trtc == null ? void 0 : trtc.callExperimentalAPI("resumeRemotePlayer", { userId: "*" });
+        });
+      }
+      isPlaying.value = true;
+      console.log("Video playback resumed");
+      return true;
+    }, "Resume playback", false);
+  };
+  const pause = async () => {
+    return withErrorHandling(async () => {
+      const video = DOMElementGetter.getVideoElement();
+      if (!video) {
+        throw new Error("Video element not found");
+      }
+      if (DOMElementGetter.hasTcPlayerElement()) {
+        await video.pause();
+      } else {
+        const trtcCloudMap = TRTCCloud.subCloudMap;
+        trtcCloudMap.forEach((trtcCloud) => {
+          const trtc = trtcCloud == null ? void 0 : trtcCloud._trtc;
+          trtc == null ? void 0 : trtc.callExperimentalAPI("pauseRemotePlayer", { userId: "*" });
+        });
+      }
+      isPlaying.value = false;
+      console.log("Video playback paused");
+      return true;
+    }, "Pause playback", false);
+  };
+  const handleOrientationChange = (newOrientation) => {
+    if (!isFullscreen.value) {
+      return;
+    }
+    if (!isLandscapeStream.value) {
+      return;
+    }
+    const elements = DOMElementGetter.getAllElements();
+    if (!elements.view) {
+      console.warn("live-core-view element not found for orientation change handling");
+      return;
+    }
+    console.log("Handling orientation change:", {
+      newOrientation,
+      deviceType,
+      isLandscapeStream: isLandscapeStream.value,
+      isFullscreen: isFullscreen.value
+    });
+    StyleManager.smartApplyLandscapeStyles(elements.view, newOrientation);
+  };
+  const requestFullscreen = async () => {
+    return withErrorHandling(async () => {
+      const elements = DOMElementGetter.getAllElements();
+      const validation = DOMElementGetter.validateElements(elements);
+      if (!validation.isValid) {
+        throw new Error(`Missing required DOM elements: ${validation.missingElements.join(", ")}`);
+      }
+      const currentOrientation = getCurrentOrientation();
+      const shouldRotateToLandscape = shouldRotateToLandscapeForFullscreen(deviceType, isLandscapeStream.value);
+      console.log("Request fullscreen:", {
+        deviceType,
+        currentOrientation,
+        streamType: isLandscapeStream.value ? "landscape stream" : isPortraitStream.value ? "portrait stream" : "unknown",
+        shouldRotate: shouldRotateToLandscape,
+        reason: shouldRotateToLandscape ? "Mobile device in portrait with landscape stream" : currentOrientation === "landscape" ? "Already in landscape orientation" : !isLandscapeStream.value ? "Not a landscape stream" : "Desktop device or other reason"
+      });
+      const result = await FullscreenManager.requestFullscreen(
+        elements.container,
+        elements.view,
+        deviceType,
+        isPortraitStream.value,
+        shouldRotateToLandscape
+      );
+      if (result.success) {
+        isFullscreen.value = true;
+        console.log(`Fullscreen request successful (${result.mode})`);
+      } else {
+        console.error("Fullscreen request failed:", result.error);
+      }
+      return result.success;
+    }, "Request fullscreen", false);
+  };
+  const exitFullscreen = async () => {
+    return withErrorHandling(async () => {
+      const elements = DOMElementGetter.getAllElements();
+      if (!elements.view) {
+        throw new Error("live-core-view element not found");
+      }
+      const currentOrientation = getCurrentOrientation();
+      const hadLandscapeRotation = hadLandscapeRotationToUndo(deviceType, isLandscapeStream.value);
+      console.log("Exit fullscreen:", {
+        deviceType,
+        currentOrientation,
+        streamType: isLandscapeStream.value ? "landscape stream" : isPortraitStream.value ? "portrait stream" : "unknown",
+        hadLandscapeRotation,
+        reason: hadLandscapeRotation ? "Mobile device with landscape stream in landscape mode" : currentOrientation === "portrait" ? "Already in portrait orientation" : !isLandscapeStream.value ? "Not a landscape stream" : "Desktop device or other reason"
+      });
+      const result = await FullscreenManager.exitFullscreen(
+        elements.view,
+        deviceType,
+        hadLandscapeRotation
+      );
+      if (result.mode === FullscreenMode.CSS_SIMULATED) {
+        isFullscreen.value = false;
+      }
+      if (result.success) {
+        console.log(`Fullscreen exit successful (${result.mode})`);
+      } else {
+        console.error("Fullscreen exit failed:", result.error);
+      }
+      return result.success;
+    }, "Exit fullscreen", false);
+  };
+  const requestPictureInPicture = async () => {
+    return withErrorHandling(async () => {
+      const video = DOMElementGetter.getVideoElement();
+      if (!video) {
+        throw new Error("Video element not found");
+      }
+      if (!video.requestPictureInPicture) {
+        throw new Error("Picture-in-picture not supported in current environment");
+      }
+      setupVideoEventListeners();
+      await video.requestPictureInPicture();
+      console.log("Picture-in-picture request successful");
+      return true;
+    }, "Request picture-in-picture", false);
+  };
+  const exitPictureInPicture = async () => {
+    return withErrorHandling(async () => {
+      if (!document.exitPictureInPicture) {
+        throw new Error("Exit picture-in-picture not supported in current environment");
+      }
+      await document.exitPictureInPicture();
+      console.log("Picture-in-picture exit successful");
+      return true;
+    }, "Exit picture-in-picture", false);
+  };
+  const setVolume = async (volume) => {
+    return withErrorHandling(async () => {
+      var _a;
+      if (volume < 0 || volume > 1) {
+        throw new Error("Volume value must be between 0-1");
+      }
+      const trtcCloudMap = TRTCCloud.subCloudMap;
+      if (volume === 0) {
+        trtcCloudMap.forEach((trtcCloud) => {
+          const trtc = trtcCloud == null ? void 0 : trtcCloud._trtc;
+          trtc == null ? void 0 : trtc.muteRemoteAudio("*", true);
+        });
+      } else {
+        trtcCloudMap.forEach((trtcCloud) => {
+          const trtc = trtcCloud == null ? void 0 : trtcCloud._trtc;
+          trtc == null ? void 0 : trtc.muteRemoteAudio("*", false);
+        });
+      }
+      (_a = roomEngine.instance) == null ? void 0 : _a.setAudioPlayoutVolume({ volume: volume * 100 });
+      currentVolume.value = volume;
+      console.log(`Video volume set to: ${volume}`);
+      return true;
+    }, "Set volume", false);
+  };
+  const changeFillMode = async (fillMode) => {
+    return withErrorHandling(async () => {
+      currentFillMode.value = fillMode;
+      console.log(`Fill mode changed to: ${fillMode}`);
+      return true;
+    }, "Change fill mode", false);
+  };
+  const handleFullscreenExit = () => {
+    try {
+      const elements = DOMElementGetter.getAllElements();
+      if (!elements.view) {
+        console.warn("live-core-view element not found for fullscreen exit cleanup");
+        return;
+      }
+      console.log("Executing fullscreen exit style cleanup:", {
+        deviceType,
+        hasLandscapeStream: isLandscapeStream.value,
+        currentOrientation: getCurrentOrientation()
+      });
+      StyleManager.removeFullscreenStyles(elements.view);
+      StyleManager.removeLandscapeStyles(elements.view);
+      if (deviceType !== "desktop") {
+        OrientationManager.unlockOrientation().catch((error) => {
+          console.warn("Failed to unlock orientation during cleanup:", error);
+        });
+      }
+      console.log("Fullscreen exit style cleanup completed");
+    } catch (error) {
+      console.error("Fullscreen exit style cleanup failed:", error);
+    }
+  };
+  const setupFullscreenEventListeners = () => {
+    const handleFullscreenChange = () => {
+      const isCurrentlyFullscreen = !!document.fullscreenElement;
+      const wasFullscreen = isFullscreen.value;
+      console.log("Fullscreen state change:", {
+        fullscreenElement: document.fullscreenElement,
+        isCurrentlyFullscreen,
+        previousValue: wasFullscreen,
+        deviceType,
+        changeType: isCurrentlyFullscreen ? "entered" : "exited"
+      });
+      isFullscreen.value = isCurrentlyFullscreen;
+      if (wasFullscreen && !isCurrentlyFullscreen) {
+        console.log("Detected passive fullscreen exit, executing style cleanup");
+        handleFullscreenExit();
+      }
+    };
+    eventManager.addListener("fullscreenchange", document, "fullscreenchange", handleFullscreenChange);
+    eventManager.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", handleFullscreenChange);
+    eventManager.addListener("mozfullscreenchange", document, "mozfullscreenchange", handleFullscreenChange);
+    eventManager.addListener("MSFullscreenChange", document, "MSFullscreenChange", handleFullscreenChange);
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible" && isFullscreen.value) {
+        const actuallyFullscreen = !!document.fullscreenElement;
+        if (!actuallyFullscreen) {
+          console.log("Detected fullscreen state inconsistency via visibilitychange, executing cleanup");
+          isFullscreen.value = false;
+          handleFullscreenExit();
+        }
+      }
+    };
+    eventManager.addListener("visibilitychange", document, "visibilitychange", handleVisibilityChange);
+  };
+  const setupVideoEventListeners = () => {
+    const video = DOMElementGetter.getVideoElement();
+    if (!video) return;
+    const handleEnterPictureInPicture = () => {
+      console.log("Entered picture-in-picture mode");
+      isPictureInPicture.value = true;
+    };
+    const handleLeavePictureInPicture = () => {
+      console.log("Left picture-in-picture mode");
+      isPictureInPicture.value = false;
+      resume();
+    };
+    const handlePlay = () => {
+      console.log("Video play event detected");
+      isPlaying.value = true;
+    };
+    const handlePause = () => {
+      console.log("Video pause event detected");
+      isPlaying.value = false;
+    };
+    const handleEnded = () => {
+      console.log("Video ended event detected");
+      isPlaying.value = false;
+    };
+    const handleLoadStart = () => {
+      console.log("Video load start event detected");
+      isPlaying.value = !video.paused;
+    };
+    const handleCanPlay = () => {
+      console.log("Video can play event detected");
+      isPlaying.value = !video.paused;
+    };
+    const handleSeeking = () => {
+      console.log("Video seeking event detected");
+      syncPlayingState();
+    };
+    const handleSeeked = () => {
+      console.log("Video seeked event detected");
+      syncPlayingState();
+    };
+    const handleTimeUpdate = () => {
+      if (Math.random() < 0.1) {
+        syncPlayingState();
+      }
+    };
+    const handleVolumeChange = () => {
+      console.log("Video volume change event detected");
+      syncPlayingState();
+      syncVolumeState();
+    };
+    eventManager.addListener("enterpictureinpicture", video, "enterpictureinpicture", handleEnterPictureInPicture);
+    eventManager.addListener("leavepictureinpicture", video, "leavepictureinpicture", handleLeavePictureInPicture);
+    eventManager.addListener("play", video, "play", handlePlay);
+    eventManager.addListener("pause", video, "pause", handlePause);
+    eventManager.addListener("ended", video, "ended", handleEnded);
+    eventManager.addListener("loadstart", video, "loadstart", handleLoadStart);
+    eventManager.addListener("canplay", video, "canplay", handleCanPlay);
+    eventManager.addListener("seeking", video, "seeking", handleSeeking);
+    eventManager.addListener("seeked", video, "seeked", handleSeeked);
+    eventManager.addListener("timeupdate", video, "timeupdate", handleTimeUpdate);
+    eventManager.addListener("volumechange", video, "volumechange", handleVolumeChange);
+  };
+  const cleanup = () => {
+    console.log("Cleaning up player control state...");
+    OrientationManager.removeOrientationListener(orientationListenerId);
+    eventManager.removeAllListeners();
+    console.log(`Cleaned up ${eventManager.getListenerCount()} event listeners`);
+  };
+  setupFullscreenEventListeners();
+  setupVideoEventListeners();
+  OrientationManager.addOrientationListener(orientationListenerId, handleOrientationChange);
+  syncPlayingState();
+  syncVolumeState();
+  watch(localLiveStatus, (newStatus) => {
+    if (newStatus === LiveStatus.Ended) {
+      exitFullscreen();
+      exitPictureInPicture();
+      isPlaying.value = true;
+      isFullscreen.value = false;
+      isPictureInPicture.value = false;
+      currentVolume.value = 1;
+    }
+  });
+  return {
+    // State
+    isPlaying,
+    currentFillMode,
+    isFullscreen,
+    isPictureInPicture,
+    currentVolume,
+    // Methods
+    resume,
+    pause,
+    requestFullscreen,
+    exitFullscreen,
+    requestPictureInPicture,
+    exitPictureInPicture,
+    setVolume,
+    changeFillMode,
+    // Cleanup
+    cleanup
+  };
+}
+export {
+  FillMode,
+  usePlayerControlState
+};

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

@@ -0,0 +1,3 @@
+export { default as AudioControl } from './AudioControl.vue';
+export { default as PlayerControl } from './PlayerControl.vue';
+export { usePlayerControlState } from './PlayerControlState';

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

@@ -0,0 +1,8 @@
+import { default as default2 } from "./AudioControl.js";
+import { default as default3 } from "./PlayerControl.js";
+import { usePlayerControlState } from "./PlayerControlState.js";
+export {
+  default2 as AudioControl,
+  default3 as PlayerControl,
+  usePlayerControlState
+};

package/dist/components/LiveCoreView/PlayerControl/utils/deviceDetection.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Device detection utility module
+ */
+export declare enum DeviceType {
+    DESKTOP = "desktop",
+    MOBILE = "mobile",
+    IOS = "ios",
+    ANDROID = "android"
+}
+export interface DeviceCapabilities {
+    supportsFullscreen: boolean;
+    supportsOrientation: boolean;
+    supportsPictureInPicture: boolean;
+    deviceType: DeviceType;
+}
+/**
+ * Detect if it's a mobile device
+ */
+export declare const isMobileDevice: () => boolean;
+/**
+ * Detect if it's an iOS device
+ */
+export declare const isIOSDevice: () => boolean;
+/**
+ * Detect if it's an Android device
+ */
+export declare const isAndroidDevice: () => boolean;
+/**
+ * Detect if it's a Safari browser
+ */
+export declare const isSafariBrowser: () => boolean;
+/**
+ * Detect if it's a Firefox browser
+ */
+export declare const isFirefoxBrowser: () => boolean;
+/**
+ * Get device type
+ */
+export declare const getDeviceType: () => DeviceType;
+/**
+ * Detect if device supports screen orientation control
+ */
+export declare const isOrientationSupported: () => boolean;
+/**
+ * Get current screen orientation
+ */
+export declare const getCurrentOrientation: () => "portrait" | "landscape" | "unknown";
+/**
+ * Check if device is currently in portrait orientation
+ */
+export declare const isCurrentlyPortrait: () => boolean;
+/**
+ * Check if device is currently in landscape orientation
+ */
+export declare const isCurrentlyLandscape: () => boolean;
+/**
+ * Determine if device should rotate to landscape for fullscreen
+ * @param deviceType - The type of device
+ * @param isLandscapeStream - Whether the stream is landscape oriented
+ * @returns Whether the device should rotate to landscape
+ */
+export declare const shouldRotateToLandscapeForFullscreen: (deviceType: DeviceType, isLandscapeStream: boolean) => boolean;
+/**
+ * Determine if device had landscape rotation that should be undone
+ * @param deviceType - The type of device
+ * @param isLandscapeStream - Whether the stream is landscape oriented
+ * @returns Whether the device had landscape rotation that should be undone
+ */
+export declare const hadLandscapeRotationToUndo: (deviceType: DeviceType, isLandscapeStream: boolean) => boolean;
+/**
+ * Detect if fullscreen API is supported
+ */
+export declare const isFullscreenSupported: (element: HTMLElement) => boolean;
+/**
+ * Detect if exit fullscreen API is supported
+ */
+export declare const isExitFullscreenSupported: () => boolean;
+/**
+ * Detect if picture-in-picture is supported
+ */
+export declare const isPictureInPictureSupported: (video?: HTMLVideoElement) => boolean;
+/**
+ * Get complete device capabilities information
+ */
+export declare const getDeviceCapabilities: (element?: HTMLElement) => DeviceCapabilities;

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

@@ -0,0 +1,129 @@
+var DeviceType = /* @__PURE__ */ ((DeviceType2) => {
+  DeviceType2["DESKTOP"] = "desktop";
+  DeviceType2["MOBILE"] = "mobile";
+  DeviceType2["IOS"] = "ios";
+  DeviceType2["ANDROID"] = "android";
+  return DeviceType2;
+})(DeviceType || {});
+const isMobileDevice = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
+const isIOSDevice = () => {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent);
+};
+const isAndroidDevice = () => {
+  return /Android/i.test(navigator.userAgent);
+};
+const isSafariBrowser = () => {
+  const isSafari = (
+    // Check the vendor feature
+    navigator.vendor && navigator.vendor.includes("Apple") && // Check specific apis or behaviors unique to Safari
+    !navigator.userAgent.includes("CriOS") && // Exclude Chrome iOS
+    !navigator.userAgent.includes("FxiOS") && // Exclude Firefox iOS
+    // Additional feature checks
+    (typeof safari !== "undefined" || !("netscape" in window) || // Firefox has netscape objects
+    document.documentMode === void 0)
+  );
+  return !!isSafari;
+};
+const isFirefoxBrowser = () => {
+  return typeof InstallTrigger !== "undefined" || navigator.userAgent.includes("Firefox") || navigator.userAgent.includes("Gecko/");
+};
+const getDeviceType = () => {
+  if (isIOSDevice()) return "ios";
+  if (isAndroidDevice()) return "android";
+  if (isMobileDevice()) return "mobile";
+  return "desktop";
+};
+const isOrientationSupported = () => {
+  return !!(screen.orientation && screen.orientation.lock);
+};
+const getCurrentOrientation = () => {
+  if (screen.orientation) {
+    const angle = screen.orientation.angle;
+    const type = screen.orientation.type;
+    if (type.includes("portrait")) {
+      return "portrait";
+    } else if (type.includes("landscape")) {
+      return "landscape";
+    }
+    if (angle === 0 || angle === 180) {
+      return "portrait";
+    } else if (angle === 90 || angle === 270) {
+      return "landscape";
+    }
+  }
+  if (window.innerHeight > window.innerWidth) {
+    return "portrait";
+  } else if (window.innerWidth > window.innerHeight) {
+    return "landscape";
+  }
+  return "unknown";
+};
+const isCurrentlyPortrait = () => {
+  return getCurrentOrientation() === "portrait";
+};
+const isCurrentlyLandscape = () => {
+  return getCurrentOrientation() === "landscape";
+};
+const shouldRotateToLandscapeForFullscreen = (deviceType, isLandscapeStream) => {
+  if (deviceType === "desktop") {
+    return false;
+  }
+  if (!isLandscapeStream) {
+    return false;
+  }
+  if (!isCurrentlyPortrait()) {
+    return false;
+  }
+  return true;
+};
+const hadLandscapeRotationToUndo = (deviceType, isLandscapeStream) => {
+  if (deviceType === "desktop") {
+    return false;
+  }
+  if (!isLandscapeStream) {
+    return false;
+  }
+  if (!isCurrentlyLandscape()) {
+    return false;
+  }
+  return true;
+};
+const isFullscreenSupported = (element) => {
+  return !!(element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen);
+};
+const isExitFullscreenSupported = () => {
+  return !!(document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen);
+};
+const isPictureInPictureSupported = (video) => {
+  if (!video) return false;
+  return typeof video.requestPictureInPicture === "function" && typeof document.exitPictureInPicture === "function";
+};
+const getDeviceCapabilities = (element) => {
+  return {
+    supportsFullscreen: element ? isFullscreenSupported(element) : false,
+    supportsOrientation: isOrientationSupported(),
+    supportsPictureInPicture: isPictureInPictureSupported(),
+    deviceType: getDeviceType()
+  };
+};
+export {
+  DeviceType,
+  getCurrentOrientation,
+  getDeviceCapabilities,
+  getDeviceType,
+  hadLandscapeRotationToUndo,
+  isAndroidDevice,
+  isCurrentlyLandscape,
+  isCurrentlyPortrait,
+  isExitFullscreenSupported,
+  isFirefoxBrowser,
+  isFullscreenSupported,
+  isIOSDevice,
+  isMobileDevice,
+  isOrientationSupported,
+  isPictureInPictureSupported,
+  isSafariBrowser,
+  shouldRotateToLandscapeForFullscreen
+};