From 0736b7e4d28bf48d11642ba77db3af0e4ad9e84f Mon Sep 17 00:00:00 2001 From: Harvey Date: Sun, 9 Oct 2022 18:03:23 +0800 Subject: [PATCH] add ts to demo --- docs/assets/css/style.css | 20 +++++++++- docs/assets/js/common.js | 21 +++++++++- docs/assets/ts/artplayer.d.ts | 53 +++++++++++++++++-------- docs/index.html | 7 +++- docs/uncompiled/artplayer/index.js | 2 +- packages/artplayer/types/component.d.ts | 2 +- packages/artplayer/types/option.d.ts | 2 +- packages/artplayer/types/setting.d.ts | 31 +++++++++------ packages/artplayer/types/subtitle.d.ts | 5 +++ 9 files changed, 105 insertions(+), 38 deletions(-) diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css index 4097936e7..9c82dedf7 100644 --- a/docs/assets/css/style.css +++ b/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 { diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js index 40143b267..dc5f86b62 100644 --- a/docs/assets/js/common.js +++ b/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); }); diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts index 196f62c12..2f00202af 100644 --- a/docs/assets/ts/artplayer.d.ts +++ b/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; /** * Component click event @@ -472,6 +474,9 @@ export type Icons = { + +type CustomType = 'flv' | 'm3u8' | 'hls' | 'ts' | 'mpd' | 'torrent' | (string & Record); + 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; /** * Custom default icons @@ -763,7 +768,9 @@ export type Option = { /** * Custom video type function */ - customType?: Record any>; + customType?: Partial< + Record 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 = { + html: string; + icon: string; + tooltip: string; + $icon: HTMLDivElement; + $html: HTMLDivElement; + $tooltip: HTMLDivElement; + $switch: boolean; + $range: HTMLInputElement; + $parentItem: Setting; + $parentList: Setting[]; +} & Omit; 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, 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, 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, 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, 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 */ diff --git a/docs/index.html b/docs/index.html index 0f0c59303..22b1d593c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -48,7 +48,12 @@ Document Github -
▶ Run Code
+
+
+ +
+
▶ Run Code
+