Fixing "missing code in detail" for PlyrEvent type

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.

1 files changed, 70 insertions, 40 deletions

diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts
index cdd5cd4c..357bb687 100644
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@@ -214,25 +214,25 @@ declare class Plyr {
   /**
    * Add an event listener for the specified event.
    */
-  on(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
+  on<K extends keyof Plyr.PlyrEventMap>(
+    event: K,
+    callback: (this: this, event: Plyr.PlyrEventMap[K]) => void,
   ): void;
 
   /**
    * Add an event listener for the specified event once.
    */
-  once(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
+  once<K extends keyof Plyr.PlyrEventMap>(
+    event: K,
+    callback: (this: this, event: Plyr.PlyrEventMap[K]) => void,
   ): void;
 
   /**
    * Remove an event listener for the specified event.
    */
-  off(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
+  off<K extends keyof Plyr.PlyrEventMap>(
+    event: K,
+    callback: (this: this, event: Plyr.PlyrEventMap[K]) => void,
   ): void;
 
   /**
@@ -249,37 +249,51 @@ declare class Plyr {
 declare namespace Plyr {
   type MediaType = 'audio' | 'video';
   type Provider = 'html5' | 'youtube' | 'vimeo';
-  type StandardEvent =
-    | 'progress'
-    | 'playing'
-    | 'play'
-    | 'pause'
-    | 'timeupdate'
-    | 'volumechange'
-    | 'seeking'
-    | 'seeked'
-    | 'ratechange'
-    | 'ended'
-    | 'enterfullscreen'
-    | 'exitfullscreen'
-    | 'captionsenabled'
-    | 'captionsdisabled'
-    | 'languagechange'
-    | 'controlshidden'
-    | 'controlsshown'
-    | 'ready';
-  type Html5Event =
-    | 'loadstart'
-    | 'loadeddata'
-    | 'loadedmetadata'
-    | 'canplay'
-    | 'canplaythrough'
-    | 'stalled'
-    | 'waiting'
-    | 'emptied'
-    | 'cuechange'
-    | 'error';
-  type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
+  type StandardEventMap = {
+    'progress': PlyrEvent,
+    'playing': PlyrEvent,
+    'play': PlyrEvent,
+    'pause': PlyrEvent,
+    'timeupdate': PlyrEvent,
+    'volumechange': PlyrEvent,
+    'seeking': PlyrEvent,
+    'seeked': PlyrEvent,
+    'ratechange': PlyrEvent,
+    'ended': PlyrEvent,
+    'enterfullscreen': PlyrEvent,
+    'exitfullscreen': PlyrEvent,
+    'captionsenabled': PlyrEvent,
+    'captionsdisabled': PlyrEvent,
+    'languagechange': PlyrEvent,
+    'controlshidden': PlyrEvent,
+    'controlsshown': PlyrEvent,
+    'ready': PlyrEvent
+  };
+  // For retrocompatibility, we keep StandadEvent
+  type StandadEvent = keyof Plyr.StandardEventMap;
+  type Html5EventMap = {
+    'loadstart': PlyrEvent,
+    'loadeddata': PlyrEvent,
+    'loadedmetadata': PlyrEvent,
+    'canplay': PlyrEvent,
+    'canplaythrough': PlyrEvent,
+    'stalled': PlyrEvent,
+    'waiting': PlyrEvent,
+    '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 {
     /**
@@ -623,6 +637,22 @@ declare namespace 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 {
     api: boolean;
     ui: boolean;