diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts
index 875707f9f..697d3f702 100644
--- a/docs/assets/ts/artplayer.d.ts
+++ b/docs/assets/ts/artplayer.d.ts
@@ -1,488 +1,284 @@
-export = Artplayer;
-export as namespace Artplayer;
+export type Utils = {
+    userAgent: string;
+    isMobile: boolean;
+    isSafari: boolean;
+    isWechat: boolean;
+    isIE: boolean;
+    isAndroid: boolean;
+    isIOS: boolean;
+    query(selector: string, parent?: HTMLElement): HTMLElement;
+    queryAll(selector: string, parent?: HTMLElement): HTMLElement[];
+    addClass(target: HTMLElement, className: string): void;
+    removeClass(target: HTMLElement, className: string): void;
+    hasClass(target: HTMLElement, className: string): boolean;
+    append(target: HTMLElement, className: HTMLElement): HTMLElement;
+    remove(target: HTMLElement): void;
+    setStyle<T extends keyof CSSStyleDeclaration>(
+        element: HTMLElement,
+        key: T,
+        value: CSSStyleDeclaration[T],
+    ): HTMLElement;
+    setStyles(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): HTMLElement;
+    getStyle<T, K extends keyof CSSStyleDeclaration>(
+        element: HTMLElement,
+        key: K,
+        numberType?: T,
+    ): T extends true ? number : string;
+    sublings(target: HTMLElement): HTMLElement[];
+    inverseClass(target: HTMLElement, className: string): void;
+    tooltip(target: HTMLElement, msg: string, pos?: string): void;
+    isInViewport(target: HTMLElement, offset?: number): boolean;
+    includeFromEvent(event: Event, target: HTMLElement): boolean;
+    replaceElement(newChild: HTMLElement, oldChild: HTMLElement): HTMLElement;
+    createElement(tag: keyof HTMLElementTagNameMap): HTMLElement;
+    errorHandle<T extends boolean>(condition: T, msg: string): T extends true ? T : never;
+    srtToVtt(srtText: string): string;
+    vttToBlob(vttText: string): string;
+    assToVtt(assText: string): string;
+    getExt(url: string): string;
+    download(url: string, name: string): void;
+    def(obj: object, name: string, value: any): void;
+    has(obj: object, name: string): boolean;
+    get(obj: object, name: string): PropertyDescriptor;
+    mergeDeep<T>(...args: T[]): T;
+    sleep(ms: number): Promise<null>;
+    debounce(func: (...arg: any[]) => any, wait: number, context?: object): (...arg: any[]) => any;
+    throttle(func: (...arg: any[]) => any, wait: number): (...arg: any[]) => any;
+    clamp(num: number, a: number, b: number): number;
+    secondToTime(second: number): string;
+    escape(str: string): string;
+    capitalize(str: string): string;
+    isStringOrNumber(val: any): boolean;
+    getIcon(key: string, html: string | HTMLElement): HTMLElement;
+};
 
