add ts to demo

docs/assets/css/style.css

@@ -71,6 +71,23 @@ img {
     margin-right: 10px;
 }
 
+.header .tool {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.header .typeScript {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    font-size: 12px;
+}
+
+.header .typeScript input {
+    margin-right: 5px;
+}
+
 .header .menus {
     display: flex;
     align-items: center;
@@ -144,6 +161,7 @@ img {
     display: flex;
     flex: 1;
     height: 100%;
+    overflow: hidden;
 }
 
 .main .part-left {
@@ -172,12 +190,10 @@ img {
 
 .main .part-left .code {
     flex: 1;
-    overflow: auto;
 }
 
 .main .part-left .code .codeMirrorWrap {
     height: 100%;
-    overflow: hidden;
 }
 
 .main .part-right {

docs/assets/js/common.js

@@ -19,6 +19,9 @@
 
     window.consoleLog($console);
 
+    var $typeScript = document.querySelector('#typeScript');
+    $typeScript.checked = getURLParameters(window.location.href).typeScript === 'true';
+
     var editor = null;
     require.config({ paths: { vs: './assets/js/vs' } });
     require(['vs/editor/editor.main'], function () {
@@ -54,7 +57,7 @@
                             "\turl: '/assets/sample/video.mp4',",
                             '});',
                         ].join('\n'),
-                        'javascript',
+                        $typeScript.checked ? 'typescript' : 'javascript',
                     ),
                 });
             });
@@ -183,7 +186,16 @@
     function restart() {
         var libs = encodeURIComponent($lib.value);
         var code = encodeURIComponent(editor.getValue());
-        var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
+        var useTS = $typeScript.checked ? 'true' : 'false';
+        var url =
+            window.location.origin +
+            window.location.pathname +
+            '?libs=' +
+            libs +
+            '&code=' +
+            code +
+            '&typeScript=' +
+            useTS;
         history.pushState(null, null, url);
         initApp();
     }
@@ -198,6 +210,11 @@
         }
     });
 
+    $typeScript.addEventListener('change', function () {
+        restart();
+        window.location.reload();
+    });
+
     window.addEventListener('error', function (err) {
         console.error(err);
     });

docs/assets/ts/artplayer.d.ts

@@ -143,6 +143,8 @@ declare class Artplayer extends Player {
     };
 }
 
+
+
 type Selector = {
     /**
      * Whether the default is selected
@@ -216,7 +218,7 @@ export type ComponentOption = {
     /**
      * Component style object
      */
-    style?: CSSStyleDeclaration;
+    style?: Partial<CSSStyleDeclaration>;
 
     /**
      * Component click event
@@ -472,6 +474,9 @@ export type Icons = {
 
 
 
+
+type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record<never, never>);
+
 export type Option = {
     /**
      * The player id
@@ -501,7 +506,7 @@ export type Option = {
     /**
      * Video url type
      */
-    type?: string;
+    type?: CustomType;
 
     /**
      * Player color theme
@@ -751,7 +756,7 @@ export type Option = {
     /**
      * Other video attribute
      */
-    moreVideoAttr?: HTMLVideoElement;
+    moreVideoAttr?: Partial<HTMLVideoElement>;
 
     /**
      * Custom default icons
@@ -763,7 +768,9 @@ export type Option = {
     /**
      * Custom video type function
      */
-    customType?: Record<string, (this: Artplayer, video: HTMLVideoElement, url: string, art: Artplayer) => any>;
+    customType?: Partial<
+        Record<CustomType, (this: Artplayer, video: HTMLVideoElement, url: string, art: Artplayer) => any>
+    >;
 };
 
 export default Option;
@@ -839,15 +846,20 @@ export declare class Player {
     airplay(): void;
 }
 
-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 = {
     /**
@@ -888,7 +900,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
@@ -898,7 +910,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
@@ -908,12 +920,14 @@ 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;
 };
 
 export type Subtitle = {
@@ -922,6 +936,11 @@ export type Subtitle = {
      */
     url?: string;
 
+    /**
+     * The subtitle name
+     */
+    name?: string;
+
     /**
      * The subtitle type
      */

docs/index.html

@@ -48,7 +48,12 @@
                     <a class="item" href="./document/">Document</a>
                     <a class="item" href="https://github.com/zhw2590582/ArtPlayer">Github</a>
                 </div>
-                <div class="run">▶ Run Code</div>
+                <div class="tool">
+                    <div class="typeScript">
+                        <input type="checkbox" id="typeScript"><label for="typeScript">TypeScript ?</label>
+                    </div>
+                    <div class="run">▶ Run Code</div>
+                </div>
             </header>
             <div class="libs">
                 <textarea class="libsInput"

docs/uncompiled/artplayer/index.js

@@ -248,7 +248,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2022-10-09 14:08:18";
+        return "2022-10-09 18:00:34";
     }
     static get config() {
         return 0, _configDefault.default;

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
      */