From 0e0bdd00dd7c66ba5fb301b0eea02efaf5825a3d Mon Sep 17 00:00:00 2001 From: Harvey Date: Wed, 8 Dec 2021 14:01:42 +0800 Subject: [PATCH] Add ts to demo --- docs/assets/js/common.js | 35 ++- docs/assets/ts/artplayer.d.ts | 315 ++++++++++++++++++++++++ packages/artplayer/types/artplayer.d.ts | 7 +- 3 files changed, 346 insertions(+), 11 deletions(-) create mode 100644 docs/assets/ts/artplayer.d.ts diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js index 319182606..4d9f84875 100644 --- a/docs/assets/js/common.js +++ b/docs/assets/js/common.js @@ -23,14 +23,33 @@ var editor = null; require.config({ paths: { vs: './assets/js/vs' } }); require(['vs/editor/editor.main'], function () { - editor = monaco.editor.create($codeMirror, { - theme: 'vs-dark', - model: monaco.editor.createModel( - ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), - 'javascript', - ), - }); - initApp(); + var libUri = './assets/ts/artplayer.d.ts'; + fetch(libUri) + .then((res) => res.text()) + .then((libSource) => { + monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ + noSemanticValidation: true, + noSyntaxValidation: false, + }); + + monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ + target: monaco.languages.typescript.ScriptTarget.ES6, + allowNonTsExtensions: true, + }); + + monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri); + monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri)); + + editor = monaco.editor.create($codeMirror, { + theme: 'vs-dark', + model: monaco.editor.createModel( + ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), + 'javascript', + ), + }); + + initApp(); + }); }); function initArt(art) { diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts new file mode 100644 index 000000000..d88b45a3d --- /dev/null +++ b/docs/assets/ts/artplayer.d.ts @@ -0,0 +1,315 @@ +export = Artplayer; +export as namespace Artplayer; + +interface Selector { + default?: boolean; + html: string; +} + +interface ComponentOption { + html: string | HTMLElement; + disable?: boolean; + name?: string; + index?: number; + style?: object; + click?(component: Component, event: Event): void; + mounted?(element: HTMLElement): void; + tooltip?: string; + position?: 'top' | 'left' | 'right'; + selector?: Selector[]; + onSelect?(selector: Selector, element: HTMLElement): void; +} + +interface Component { + readonly id: number; + readonly name: string | void; + readonly $parent: HTMLElement | void; + get show(): boolean; + set show(state: boolean); + set toggle(state: boolean); + add(option: ComponentOption): HTMLElement; +} + +type PluginFunction = (art: Artplayer) => any; +type WhitelistFunction = (ua: string) => Boolean; +type CustomType = (video: HTMLVideoElement, url: string, art: Artplayer) => any; +type EventCallback = (event: Event) => any; + +interface Option { + container: string | HTMLElement; + url: string; + poster?: string; + title?: string; + type?: string; + theme?: string; + lang?: 'en' | 'zh-cn' | 'zh-tw'; + volume?: number; + isLive?: boolean; + muted?: boolean; + autoplay?: boolean; + autoSize?: boolean; + autoMini?: boolean; + loop?: boolean; + flip?: boolean; + rotate?: boolean; + playbackRate?: boolean; + aspectRatio?: boolean; + screenshot?: boolean; + setting?: boolean; + hotkey?: boolean; + pip?: boolean; + mutex?: boolean; + backdrop?: boolean; + fullscreen?: boolean; + fullscreenWeb?: boolean; + subtitleOffset?: boolean; + miniProgressBar?: boolean; + localVideo?: boolean; + localSubtitle?: boolean; + useSSR?: boolean; + plugins?: PluginFunction[]; + whitelist?: (string | WhitelistFunction | RegExp)[]; + layers?: ComponentOption[]; + contextmenu?: ComponentOption[]; + controls?: ComponentOption[]; + settings?: ComponentOption[]; + quality?: { + default?: boolean; + html: string; + url: string; + }[]; + highlight?: { + time: number; + text: string; + }[]; + thumbnails?: { + url: string; + number?: number; + width?: number; + height?: number; + column?: number; + }; + subtitle?: { + url: string; + style: object; + encoding: string; + bilingual: boolean; + }; + moreVideoAttr?: object; + icons?: { + [propName: string]: string | HTMLElement; + }; + customType?: { + [propName: string]: CustomType; + }; +} + +type AspectRatio = 'default' | '4:3' | '16:9' | void; +type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | void; +type Rotate = -270 | -180 | -90 | 0 | 90 | 180 | 270 | void; +type Flip = 'normal' | 'horizontal' | 'vertical' | void; + +declare class Player { + get aspectRatio(): AspectRatio; + set aspectRatio(ratio: AspectRatio); + get playbackRate(): PlaybackRate; + set playbackRate(rate: PlaybackRate); + get rotate(): Rotate; + set rotate(deg: Rotate); + get autoSize(): boolean; + set autoSize(state: boolean); + get currentTime(): number; + set currentTime(time: number); + get duration(): number; + get played(): number; + get playing(): boolean; + get flip(): Flip; + set flip(state: Flip); + get fullscreen(): boolean; + set fullscreen(state: boolean); + set fullscreenToggle(state: boolean); + get fullscreenWeb(): boolean; + set fullscreenWeb(state: boolean); + set fullscreenWebToggle(state: boolean); + get loaded(): number; + get loop(): number[]; + set loop(value: number[]); + get mini(): boolean; + set mini(state: boolean); + get pip(): boolean; + set pip(state: boolean); + get poster(): string; + set poster(url: string); + get rect(): DOMRect; + get bottom(): number; + get height(): number; + get left(): number; + get right(): number; + get top(): number; + get width(): number; + get x(): number; + get y(): number; + set seek(time: number); + set forward(time: number); + set backward(time: number); + get url(): string; + set url(url: string); + get volume(): number; + set volume(percentage: number); + get muted(): boolean; + set muted(state: boolean); + pause(): any; + play(): any; + toggle(): any; + switchUrl(): Promise; + switchQuality(): Promise; + getDataURL(): Promise; + getBlobUrl(): Promise; + screenshot(): Promise; +} + +declare class Artplayer extends Player { + constructor(option: Option); + + static instances: Artplayer[]; + static version: string; + static env: string; + static build: string; + static config: object; + static utils: object; + static scheme: object; + static Emitter: Function; + static validator: Function; + static kindOf: Function; + static html: string; + static option: Option; + + readonly id: number; + readonly option: Option; + readonly isFocus: boolean; + readonly isDestroy: boolean; + readonly userAgent: string; + readonly isMobile: boolean; + readonly isWechat: boolean; + + on(name: string, fn: Function, ctx?: object): void; + once(name: string, fn: Function, ctx?: object): void; + emit(name: string): void; + off(name: string, callback?: Function): void; + query(selector: string): HTMLElement; + proxy(target: HTMLElement, name: string, callback: EventCallback, option?: object): Function; + destroy(removeHtml?: boolean): void; + + readonly template: { + query(str: string): HTMLElement; + readonly $container: HTMLElement; + readonly $original: HTMLElement; + readonly $player: HTMLElement; + readonly $video: HTMLElement; + readonly $poster: HTMLElement; + readonly $subtitle: HTMLElement; + readonly $danmuku: HTMLElement; + readonly $bottom: HTMLElement; + readonly $progress: HTMLElement; + readonly $controls: HTMLElement; + readonly $controlsLeft: HTMLElement; + readonly $controlsRight: HTMLElement; + readonly $layer: HTMLElement; + readonly $loading: HTMLElement; + readonly $notice: HTMLElement; + readonly $noticeInner: HTMLElement; + readonly $mask: HTMLElement; + readonly $state: HTMLElement; + readonly $setting: HTMLElement; + readonly $settingInner: HTMLElement; + readonly $settingBody: HTMLElement; + readonly $info: HTMLElement; + readonly $infoPanel: HTMLElement; + readonly $infoClose: HTMLElement; + readonly $miniHeader: HTMLElement; + readonly $miniTitle: HTMLElement; + readonly $miniClose: HTMLElement; + readonly $contextmenu: HTMLElement; + }; + + readonly events: { + proxy(target: HTMLElement, name: string, callback: EventCallback, option?: object): Function; + hover(target: HTMLElement, mouseenter?: EventCallback, mouseleave?: EventCallback): Function; + loadImg(target: HTMLImageElement | string): Promise; + }; + + readonly whitelist: { + readonly state: boolean; + }; + + readonly storage: { + readonly name: string; + readonly settings: object; + get(key: string): any; + set(key: string, value: any): void; + del(key: string): any; + clean(): any; + }; + + readonly icons: { + readonly loading: HTMLElement; + readonly state: HTMLElement; + readonly play: HTMLElement; + readonly pause: HTMLElement; + readonly volume: HTMLElement; + readonly volumeClose: HTMLElement; + readonly subtitle: HTMLElement; + readonly screenshot: HTMLElement; + readonly setting: HTMLElement; + readonly fullscreen: HTMLElement; + readonly fullscreenWeb: HTMLElement; + readonly pip: HTMLElement; + }; + + readonly hotkey: { + add(key: number, callback: EventCallback): Artplayer['hotkey']; + }; + + readonly plugins: { + readonly id: number; + add(plugin: PluginFunction): Artplayer['plugins']; + }; + + readonly i18n: { + readonly languages: object; + get(key: string): string; + update(language: object): void; + }; + + readonly notice: { + time: number; + set show(msg: string); + }; + + readonly subtitle: { + get show(): boolean; + set show(state: boolean); + set toggle(state: boolean); + get url(): string; + style(name: string | object, value?: string): HTMLElement; + switch(url: string, option?: object): Promise; + }; + + readonly mobile: object; + + readonly player: Player; + + readonly layers: Component; + + readonly controls: Component; + + readonly contextmenu: Component; + + readonly info: Component; + + readonly loading: Component; + + readonly mask: Component; + + readonly setting: Component; +} diff --git a/packages/artplayer/types/artplayer.d.ts b/packages/artplayer/types/artplayer.d.ts index 8615f12ca..d88b45a3d 100644 --- a/packages/artplayer/types/artplayer.d.ts +++ b/packages/artplayer/types/artplayer.d.ts @@ -1,4 +1,5 @@ export = Artplayer; +export as namespace Artplayer; interface Selector { default?: boolean; @@ -29,7 +30,7 @@ interface Component { add(option: ComponentOption): HTMLElement; } -type Plugin = (art: Artplayer) => any; +type PluginFunction = (art: Artplayer) => any; type WhitelistFunction = (ua: string) => Boolean; type CustomType = (video: HTMLVideoElement, url: string, art: Artplayer) => any; type EventCallback = (event: Event) => any; @@ -66,7 +67,7 @@ interface Option { localVideo?: boolean; localSubtitle?: boolean; useSSR?: boolean; - plugins?: Plugin[]; + plugins?: PluginFunction[]; whitelist?: (string | WhitelistFunction | RegExp)[]; layers?: ComponentOption[]; contextmenu?: ComponentOption[]; @@ -271,7 +272,7 @@ declare class Artplayer extends Player { readonly plugins: { readonly id: number; - add(plugin: Plugin): Artplayer['plugins']; + add(plugin: PluginFunction): Artplayer['plugins']; }; readonly i18n: {