update d.ts

packages/artplayer/src/index.js

@@ -67,7 +67,7 @@ export default class Artplayer extends Emitter {
         }
 
         if (typeof readyCallback === 'function') {
-            this.on('ready', () => readyCallback.call(this));
+            this.on('ready', () => readyCallback.call(this, this));
         }
 
         if (Artplayer.DEGUG) {

packages/artplayer/src/plugins/index.js

@@ -39,7 +39,7 @@ export default class Plugins {
 
     add(plugin) {
         this.id += 1;
-        const result = plugin.call(this, this.art);
+        const result = plugin.call(this.art, this.art);
         const pluginName = (result && result.name) || plugin.name || `plugin${this.id}`;
         errorHandle(!has(this, pluginName), `Cannot add a plugin that already has the same name: ${pluginName}`);
         def(this, pluginName, {

packages/artplayer/types/artplayer.d.ts

@@ -14,7 +14,7 @@ export = Artplayer;
 export as namespace Artplayer;
 
 declare class Artplayer extends Player {
-    constructor(option: Option, readyCallback?: (this: Artplayer) => unknown);
+    constructor(option: Option, readyCallback?: (this: Artplayer, art: Artplayer) => unknown);
 
     static readonly instances: Artplayer[];
     static readonly version: string;
@@ -138,7 +138,7 @@ declare class Artplayer extends Player {
 
     readonly hotkey: {
         keys: Record<string, ((event: Event) => any)[]>;
-        add(key: number, callback: (event: Event) => any): Artplayer['hotkey'];
+        add(key: number, callback: (this: Artplayer, event: Event) => any): Artplayer['hotkey'];
     };
 
     readonly mask: Component;
@@ -150,7 +150,7 @@ declare class Artplayer extends Player {
     } & Component;
 
     readonly plugins: {
-        add(plugin: (art: Artplayer) => unknown): Artplayer['plugins'];
+        add(plugin: (this: Artplayer, art: Artplayer) => unknown): Artplayer['plugins'];
         [pluginName: string]: any;
     };
 }

packages/artplayer/types/component.d.ts

@@ -1,3 +1,5 @@
+import Artplayer = require('./artplayer');
+
 type Selector = {
     /**
      * Whether the default is selected
@@ -76,12 +78,12 @@ export type ComponentOption = {
     /**
      * Component click event
      */
-    click?(component: Component, event: Event): void;
+    click?(this: Artplayer, component: Component, event: Event): void;
 
     /**
      * Wnen the component was mounted
      */
-    mounted?(element: HTMLElement): void;
+    mounted?(this: Artplayer, element: HTMLElement): void;
 
     /**
      * Component tooltip, use in controls
@@ -101,5 +103,5 @@ export type ComponentOption = {
     /**
      * When selector item click, use in controls
      */
-    onSelect?(selector: Selector, element: HTMLElement, event: Event): void;
+    onSelect?(this: Artplayer, selector: Selector, element: HTMLElement, event: Event): void;
 };

packages/artplayer/types/option.d.ts

@@ -3,6 +3,7 @@ import { Setting } from './setting';
 import { Icons } from './icons';
 import { I18n } from './i18n';
 import { ComponentOption } from './component';
+import Artplayer = require('./artplayer');
 
 export type Option = {
     /**
@@ -183,7 +184,7 @@ export type Option = {
     /**
      * Custom plugin list
      */
-    plugins?: ((art: Artplayer) => unknown)[];
+    plugins?: ((this: Artplayer, art: Artplayer) => unknown)[];
 
     /**
      * Custom mobile whitelist
@@ -295,7 +296,7 @@ export type Option = {
     /**
      * Custom video type function
      */
-    customType?: Record<string, (video: HTMLVideoElement, url: string, art: Artplayer) => any>;
+    customType?: Record<string, (this: Artplayer, video: HTMLVideoElement, url: string, art: Artplayer) => any>;
 };
 
 export default Option;

packages/artplayer/types/setting.d.ts

@@ -1,3 +1,5 @@
+import Artplayer = require('./artplayer');
+
 type Props = {
     $icon?: HTMLDivElement;
     $html?: HTMLDivElement;
@@ -42,12 +44,12 @@ export type Setting = {
     /**
      * Wnen the setting was mounted
      */
-    mounted?(panel: HTMLDivElement, item: Setting): void;
+    mounted?(this: Artplayer, panel: HTMLDivElement, item: Setting): void;
 
     /**
      * When selector item click
      */
-    onSelect?(item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onSelect?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
 
     /**
      * Custom switch item
@@ -57,7 +59,7 @@ export type Setting = {
     /**
      * When switch item click
      */
-    onSwitch?(item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onSwitch?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
 
     /**
      * Custom range item
@@ -67,10 +69,10 @@ export type Setting = {
     /**
      * When range item change
      */
-    onRange?(item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onRange?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
 
     /**
      * When range item change in real time
      */
-    onChange?(item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onChange?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
 };