add ts to demo

packages/artplayer/types/component.d.ts

@@ -73,7 +73,7 @@ export type ComponentOption = {
     /**
      * Component style object
      */
-    style?: CSSStyleDeclaration;
+    style?: Partial<CSSStyleDeclaration>;
 
     /**
      * Component click event

packages/artplayer/types/option.d.ts

@@ -286,7 +286,7 @@ export type Option = {
     /**
      * Other video attribute
      */
-    moreVideoAttr?: HTMLVideoElement;
+    moreVideoAttr?: Partial<HTMLVideoElement>;
 
     /**
      * Custom default icons

packages/artplayer/types/setting.d.ts

@@ -1,14 +1,17 @@
 import Artplayer = require('./artplayer');
 
-type Props = {
-    $icon?: HTMLDivElement;
-    $html?: HTMLDivElement;
-    $tooltip?: HTMLDivElement;
-    $switch?: boolean;
-    $range?: HTMLInputElement;
-    $parentItem?: Setting;
-    $parentList?: Setting[];
-};
+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 Setting = {
     /**
@@ -49,7 +52,7 @@ export type Setting = {
     /**
      * When selector item click
      */
-    onSelect?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onSelect?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
 
     /**
      * Custom switch item
@@ -59,7 +62,7 @@ export type Setting = {
     /**
      * When switch item click
      */
-    onSwitch?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onSwitch?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
 
     /**
      * Custom range item
@@ -69,10 +72,12 @@ export type Setting = {
     /**
      * When range item change
      */
-    onRange?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onRange?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
 
     /**
      * When range item change in real time
      */
-    onChange?(this: Artplayer, item: Setting & Props, element: HTMLDivElement, event: Event): void;
+    onChange?(this: Artplayer, item: Props<Setting>, element: HTMLDivElement, event: Event): void;
+
+    [key: string]: any;
 };

packages/artplayer/types/subtitle.d.ts

@@ -4,6 +4,11 @@ export type Subtitle = {
      */
     url?: string;
 
+    /**
+     * The subtitle name
+     */
+    name?: string;
+
     /**
      * The subtitle type
      */