feat: add MediaMetadata (#2410)

* change browserslist to cover 100% not dead browsers

* feat: add MediaMetadata

* Revert browserslist change

Co-authored-by: Sam Potts <sam@potts.es>

src/js/config/defaults.js

@@ -446,7 +446,15 @@ const defaults = {
     noCookie: false, // Whether to use an alternative version of YouTube without cookies
   },
 
-  // markers
+  // Media Metadata
+  mediaMetadata: {
+    title: '',
+    artist: '',
+    album: '',
+    artwork: [],
+  },
+  
+  // Markers
   markers: {
     enabled: false,
     points: [],

src/js/controls.js

@@ -1749,6 +1749,23 @@ const controls = {
       });
     }
   },
+
+  // Set media metadata
+  setMediaMetadata() {
+    try {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.metadata = new window.MediaMetadata({
+          title: this.config.mediaMetadata.title,
+          artist: this.config.mediaMetadata.artist,
+          album: this.config.mediaMetadata.album,
+          artwork: this.config.mediaMetadata.artwork,
+        });
+      }
+      // eslint-disable-next-line no-empty
+    } catch (e) {}
+  }, 
+    
+  // Add markers 
   setMarkers() {
     if (this.duration > 0 && !this.elements.markers) {
       const { points } = this.config.markers;

src/js/plyr.d.ts

@@ -518,6 +518,11 @@ declare namespace Plyr {
      * Preview Thumbnails Options.
      */
     previewThumbnails?: PreviewThumbnailsOptions;
+
+    /**
+     * Media Metadata Options.
+     */
+    mediaMetadata?: MediaMetadataOptions;
   }
 
   interface QualityOptions {
@@ -576,6 +581,19 @@ declare namespace Plyr {
     src?: string | string[];
   }
 
+  interface MediaMetadataArtwork {
+    src: string;
+    sizes?: string;
+    type: string;
+  }
+
+  interface MediaMetadataOptions {
+    title?: string;
+    artist?: string;
+    album?: string;
+    artwork?: MediaMetadataArtwork[];
+  }
+
   export interface Elements {
     buttons: {
       airplay?: HTMLButtonElement;

src/js/ui.js

@@ -125,6 +125,11 @@ const ui = {
     if (this.config.duration) {
       controls.durationUpdate.call(this);
     }
+
+    // Media metadata
+    if (this.config.mediaMetadata) {
+      controls.setMediaMetadata.call(this);
+    }
   },
 
   // Setup aria attribute for play and iframe title