update d.ts

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;
 };