refactor: rename property & fix type error

packages/nplayer-danmaku/src/ts/danmaku/index.ts

@@ -45,7 +45,7 @@ export const defaultOptions = (): Required<DanmakuOptions> => ({
 });
 
 export class Danmaku implements Disposable {
-  element: HTMLElement;
+  el: HTMLElement;
 
   opts: Required<DanmakuOptions>;
 
@@ -78,9 +78,9 @@ export class Danmaku implements Disposable {
   constructor(private player: Player, private _opts?: DanmakuOptions) {
     this.opts = { ...defaultOptions(), ...getStorageOptions(), ..._opts };
 
-    const { $, addDisposable } = player.Player._utils;
-    this.element = player.element.appendChild($('.danmaku_screen'));
-    this.element.style.zIndex = String(this.opts.zIndex);
+    const { $, addDisposable } = player.Player.__utils;
+    this.el = player.el.appendChild($('.danmaku_screen'));
+    this.el.style.zIndex = String(this.opts.zIndex);
 
     this.items = this.opts.items;
 
@@ -120,7 +120,7 @@ export class Danmaku implements Disposable {
     if (bullet) {
       bullet.init(item, setting);
     } else {
-      bullet = new Bullet(this.element, this, item, setting);
+      bullet = new Bullet(this.el, this, item, setting);
     }
     this.aliveBullets.add(bullet);
     return bullet;
@@ -276,7 +276,7 @@ export class Danmaku implements Disposable {
   }
 
   updateOpacity(opacity = this.opts.opacity): void {
-    this.element.style.opacity = String(opacity);
+    this.el.style.opacity = String(opacity);
     this.storeOptions();
   }
 
@@ -376,16 +376,16 @@ export class Danmaku implements Disposable {
   dispose(): void {
     if (!this.player) return;
     this.disable();
-    this.player.Player._utils.removeNode(this.element);
-    this.player.Player._utils.dispose(this);
+    this.player.Player.__utils.removeNode(this.el);
+    this.player.Player.__utils.dispose(this);
     this.player = null!;
     this.bulletPool = null!;
     this.aliveBullets = null!;
     this.scrollBullets = null!;
     this.topBullets = null!;
     this.bottomBullets = null!;
     this.items = null!;
-    this.element = null!;
+    this.el = null!;
     this.opts = null!;
   }
 

packages/nplayer-danmaku/src/ts/main.ts

@@ -4,14 +4,10 @@ import { danmakuSendBoxControlItem } from './send-box';
 import { danmakuSettingControlItem } from './setting';
 import { trans } from './utils';
 
-export interface DanmakuPluginOption extends DanmakuOptions {
-  autoInsertControl: boolean;
-}
-
 export class Plugin implements P {
-  private opts: DanmakuPluginOption;
+  private opts: DanmakuOptions;
 
-  constructor(opts: DanmakuPluginOption) {
+  constructor(opts: DanmakuOptions) {
     this.opts = opts;
   }
 
@@ -21,17 +17,6 @@ export class Plugin implements P {
 
     player.Player.I18n.add('zh-cn', trans);
     player.danmaku = new Danmaku(player, this.opts);
-
-    if (this.opts && this.opts.autoInsertControl !== false) {
-      const i = player.opts.controls.findIndex((c) => c === 'spacer');
-      if (i > -1) {
-        player.opts.controls.splice(i + 1, 0, 'danmaku-send', 'danmaku-setting');
-        const spacer = player.getControlItem('spacer');
-        if (spacer) spacer.flex(0);
-      } else {
-        player.opts.controls.push('danmaku-send', 'danmaku-setting');
-      }
-    }
   }
 
   static Plugin = Plugin;

packages/nplayer-danmaku/src/ts/send-box.ts

@@ -8,12 +8,12 @@ import {
   BOTTOM, COLOR, isDefaultColor, MODE, SCROLL, SEND, SEND_SETTINGS, TOP,
 } from './utils';
 
-let utils: Player['Player']['_utils'];
+let utils: Player['Player']['__utils'];
 
 class DanmakuSendBox implements ControlItem {
   readonly id = 'danmaku-send';
 
-  element!: HTMLElement;
+  el!: HTMLElement;
 
   private player!: Player
 
@@ -35,19 +35,19 @@ class DanmakuSendBox implements ControlItem {
 
   init(player: Player) {
     this.player = player;
-    const { _utils, components, I18n } = player.Player;
-    utils = _utils;
+    const { __utils, components, I18n } = player.Player;
+    utils = __utils;
     const {
       $, addDisposableListener, addDisposable, createSvg,
     } = utils;
 
-    this.element = $('.danmaku_send');
-    const settingElement = this.element.appendChild($());
+    this.el = $('.danmaku_send');
+    const settingElement = this.el.appendChild($());
     settingElement.appendChild(createSvg('icon', 'M9.62 14L12 7.67 14.37 14M11 5L5.5 19h2.25l1.12-3h6.25l1.13 3h2.25L13 5h-2z'));
     this.tooltip = addDisposable(this, new components.Tooltip(settingElement, I18n.t(SEND_SETTINGS)));
     this.popover = addDisposable(this, new components.Popover(settingElement, () => this.tooltip.show(), undefined, true));
-    this.inputElement = this.element.appendChild($('input'));
-    this.sendElement = this.element.appendChild($('.danmaku_send_btn', undefined, I18n.t(SEND)));
+    this.inputElement = this.el.appendChild($('input'));
+    this.sendElement = this.el.appendChild($('.danmaku_send_btn', undefined, I18n.t(SEND)));
 
     const row = () => $('.flex.align-center.danmaku_row');
     const panelElement = this.popover.panelElement;
@@ -113,7 +113,7 @@ class DanmakuSendBox implements ControlItem {
   }
 
   show = (ev?: MouseEvent) => {
-    if (ev && utils.getEventPath(ev).includes(this.popover.element)) return;
+    if (ev && utils.getEventPath(ev).includes(this.popover.el)) return;
     this.tooltip.hide();
     this.popover.show();
   }
@@ -134,9 +134,9 @@ class DanmakuSendBox implements ControlItem {
   dispose() {
     if (!this.player) return;
     utils.dispose(this);
-    utils.removeNode(this.element);
+    utils.removeNode(this.el);
     this.player = null!;
-    this.element = null!;
+    this.el = null!;
   }
 }
 

packages/nplayer-danmaku/src/ts/setting.ts

@@ -11,7 +11,7 @@ class DanmakuSetting implements ControlItem {
 
   private player!: Player
 
-  element!: HTMLElement;
+  el!: HTMLElement;
 
   tooltip!: Tooltip;
 
@@ -39,20 +39,20 @@ class DanmakuSetting implements ControlItem {
 
   init(player: Player) {
     this.player = player;
-    const { _utils, components, I18n } = player.Player;
+    const { __utils, components, I18n } = player.Player;
     const {
       $, clamp, addDisposableListener, addDisposable, createSvg,
-    } = _utils;
+    } = __utils;
 
-    this.element = $();
-    this.element.appendChild(createSvg('icon', 'M9 21v2H7v-2h2m4 0v2h-2v-2h2m4 0v2h-2v-2h2M2 19V3h20v16m-11-7H9v2h2v-2m8 0h-6v2h6v-2M7 8H5v2h2V8m12 0H9v2h10V8z'));
-    this.tooltip = addDisposable(this, new components.Tooltip(this.element, I18n.t(DANMAKU_SETTINGS)));
-    this.popover = addDisposable(this, new components.Popover(this.element, () => this.tooltip.show()));
+    this.el = $();
+    this.el.appendChild(createSvg('icon', 'M9 21v2H7v-2h2m4 0v2h-2v-2h2m4 0v2h-2v-2h2M2 19V3h20v16m-11-7H9v2h2v-2m8 0h-6v2h6v-2M7 8H5v2h2V8m12 0H9v2h10V8z'));
+    this.tooltip = addDisposable(this, new components.Tooltip(this.el, I18n.t(DANMAKU_SETTINGS)));
+    this.popover = addDisposable(this, new components.Popover(this.el, () => this.tooltip.show()));
 
-    addDisposableListener(this, this.element, 'click', this.show);
+    addDisposableListener(this, this.el, 'click', this.show);
 
     const panelElement = this.popover.panelElement;
-    _utils.addClass(panelElement, 'danmaku_setting');
+    __utils.addClass(panelElement, 'danmaku_setting');
 
     player.on('Mounted', () => {
       const row = () => $('.flex.align-center.danmaku_row');
@@ -168,8 +168,8 @@ class DanmakuSetting implements ControlItem {
 
   dispose() {
     if (!this.player) return;
-    this.player.Player._utils.dispose(this);
-    this.player.Player._utils.removeNode(this.element);
+    this.player.Player.__utils.dispose(this);
+    this.player.Player.__utils.removeNode(this.el);
     this.player = null!;
   }
 }

packages/nplayer-vue/src/index.ts

@@ -17,11 +17,11 @@ const plugin = {
         set: Function,
       },
       mounted() {
-        if (!this.$refs.element || typeof document === 'undefined') return;
+        if (!this.$refs.el || typeof document === 'undefined') return;
         if (!this.player) {
           this.player = new Player.Player(this.options);
         }
-        this.player.mount(this.$refs.element);
+        this.player.mount(this.$refs.el);
         if (this.set) this.set(this.player);
       },
       [isVue3 ? 'beforeUnmount' : 'beforeDestroy']() {
@@ -31,7 +31,7 @@ const plugin = {
       },
       render(e: any) {
         e = isVue3 ? h : e;
-        return e('div', { style: { width: '100%', height: '100%' }, ref: 'element' });
+        return e('div', { style: { width: '100%', height: '100%' }, ref: 'el' });
       },
     } as any;
 

packages/nplayer/dist/src/ts/components/popover/index.d.ts

@@ -4,6 +4,8 @@ export declare class Popover extends Component {
     readonly panelElement: HTMLElement;
     readonly maskElement: HTMLElement;
     constructor(container: HTMLElement, onHide?: ((ev?: MouseEvent | undefined) => void) | undefined, style?: Partial<CSSStyleDeclaration>, left?: boolean);
+    resetPos(): void;
+    setBottom(): void;
     applyPanelStyle(style: Partial<CSSStyleDeclaration>): void;
     show(): void;
     hide(ev?: MouseEvent): void;

packages/nplayer/dist/src/ts/components/tooltip/index.d.ts

@@ -3,6 +3,8 @@ export declare class Tooltip extends Component {
     constructor(container: HTMLElement, html?: string);
     get html(): string;
     set html(v: string);
+    resetPos(): void;
+    setBottom(): void;
     setLeft(): void;
     setRight(): void;
     hide(): void;

packages/nplayer/dist/src/ts/constants.d.ts

@@ -31,4 +31,6 @@ export declare const EVENT: {
     readonly OPEN_EDGE: "OpenEdge";
     readonly CONTROL_SHOW: "ControlShow";
     readonly CONTROL_HIDE: "ControlHide";
+    readonly CONTROL_ITEM_UPDATE: "ControlItemUpdate";
+    readonly BP_CHANGE: "BpChange";
 };

packages/nplayer/dist/src/ts/features/touch.d.ts

@@ -0,0 +1,25 @@
+import { Player } from '../player';
+import { Disposable } from '../types';
+export declare class Touch implements Disposable {
+    private player;
+    private startX;
+    private startY;
+    private dragType;
+    private duration;
+    private durationStr;
+    private currentTime;
+    private volume;
+    private seekTime;
+    private toastItem;
+    private drag;
+    private showControlTimer;
+    private videoTouched;
+    constructor(player: Player);
+    private dragStart;
+    private dragMove;
+    private dragEnd;
+    private videoTouchHandler;
+    enable(): void;
+    disable(): void;
+    dispose(): void;
+}

packages/nplayer/dist/src/ts/parts/control/index.d.ts

@@ -2,12 +2,15 @@ import { Player } from '../../player';
 import { Disposable } from '../../types';
 import { Tooltip } from '../../components/tooltip';
 import { Component } from '../../utils';
+import { ControlBar } from './items';
 export interface ControlItem extends Partial<Disposable> {
-    element: HTMLElement;
-    id?: string;
+    el: HTMLElement;
+    id?: any;
     tip?: string;
     tooltip?: Tooltip;
-    init?: (player: Player, tooltip: Tooltip) => void;
+    mounted?: boolean;
+    init?: (player: Player, isTop: boolean, tooltip: Tooltip) => void;
+    update?: (isTop: boolean) => void;
     isSupport?: (player: Player) => boolean;
     [key: string]: any;
 }
@@ -17,8 +20,14 @@ export declare class Control extends Component {
     private showTimer;
     private delayHidTime;
     private latch;
+    private controlBars;
+    private controls;
+    currentBp: number | undefined;
     constructor(container: HTMLElement, player: Player);
     get isActive(): boolean;
+    private filterItems;
+    private emitAndUpdateBp;
+    updateItems(items: Parameters<ControlBar['update']>[0], index?: number): void;
     require(): void;
     release(): void;
     show: () => void;

packages/nplayer/dist/src/ts/parts/control/items/fullscreen.d.ts

@@ -7,7 +7,7 @@ declare class Fullscreen extends Component implements ControlItem {
     private exitIcon;
     private enterIcon;
     tooltip: Tooltip;
-    init(player: Player, tooltip: Tooltip): void;
+    init(player: Player, _: boolean, tooltip: Tooltip): void;
     private enter;
     private exit;
 }

packages/nplayer/dist/src/ts/parts/control/items/index.d.ts

@@ -1,5 +1,16 @@
 import { Player } from '../../../player';
 import { Component } from '../../../utils';
+import { ControlItem } from '..';
 export declare class ControlBar extends Component {
-    constructor(container: HTMLElement, player: Player);
+    private player;
+    private isTop;
+    private prevItems;
+    private spacer;
+    constructor(container: HTMLElement, player: Player, items?: (ControlItem | string)[], isTop?: boolean);
+    private getItem;
+    private initControlItem;
+    updateTooltipPos(): void;
+    getItems(): ControlItem[];
+    setItems(items?: ControlItem[]): void;
+    update(nextItems: (string | ControlItem)[]): void;
 }

packages/nplayer/dist/src/ts/parts/control/items/play.d.ts

@@ -7,7 +7,7 @@ declare class Play extends Component implements ControlItem {
     private playIcon;
     private pauseIcon;
     tooltip: Tooltip;
-    init(player: Player, tooltip: Tooltip): void;
+    init(player: Player, _: boolean, tooltip: Tooltip): void;
     private onPlay;
     private onPause;
 }

packages/nplayer/dist/src/ts/parts/control/items/setting.d.ts

@@ -23,10 +23,6 @@ export interface SettingItem<T = any> {
     _optionElement?: HTMLElement;
     [key: string]: any;
 }
-export declare class SettingPanelOption extends Component {
-}
-export declare class SettingPanelHome extends Component {
-}
 export declare class SettingPanel extends Component {
     constructor(container: HTMLElement);
 }
@@ -39,7 +35,9 @@ declare class Setting extends Component implements ControlItem {
     private currentOptionElement;
     tooltip: Tooltip;
     tip: string;
-    init(player: Player, tooltip: Tooltip): void;
+    init(player: Player, isTop: boolean, tooltip: Tooltip): void;
+    update(isTop: boolean): void;
+    private setPos;
     private renderHome;
     private renderOptions;
     private onItemClick;

packages/nplayer/dist/src/ts/parts/control/items/volume.d.ts

@@ -10,7 +10,7 @@ declare class Volume extends Component implements ControlItem {
     private bar;
     private rect;
     tooltip: Tooltip;
-    init(player: Player, tooltip: Tooltip): void;
+    init(player: Player, _: boolean, tooltip: Tooltip): void;
     private onDragStart;
     private onDragging;
     private onVolumeChange;

packages/nplayer/dist/src/ts/parts/control/items/web-fullscreen.d.ts

@@ -7,7 +7,7 @@ declare class WebFullscreen extends Component implements ControlItem {
     private exitIcon;
     private enterIcon;
     tooltip: Tooltip;
-    init(player: Player, tooltip: Tooltip): void;
+    init(player: Player, _: boolean, tooltip: Tooltip): void;
     private enter;
     private exit;
 }