diff --git a/types/youtube-player/dist/FunctionStateMap.d.ts b/types/youtube-player/dist/FunctionStateMap.d.ts new file mode 100644 index 0000000000..5ee7b07081 --- /dev/null +++ b/types/youtube-player/dist/FunctionStateMap.d.ts @@ -0,0 +1,31 @@ +import PlayerStates from './constants/PlayerStates'; + +declare const FUNCTION_STATE_MAP: { + pauseVideo: { + acceptableStates: [ + PlayerStates.ENDED, + PlayerStates.PAUSED + ], + stateChangeRequired: false, + }, + playVideo: { + acceptableStates: [ + PlayerStates.ENDED, + PlayerStates.PLAYING + ], + stateChangeRequired: false, + }, + seekTo: { + acceptableStates: [ + PlayerStates.ENDED, + PlayerStates.PLAYING, + PlayerStates.PAUSED + ], + stateChangeRequired: true, + + // TRICKY: `seekTo` may not cause a state change if no buffering is required. + timeout: 3000, + }, +}; + +export default FUNCTION_STATE_MAP; diff --git a/types/youtube-player/dist/YouTubePlayer.d.ts b/types/youtube-player/dist/YouTubePlayer.d.ts new file mode 100644 index 0000000000..7716ca739c --- /dev/null +++ b/types/youtube-player/dist/YouTubePlayer.d.ts @@ -0,0 +1,12 @@ +import { EmitterType, YouTubePlayer } from './types'; + +export interface EventHandlerMapType { + [key: string]: (event: object) => void; +} + +declare const YouTubePlayerHelpers: { + proxyEvents(emitter: EmitterType): EventHandlerMapType, + promisifyPlayer(playerAPIReady: Promise, strictState?: boolean): YouTubePlayer, +}; + +export default YouTubePlayerHelpers; diff --git a/types/youtube-player/dist/constants/PlayerStates.d.ts b/types/youtube-player/dist/constants/PlayerStates.d.ts new file mode 100644 index 0000000000..a5beac4fa7 --- /dev/null +++ b/types/youtube-player/dist/constants/PlayerStates.d.ts @@ -0,0 +1,10 @@ +declare enum PlayerStates { + BUFFERING = 3, + ENDED = 0, + PAUSED = 2, + PLAYING = 1, + UNSTARTED = -1, + VIDEO_CUED = 5, +} + +export default PlayerStates; diff --git a/types/youtube-player/dist/eventNames.d.ts b/types/youtube-player/dist/eventNames.d.ts new file mode 100644 index 0000000000..a86d3b5625 --- /dev/null +++ b/types/youtube-player/dist/eventNames.d.ts @@ -0,0 +1,20 @@ +declare const EVENT_NAMES: [ + 'ready', + 'stateChange', + 'playbackQualityChange', + 'playbackRateChange', + 'error', + 'apiChange', + 'volumeChange' +]; + +export default EVENT_NAMES; + +export type EventType = + 'ready' | + 'stateChange' | + 'playbackQualityChange' | + 'playbackRateChange' | + 'error' | + 'apiChange' | + 'volumeChange'; diff --git a/types/youtube-player/dist/functionNames.d.ts b/types/youtube-player/dist/functionNames.d.ts new file mode 100644 index 0000000000..1e317d7391 --- /dev/null +++ b/types/youtube-player/dist/functionNames.d.ts @@ -0,0 +1,46 @@ +declare const FUNCTION_NAMES: [ + 'cueVideoById', + 'loadVideoById', + 'cueVideoByUrl', + 'loadVideoByUrl', + 'playVideo', + 'pauseVideo', + 'stopVideo', + 'getVideoLoadedFraction', + 'cuePlaylist', + 'loadPlaylist', + 'nextVideo', + 'previousVideo', + 'playVideoAt', + 'setShuffle', + 'setLoop', + 'getPlaylist', + 'getPlaylistIndex', + 'setOption', + 'mute', + 'unMute', + 'isMuted', + 'setVolume', + 'getVolume', + 'seekTo', + 'getPlayerState', + 'getPlaybackRate', + 'setPlaybackRate', + 'getAvailablePlaybackRates', + 'getPlaybackQuality', + 'setPlaybackQuality', + 'getAvailableQualityLevels', + 'getCurrentTime', + 'getDuration', + 'removeEventListener', + 'getVideoUrl', + 'getVideoEmbedCode', + 'getOptions', + 'getOption', + 'addEventListener', + 'destroy', + 'setSize', + 'getIframe' +]; + +export default FUNCTION_NAMES; diff --git a/types/youtube-player/dist/index.d.ts b/types/youtube-player/dist/index.d.ts new file mode 100644 index 0000000000..09f07ff9c8 --- /dev/null +++ b/types/youtube-player/dist/index.d.ts @@ -0,0 +1,9 @@ +import { Options, YouTubePlayer } from './types'; + +declare function PlayerFactory( + maybeElementId: YouTubePlayer | HTMLElement | string, + options?: Options, + strictState?: boolean, +): YouTubePlayer; + +export default PlayerFactory; diff --git a/types/youtube-player/dist/loadYouTubeIframeApi.d.ts b/types/youtube-player/dist/loadYouTubeIframeApi.d.ts new file mode 100644 index 0000000000..7faddafbb9 --- /dev/null +++ b/types/youtube-player/dist/loadYouTubeIframeApi.d.ts @@ -0,0 +1,4 @@ +import { EmitterType, IframeApiType } from './types'; + +declare function Loader(emitter: EmitterType): Promise; +export default Loader; diff --git a/types/youtube-player/dist/types.d.ts b/types/youtube-player/dist/types.d.ts new file mode 100644 index 0000000000..fa64feda04 --- /dev/null +++ b/types/youtube-player/dist/types.d.ts @@ -0,0 +1,142 @@ +import PlayerState from './constants/PlayerStates'; +import { EventType } from './eventNames'; + +export interface EmitterType { + trigger: (eventName: string, event: object) => void; +} + +export interface Options { + width?: number; + height?: number; + videoId?: string; + playerVars?: { + autoplay?: 0 | 1, + cc_lang_pref?: string, + cc_load_policy?: 1, + color?: 'red' | 'white', + controls?: 0 | 1, + disablekb?: 0 | 1, + enablejsapi?: 0 | 1, + end?: number, + fs?: 0 | 1, + hl?: string, + iv_load_policy?: 1 | 3, + list?: string, + listType?: 'playlist' | 'search' | 'user_uploads', + loop?: 0 | 1, + modestbranding?: 1, + origin?: string, + playlist: string, + playsinline?: 0 | 1, + rel?: 0 | 1, + start?: number, + widget_referrer?: string, + }; + events?: { + [eventType in EventType]: (event: CustomEvent) => void + }; +} + +export interface IframeApiType { + Player: {new(elementId: string, options: Options): YouTubePlayer}; +} + +/** + * @see https://developers.google.com/youtube/iframe_api_reference + */ +export interface YouTubePlayer { + addEventListener(event: string, listener: (event: CustomEvent) => void): void; + destroy(): void; + getAvailablePlaybackRates(): ReadonlyArray; + getAvailableQualityLevels(): ReadonlyArray; + getCurrentTime(): number; + getDuration(): number; + getIframe(): HTMLIFrameElement; + getOption(module: string, option: string): any; + getOptions(): string[]; + getOptions(module: string): object; + setOption(module: string, option: string, value: any): void; + setOptions(): void; + cuePlaylist( + playlist: string | ReadonlyArray, + index?: number, + startSeconds?: number, + suggestedQuality?: string, + ): void; + cuePlaylist(playlist: { + listType: string, + list?: string, + index?: number, + startSeconds?: number, + suggestedQuality?: string, + }): void; + loadPlaylist( + playlist: string | ReadonlyArray, + index?: number, + startSeconds?: number, + suggestedQuality?: string, + ): void; + loadPlaylist(playlist: { + listType: string, + list?: string, + index?: number, + startSeconds?: number, + suggestedQuality?: string, + }): void; + getPlaylist(): ReadonlyArray; + getPlaylistIndex(): number; + getPlaybackQuality(): string; + getPlaybackRate(): number; + getPlayerState(): PlayerState; + getVideoEmbedCode(): string; + getVideoLoadedFraction(): number; + getVideoUrl(): string; + getVolume(): number; + cueVideoById(videoId: string, startSeconds?: number, suggestedQuality?: string): void; + cueVideoById(video: { + videoId: string, + startSeconds?: number, + endSeconds?: number, + suggestedQuality?: string, + }): void; + cueVideoByUrl(mediaContentUrl: string, startSeconds?: number, suggestedQuality?: string): void; + cueVideoByUrl(video: { + mediaContentUrl: string, + startSeconds?: number, + endSeconds?: number, + suggestedQuality?: string, + }): void; + loadVideoByUrl(mediaContentUrl: string, startSeconds?: number, suggestedQuality?: string): void; + loadVideoByUrl(video: { + mediaContentUrl: string, + startSeconds?: number, + endSeconds?: number, + suggestedQuality?: string, + }): void; + loadVideoById(videoId: string, startSeconds?: number, suggestedQuality?: string): void; + loadVideoById(video: { + videoId: string, + startSeconds?: number, + endSeconds?: number, + suggestedQuality?: string, + }): void; + isMuted(): boolean; + mute(): void; + nextVideo(): void; + pauseVideo(): void; + playVideo(): void; + playVideoAt(index: number): void; + previousVideo(): void; + removeEventListener(event: string, listener: (event: CustomEvent) => void): void; + seekTo(seconds: number, allowSeekAhead: boolean): void; + setLoop(loopPlaylists: boolean): void; + setPlaybackQuality(suggestedQuality: string): void; + setPlaybackRate(suggestedRate: number): void; + setShuffle(shufflePlaylist: boolean): void; + setSize(width: number, height: number): object; + setVolume(volume: number): void; + stopVideo(): void; + unMute(): void; + on(eventType: 'stateChange', listener: (event: CustomEvent & {data: number}) => void): void; + on(eventType: EventType, listener: (event: CustomEvent) => void): void; +} diff --git a/types/youtube-player/index.d.ts b/types/youtube-player/index.d.ts new file mode 100644 index 0000000000..f34f8e3505 --- /dev/null +++ b/types/youtube-player/index.d.ts @@ -0,0 +1,9 @@ +// Type definitions for youtube-player 5.5 +// Project: https://github.com/gajus/youtube-player#readme +// Definitions by: Martin JurĨa +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.7 + +import PlayerFactory from './dist/index'; + +export default PlayerFactory; diff --git a/types/youtube-player/tsconfig.json b/types/youtube-player/tsconfig.json new file mode 100644 index 0000000000..1abbcc804c --- /dev/null +++ b/types/youtube-player/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "dist/constants/PlayerStates.d.ts", + "dist/eventNames.d.ts", + "dist/functionNames.d.ts", + "dist/FunctionStateMap.d.ts", + "dist/index.d.ts", + "dist/loadYouTubeIframeApi.d.ts", + "dist/types.d.ts", + "dist/YouTubePlayer.d.ts", + "youtube-player-tests.ts" + ] +} diff --git a/types/youtube-player/tslint.json b/types/youtube-player/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/youtube-player/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/youtube-player/youtube-player-tests.ts b/types/youtube-player/youtube-player-tests.ts new file mode 100644 index 0000000000..cb60168cea --- /dev/null +++ b/types/youtube-player/youtube-player-tests.ts @@ -0,0 +1,81 @@ +import youTubePlayerFactory from 'youtube-player'; +import PlayerStates from 'youtube-player/dist/constants/PlayerStates'; +import { YouTubePlayer } from 'youtube-player/dist/types'; + +youTubePlayerFactory('foo'); +const player: YouTubePlayer = youTubePlayerFactory( + document.getElementById('bar')!, + { + width: 640, + height: 300, + videoId: 'aaaaaaaaaa', + playerVars: { + autoplay: 1, + cc_lang_pref: 'en_US', + cc_load_policy: 1, + color: 'white', + controls: 1, + disablekb: 0, + enablejsapi: 1, + end: 60, + fs: 0, + hl: 'fooBar', + iv_load_policy: 3, + list: 'bbbbbbbbbb', + listType: 'search', + loop: 0, + modestbranding: 1, + origin: 'https://definitelytyped.org/', + playlist: 'cccccccccc', + playsinline: 0, + rel: 1, + start: 3, + widget_referrer: 'nothing', + }, + events: { + ready: (event: CustomEvent): void => {}, + stateChange: (event: CustomEvent): void => { + console.log(player.getPlayerState() === PlayerStates.PLAYING); + }, + playbackQualityChange: (event: CustomEvent): void => {}, + playbackRateChange: (event: CustomEvent): void => {}, + error: (event: CustomEvent): void => {}, + apiChange: (event: CustomEvent): void => {}, + volumeChange: (event: CustomEvent): void => {}, + }, + }, + true, +); + +player.cueVideoById('xyzabc123'); +player.loadVideoById('doesNotExist'); +player.playVideo(); +player.pauseVideo(); +player.setSize(320, 200); +if (player.isMuted()) { + player.unMute(); +} else { + player.mute(); +} +player.setVolume(player.getVolume() / 2); + +player.on('stateChange', (event: CustomEvent & {data: number}) => { + switch (event.data) { + case PlayerStates.PLAYING: + console.log('playing'); + break; + case PlayerStates.PAUSED: + console.log('paused'); + break; + case PlayerStates.ENDED: + console.log('ended'); + break; + default: + break; + } +}); +player.on('error', (event: CustomEvent) => { + console.error('player error', event.detail); +}); + +player.destroy();