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

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

@@ -0,0 +1,75 @@
+/**
+ * DOM operation helper utility module
+ */
+export declare const DOM_SELECTORS: {
+    LIVE_CORE_VIEW_CONTAINER: string;
+    LIVE_CORE_VIEW: string;
+    VIDEO_ELEMENT: string;
+    TCPLAYER_ELEMENT: string;
+};
+/**
+ * DOM element getter
+ */
+export declare class DOMElementGetter {
+    /**
+     * Get live-core-view-container element
+     */
+    static getLiveCoreViewContainer(): HTMLElement | null;
+    /**
+     * Get live-core-view element
+     */
+    static getLiveCoreView(): HTMLElement | null;
+    /**
+     * Get video element
+     */
+    static getVideoElement(): HTMLVideoElement | null;
+    /**
+     * Get all required DOM elements
+     */
+    static getAllElements(): {
+        container: HTMLElement | null;
+        view: HTMLElement | null;
+        video: HTMLVideoElement | null;
+    };
+    /**
+     * Check if tcplayer element exists in live-core-view-container
+     */
+    static hasTcPlayerElement(): boolean;
+    /**
+     * Get tcplayer element from live-core-view-container
+     */
+    static getTcPlayerElement(): HTMLElement | null;
+    /**
+     * Validate if elements exist
+     */
+    static validateElements(elements: {
+        container?: HTMLElement | null;
+        view?: HTMLElement | null;
+        video?: HTMLVideoElement | null;
+    }): {
+        isValid: boolean;
+        missingElements: string[];
+    };
+}
+/**
+ * Event listener manager
+ */
+export declare class EventListenerManager {
+    private listeners;
+    /**
+     * Add event listener
+     */
+    addListener(id: string, element: EventTarget, event: string, handler: EventListener): void;
+    /**
+     * Remove specified event listener
+     */
+    removeListener(id: string): void;
+    /**
+     * Remove all event listeners
+     */
+    removeAllListeners(): void;
+    /**
+     * Get current listener count
+     */
+    getListenerCount(): number;
+}

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

@@ -0,0 +1,120 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DOM_SELECTORS = {
+  LIVE_CORE_VIEW_CONTAINER: ".live-core-view-container",
+  LIVE_CORE_VIEW: ".live-core-view",
+  VIDEO_ELEMENT: "#atomicx-live-stream-content video",
+  TCPLAYER_ELEMENT: ".tcplayer"
+};
+class DOMElementGetter {
+  /**
+   * Get live-core-view-container element
+   */
+  static getLiveCoreViewContainer() {
+    return document.querySelector(DOM_SELECTORS.LIVE_CORE_VIEW_CONTAINER);
+  }
+  /**
+   * Get live-core-view element
+   */
+  static getLiveCoreView() {
+    return document.querySelector(DOM_SELECTORS.LIVE_CORE_VIEW);
+  }
+  /**
+   * Get video element
+   */
+  static getVideoElement() {
+    return document.querySelector(DOM_SELECTORS.VIDEO_ELEMENT);
+  }
+  /**
+   * Get all required DOM elements
+   */
+  static getAllElements() {
+    return {
+      container: DOMElementGetter.getLiveCoreViewContainer(),
+      view: DOMElementGetter.getLiveCoreView(),
+      video: DOMElementGetter.getVideoElement()
+    };
+  }
+  /**
+   * Check if tcplayer element exists in live-core-view-container
+   */
+  static hasTcPlayerElement() {
+    const container = DOMElementGetter.getLiveCoreViewContainer();
+    if (!container) {
+      return false;
+    }
+    return container.querySelector(DOM_SELECTORS.TCPLAYER_ELEMENT) !== null;
+  }
+  /**
+   * Get tcplayer element from live-core-view-container
+   */
+  static getTcPlayerElement() {
+    const container = DOMElementGetter.getLiveCoreViewContainer();
+    if (!container) {
+      return null;
+    }
+    return container.querySelector(DOM_SELECTORS.TCPLAYER_ELEMENT);
+  }
+  /**
+   * Validate if elements exist
+   */
+  static validateElements(elements) {
+    const missingElements = [];
+    if (elements.container === null) {
+      missingElements.push("live-core-view-container");
+    }
+    if (elements.view === null) {
+      missingElements.push("live-core-view");
+    }
+    if (elements.video === null) {
+      missingElements.push("video");
+    }
+    return {
+      isValid: missingElements.length === 0,
+      missingElements
+    };
+  }
+}
+class EventListenerManager {
+  constructor() {
+    __publicField(this, "listeners", /* @__PURE__ */ new Map());
+  }
+  /**
+   * Add event listener
+   */
+  addListener(id, element, event, handler) {
+    this.removeListener(id);
+    element.addEventListener(event, handler);
+    this.listeners.set(id, { element, event, handler });
+  }
+  /**
+   * Remove specified event listener
+   */
+  removeListener(id) {
+    const listener = this.listeners.get(id);
+    if (listener) {
+      listener.element.removeEventListener(listener.event, listener.handler);
+      this.listeners.delete(id);
+    }
+  }
+  /**
+   * Remove all event listeners
+   */
+  removeAllListeners() {
+    for (const [id] of this.listeners) {
+      this.removeListener(id);
+    }
+  }
+  /**
+   * Get current listener count
+   */
+  getListenerCount() {
+    return this.listeners.size;
+  }
+}
+export {
+  DOMElementGetter,
+  DOM_SELECTORS,
+  EventListenerManager
+};

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

