ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing "missing code in detail" for PlyrEvent type

Browse Source 
When using typescript and listening for youtube statechange event, it is missing the code property definition inside the event (even though it is provided in the code).
By making events a map of key-value, we can add easily custom event type for specific event name. Since YouTube "statechange" event differs from the basic PlyrEvent, I added a new Event Type "PlyrStateChangeEvent" having a code property corresponding to a YoutubeState enum defined by the YouTube API documentation.
This pattern follows how addEventListener in the lib.dom.d.ts is defined.
This commit is contained in:
akuma06 2020-05-05 15:34:41 +02:00 committed by GitHub
parent 6cb822d56f
commit 1f63806c3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 70 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/js/plyr.d.ts vendored
View File

@ -214,25 +214,25 @@ declare class Plyr {
/** /**
* Add an event listener for the specified event. * Add an event listener for the specified event.
*/ */
on( on<K extends keyof Plyr.PlyrEventMap>(
event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent, event: K,
callback: (this: this, event: Plyr.PlyrEvent) => void, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void,
): void; ): void;
/** /**
* Add an event listener for the specified event once. * Add an event listener for the specified event once.
*/ */
once( once<K extends keyof Plyr.PlyrEventMap>(
event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent, event: K,
callback: (this: this, event: Plyr.PlyrEvent) => void, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void,
): void; ): void;
/** /**
* Remove an event listener for the specified event. * Remove an event listener for the specified event.
*/ */
off( off<K extends keyof Plyr.PlyrEventMap>(
event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent, event: K,
callback: (this: this, event: Plyr.PlyrEvent) => void, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void,
): void; ): void;
/** /**
@ -249,37 +249,51 @@ declare class Plyr {
declare namespace Plyr { declare namespace Plyr {
type MediaType = 'audio' | 'video'; type MediaType = 'audio' | 'video';
type Provider = 'html5' | 'youtube' | 'vimeo'; type Provider = 'html5' | 'youtube' | 'vimeo';
type StandardEvent = type StandardEventMap = {
| 'progress' 'progress': PlyrEvent,
| 'playing' 'playing': PlyrEvent,
| 'play' 'play': PlyrEvent,
| 'pause' 'pause': PlyrEvent,
| 'timeupdate' 'timeupdate': PlyrEvent,
| 'volumechange' 'volumechange': PlyrEvent,
| 'seeking' 'seeking': PlyrEvent,
| 'seeked' 'seeked': PlyrEvent,
| 'ratechange' 'ratechange': PlyrEvent,
| 'ended' 'ended': PlyrEvent,
| 'enterfullscreen' 'enterfullscreen': PlyrEvent,
| 'exitfullscreen' 'exitfullscreen': PlyrEvent,
| 'captionsenabled' 'captionsenabled': PlyrEvent,
| 'captionsdisabled' 'captionsdisabled': PlyrEvent,
| 'languagechange' 'languagechange': PlyrEvent,
| 'controlshidden' 'controlshidden': PlyrEvent,
| 'controlsshown' 'controlsshown': PlyrEvent,
| 'ready'; 'ready': PlyrEvent
type Html5Event = };
| 'loadstart' // For retrocompatibility, we keep StandadEvent
| 'loadeddata' type StandadEvent = keyof Plyr.StandardEventMap;
| 'loadedmetadata' type Html5EventMap = {
| 'canplay' 'loadstart': PlyrEvent,
| 'canplaythrough' 'loadeddata': PlyrEvent,
| 'stalled' 'loadedmetadata': PlyrEvent,
| 'waiting' 'canplay': PlyrEvent,
| 'emptied' 'canplaythrough': PlyrEvent,
| 'cuechange' 'stalled': PlyrEvent,
| 'error'; 'waiting': PlyrEvent,
type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested'; 'emptied': PlyrEvent,
'cuechange': PlyrEvent,
'error': PlyrEvent
};
// For retrocompatibility, we keep Html5Event
type Html5Event = keyof Plyr.Html5EventMap;
type YoutubeEventMap = {
'statechange': PlyrStateChangeEvent,
'qualitychange': PlyrEvent,
'qualityrequested': PlyrEvent
};
// For retrocompatibility, we keep YoutubeEvent
type YoutubeEvent = keyof Plyr.YoutubeEventMap;
type PlyrEventMap = StandardEventMap & Html5EventMap & YoutubeEventMap;
interface FullscreenControl { interface FullscreenControl {
/** /**
@ -623,6 +637,22 @@ declare namespace Plyr {
readonly detail: { readonly plyr: Plyr }; readonly detail: { readonly plyr: Plyr };
} }
enum YoutubeState {
UNSTARTED = -1,
ENDED = 0,
PLAYING = 1,
PAUSED = 2,
BUFFERING = 3,
CUED = 5
}
interface PlyrStateChangeEvent extends CustomEvent {
readonly detail: {
readonly plyr: Plyr,
readonly code: YoutubeState
}
}
interface Support { interface Support {
api: boolean; api: boolean;
ui: boolean; ui: boolean;