-declare class Artplayer extends Player {
-    constructor(option: Option, readyCallback?: (this: Artplayer, art: Artplayer) => unknown);
+export type Template = {
+    readonly $container: HTMLDivElement;
+    readonly $original: HTMLDivElement;
+    readonly $player: HTMLDivElement;
+    readonly $video: HTMLVideoElement;
+    readonly $track: HTMLTrackElement;
+    readonly $poster: HTMLDivElement;
+    readonly $subtitle: HTMLDivElement;
+    readonly $danmuku: HTMLDivElement;
+    readonly $bottom: HTMLDivElement;
+    readonly $progress: HTMLDivElement;
+    readonly $controls: HTMLDivElement;
+    readonly $controlsLeft: HTMLDivElement;
+    readonly $controlsRight: HTMLDivElement;
+    readonly $layer: HTMLDivElement;
+    readonly $loading: HTMLDivElement;
+    readonly $notice: HTMLDivElement;
+    readonly $noticeInner: HTMLDivElement;
+    readonly $mask: HTMLDivElement;
+    readonly $state: HTMLDivElement;
+    readonly $setting: HTMLDivElement;
+    readonly $info: HTMLDivElement;
+    readonly $infoPanel: HTMLDivElement;
+    readonly $infoClose: HTMLDivElement;
+    readonly $miniHeader: HTMLDivElement;
+    readonly $miniTitle: HTMLDivElement;
+    readonly $miniClose: HTMLDivElement;
+    readonly $contextmenu: HTMLDivElement;
+};
 
-    static readonly instances: Artplayer[];
-    static readonly version: string;
-    static readonly env: string;
-    static readonly build: string;
-    static readonly config: Config;
-    static readonly utils: Utils;
-    static readonly scheme: Record<keyof Option, any>;
-    static readonly Emitter: Function;
-    static readonly validator: <T extends object>(option: T, scheme: object) => T;
-    static readonly kindOf: (item: any) => string;
-    static readonly html: Artplayer['template']['html'];
-    static readonly option: Option;
+export type Subtitle = {
+    /**
+     * The subtitle url
+     */
+    url?: string;
 
-    static DEBUG: boolean;
-    static CONTEXTMENU: boolean;
-    static NOTICE_TIME: number;
-    static SETTING_WIDTH: number;
-    static SETTING_ITEM_WIDTH: number;
-    static SETTING_ITEM_HEIGHT: number;
-    static INDICATOR_SIZE: number;
-    static INDICATOR_SIZE_ICON: number;
-    static INDICATOR_SIZE_MOBILE: number;
-    static INDICATOR_SIZE_MOBILE_ICON: number;
-    static VOLUME_PANEL_WIDTH: number;
-    static VOLUME_HANDLE_WIDTH: number;
-    static RESIZE_TIME: number;
-    static SCROLL_TIME: number;
-    static SCROLL_GAP: number;
-    static AUTO_PLAYBACK_MAX: number;
-    static AUTO_PLAYBACK_MIN: number;
-    static RECONNECT_TIME_MAX: number;
-    static RECONNECT_SLEEP_TIME: number;
-    static CONTROL_HIDE_TIME: number;
-    static DB_CLICE_TIME: number;
-    static MOBILE_AUTO_PLAYBACKRAT: number;
-    static MOBILE_AUTO_PLAYBACKRATE_TIME: number;
-    static MOBILE_AUTO_ORIENTATION_TIME: number;
-    static INFO_LOOP_TIME: number;
-    static FAST_FORWARD_VALUE: number;
-    static FAST_FORWARD_TIME: number;
-    static TOUCH_MOVE_RATIO: number;
-    static VOLUME_STEP: number;
-    static SEEK_STEP: number;
-    static PROGRESS_HEIGHT: number;
-    static PLAYBACK_RATE: number[];
-    static ASPECT_RATIO: string[];
-    static FLIP: string[];
-    static FULLSCREEN_WEB_IN_BODY: boolean;
+    /**
+     * The subtitle name
+     */
+    name?: string;
 
-    readonly id: number;
-    readonly option: Option;
-    readonly isLock: boolean;
-    readonly isReady: boolean;
-    readonly isFocus: boolean;
-    readonly isInput: boolean;
-    readonly isRotate: boolean;
-    readonly isDestroy: boolean;
+    /**
+     * The subtitle type
+     */
+    type?: 'vtt' | 'srt' | 'ass' | (string & Record<never, never>);
 
-    on<T extends keyof Events>(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown;
-    once<T extends keyof Events>(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown;
-    emit<T extends keyof Events>(name: T, ...args: unknown[]): unknown;
-    off<T extends keyof Events>(name: T, callback?: Function): unknown;
+    /**
+     * The subtitle style object
+     */
+    style?: Partial<CSSStyleDeclaration>;
 
-    query: Artplayer['template']['query'];
-    proxy: Artplayer['events']['proxy'];
-    video: Artplayer['template']['$video'];
+    /**
+     * The subtitle encoding, default utf-8
+     */
+    encoding?: string;
 
-    e: Record<keyof Events, { fn: Function; ctx: unknown }[]>;
+    /**
+     * Whether use escape, default true
+     */
+    escape?: boolean;
 
-    destroy(removeHtml?: boolean): void;
-
-    readonly whitelist: {
-        get state(): boolean;
-    };
-
-    readonly template: {
-        get html(): string;
-        query(str: string): HTMLElement;
-    } & Template;
-
-    readonly events: {
-        proxy<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap>(
-            element: HTMLDivElement | Document | Window,
-            eventName: KW | KH,
-            handler: (event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event) => void,
-            options?: boolean | AddEventListenerOptions,
-        ): () => void;
-        hover(element: HTMLElement, mouseenter?: (event: Event) => any, mouseleave?: (event: Event) => any): void;
-        loadImg(element: HTMLImageElement | string): Promise<HTMLImageElement>;
-    };
-
-    readonly storage: {
-        name: String;
-        settings: Record<string, any>;
-        get(key: string): any;
-        set(key: string, value: any): void;
-        del(key: string): boolean;
-        clear(): void;
-    };
-
-    readonly icons: Icons;
-
-    readonly i18n: {
-        readonly languages: I18n;
-        get(key: string): string;
-        update(language: Partial<I18n>): void;
-    };
-
-    readonly notice: {
-        time: number;
-        set show(msg: string);
-    };
-
-    readonly layers: Record<string, HTMLElement> & Component;
-
-    readonly controls: Record<string, HTMLElement> & Component;
-
-    readonly contextmenu: Record<string, HTMLElement> & Component;
-
-    readonly subtitle: {
-        get url(): string;
-        set url(url: string);
-        style(name: string | Partial<CSSStyleDeclaration>, value?: string): void;
-        switch(url: string, option?: Subtitle): Promise<string>;
-    } & Component;
-
-    readonly info: Component;
-
-    readonly loading: Component;
-
-    readonly hotkey: {
-        keys: Record<string, ((event: Event) => any)[]>;
-        add(key: number, callback: (this: Artplayer, event: Event) => any): Artplayer['hotkey'];
-    };
-
-    readonly mask: Component;
-
-    readonly setting: {
-        option: Setting[];
-        add(setting: Setting): SettingOption;
-        update(): SettingOption[];
-        updateStyle(width?: number): void;
-    } & Component;
-
-    readonly plugins: {
-        add(plugin: (this: Artplayer, art: Artplayer) => unknown): Artplayer['plugins'];
-        [pluginName: string]: any;
-    };
-}
+    /**
+     * Change the vtt text
+     */
+    onVttLoad?(vtt: string): string;
+};
 
 
 
-export type Selector = {
+type Props<T> = {
+    html: string;
+    icon: string;
+    tooltip: string;
+    $icon: HTMLDivElement;
+    $html: HTMLDivElement;
+    $tooltip: HTMLDivElement;
+    $switch: boolean;
+    $range: HTMLInputElement;
+    $parentItem: Setting;
+    $parentList: Setting[];
+} & Omit<T, 'html' | 'icon' | 'tooltip'>;
+
+export type SettingOption = Props<Setting>;
+
+export type Setting = {
+    /**
+     * Html string or html element of setting name
+     */
+    html: string | HTMLElement;
+
+    /**
+     * Html string or html element of setting icon
+     */
+    icon?: string | HTMLElement;
+
+    /**
+     * The width of setting
+     */
+    width?: number;
+
+    /**
+     * The tooltip of setting
+     */
+    tooltip?: string | HTMLElement;
+
     /**
      * Whether the default is selected
      */
     default?: boolean;
 
     /**
-     * Html string of selector
+     * Custom selector list
      */
-    html: string | HTMLElement;
+    selector?: Setting[];
+
+    /**
+     * Wnen the setting was mounted
+     */
+    mounted?(this: Artplayer, panel: HTMLDivElement, item: Setting): void;
+
+    /**
+     * When selector item click
+     */
+    onSelect?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
+
+    /**
+     * Custom switch item
+     */
+    switch?: boolean;
+
+    /**
+     * When switch item click
+     */
+    onSwitch?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
+
+    /**
+     * Custom range item
+     */
+    range?: [value?: number, min?: number, max?: number, step?: number];
+
+    /**
+     * When range item change
+     */
+    onRange?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
+
+    /**
+     * When range item change in real time
+     */
+    onChange?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
+
+    [key: string]: any;
 };
 
-export type Component = {
-    /**
-     * Component self-increasing id
-     */
-    readonly id: number;
+export type AspectRatio = 'default' | '4:3' | '16:9' | (string & Record<never, never>);
+export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>);
+export type Flip = 'normal' | 'horizontal' | 'vertical' | (string & Record<never, never>);
 
-    /**
-     * Component parent name
-     */
-    readonly name: string | void;
+export declare class Player {
+    get aspectRatio(): AspectRatio;
+    set aspectRatio(ratio: AspectRatio);
+    set aspectRatioReset(state: boolean);
+    get playbackRate(): PlaybackRate;
+    set playbackRate(rate: PlaybackRate);
+    get autoSize(): boolean;
+    set autoSize(state: boolean);
+    get autoHeight(): boolean;
+    set autoHeight(state: boolean);
+    get currentTime(): number;
+    set currentTime(time: number);
+    get duration(): number;
+    get played(): number;
+    get playing(): boolean;
+    get flip(): Flip;
+    set flip(state: Flip);
+    get fullscreen(): boolean;
+    set fullscreen(state: boolean);
+    set fullscreenToggle(state: boolean);
+    get fullscreenWeb(): boolean;
+    set fullscreenWeb(state: boolean);
+    set fullscreenWebToggle(state: boolean);
+    get loaded(): number;
+    get loadedTime(): number;
+    get loop(): number[];
+    set loop(value: number[]);
+    get mini(): boolean;
+    set mini(state: boolean);
+    get pip(): boolean;
+    set pip(state: boolean);
+    get poster(): string;
+    set poster(url: string);
+    get rect(): DOMRect;
+    get bottom(): number;
+    get height(): number;
+    get left(): number;
+    get right(): number;
+    get top(): number;
+    get width(): number;
+    get x(): number;
+    get y(): number;
+    set seek(time: number);
+    set forward(time: number);
+    set backward(time: number);
+    get url(): string;
+    set url(url: string);
+    get volume(): number;
+    set volume(percentage: number);
+    get muted(): boolean;
+    set muted(state: boolean);
+    get title(): string;
+    set title(title: string);
+    get theme(): string;
+    set theme(theme: string);
+    get subtitleOffset(): number;
+    set subtitleOffset(time: number);
+    pause(): void;
+    play(): Promise<void>;
+    toggle(): void;
+    attr(key: string, value?: any): unknown;
+    cssVar(key: `--art-${string}`, value?: string): unknown;
+    switchUrl(url: string): Promise<string>;
+    switchQuality(url: string): Promise<string>;
+    getDataURL(): Promise<string>;
+    getBlobUrl(): Promise<string>;
+    screenshot(): Promise<string>;
+    airplay(): void;
+}
 
-    /**
-     * Component parent element
-     */
-    readonly $parent: HTMLElement | void;
-
-    /**
-     * Whether to show component parent
-     */
-    get show(): boolean;
-
-    /**
-     * Whether to show component parent
-     */
-    set show(state: boolean);
-
-    /**
-     * Toggle the component parent
-     */
-    set toggle(state: boolean);
-
-    /**
-     * Dynamic add a component
-     */
-    add(option: ComponentOption): HTMLElement;
-};
-
-export type ComponentOption = {
-    /**
-     * Html string or html element of component
-     */
-    html: string | HTMLElement;
-
-    /**
-     * Whether to disable component
-     */
-    disable?: boolean;
-
-    /**
-     * Unique name for component
-     */
-    name?: string;
-
-    /**
-     * Component sort index
-     */
-    index?: number;
-
-    /**
-     * Component style object
-     */
-    style?: Partial<CSSStyleDeclaration>;
-
-    /**
-     * Component click event
-     */
-    click?(this: Artplayer, component: Component, event: Event): void;
-
-    /**
-     * Wnen the component was mounted
-     */
-    mounted?(this: Artplayer, element: HTMLElement): void;
-
-    /**
-     * Component tooltip, use in controls
-     */
-    tooltip?: string;
-
-    /**
-     * Component position, use in controls
-     */
-    position?: 'top' | 'left' | 'right' | (string & Record<never, never>);
-
-    /**
-     * Custom selector list, use in controls
-     */
-    selector?: Selector[];
-
-    /**
-     * When selector item click, use in controls
-     */
-    onSelect?(this: Artplayer, selector: Selector, element: HTMLElement, event: Event): void;
-};
-
-export type Config = {
-    propertys: [
-        'audioTracks',
-        'autoplay',
-        'buffered',
-        'controller',
-        'controls',
-        'crossOrigin',
-        'currentSrc',
-        'currentTime',
-        'defaultMuted',
-        'defaultPlaybackRate',
-        'duration',
-        'ended',
-        'error',
-        'loop',
-        'mediaGroup',
-        'muted',
-        'networkState',
-        'paused',
-        'playbackRate',
-        'played',
-        'preload',
-        'readyState',
-        'seekable',
-        'seeking',
-        'src',
-        'startDate',
-        'textTracks',
-        'videoTracks',
-        'volume',
-    ];
-    methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'];
-    events: [
-        'abort',
-        'canplay',
-        'canplaythrough',
-        'durationchange',
-        'emptied',
-        'ended',
-        'error',
-        'loadeddata',
-        'loadedmetadata',
-        'loadstart',
-        'pause',
-        'play',
-        'playing',
-        'progress',
-        'ratechange',
-        'seeked',
-        'seeking',
-        'stalled',
-        'suspend',
-        'timeupdate',
-        'volumechange',
-        'waiting',
-    ];
-    prototypes: [
-        'width',
-        'height',
-        'videoWidth',
-        'videoHeight',
-        'poster',
-        'webkitDecodedFrameCount',
-        'webkitDroppedFrameCount',
-        'playsInline',
-        'webkitSupportsFullscreen',
-        'webkitDisplayingFullscreen',
-        'onenterpictureinpicture',
-        'onleavepictureinpicture',
-        'disablePictureInPicture',
-        'cancelVideoFrameCallback',
-        'requestVideoFrameCallback',
-        'getVideoPlaybackQuality',
-        'requestPictureInPicture',
-        'webkitEnterFullScreen',
-        'webkitEnterFullscreen',
-        'webkitExitFullScreen',
-        'webkitExitFullscreen',
-    ];
-};
-
-
-
-
-export type Events = {
-    'video:canplay': [event: Event];
-    'video:canplaythrough': [event: Event];
-    'video:complete': [event: Event];
-    'video:durationchange': [event: Event];
-    'video:emptied': [event: Event];
-    'video:ended': [event: Event];
-    'video:error': [event: Error];
-    'video:loadeddata': [event: Event];
-    'video:loadedmetadata': [event: Event];
-    'video:pause': [event: Event];
-    'video:play': [event: Event];
-    'video:playing': [event: Event];
-    'video:progress': [event: Event];
-    'video:ratechange': [event: Event];
-    'video:seeked': [event: Event];
-    'video:seeking': [event: Event];
-    'video:stalled': [event: Event];
-    'video:suspend': [event: Event];
-    'video:timeupdate': [event: Event];
-    'video:volumechange': [event: Event];
-    'video:waiting': [event: Event];
-    info: [state: boolean];
-    layer: [state: boolean];
-    loading: [state: boolean];
-    mask: [state: boolean];
-    subtitle: [state: boolean];
-    contextmenu: [state: boolean];
-    control: [state: boolean];
-    setting: [state: boolean];
-    hotkey: [event: Event];
-    destroy: [];
-    url: [url: string];
-    subtitleUpdate: [text: string];
-    subtitleLoad: [url: string];
-    subtitleSwitch: [url: string];
-    focus: [];
-    blur: [];
-    dblclick: [];
-    click: [];
-    hover: [state: boolean, event: Event];
-    mousemove: [event: Event];
-    resize: [];
-    view: [state: boolean];
-    lock: [state: boolean];
-    aspectRatio: [aspectRatio: AspectRatio];
-    autoHeight: [height: number];
-    autoSize: [];
-    ready: [];
-    error: [error: Error, reconnectTime: number];
-    flip: [flip: Flip];
-    fullscreen: [state: boolean];
-    fullscreenWeb: [state: boolean];
-    mini: [state: boolean];
-    pause: [];
-    pip: [state: boolean];
-    play: [];
-    screenshot: [dataUri: string];
-    seek: [currentTime: number];
-    subtitleOffset: [offset: number];
-    restart: [];
-};
-
-type I18nKeys = 'en' | 'zh-cn' | 'zh-tw' | 'pl' | 'cs' | 'es' | 'fa' | 'fr' | `id` (string & Record<never, never>);
-
-type I18nValue = {
-    'Video Info': string;
-    Close: string;
-    'Video Load Failed': string;
-    Volume: string;
-    Play: string;
-    Pause: string;
-    Rate: string;
-    Mute: string;
-    'Video Flip': string;
-    Horizontal: string;
-    Vertical: string;
-    Reconnect: string;
-    'Show Setting': string;
-    'Hide Setting': string;
-    Screenshot: string;
-    'Play Speed': string;
-    'Aspect Ratio': string;
-    Default: string;
-    Normal: string;
-    Open: string;
-    'Switch Video': string;
-    'Switch Subtitle': string;
-    Fullscreen: string;
-    'Exit Fullscreen': string;
-    'Web Fullscreen': string;
-    'Exit Web Fullscreen': string;
-    'Mini Player': string;
-    'PIP Mode': string;
-    'Exit PIP Mode': string;
-    'PIP Not Supported': string;
-    'Fullscreen Not Supported': string;
-    'Subtitle Offset': string;
-    'Last Seen': string;
-    'Jump Play': string;
-    AirPlay: string;
-    'AirPlay Not Available': string;
-};
-
-export type I18n = Record<I18nKeys, Partial<I18nValue>>;
-
-export type Icons = {
-    readonly loading: HTMLDivElement;
-    readonly state: HTMLDivElement;
-    readonly play: HTMLDivElement;
-    readonly pause: HTMLDivElement;
-    readonly check: HTMLDivElement;
-    readonly volume: HTMLDivElement;
-    readonly volumeClose: HTMLDivElement;
-    readonly screenshot: HTMLDivElement;
-    readonly setting: HTMLDivElement;
-    readonly pip: HTMLDivElement;
-    readonly arrowLeft: HTMLDivElement;
-    readonly arrowRight: HTMLDivElement;
-    readonly playbackRate: HTMLDivElement;
-    readonly aspectRatio: HTMLDivElement;
-    readonly config: HTMLDivElement;
-    readonly lock: HTMLDivElement;
-    readonly flip: HTMLDivElement;
-    readonly unlock: HTMLDivElement;
-    readonly fullscreenOff: HTMLDivElement;
-    readonly fullscreenOn: HTMLDivElement;
-    readonly fullscreenWebOff: HTMLDivElement;
-    readonly fullscreenWebOn: HTMLDivElement;
-    readonly switchOn: HTMLDivElement;
-    readonly switchOff: HTMLDivElement;
-    readonly error: HTMLDivElement;
-    readonly close: HTMLDivElement;
-    readonly airplay: HTMLDivElement;
-    readonly [key: string]: HTMLDivElement;
-};
 
 
 
@@ -788,6 +584,11 @@ export type Option = {
         [key in keyof Icons]?: HTMLElement | string;
     };
 
+    /**
+     * Custom css variables
+     */
+    cssVar?: CssVar;
+
     /**
      * Custom video type function
      */
@@ -798,274 +599,506 @@ export type Option = {
 
 export default Option;
 
-export type AspectRatio = 'default' | '4:3' | '16:9' | (string & Record<never, never>);
-export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>);
-export type Flip = 'normal' | 'horizontal' | 'vertical' | (string & Record<never, never>);
+export type Icons = {
+    readonly loading: HTMLDivElement;
+    readonly state: HTMLDivElement;
+    readonly play: HTMLDivElement;
+    readonly pause: HTMLDivElement;
+    readonly check: HTMLDivElement;
+    readonly volume: HTMLDivElement;
+    readonly volumeClose: HTMLDivElement;
+    readonly screenshot: HTMLDivElement;
+    readonly setting: HTMLDivElement;
+    readonly pip: HTMLDivElement;
+    readonly arrowLeft: HTMLDivElement;
+    readonly arrowRight: HTMLDivElement;
+    readonly playbackRate: HTMLDivElement;
+    readonly aspectRatio: HTMLDivElement;
+    readonly config: HTMLDivElement;
+    readonly lock: HTMLDivElement;
+    readonly flip: HTMLDivElement;
+    readonly unlock: HTMLDivElement;
+    readonly fullscreenOff: HTMLDivElement;
+    readonly fullscreenOn: HTMLDivElement;
+    readonly fullscreenWebOff: HTMLDivElement;
+    readonly fullscreenWebOn: HTMLDivElement;
+    readonly switchOn: HTMLDivElement;
+    readonly switchOff: HTMLDivElement;
+    readonly error: HTMLDivElement;
+    readonly close: HTMLDivElement;
+    readonly airplay: HTMLDivElement;
+    readonly [key: string]: HTMLDivElement;
+};
 
-export declare class Player {
-    get aspectRatio(): AspectRatio;
-    set aspectRatio(ratio: AspectRatio);
-    get playbackRate(): PlaybackRate;
-    set playbackRate(rate: PlaybackRate);
-    get autoSize(): boolean;
-    set autoSize(state: boolean);
-    get autoHeight(): boolean;
-    set autoHeight(state: boolean);
-    get currentTime(): number;
-    set currentTime(time: number);
-    get duration(): number;
-    get played(): number;
-    get playing(): boolean;
-    get flip(): Flip;
-    set flip(state: Flip);
-    get fullscreen(): boolean;
-    set fullscreen(state: boolean);
-    set fullscreenToggle(state: boolean);
-    get fullscreenWeb(): boolean;
-    set fullscreenWeb(state: boolean);
-    set fullscreenWebToggle(state: boolean);
-    get loaded(): number;
-    get loop(): number[];
-    set loop(value: number[]);
-    get mini(): boolean;
-    set mini(state: boolean);
-    get pip(): boolean;
-    set pip(state: boolean);
-    get poster(): string;
-    set poster(url: string);
-    get rect(): DOMRect;
-    get bottom(): number;
-    get height(): number;
-    get left(): number;
-    get right(): number;
-    get top(): number;
-    get width(): number;
-    get x(): number;
-    get y(): number;
-    set seek(time: number);
-    set forward(time: number);
-    set backward(time: number);
-    get url(): string;
-    set url(url: string);
-    get volume(): number;
-    set volume(percentage: number);
-    get muted(): boolean;
-    set muted(state: boolean);
-    get title(): string;
-    set title(title: string);
-    get theme(): string;
-    set theme(theme: string);
-    get subtitleOffset(): number;
-    set subtitleOffset(time: number);
-    pause(): void;
-    play(): Promise<void>;
-    toggle(): void;
-    attr(key: string, value?: any): unknown;
-    switchUrl(url: string): Promise<string>;
-    switchQuality(url: string): Promise<string>;
-    getDataURL(): Promise<string>;
-    getBlobUrl(): Promise<string>;
-    screenshot(): Promise<string>;
-    airplay(): void;
-}
+type I18nKeys = 'en' | 'zh-cn' | 'zh-tw' | 'pl' | 'cs' | 'es' | 'fa' | 'fr' | `id` (string & Record<never, never>);
+
+type I18nValue = {
+    'Video Info': string;
+    Close: string;
+    'Video Load Failed': string;
+    Volume: string;
+    Play: string;
+    Pause: string;
+    Rate: string;
+    Mute: string;
+    'Video Flip': string;
+    Horizontal: string;
+    Vertical: string;
+    Reconnect: string;
+    'Show Setting': string;
+    'Hide Setting': string;
+    Screenshot: string;
+    'Play Speed': string;
+    'Aspect Ratio': string;
+    Default: string;
+    Normal: string;
+    Open: string;
+    'Switch Video': string;
+    'Switch Subtitle': string;
+    Fullscreen: string;
+    'Exit Fullscreen': string;
+    'Web Fullscreen': string;
+    'Exit Web Fullscreen': string;
+    'Mini Player': string;
+    'PIP Mode': string;
+    'Exit PIP Mode': string;
+    'PIP Not Supported': string;
+    'Fullscreen Not Supported': string;
+    'Subtitle Offset': string;
+    'Last Seen': string;
+    'Jump Play': string;
+    AirPlay: string;
+    'AirPlay Not Available': string;
+};
+
+export type I18n = Record<I18nKeys, Partial<I18nValue>>;
 
 
 
-type Props<T> = {
-    html: string;
-    icon: string;
-    tooltip: string;
-    $icon: HTMLDivElement;
-    $html: HTMLDivElement;
-    $tooltip: HTMLDivElement;
-    $switch: boolean;
-    $range: HTMLInputElement;
-    $parentItem: Setting;
-    $parentList: Setting[];
-} & Omit<T, 'html' | 'icon' | 'tooltip'>;
+export type Events = {
+    'video:canplay': [event: Event];
+    'video:canplaythrough': [event: Event];
+    'video:complete': [event: Event];
+    'video:durationchange': [event: Event];
+    'video:emptied': [event: Event];
+    'video:ended': [event: Event];
+    'video:error': [event: Error];
+    'video:loadeddata': [event: Event];
+    'video:loadedmetadata': [event: Event];
+    'video:pause': [event: Event];
+    'video:play': [event: Event];
+    'video:playing': [event: Event];
+    'video:progress': [event: Event];
+    'video:ratechange': [event: Event];
+    'video:seeked': [event: Event];
+    'video:seeking': [event: Event];
+    'video:stalled': [event: Event];
+    'video:suspend': [event: Event];
+    'video:timeupdate': [event: Event];
+    'video:volumechange': [event: Event];
+    'video:waiting': [event: Event];
+    'document:mousemove': [event: Event];
+    'document:mouseup': [event: Event];
+    info: [state: boolean];
+    layer: [state: boolean];
+    loading: [state: boolean];
+    mask: [state: boolean];
+    subtitle: [state: boolean];
+    contextmenu: [state: boolean];
+    control: [state: boolean];
+    setting: [state: boolean];
+    hotkey: [event: Event];
+    destroy: [];
+    url: [url: string];
+    subtitleUpdate: [text: string];
+    subtitleLoad: [url: string];
+    subtitleSwitch: [url: string];
+    focus: [];
+    blur: [];
+    dblclick: [];
+    click: [];
+    hover: [state: boolean, event: Event];
+    mousemove: [event: Event];
+    resize: [];
+    view: [state: boolean];
+    lock: [state: boolean];
+    aspectRatio: [aspectRatio: AspectRatio];
+    autoHeight: [height: number];
+    autoSize: [];
+    ready: [];
+    error: [error: Error, reconnectTime: number];
+    flip: [flip: Flip];
+    fullscreen: [state: boolean];
+    fullscreenWeb: [state: boolean];
+    mini: [state: boolean];
+    pause: [];
+    pip: [state: boolean];
+    play: [];
+    screenshot: [dataUri: string];
+    seek: [currentTime: number];
+    subtitleOffset: [offset: number];
+    restart: [];
+    loop: [start?: number, end?: number];
+};
 
-export type SettingOption = Props<Setting>;
+export type CssVar = {
+    //
+};
 
-export type Setting = {
-    /**
-     * Html string or html element of setting name
-     */
-    html: string | HTMLElement;
+export type Config = {
+    propertys: [
+        'audioTracks',
+        'autoplay',
+        'buffered',
+        'controller',
+        'controls',
+        'crossOrigin',
+        'currentSrc',
+        'currentTime',
+        'defaultMuted',
+        'defaultPlaybackRate',
+        'duration',
+        'ended',
+        'error',
+        'loop',
+        'mediaGroup',
+        'muted',
+        'networkState',
+        'paused',
+        'playbackRate',
+        'played',
+        'preload',
+        'readyState',
+        'seekable',
+        'seeking',
+        'src',
+        'startDate',
+        'textTracks',
+        'videoTracks',
+        'volume',
+    ];
+    methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'];
+    events: [
+        'abort',
+        'canplay',
+        'canplaythrough',
+        'durationchange',
+        'emptied',
+        'ended',
+        'error',
+        'loadeddata',
+        'loadedmetadata',
+        'loadstart',
+        'pause',
+        'play',
+        'playing',
+        'progress',
+        'ratechange',
+        'seeked',
+        'seeking',
+        'stalled',
+        'suspend',
+        'timeupdate',
+        'volumechange',
+        'waiting',
+    ];
+    prototypes: [
+        'width',
+        'height',
+        'videoWidth',
+        'videoHeight',
+        'poster',
+        'webkitDecodedFrameCount',
+        'webkitDroppedFrameCount',
+        'playsInline',
+        'webkitSupportsFullscreen',
+        'webkitDisplayingFullscreen',
+        'onenterpictureinpicture',
+        'onleavepictureinpicture',
+        'disablePictureInPicture',
+        'cancelVideoFrameCallback',
+        'requestVideoFrameCallback',
+        'getVideoPlaybackQuality',
+        'requestPictureInPicture',
+        'webkitEnterFullScreen',
+        'webkitEnterFullscreen',
+        'webkitExitFullScreen',
+        'webkitExitFullscreen',
+    ];
+};
 
-    /**
-     * Html string or html element of setting icon
-     */
-    icon?: string | HTMLElement;
 
-    /**
-     * The width of setting
-     */
-    width?: number;
-
-    /**
-     * The tooltip of setting
-     */
-    tooltip?: string | HTMLElement;
 
+export type Selector = {
     /**
      * Whether the default is selected
      */
     default?: boolean;
 
     /**
-     * Custom selector list
+     * Html string of selector
      */
-    selector?: Setting[];
-
-    /**
-     * Wnen the setting was mounted
-     */
-    mounted?(this: Artplayer, panel: HTMLDivElement, item: Setting): void;
-
-    /**
-     * When selector item click
-     */
-    onSelect?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
-
-    /**
-     * Custom switch item
-     */
-    switch?: boolean;
-
-    /**
-     * When switch item click
-     */
-    onSwitch?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
-
-    /**
-     * Custom range item
-     */
-    range?: [value?: number, min?: number, max?: number, step?: number];
-
-    /**
-     * When range item change
-     */
-    onRange?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
-
-    /**
-     * When range item change in real time
-     */
-    onChange?(this: Artplayer, item: SettingOption, element: HTMLDivElement, event: Event): void;
-
-    [key: string]: any;
+    html: string | HTMLElement;
 };
 
-export type Subtitle = {
+export type Component = {
     /**
-     * The subtitle url
+     * Component self-increasing id
      */
-    url?: string;
+    readonly id: number;
 
     /**
-     * The subtitle name
+     * Component parent name
+     */
+    readonly name: string | void;
+
+    /**
+     * Component parent element
+     */
+    readonly $parent: HTMLElement | void;
+
+    /**
+     * Whether to show component parent
+     */
+    get show(): boolean;
+
+    /**
+     * Whether to show component parent
+     */
+    set show(state: boolean);
+
+    /**
+     * Toggle the component parent
+     */
+    set toggle(state: boolean);
+
+    /**
+     * Dynamic add a component
+     */
+    add(option: ComponentOption): HTMLElement;
+};
+
+export type ComponentOption = {
+    /**
+     * Html string or html element of component
+     */
+    html: string | HTMLElement;
+
+    /**
+     * Whether to disable component
+     */
+    disable?: boolean;
+
+    /**
+     * Unique name for component
      */
     name?: string;
 
     /**
-     * The subtitle type
+     * Component sort index
      */
-    type?: 'vtt' | 'srt' | 'ass' | (string & Record<never, never>);
+    index?: number;
 
     /**
-     * The subtitle style object
+     * Component style object
      */
     style?: Partial<CSSStyleDeclaration>;
 
     /**
-     * The subtitle encoding, default utf-8
+     * Component click event
      */
-    encoding?: string;
+    click?(this: Artplayer, component: Component, event: Event): void;
 
     /**
-     * Whether use escape, default true
+     * Wnen the component was mounted
      */
-    escape?: boolean;
+    mounted?(this: Artplayer, element: HTMLElement): void;
+
+    /**
+     * Component tooltip, use in controls
+     */
+    tooltip?: string;
+
+    /**
+     * Component position, use in controls
+     */
+    position?: 'top' | 'left' | 'right' | (string & Record<never, never>);
+
+    /**
+     * Custom selector list, use in controls
+     */
+    selector?: Selector[];
+
+    /**
+     * When selector item click, use in controls
+     */
+    onSelect?(this: Artplayer, selector: Selector, element: HTMLElement, event: Event): void;
 };
 
-export type Template = {
-    readonly $container: HTMLDivElement;
-    readonly $original: HTMLDivElement;
-    readonly $player: HTMLDivElement;
-    readonly $video: HTMLVideoElement;
-    readonly $track: HTMLTrackElement;
-    readonly $poster: HTMLDivElement;
-    readonly $subtitle: HTMLDivElement;
-    readonly $danmuku: HTMLDivElement;
-    readonly $bottom: HTMLDivElement;
-    readonly $progress: HTMLDivElement;
-    readonly $controls: HTMLDivElement;
-    readonly $controlsLeft: HTMLDivElement;
-    readonly $controlsRight: HTMLDivElement;
-    readonly $layer: HTMLDivElement;
-    readonly $loading: HTMLDivElement;
-    readonly $notice: HTMLDivElement;
-    readonly $noticeInner: HTMLDivElement;
-    readonly $mask: HTMLDivElement;
-    readonly $state: HTMLDivElement;
-    readonly $setting: HTMLDivElement;
-    readonly $info: HTMLDivElement;
-    readonly $infoPanel: HTMLDivElement;
-    readonly $infoClose: HTMLDivElement;
-    readonly $miniHeader: HTMLDivElement;
-    readonly $miniTitle: HTMLDivElement;
-    readonly $miniClose: HTMLDivElement;
-    readonly $contextmenu: HTMLDivElement;
-};
 
-export type Utils = {
-    userAgent: string;
-    isMobile: boolean;
-    isSafari: boolean;
-    isWechat: boolean;
-    isIE: boolean;
-    isAndroid: boolean;
-    isIOS: boolean;
-    query(selector: string, parent?: HTMLElement): HTMLElement;
-    queryAll(selector: string, parent?: HTMLElement): HTMLElement[];
-    addClass(target: HTMLElement, className: string): void;
-    removeClass(target: HTMLElement, className: string): void;
-    hasClass(target: HTMLElement, className: string): boolean;
-    append(target: HTMLElement, className: HTMLElement): HTMLElement;
-    remove(target: HTMLElement): void;
-    setStyle<T extends keyof CSSStyleDeclaration>(
-        element: HTMLElement,
-        key: T,
-        value: CSSStyleDeclaration[T],
-    ): HTMLElement;
-    setStyles(element: HTMLElement, styles: Partial<CSSStyleDeclaration>): HTMLElement;
-    getStyle<T, K extends keyof CSSStyleDeclaration>(
-        element: HTMLElement,
-        key: K,
-        numberType?: T,
-    ): T extends true ? number : string;
-    sublings(target: HTMLElement): HTMLElement[];
-    inverseClass(target: HTMLElement, className: string): void;
-    tooltip(target: HTMLElement, msg: string, pos?: string): void;
-    isInViewport(target: HTMLElement, offset?: number): boolean;
-    includeFromEvent(event: Event, target: HTMLElement): boolean;
-    replaceElement(newChild: HTMLElement, oldChild: HTMLElement): HTMLElement;
-    createElement(tag: keyof HTMLElementTagNameMap): HTMLElement;
-    errorHandle<T extends boolean>(condition: T, msg: string): T extends true ? T : never;
-    srtToVtt(srtText: string): string;
-    vttToBlob(vttText: string): string;
-    assToVtt(assText: string): string;
-    getExt(url: string): string;
-    download(url: string, name: string): void;
-    def(obj: object, name: string, value: any): void;
-    has(obj: object, name: string): boolean;
-    get(obj: object, name: string): PropertyDescriptor;
-    mergeDeep<T>(...args: T[]): T;
-    sleep(ms: number): Promise<null>;
-    debounce(func: (...arg: any[]) => any, wait: number, context?: object): (...arg: any[]) => any;
-    throttle(func: (...arg: any[]) => any, wait: number): (...arg: any[]) => any;
-    clamp(num: number, a: number, b: number): number;
-    secondToTime(second: number): string;
-    escape(str: string): string;
-    capitalize(str: string): string;
-    isStringOrNumber(val: any): boolean;
-};
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+export = Artplayer;
+export as namespace Artplayer;
+
+declare class Artplayer extends Player {
+    constructor(option: Option, readyCallback?: (this: Artplayer, art: Artplayer) => unknown);
+
+    static readonly instances: Artplayer[];
+    static readonly version: string;
+    static readonly env: string;
+    static readonly build: string;
+    static readonly config: Config;
+    static readonly utils: Utils;
+    static readonly scheme: Record<keyof Option, any>;
+    static readonly Emitter: Function;
+    static readonly validator: <T extends object>(option: T, scheme: object) => T;
+    static readonly kindOf: (item: any) => string;
+    static readonly html: Artplayer['template']['html'];
+    static readonly option: Option;
+
+    static DEBUG: boolean;
+    static CONTEXTMENU: boolean;
+    static NOTICE_TIME: number;
+    static SETTING_WIDTH: number;
+    static SETTING_ITEM_WIDTH: number;
+    static SETTING_ITEM_HEIGHT: number;
+    static INDICATOR_SIZE: number;
+    static INDICATOR_SIZE_ICON: number;
+    static INDICATOR_SIZE_MOBILE: number;
+    static INDICATOR_SIZE_MOBILE_ICON: number;
+    static VOLUME_PANEL_WIDTH: number;
+    static VOLUME_HANDLE_WIDTH: number;
+    static RESIZE_TIME: number;
+    static SCROLL_TIME: number;
+    static SCROLL_GAP: number;
+    static AUTO_PLAYBACK_MAX: number;
+    static AUTO_PLAYBACK_MIN: number;
+    static RECONNECT_TIME_MAX: number;
+    static RECONNECT_SLEEP_TIME: number;
+    static CONTROL_HIDE_TIME: number;
+    static DB_CLICE_TIME: number;
+    static MOBILE_AUTO_PLAYBACKRAT: number;
+    static MOBILE_AUTO_PLAYBACKRATE_TIME: number;
+    static MOBILE_AUTO_ORIENTATION_TIME: number;
+    static INFO_LOOP_TIME: number;
+    static FAST_FORWARD_VALUE: number;
+    static FAST_FORWARD_TIME: number;
+    static TOUCH_MOVE_RATIO: number;
+    static VOLUME_STEP: number;
+    static SEEK_STEP: number;
+    static PROGRESS_HEIGHT: number;
+    static PLAYBACK_RATE: number[];
+    static ASPECT_RATIO: string[];
+    static FLIP: string[];
+    static FULLSCREEN_WEB_IN_BODY: boolean;
+
+    readonly id: number;
+    readonly option: Option;
+    readonly isLock: boolean;
+    readonly isReady: boolean;
+    readonly isFocus: boolean;
+    readonly isInput: boolean;
+    readonly isRotate: boolean;
+    readonly isDestroy: boolean;
+
+    on<T extends keyof Events>(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown;
+    once<T extends keyof Events>(name: T, fn: (...args: Events[T]) => unknown, ctx?: object): unknown;
+    emit<T extends keyof Events>(name: T, ...args: unknown[]): unknown;
+    off<T extends keyof Events>(name: T, callback?: Function): unknown;
+
+    query: Artplayer['template']['query'];
+    proxy: Artplayer['events']['proxy'];
+    video: Artplayer['template']['$video'];
+
+    e: Record<keyof Events, { fn: Function; ctx: unknown }[]>;
+
+    destroy(removeHtml?: boolean): void;
+
+    readonly whitelist: {
+        get state(): boolean;
+    };
+
+    readonly template: {
+        get html(): string;
+        query(str: string): HTMLElement;
+    } & Template;
+
+    readonly events: {
+        proxy<KW extends keyof WindowEventMap, KH extends keyof HTMLElementEventMap>(
+            element: HTMLDivElement | Document | Window,
+            eventName: KW | KH,
+            handler: (event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event) => void,
+            options?: boolean | AddEventListenerOptions,
+        ): () => void;
+        hover(element: HTMLElement, mouseenter?: (event: Event) => any, mouseleave?: (event: Event) => any): void;
+        loadImg(element: HTMLImageElement | string): Promise<HTMLImageElement>;
+    };
+
+    readonly storage: {
+        name: String;
+        settings: Record<string, any>;
+        get(key: string): any;
+        set(key: string, value: any): void;
+        del(key: string): boolean;
+        clear(): void;
+    };
+
+    readonly icons: Icons;
+
+    readonly i18n: {
+        readonly languages: I18n;
+        get(key: string): string;
+        update(language: Partial<I18n>): void;
+    };
+
+    readonly notice: {
+        time: number;
+        set show(msg: string);
+    };
+
+    readonly layers: Record<string, HTMLElement> & Component;
+
+    readonly controls: Record<string, HTMLElement> & Component;
+
+    readonly contextmenu: Record<string, HTMLElement> & Component;
+
+    readonly subtitle: {
+        get url(): string;
+        set url(url: string);
+        style(name: string | Partial<CSSStyleDeclaration>, value?: string): void;
+        switch(url: string, option?: Subtitle): Promise<string>;
+    } & Component;
+
+    readonly info: Component;
+
+    readonly loading: Component;
+
+    readonly hotkey: {
+        keys: Record<string, ((event: Event) => any)[]>;
+        add(key: number, callback: (this: Artplayer, event: Event) => any): Artplayer['hotkey'];
+    };
+
+    readonly mask: Component;
+
+    readonly setting: {
+        option: Setting[];
+        add(setting: Setting): SettingOption;
+        update(): SettingOption[];
+        updateStyle(width?: number): void;
+    } & Component;
+
+    readonly plugins: {
+        add(plugin: (this: Artplayer, art: Artplayer) => unknown): Artplayer['plugins'];
+        [pluginName: string]: any;
+    };
+}
\ No newline at end of file
diff --git a/docs/uncompiled/artplayer/index.js b/docs/uncompiled/artplayer/index.js
index a92e8191f..20063be2f 100644
--- a/docs/uncompiled/artplayer/index.js
+++ b/docs/uncompiled/artplayer/index.js
@@ -248,7 +248,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2023-04-17 22:43:27";
+        return "2023-04-17 22:48:49";
     }
     static get config() {
         return 0, _configDefault.default;
diff --git a/packages/artplayer/types/player.d.ts b/packages/artplayer/types/player.d.ts
index 7d31889c9..b5a0ab83c 100644
--- a/packages/artplayer/types/player.d.ts
+++ b/packages/artplayer/types/player.d.ts
@@ -63,6 +63,7 @@ export declare class Player {
     play(): Promise<void>;
     toggle(): void;
     attr(key: string, value?: any): unknown;
+    cssVar(key: `--art-${string}`, value?: string): unknown;
     switchUrl(url: string): Promise<string>;
     switchQuality(url: string): Promise<string>;
     getDataURL(): Promise<string>;