@@ -0,0 +1,120 @@
+import { DeviceType } from './deviceDetection';
+
+export type ScreenOrientation = 'landscape' | 'portrait';
+export declare enum FullscreenMode {
+    STANDARD = "standard",// Standard API fullscreen
+    CSS_SIMULATED = "simulated"
+}
+export declare const CSS_CLASSES: {
+    readonly FULLSCREEN: "fullscreen-mode";
+    readonly FULLSCREEN_PORTRAIT: "fullscreen-mode-portrait";
+    readonly LANDSCAPE: "landscape-mode";
+};
+export interface FullscreenResult {
+    success: boolean;
+    mode: FullscreenMode;
+    shouldRotateToLandscape: boolean;
+    error?: Error;
+}
+/**
+ * Style management class
+ */
+export declare class StyleManager {
+    /**
+     * Apply fullscreen styles
+     */
+    static applyFullscreenStyles(element: HTMLElement, isPortrait?: boolean): void;
+    /**
+     * Remove fullscreen styles
+     */
+    static removeFullscreenStyles(element: HTMLElement): void;
+    /**
+     * Apply landscape styles
+     */
+    static applyLandscapeStyles(element: HTMLElement): void;
+    /**
+     * Remove landscape styles
+     */
+    static removeLandscapeStyles(element: HTMLElement): void;
+    /**
+     * Smart landscape style adjustment - determine if CSS rotation is needed based on current device orientation
+     */
+    static smartApplyLandscapeStyles(element: HTMLElement, currentOrientation: 'portrait' | 'landscape' | 'unknown'): void;
+}
+/**
+ * Screen orientation management class
+ */
+export declare class OrientationManager {
+    private static orientationListeners;
+    /**
+     * Request screen orientation
+     */
+    static requestOrientation(orientation: ScreenOrientation): Promise<boolean>;
+    /**
+     * Unlock screen orientation
+     */
+    static unlockOrientation(): Promise<boolean>;
+    /**
+     * Get current orientation
+     */
+    static getCurrentOrientation(): 'portrait' | 'landscape' | 'unknown';
+    /**
+     * Add orientation change listener
+     */
+    static addOrientationListener(id: string, callback: (orientation: 'portrait' | 'landscape' | 'unknown') => void): void;
+    /**
+     * Remove orientation change listener
+     */
+    static removeOrientationListener(id: string): void;
+    /**
+     * Setup global orientation listening
+     */
+    private static setupGlobalOrientationListener;
+    /**
+     * Cleanup global orientation listening
+     */
+    private static cleanupGlobalOrientationListener;
+}
+/**
+ * Fullscreen API management class
+ */
+export declare class FullscreenAPI {
+    /**
+     * Request standard fullscreen
+     */
+    static requestFullscreen(element: HTMLElement): Promise<boolean>;
+    /**
+     * Exit standard fullscreen
+     */
+    static exitFullscreen(): Promise<boolean>;
+    /**
+     * Check if currently in fullscreen state
+     */
+    static isCurrentlyFullscreen(): boolean;
+}
+/**
+ * Main fullscreen manager class
+ */
+export declare class FullscreenManager {
+    /**
+     * Smart fullscreen request
+     * Choose the best fullscreen method based on device type and support
+     */
+    static requestFullscreen(containerElement: HTMLElement, viewElement: HTMLElement, deviceType: DeviceType, isPortraitStream: boolean, shouldRotateToLandscape: boolean): Promise<FullscreenResult>;
+    /**
+     * Smart fullscreen exit
+     */
+    static exitFullscreen(viewElement: HTMLElement, deviceType: DeviceType, hadLandscapeRotation: boolean): Promise<FullscreenResult>;
+    /**
+     * CSS simulated fullscreen
+     */
+    private static requestCSSFullscreen;
+    /**
+     * Standard API fullscreen
+     */
+    private static requestStandardFullscreen;
+    /**
+     * Check if fullscreen is supported
+     */
+    private static isFullscreenSupported;
+}

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

