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>

README.md

@@ -413,6 +413,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 | `vimeo`              | Object                     | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }`                                            | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline`                                                                                                                                                                                                   |
 | `youtube`            | Object                     | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }`                                               | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` |
 | `previewThumbnails`  | Object                     | `{ enabled: false, src: '' }`                                                                                                  | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below.                                                                                                                            |
+| `mediaMetadata`      | Object                     | `{ title: '', artist: '', album: '', artwork: [] }`                                                                            | The [MediaMetadata](https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata) interface of the Media Session API allows a web page to provide rich media metadata for display in a platform UI.                                                                                                                                                                                                   |
 
 1.  Vimeo only
 2.  Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:

demo/src/js/demo.js

@@ -65,6 +65,17 @@ import toggleClass from './toggle-class';
         // Prevent Vimeo blocking plyr.io demo site
         referrerPolicy: 'no-referrer',
       },
+      mediaMetadata: {
+        title: 'View From A Blue Moon',
+        album: 'Sports',
+        artist: 'Brainfarm',
+        artwork: [
+          {
+            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+            type: 'image/jpeg',
+          },
+        ],
+      },
       markers: {
         enabled: true,
         points: [

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