feat(Demo): Use MediaSession action handler in the demo (#5927)

Closes #2812
shaka-project · Nov 27, 2023 · 078ab36 · 078ab36
1 parent 515a4ab
commit 078ab36
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/demo/main.js b/demo/main.js
@@ -1304,6 +1304,46 @@ shakaDemo.Main = class {
         };
         metadata.artist = asset.source;
         navigator.mediaSession.metadata = new MediaMetadata(metadata);
+
+        const addMediaSessionHandler = (type, callback) => {
+          try {
+            navigator.mediaSession.setActionHandler(type, (details) => {
+              callback(details);
+            });
+          } catch (error) {
+            console.warn(
+                `The "${type}" media session action is not supported.`);
+          }
+        };
+        const commonHandler = (details) => {
+          switch (details.action) {
+            case 'pause':
+              this.video_.pause();
+              break;
+            case 'play':
+              this.video_.play();
+              break;
+            case 'seekbackward':
+              this.video_.currentTime -= (details.seekOffset || 10);
+              break;
+            case 'seekforward':
+              this.video_.currentTime += (details.seekOffset || 10);
+              break;
+            case 'stop':
+              this.unload();
+              break;
+            case 'enterpictureinpicture':
+              this.controls_.togglePiP();
+              break;
+          }
+        };
+
+        addMediaSessionHandler('pause', commonHandler);
+        addMediaSessionHandler('play', commonHandler);
+        addMediaSessionHandler('seekbackward', commonHandler);
+        addMediaSessionHandler('seekforward', commonHandler);
+        addMediaSessionHandler('stop', commonHandler);
+        addMediaSessionHandler('enterpictureinpicture', commonHandler);
       }
 
       if (this.visualizer_ && this.visualizer_.active) {

diff --git a/externs/mediasession.js b/externs/mediasession.js
@@ -32,6 +32,13 @@ const MediaSession = class {
     /** @type {?MediaMetadata} */
     this.metadata;
   }
+
+  setActionHandler(type, callback) {
+    /** @type {string} */
+    this.type = type;
+    /** @type {!function(!{action: string, seekOffset: ?number})} */
+    this.callback = callback;
+  }
 };