@@ -0,0 +1,311 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var FullscreenMode = /* @__PURE__ */ ((FullscreenMode2) => {
+  FullscreenMode2["STANDARD"] = "standard";
+  FullscreenMode2["CSS_SIMULATED"] = "simulated";
+  return FullscreenMode2;
+})(FullscreenMode || {});
+const CSS_CLASSES = {
+  FULLSCREEN: "fullscreen-mode",
+  FULLSCREEN_PORTRAIT: "fullscreen-mode-portrait",
+  LANDSCAPE: "landscape-mode"
+};
+class StyleManager {
+  /**
+   * Apply fullscreen styles
+   */
+  static applyFullscreenStyles(element, isPortrait = false) {
+    const className = isPortrait ? CSS_CLASSES.FULLSCREEN_PORTRAIT : CSS_CLASSES.FULLSCREEN;
+    element.classList.add(className);
+  }
+  /**
+   * Remove fullscreen styles
+   */
+  static removeFullscreenStyles(element) {
+    element.classList.remove(CSS_CLASSES.FULLSCREEN);
+    element.classList.remove(CSS_CLASSES.FULLSCREEN_PORTRAIT);
+  }
+  /**
+   * Apply landscape styles
+   */
+  static applyLandscapeStyles(element) {
+    element.classList.add(CSS_CLASSES.LANDSCAPE);
+  }
+  /**
+   * Remove landscape styles
+   */
+  static removeLandscapeStyles(element) {
+    element.classList.remove(CSS_CLASSES.LANDSCAPE);
+  }
+  /**
+   * Smart landscape style adjustment - determine if CSS rotation is needed based on current device orientation
+   */
+  static smartApplyLandscapeStyles(element, currentOrientation) {
+    if (currentOrientation === "landscape") {
+      this.removeLandscapeStyles(element);
+    } else {
+      this.applyLandscapeStyles(element);
+    }
+  }
+}
+class OrientationManager {
+  /**
+   * Request screen orientation
+   */
+  static async requestOrientation(orientation) {
+    try {
+      if (screen.orientation && screen.orientation.lock) {
+        await screen.orientation.lock(orientation);
+        return true;
+      }
+      if (screen.orientation.webkitLockOrientation) {
+        const result = screen.orientation.webkitLockOrientation(orientation);
+        return !!result;
+      }
+      return false;
+    } catch (error) {
+      console.warn(`Screen orientation setting failed (${orientation}):`, error);
+      return false;
+    }
+  }
+  /**
+   * Unlock screen orientation
+   */
+  static async unlockOrientation() {
+    try {
+      if (screen.orientation && screen.orientation.unlock) {
+        screen.orientation.unlock();
+        return true;
+      }
+      return false;
+    } catch (error) {
+      console.warn("Failed to unlock screen orientation:", error);
+      return false;
+    }
+  }
+  /**
+   * Get current orientation
+   */
+  static 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";
+  }
+  /**
+   * Add orientation change listener
+   */
+  static addOrientationListener(id, callback) {
+    this.orientationListeners.set(id, callback);
+    if (this.orientationListeners.size === 1) {
+      this.setupGlobalOrientationListener();
+    }
+  }
+  /**
+   * Remove orientation change listener
+   */
+  static removeOrientationListener(id) {
+    this.orientationListeners.delete(id);
+    if (this.orientationListeners.size === 0) {
+      this.cleanupGlobalOrientationListener();
+    }
+  }
+  /**
+   * Setup global orientation listening
+   */
+  static setupGlobalOrientationListener() {
+    const handleOrientationChange = () => {
+      const currentOrientation = this.getCurrentOrientation();
+      console.log("Orientation change detected:", currentOrientation);
+      this.orientationListeners.forEach((callback) => {
+        try {
+          callback(currentOrientation);
+        } catch (error) {
+          console.error("Orientation change callback execution failed:", error);
+        }
+      });
+    };
+    window.addEventListener("orientationchange", handleOrientationChange);
+    window.addEventListener("resize", handleOrientationChange);
+    if (screen.orientation) {
+      screen.orientation.addEventListener("change", handleOrientationChange);
+    }
+    this._cleanupOrientationListeners = () => {
+      window.removeEventListener("orientationchange", handleOrientationChange);
+      window.removeEventListener("resize", handleOrientationChange);
+      if (screen.orientation) {
+        screen.orientation.removeEventListener("change", handleOrientationChange);
+      }
+    };
+  }
+  /**
+   * Cleanup global orientation listening
+   */
+  static cleanupGlobalOrientationListener() {
+    if (this._cleanupOrientationListeners) {
+      this._cleanupOrientationListeners();
+      delete this._cleanupOrientationListeners;
+    }
+  }
+}
+__publicField(OrientationManager, "orientationListeners", /* @__PURE__ */ new Map());
+class FullscreenAPI {
+  /**
+   * Request standard fullscreen
+   */
+  static async requestFullscreen(element) {
+    try {
+      if (element.requestFullscreen) {
+        await element.requestFullscreen();
+      } else if (element.webkitRequestFullscreen) {
+        await element.webkitRequestFullscreen();
+      } else if (element.mozRequestFullScreen) {
+        await element.mozRequestFullScreen();
+      } else if (element.msRequestFullscreen) {
+        await element.msRequestFullscreen();
+      } else {
+        return false;
+      }
+      return true;
+    } catch (error) {
+      console.error("Standard fullscreen request failed:", error);
+      return false;
+    }
+  }
+  /**
+   * Exit standard fullscreen
+   */
+  static async exitFullscreen() {
+    try {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        await document.webkitExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        await document.mozCancelFullScreen();
+      } else if (document.msExitFullscreen) {
+        await document.msExitFullscreen();
+      } else {
+        return false;
+      }
+      return true;
+    } catch (error) {
+      console.error("Exit standard fullscreen failed:", error);
+      return false;
+    }
+  }
+  /**
+   * Check if currently in fullscreen state
+   */
+  static isCurrentlyFullscreen() {
+    return !!document.fullscreenElement;
+  }
+}
+class FullscreenManager {
+  /**
+   * Smart fullscreen request
+   * Choose the best fullscreen method based on device type and support
+   */
+  static async requestFullscreen(containerElement, viewElement, deviceType, isPortraitStream, shouldRotateToLandscape) {
+    if (!this.isFullscreenSupported(containerElement)) {
+      return this.requestCSSFullscreen(viewElement, isPortraitStream, shouldRotateToLandscape);
+    }
+    return this.requestStandardFullscreen(containerElement, viewElement, shouldRotateToLandscape);
+  }
+  /**
+   * Smart fullscreen exit
+   */
+  static async exitFullscreen(viewElement, deviceType, hadLandscapeRotation) {
+    StyleManager.removeFullscreenStyles(viewElement);
+    StyleManager.removeLandscapeStyles(viewElement);
+    const success = await FullscreenAPI.exitFullscreen();
+    if (hadLandscapeRotation) {
+      await OrientationManager.unlockOrientation();
+    }
+    return {
+      success,
+      mode: success ? "standard" : "simulated",
+      shouldRotateToLandscape: hadLandscapeRotation
+    };
+  }
+  /**
+   * CSS simulated fullscreen
+   */
+  static async requestCSSFullscreen(element, isPortraitStream, shouldRotateToLandscape) {
+    try {
+      StyleManager.applyFullscreenStyles(element, isPortraitStream);
+      if (shouldRotateToLandscape) {
+        const orientationSuccess = await OrientationManager.requestOrientation("landscape");
+        if (!orientationSuccess) {
+          const currentOrientation = OrientationManager.getCurrentOrientation();
+          StyleManager.smartApplyLandscapeStyles(element, currentOrientation);
+        }
+      }
+      return { success: true, mode: "simulated", shouldRotateToLandscape };
+    } catch (error) {
+      return {
+        success: false,
+        mode: "simulated",
+        shouldRotateToLandscape,
+        error
+      };
+    }
+  }
+  /**
+   * Standard API fullscreen
+   */
+  static async requestStandardFullscreen(containerElement, viewElement, shouldRotateToLandscape) {
+    try {
+      const success = await FullscreenAPI.requestFullscreen(containerElement);
+      if (!success) {
+        return { success: false, mode: "standard", shouldRotateToLandscape };
+      }
+      if (shouldRotateToLandscape) {
+        const orientationSuccess = await OrientationManager.requestOrientation("landscape");
+        if (!orientationSuccess) {
+          const currentOrientation = OrientationManager.getCurrentOrientation();
+          StyleManager.smartApplyLandscapeStyles(viewElement, currentOrientation);
+        }
+      }
+      return { success: true, mode: "standard", shouldRotateToLandscape };
+    } catch (error) {
+      return {
+        success: false,
+        mode: "standard",
+        shouldRotateToLandscape,
+        error
+      };
+    }
+  }
+  /**
+   * Check if fullscreen is supported
+   */
+  static isFullscreenSupported(element) {
+    return !!(element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen);
+  }
+}
+export {
+  CSS_CLASSES,
+  FullscreenAPI,
+  FullscreenManager,
+  FullscreenMode,
+  OrientationManager,
+  StyleManager
+};

