@ezuikit/multi-screen 0.1.0-beta.1

package/dist/types/index.d.ts

@@ -0,0 +1,1090 @@
+import EventEmitter from 'eventemitter3';
+import I18n from '@ezuikit/utils-i18n';
+import { ThemeOptions } from '@ezuikit/player-theme';
+
+/**
+ * 设置面板配置选项
+ * @public
+ */
+interface SettingsPanelOptions {
+    /** 当前画面比例 */
+    scaleMode?: ThemeOptions['scaleMode'];
+    /**
+     * 音频模式
+     * selected: 选中的有声音
+     * all: 所有窗口都有声音
+     * muted: 所有窗口都静音
+     */
+    audioMode?: 'selected' | 'all' | "muted";
+    /** 是否启用浏览器硬解 */
+    enableHardwareDecoding?: boolean;
+    /** 语言 */
+    language?: 'zh' | 'en';
+    /** 国际化实例 */
+    i18n?: I18n;
+    /** 设置变化回调 */
+    onChange?: (settings: SettingsData) => void;
+}
+/**
+ * 设置数据
+ * @public
+ */
+interface SettingsData {
+    /** 画面比例 */
+    scaleMode: ThemeOptions['scaleMode'];
+    /** 音频模式 */
+    audioMode: SettingsPanelOptions['audioMode'];
+    /** 是否启用浏览器硬解 */
+    enableHardwareDecoding: boolean;
+}
+/**
+ * 设置面板组件
+ * @remarks
+ * 提供画面比例、声音设置、浏览器硬解等设置选项
+ * @public
+ */
+declare class SettingsPanel {
+    private readonly container;
+    private picker;
+    private settings;
+    private readonly language;
+    private readonly i18n?;
+    private readonly onChange?;
+    private audioPicker?;
+    private readonly _scaleModes;
+    /**
+     * 创建设置面板实例
+     * @param options - 设置面板配置选项
+     */
+    constructor(container: HTMLElement, options: SettingsPanelOptions);
+    /**
+     * 获取国际化文本
+     * @private
+     */
+    private t;
+    /**
+     * 初始化组件
+     * @private
+     */
+    private init;
+    /**
+     * 创建设置面板 Picker
+     * @private
+     */
+    private createPicker;
+    /**
+     * 获取面板 HTML
+     * @private
+     */
+    private getPanelHTML;
+    /**
+     * 获取音频模式文本
+     * @private
+     */
+    private getAudioModeText;
+    /**
+     * 绑定事件
+     * @private
+     */
+    private bindEvents;
+    /**
+     * 创建音频选择器
+     * @private
+     */
+    private createAudioPicker;
+    /**
+     * 设置画面比例
+     * @param ratio - 画面比例
+     */
+    setScaleMode(ratio: 0 | 1 | 2): void;
+    /**
+     * 设置音频模式
+     * @param mode - 音频模式
+     */
+    setAudioMode(mode: SettingsPanelOptions['audioMode']): void;
+    /**
+     * 获取当前设置
+     */
+    getSettings(): SettingsData;
+    /**
+     * 通知设置变化
+     * @private
+     */
+    private notifyChange;
+    /**
+     * 销毁组件
+     */
+    destroy(): void;
+}
+
+/**
+ * 控件基类配置项
+ * @public
+ */
+interface SlControlOptions {
+    layout: MultiScreen;
+    /** 播放器窗口节点 */
+    rootContainer?: HTMLElement;
+    /** 挂载节点 player id, 默认挂载 body 上 */
+    getPopupContainer?: () => HTMLElement;
+    /** 给控件新增自定义类名 */
+    className?: string;
+    /** 语言数据 */
+    locale?: Record<string, string>;
+    /** 样式类后缀 */
+    classNameSuffix?: string;
+    /** 控件类型, 默认 button */
+    controlType?: 'button' | 'text';
+    /** 当前语言 */
+    language?: 'zh' | 'en' | string;
+    /** 所有语言数据 */
+    locales?: Record<string, Record<string | number, string | number>>;
+    /** 点击事件回调 */
+    onClick?: (e: Event) => void;
+    /** 其他自定义属性 */
+    [key: string]: any;
+}
+/**
+ * 控件基类
+ * @remarks
+ * 提供控件的基础功能，包括状态管理、事件处理、国际化等
+ * @category Control
+ * @example
+ * ```ts
+ * // 创建自定义控件
+ * class MyControl extends Control {
+ *   protected _onControlClick(e: Event): void {
+ *     console.log('Control clicked');
+ *   }
+ * }
+ *
+ * // 使用控件
+ * const myControl = new MyControl({
+ *   classNameSuffix: 'my-control',
+ *   language: 'zh',
+ *   onClick: (e) => console.log('Clicked')
+ * });
+ * ```
+ * @public
+ */
+declare class Control extends EventEmitter {
+    static cname: string;
+    /** 控件容器元素 */
+    $container: HTMLDivElement | HTMLSpanElement;
+    /** 控件挂载的父节点 */
+    $popupContainer: HTMLElement;
+    /** 当前语言对应的翻译数据 */
+    locale: Record<string | number, string> | null;
+    /** 控件配置选项 */
+    protected options: SlControlOptions;
+    /** 是否禁用状态 */
+    protected _disabled: boolean;
+    /** 是否激活状态 */
+    protected _active: boolean;
+    /** 驼峰命名的控件名称 */
+    private readonly _camelCaseName;
+    layout: MultiScreen | undefined;
+    /**
+     * 创建控件实例
+     * @param options - 控件配置选项
+     */
+    constructor(options: Partial<SlControlOptions>);
+    /**
+     * 获取或设置激活状态
+     */
+    get active(): boolean;
+    set active(active: boolean);
+    /**
+     * 获取或设置禁用状态
+     */
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    /**
+     * 重置控件状态
+     * @param hide - 是否隐藏控件
+     */
+    reset(hide?: boolean): void;
+    /**
+     * 重置控件挂载节点
+     * @param popupContainer - 新的挂载节点
+     * @param append - 添加方式：prepend(插入第一个位置) | append(追加在末尾) | before(插入指定元素前)
+     * @param element - 当 append = 'before' 时需要，插入到该元素之前
+     * @example
+     * ```ts
+     * // 追加到容器末尾
+     * control.resetPopupContainer(newContainer, 'append');
+     *
+     * // 插入到容器第一个位置
+     * control.resetPopupContainer(newContainer, 'prepend');
+     *
+     * // 插入到指定元素之前
+     * control.resetPopupContainer(newContainer, 'before', targetElement);
+     * ```
+     */
+    resetPopupContainer(popupContainer: Element, append?: 'prepend' | 'append' | 'before', element?: Element): void;
+    /**
+     * 显示控件
+     */
+    show(): void;
+    /**
+     * 隐藏控件
+     */
+    hide(): void;
+    /**
+     * 销毁控件
+     * @remarks
+     * 清理所有事件监听器和 DOM 元素
+     */
+    destroy(): void;
+    /**
+     * 更新控件显示
+     * @remarks
+     * 子类可以重写此方法来实现自定义更新逻辑
+     * @public
+     */
+    update(): void;
+    /**
+     * 更新禁用状态的样式
+     * @param disabled - 是否禁用
+     * @protected
+     */
+    protected _updateDisabledState(disabled: boolean): void;
+    /**
+     * 更新激活状态的样式
+     * @param active - 是否激活
+     * @protected
+     */
+    protected _updateActiveState(active: boolean): void;
+    /**
+     * 绑定点击事件
+     * @private
+     */
+    private _onClick;
+    /**
+     * 控件点击事件处理
+     * @param e - 事件对象
+     * @remarks
+     * 子类可以重写此方法来实现自定义点击行为
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+}
+
+/**
+ * 播放/暂停控件配置项
+ * @public
+ */
+type PlayOptions = SlControlOptions;
+/**
+ * 播放/暂停控件
+ * @remarks
+ * 提供视频播放和暂停功能，支持状态自动切换
+ * @category Control
+ * @public
+ */
+declare class Play extends Control {
+    /** 播放状态 */
+    private _playing;
+    static cname: string;
+    constructor(options: PlayOptions);
+    /**
+     * 播放状态
+     */
+    get playing(): boolean;
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+    /**
+     * 更新控件显示
+     * @public
+     */
+    update(): void;
+}
+
+/**
+ * 静音控件配置项
+ * @public
+ */
+interface MutedOptions extends SlControlOptions {
+}
+/**
+ * 静音控件
+ * @remarks
+ * 提供静音控制功能，支持全部静音、其他静音、取消静音
+ * @category Control
+ * @public
+ */
+declare class Muted extends Control {
+    static cname: string;
+    constructor(options: MutedOptions);
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+}
+
+/**
+ * 截图控件配置项
+ * @public
+ */
+interface ScreenshotOptions extends SlControlOptions {
+}
+/**
+ * 截图控件
+ * @remarks
+ * 提供视频截图功能
+ * @category Control
+ * @public
+ */
+declare class Screenshot extends Control {
+    static cname: string;
+    constructor(options: ScreenshotOptions);
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+}
+
+/**
+ * 网页全屏控件配置项
+ * @public
+ */
+interface WebFullscreenOptions extends SlControlOptions {
+}
+/**
+ * 网页全屏控件
+ * @remarks
+ * 提供网页全屏功能（伪全屏，仅在网页内全屏）
+ * @category Control
+ * @public
+ */
+declare class WebFullscreen extends Control {
+    /** 网页全屏状态 */
+    layout: MultiScreen;
+    static cname: string;
+    constructor(options: WebFullscreenOptions & {
+        layout: MultiScreen;
+    });
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+    /**
+     * 更新控件显示
+     * @public
+     */
+    update(): void;
+}
+
+/**
+ * 全局全屏控件配置项
+ * @public
+ */
+interface FullscreenOptions extends SlControlOptions {
+}
+/**
+ * 全局全屏控件
+ * @remarks
+ * 提供浏览器原生全屏功能
+ * @category Control
+ * @public
+ */
+declare class Fullscreen extends Control {
+    static cname: string;
+    layout: MultiScreen;
+    constructor(options: FullscreenOptions);
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+    /**
+     * 更新控件显示
+     * @public
+     */
+    update(): void;
+}
+
+/**
+ * 设置控件配置项
+ * @public
+ */
+interface SettingsOptions extends SlControlOptions {
+    /** MultiScreen 实例 */
+    layout: MultiScreen;
+    /** 设置变化回调 */
+    onSettingsChange?: (settings: SettingsData) => void;
+}
+/**
+ * 设置控件
+ * @remarks
+ * 提供画面比例、声音设置、浏览器硬解等设置选项
+ * @category Control
+ * @public
+ */
+declare class Settings extends Control {
+    static cname: string;
+    private readonly _layout;
+    protected _settingsPanel?: SettingsPanel;
+    private readonly _onSettingsChange?;
+    constructor(options: SettingsOptions);
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+    /**
+     * 初始化设置面板
+     * @private
+     */
+    private _initSettingsPanel;
+    /**
+     * 获取设置面板实例
+     * @public
+     */
+    get settingsPanel(): SettingsPanel | undefined;
+    /**
+     * 销毁控件
+     * @public
+     */
+    destroy(): void;
+}
+
+/**
+ * 分屏模式选择器配置选项
+ * @public
+ */
+interface ModePickerOptions {
+    /** 当前分屏模式 */
+    currentMode: LayoutMode;
+    /** 模式变化回调 */
+    onChange: (mode: LayoutMode) => void;
+    /** 语言 */
+    i18n?: I18n;
+}
+/**
+ * 分屏模式选择器组件
+ * @remarks
+ * 提供一个下拉菜单样式的分屏模式选择器
+ * @public
+ */
+declare class ModePicker {
+    private readonly container;
+    private _currentMode;
+    private readonly onChange;
+    private readonly i18n;
+    private picker;
+    private readonly modeOptions;
+    /**
+     * 创建模式选择器实例
+     * @param options - 选择器配置选项
+     */
+    constructor(container: HTMLElement, options: ModePickerOptions);
+    get current(): LayoutMode;
+    set current(mode: LayoutMode);
+    /**
+     * 初始化组件
+     * @private
+     */
+    private _init;
+    /**
+     * 创建分屏模式图标
+     * @param rows - 行数
+     * @param cols - 列数
+     * @returns SVG 图标字符串
+     * @private
+     */
+    private _createModeIcon;
+    /**
+     * 创建下拉选择器
+     * @private
+     */
+    private createPicker;
+    /**
+     * 创建下拉菜单内容
+     * @returns 下拉菜单 HTML 字符串
+     * @private
+     */
+    private createDropdownContent;
+    private _onOptionsClick;
+    /**
+     * 选中指定模式
+     * @param mode - 分屏模式
+     * @private
+     */
+    private selectMode;
+    /**
+     * 设置当前分屏模式
+     * @param mode - 分屏模式
+     */
+    setMode(mode: LayoutMode): void;
+    /**
+     * 销毁选择器实例
+     * @remarks
+     * 清理所有 DOM 元素和事件监听器
+     */
+    destroy(): void;
+}
+
+/**
+ * 分屏模式控件配置项
+ * @public
+ */
+interface ModeOptions extends SlControlOptions {
+    /** 模式变化回调 */
+    onModeChange?: (mode: LayoutMode) => void;
+}
+/**
+ * 分屏模式控件
+ * @remarks
+ * 提供分屏模式选择功能
+ * @category Control
+ * @public
+ */
+declare class Mode extends Control {
+    private _modePicker?;
+    private readonly _onModeChange?;
+    static cname: string;
+    mode: LayoutMode;
+    constructor(options: ModeOptions);
+    /**
+     * 点击控件触发
+     * @protected
+     */
+    protected _onControlClick(e: Event): void;
+    /**
+     * 渲染控件内容
+     * @private
+     */
+    private _render;
+    /**
+     * 初始化模式选择器
+     * @private
+     */
+    private _initModePicker;
+    /**
+     * 获取模式选择器实例
+     * @public
+     */
+    get modePicker(): ModePicker | undefined;
+    /**
+     * 更新当前模式
+     * @param mode - 分屏模式
+     * @public
+     */
+    setMode(mode: LayoutMode): void;
+    /**
+     * 销毁控件
+     * @public
+     */
+    destroy(): void;
+}
+
+/**
+ * 插件导出模块
+ * @remarks
+ * 导出所有内置 Control 类控件
+ * @packageDocumentation
+ */
+
+type ControlConstructor = new (options: any) => Control;
+declare const LeftControls: ControlConstructor[];
+declare const RightControls: ControlConstructor[];
+declare const __CAN_DISABLED_CONTROL__: string[];
+
+/**
+ * 分屏布局模式
+ * @remarks
+ * 支持预设的固定分屏模式（数字代表分屏数量）或自定义模式
+ * @public
+ */
+type LayoutMode = 1 | 2 | 4 | 6 | 9 | 16 | 25 | 36 | 64 | 'custom';
+/**
+ * 自定义布局配置
+ * @public
+ */
+interface CustomLayout {
+    /** 行数 */
+    rows: number;
+    /** 列数 */
+    cols: number;
+}
+/**
+ * 单个分屏项配置
+ * @public
+ */
+type ScreenItem = Record<string, any>;
+/**
+ * 工具栏插件配置
+ * @public
+ */
+interface ToolbarPlugin {
+    /** 插件名称 */
+    name: string;
+    /** 插件内容（支持 emoji 或自定义文本） */
+    content: string | ((layout: MultiScreen) => string);
+    /** 工具提示文本 */
+    tooltip?: string | ((layout: MultiScreen) => string);
+    /** 禁用默认操作， 需要用户根据业务自己在onClick中自己实现想要的操作 */
+    disabledDefault?: boolean;
+    /**
+     * 插件容器的类名
+     */
+    wrapperClassName?: string;
+    /** 点击事件回调 */
+    onClick: (layout: MultiScreen) => void;
+}
+/**
+ * 分屏布局组件配置选项
+ * @public
+ */
+interface MultiScreenOptions {
+    /** 容器的宽，容器的宽度，支持 CSS 单位或数字（px）, 默认 100% */
+    width?: string | number;
+    /** 容器的高，容器的宽度，支持 CSS 单位或数字（px）, 默认 100% */
+    height?: string | number;
+    /** 分屏模式，默认 4 分屏 */
+    mode?: LayoutMode;
+    /** 自定义布局配置，当 mode 为 'custom' 时有效 */
+    customLayout?: CustomLayout;
+    /** 分屏数据数组 */
+    screens?: ScreenItem[];
+    /** 主题模式，默认 'dark' */
+    theme?: 'light' | 'dark';
+    /** 语言，默认 'zh' */
+    language?: 'zh' | 'en';
+    /** 是否显示工具栏，默认 true */
+    showToolbar?: boolean;
+    /** 内容填充模型 */
+    scaleMode?: 0 | 1 | 2;
+    /**
+     * 音频模式
+     * selected: 选中的有声音
+     * all: 所有窗口都有声音
+     * muted: 所有窗口都静音
+     */
+    audioMode?: SettingsPanelOptions['audioMode'];
+    /**
+     * 启用硬件解码, 默认 true
+     */
+    enableHardwareDecoding?: boolean;
+    /** 工具栏插件数组 */
+    plugins?: ControlConstructor[];
+    /**
+     * 可选的分屏模式配置
+     * @remarks
+     * - 如果设置为 null，则不显示模式选择器
+     * - 如果不设置，则显示默认模式选择器
+     * - 如果设置了 modes，则只显示指定的模式
+     */
+    modesOptions?: {
+        disabledDefault?: boolean;
+        modes?: LayoutMode[];
+    } | null;
+    playOptions?: (ToolbarPlugin & {
+        disabledDefault?: boolean;
+    }) | null;
+    /**
+     * 静音配置
+     */
+    mutedOptions?: ToolbarPlugin | null;
+    /**
+     * 截图配置
+     */
+    screenshotOptions?: ToolbarPlugin | null;
+    /**
+     * 模式选择器配置
+     * @remarks
+     * - 如果设置为 null，则不显示模式选择器
+     * - 如果不设置，则显示默认模式选择器
+     * - 如果设置了 modes，则只显示指定的模式
+     */
+    modeOptions?: ToolbarPlugin | null;
+    /**
+     * 设置面板配置
+     * @remarks
+     * - 如果设置为 null，则不显示设置面板
+     * - 如果不设置，则显示默认设置面板
+     */
+    settingOptions?: ToolbarPlugin | null;
+    /**
+     * 全屏配置
+     */
+    webFullscreenOptions?: ToolbarPlugin | null;
+    /**
+     * 全屏配置
+     */
+    fullscreenOptions?: ToolbarPlugin | null;
+    /** 占位 */
+    placeholder?: string | (() => string);
+    /** 分屏点击事件回调 */
+    onScreenClick?: (index: number, screen: ScreenItem) => void;
+    /** 分屏模式切换事件回调 */
+    onModeChange?: (mode: LayoutMode) => void;
+    /** 全屏状态变化事件回调 */
+    onFullscreenChange?: (isFullscreen: boolean, type: 'web' | 'global') => void;
+}
+/**
+ * 分屏布局事件类型定义
+ * @public
+ */
+interface MultiScreenEvents {
+    /** 分屏点击事件 */
+    'screen:click': (index: number, screen: ScreenItem) => void;
+    /** 分屏模式变化事件 */
+    'mode:change': (mode: LayoutMode) => void;
+    /** 全屏状态变化事件 */
+    'fullscreen:change': (isFullscreen: boolean, type: 'web' | 'global') => void;
+    /** 主题变化事件 */
+    'theme:change': (theme: 'light' | 'dark') => void;
+}
+
+declare abstract class AbstractPlayer {
+    options: any;
+    constructor(options: any);
+    /**
+     * 播放
+     */
+    abstract play(): void;
+    /**
+     * 暂停
+     */
+    abstract pause(): void;
+    /**
+     * 截图
+     * @param _filename
+     * @param _format
+     * @param _quality
+     * @param _type
+     */
+    abstract screenshot(_filename?: string, _format?: 'png' | 'jpeg' | 'webp', _quality?: number, _type?: 'download' | 'base64' | 'blob'): void;
+    /**
+     *
+     * @param scaleMode
+     */
+    abstract setScaleMode(scaleMode?: 0 | 1 | 2): void;
+    abstract destroy(): void;
+    abstract muted: boolean;
+}
+
+/**
+ * 分屏布局组件
+ * @remarks
+ * 支持多种分屏模式、主题切换、国际化、全屏显示等功能
+ * @example
+ * ```typescript
+ * import MultiScreen from '@ezuikit/player-multi-screen';
+ * import '@ezuikit/player-multi-screen/style.css';
+ * const layout = new MultiScreen('app', Player{
+ *   mode: 4,
+ *   theme: 'dark',
+ *   language: 'zh',
+ *   screens: [
+ *     { url: 'https://www.example.com/video.flv' },
+ *     { url: 'https://www.example.com/video.flv' }
+ *   ]
+ * });
+ * // 切换分屏模式
+ * layout.setMode(9);
+ * // 切换主题
+ * layout.setTheme('light');
+ * ```
+ * @public
+ */
+declare class MultiScreen extends EventEmitter<MultiScreenEvents> {
+    /** 事件常量 */
+    static EVENTS: {};
+    /** 根容器节点 */
+    $container: HTMLElement;
+    /** 分屏容器 */
+    private $screenContainer;
+    /** 工具栏 */
+    private toolbar;
+    /** 工具栏左侧容器 */
+    private $toolbarLeft;
+    /** 工具栏右侧容器 */
+    private $toolbarRight;
+    /** 分屏模式 */
+    mode: LayoutMode;
+    /** 播放器实例数组 */
+    players: (AbstractPlayer | null)[];
+    /** 自定义布局配置 */
+    private customLayout?;
+    /** 分屏数据配置 */
+    private _screens;
+    /** 当前主题 */
+    private theme;
+    /** 国际化实例 */
+    i18n: I18n | null;
+    /** 当前选中的分屏索引 */
+    _current: number;
+    private _isGlobalFullscreenOp;
+    /** 控件集合 */
+    controls: Record<string, Control>;
+    /** 是否显示工具栏 */
+    private readonly showToolbar;
+    /** 填充模式 */
+    scaleMode: ThemeOptions['scaleMode'];
+    /** 音频模式 */
+    audioMode: SettingsPanelOptions['audioMode'];
+    /** 是否正在播放 */
+    playing: boolean;
+    /** 是网页全屏 */
+    isWebFullscreen: boolean;
+    /** 是全局全屏 */
+    isGlobalFullscreen: boolean;
+    /** 是否启用硬件解码 */
+    enableHardwareDecoding: boolean;
+    language: string;
+    /**
+     * 全屏变化处理函数
+     * @private
+     */
+    _fullscreenChangeHandler?: () => void;
+    options: MultiScreenOptions;
+    private readonly _Player;
+    private _delegations;
+    private _delegationsClose;
+    /**
+     * 创建一个分屏布局实例
+     * @param containerID - 容器ID
+     * @param Player - 播放器类，必须是 AbstractPlayer 的子类
+     * @param options - 布局配置选项
+     * @throws 当容器元素未找到时抛出错误
+     */
+    constructor(containerID: string, Player: new (...args: any[]) => AbstractPlayer, options: MultiScreenOptions);
+    private get _totalScreens();
+    /**
+     * 初始化组件
+     * @private
+     */
+    private _init;
+    /**
+     * 初始化控件
+     * @private
+     */
+    private _initControls;
+    /**
+     * 渲染分屏列表
+     * @private
+     */
+    private _renderScreens;
+    get current(): number;
+    set current(index: number);
+    private _disabledControl;
+    /**
+     * 初始化播放器实例
+     * @param playerOptions Player 播放器的配置
+     * @returns 播放器实例
+     * @example
+     * ```typescript
+     * const player = layout._initPlayer({
+     *   url: "https://example.com/video.flv",
+     *   // 其他播放器配置项...
+     * });
+     * ```
+     */
+    private _initPlayer;
+    /**
+     * 创建单个分屏元素
+     * @param screen - 分屏数据
+     * @param index - 分屏索引
+     * @returns 分屏 DOM 元素
+     * @private
+     */
+    private _createScreenElement;
+    /**
+     * 选中指定分屏
+     * @param index - 分屏索引
+     * @private
+     */
+    private _selectScreen;
+    /**
+     * 获取国际化翻译文本
+     * @param key - 翻译键
+     * @returns 翻译后的文本
+     */
+    t(key: string): string;
+    /**
+     * 设置分屏模式
+     * @param mode - 分屏模式（预设模式或自定义布局配置）
+     * @fires mode:change - 当模式变化时触发
+     * @example
+     * ```typescript
+     * // 使用预设模式
+     * layout.setMode(9); // 切换为 9 分屏
+     * // 使用自定义布局
+     * layout.setMode({ rows: 3, cols: 5 }); // 自定义 3x5 布局 mode 为 'custom'
+     * ```
+     */
+    setMode(mode: LayoutMode | CustomLayout): void;
+    /**
+     * 设置分屏数据
+     * @param screen - 分屏数据数
+     * @param index - 分屏索引(从1开始)（可选），默认当前选中的分屏索引(从1开始)
+     * @example
+     * ```typescript
+     * layout.setScreen({
+     *   url: "https://example.com/video.flv"
+     * });
+     * ```
+     */
+    setScreen(screen: ScreenItem, index?: number): void;
+    /**
+     * 关闭指定分屏, 删除对应分屏数据（不可恢复）
+     * @param index - 分屏索引(从1开始)（可选），默认当前选中的分屏索引(从1开始)
+     * @example
+     * ```typescript
+     * layout.close(1); // 关闭第 1 分屏
+     * ```
+     */
+    close(index?: number): void;
+    /**
+     * 设置主题模式
+     * @param theme - 主题（'light' 或 'dark'）
+     * @fires theme:change - 当主题变化时触发
+     * @example
+     * ```typescript
+     * layout.setTheme('light');
+     * ```
+     */
+    setTheme(theme: 'light' | 'dark'): void;
+    /**
+     * 切换网页全屏模式
+     * @returns Promise - 全屏操作结果
+     * @example
+     * ```typescript
+     * layout.toggleWebFullscreen();
+     * ```
+     */
+    toggleWebFullscreen(): Promise<void>;
+    /**
+     * 切换全局`全屏模式
+     * @returns Promise - 全屏操作结果
+     * @example
+     * ```typescript
+     * layout.toggleFullscreen();
+     * ```
+     */
+    toggleFullscreen(): Promise<void>;
+    /**
+     * 全部播放
+     * @param index - 窗口索引(从1开始)，不传则全部播放
+     */
+    play(index?: number): void;
+    /**
+     * 全部暂停
+     * @param index - 窗口索引(从1开始)，不传则全部暂停
+     */
+    pause(index?: number): void;
+    /**
+     * 指定窗口静音或取消静音
+     * @param {boolean} muted - 是否静音
+     * @param {number=} index - 窗口索引(从1开始)，空值默认所有窗口
+     */
+    muted(muted?: boolean, index?: number): void;
+    /**
+     * @description 截图，调用后弹出下载框保存截图
+     * @param {string=} filename 保存的文件名, 默认 时间戳
+     * @param {string=} format 截图的格式，可选png或jpeg或者webp ,默认 png
+     * @param {number=} quality 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 0.92
+     * @param {("download" | "base64" | "blob")=} type  download,base64,blob, 默认download
+     * @param {number=} index - 窗口索引(从1开始)，空值默认当前选中窗口
+     *
+     * @returns {string | Blob | undefined}   undefined 代表截图失败
+     * @example
+     * ```ts
+     * player.screenshot()
+     * player.screenshot("filename", "jpeg", 0.7, "download")
+     * ```
+     */
+    screenshot(filename?: string, format?: 'png' | 'jpeg' | 'webp', quality?: number, type?: 'download' | 'base64' | 'blob', index?: number): void;
+    /**
+     * 设置视频画面缩放模式
+     * @param {0 | 1 | 2} scaleMode - 缩放模式， 0: 窗口铺满， 1: 等比缩放大边铺满， 2: 等比缩放小边铺满
+     * @param {number=} index - 窗口索引(从1开始)，空值默认所有窗口
+     */
+    setScaleMode(scaleMode: ThemeOptions['scaleMode'], index?: number): void;
+    /**
+     * 设置视频画面缩放模式
+     * @param {SettingsPanelOptions['audioMode']} audioMode - 音频模式 selected: 选中的有声音  all: 所有窗口都有声音  muted: 所有窗口都静音
+     */
+    setAudioMode(audioMode: SettingsPanelOptions['audioMode']): void;
+    /**
+     * 重新调整播放器窗口大小
+     *
+     * Adjust the player window size
+     * @param {number | string} width 宽度（容器的宽度，支持 CSS 单位或数字（px））
+     * @param {number | string} height 高度（容器的高度，支持 CSS 单位或数字（px））
+     * @example
+     * ```ts
+     * layout.resize(600, 400) // 600px * 400px
+     * layout.resize("600px", "400px") // 600px * 400px
+     * layout.resize("50%", "1vh")
+     * layout.resize("2em", "2rem")
+     * ```
+     */
+    resize(width?: number | string, height?: number | string): void;
+    /**
+     * 销毁组件实例
+     * @remarks
+     * 清理所有事件监听器和 DOM 元素
+     * @example
+     * ```typescript
+     * layout.destroy();
+     * ```
+     */
+    destroy(): void;
+    /**
+     * @param {number=} index - 窗口索引(从1开始)，空值默认所有窗口
+     */
+    private _getPlayers;
+    /**
+     * 监听全屏状态变化
+     * @private
+     */
+    private _listenFullscreenChange;
+}
+
+/**
+ * 分屏布局组件库
+ * @packageDocumentation
+ */
+
+export { AbstractPlayer, Control, Fullscreen, LeftControls, Mode, Muted, Play, RightControls, Screenshot, Settings, SettingsPanel, WebFullscreen, __CAN_DISABLED_CONTROL__, MultiScreen as default };
+export type { ControlConstructor, CustomLayout, FullscreenOptions, LayoutMode, ModeOptions, MultiScreenEvents, MultiScreenOptions, MutedOptions, PlayOptions, ScreenItem, ScreenshotOptions, SettingsData, SettingsOptions, SettingsPanelOptions, SlControlOptions, ToolbarPlugin, WebFullscreenOptions };