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;