package/dist/components/LiveCoreView/i18n/en-US/index.d.ts

@@ -1,4 +1,13 @@
 export declare const resource: {
     'No video': string;
     'Waiting for connection': string;
+    Play: string;
+    Pause: string;
+    'Picture in Picture': string;
+    'Exit Picture in Picture': string;
+    Fullscreen: string;
+    'Exit Fullscreen': string;
+    Mute: string;
+    Unmute: string;
+    'The system does not support picture-in-picture mode': string;
 };

package/dist/components/LiveCoreView/i18n/en-US/index.js

@@ -1,6 +1,15 @@
 const resource = {
   "No video": "No video",
-  "Waiting for connection": "Waiting for connection"
+  "Waiting for connection": "Waiting for connection",
+  "Play": "Play",
+  "Pause": "Pause",
+  "Picture in Picture": "Picture in Picture",
+  "Exit Picture in Picture": "Exit Picture in Picture",
+  "Fullscreen": "Fullscreen",
+  "Exit Fullscreen": "Exit Fullscreen",
+  "Mute": "Mute",
+  "Unmute": "Unmute",
+  "The system does not support picture-in-picture mode": "The system does not support picture-in-picture mode"
 };
 export {
   resource

package/dist/components/LiveCoreView/i18n/zh-CN/index.d.ts

@@ -1,4 +1,13 @@
 export declare const resource: {
     'No video': string;
     'Waiting for connection': string;
+    Play: string;
+    Pause: string;
+    'Picture in Picture': string;
+    'Exit Picture in Picture': string;
+    Fullscreen: string;
+    'Exit Fullscreen': string;
+    Mute: string;
+    Unmute: string;
+    'The system does not support picture-in-picture mode': string;
 };

package/dist/components/LiveCoreView/i18n/zh-CN/index.js

@@ -1,6 +1,15 @@
 const resource = {
   "No video": "暂无画面",
-  "Waiting for connection": "等待连线"
+  "Waiting for connection": "等待连线",
+  "Play": "播放",
+  "Pause": "暂停",
+  "Picture in Picture": "画中画",
+  "Exit Picture in Picture": "退出画中画",
+  "Fullscreen": "全屏",
+  "Exit Fullscreen": "退出全屏",
+  "Mute": "静音",
+  "Unmute": "取消静音",
+  "The system does not support picture-in-picture mode": "系统不支持画中画模式"
 };
 export {
   resource