feat: Add mediasession support

package.json

@@ -135,7 +135,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.13",
     "postcss-cli": "^8.3.1",
-    "qunit": "2.13.0",
+    "qunit": "^2.19.4",
     "remark-cli": "^6.0.1",
     "remark-lint": "^6.0.6",
     "remark-parse": "^6.0.3",

src/js/player.js

@@ -580,6 +580,107 @@ class Player extends Component {
       this.audioPosterMode(this.options_.audioPosterMode);
       this.audioOnlyMode(this.options_.audioOnlyMode);
     });
+
+    if (options.mediaSession && 'mediaSession' in window.navigator) {
+      const ms = window.navigator.mediaSession;
+      const skipTime = options.mediaSession.skipTime || 15;
+
+      const actionHandlers = [
+        ['play', () => {
+          this.play();
+        }],
+        ['pause', () => {
+          this.pause();
+        }],
+        ['stop', () => {
+          this.pause();
+          this.currentTime(0);
+        }],
+        ['seekbackward', (details) => {
+          if (this.usingPlugin('ads') && this.ads.inAdBreak()) {
+            return;
+          }
+          this.currentTime(Math.max(0, this.currentTime() - (details.skipOffset || skipTime)));
+        }],
+        ['seekforward', (details) => {
+          if (this.usingPlugin('ads') && this.ads.inAdBreak()) {
+            return;
+          }
+          this.currentTime(Math.min(this.duration(), this.currentTime() + (details.skipOffset || skipTime)));
+        }],
+        ['seekto', (details) => {
+          if (this.usingPlugin('ads') && this.ads.inAdBreak()) {
+            return;
+          }
+          this.currentTime(details.seekTime);
+        }]
+      ];
+
+      for (const [action, handler] of actionHandlers) {
+        try {
+          ms.setActionHandler(action, handler);
+        } catch (error) {
+          this.log.debug(`Couldn't register media session action "${action}".`);
+        }
+      }
+
+      const setUpMediaSessionPlaylist = () => {
+        try {
+          ms.setActionHandler('previoustrack', () => {
+            this.playlist.previous();
+          });
+          ms.setActionHandler('nexttrack', () => {
+            this.playlist.next();
+          });
+        } catch (error) {
+          this.log('Couldn\'t register playlist media session actions.');
+        }
+      };
+
+      // Only setup playlist handlers if / when playlist plugin is present
+      if (this.usingPlugin('playlist')) {
+        setUpMediaSessionPlaylist();
+      } else {
+        this.on('pluginsetup:playlist', setUpMediaSessionPlaylist);
+      }
+
+      /**
+       * @fires Player#updatemediasession
+       */
+      const updateMediaSession = () => {
+        this.log('updatems');
+        const currentMedia = this.getMedia();
+        const playlistItem = this.usingPlugin('playlist') ? Object.assign({}, this.playlist()[this.playlist.currentItem()]) : {};
+        const mediaSessionData = {
+          artwork: currentMedia.artwork || playlistItem.artwork || this.poster() ? [{
+            src: this.poster(),
+            type: getMimetype(this.poster())
+          }] : [],
+          title: currentMedia.title || playlistItem.name || '',
+          artist: currentMedia.artist || playlistItem.artist || '',
+          album: currentMedia.album || playlistItem.album || ''
+        };
+
+        // This allows the metadata to be updated before being set, e.g. if loadmedia() is not used.
+        this.trigger('updatemediasession', mediaSessionData);
+
+        ms.metadata = new window.MediaMetadata(mediaSessionData);
+      };
+
+      const updatePositionState = () => {
+        ms.setPositionState({
+          duration: this.duration(),
+          playbackRate: this.playbackRate(),
+          position: this.currentTime()
+        });
+      };
+
+      this.on('playing', updateMediaSession);
+
+      if ('setPositionState' in ms) {
+        this.on(['playing', 'seeked', 'ratechange'], updatePositionState);
+      }
+    }
   }
 
   /**

test/unit/player-mediasession.test.js

@@ -0,0 +1,144 @@
+/* eslint-env qunit */
+import TestHelpers from './test-helpers';
+import sinon from 'sinon';
+import window from 'global/window';
+
+QUnit.module('Player: MediaSession', {
+  afterEach() {
+    this.player.dispose();
+  }
+});
+
+const testOrSkip = 'mediasession' in window.navigator ? 'test' : 'skip';
+
+QUnit[testOrSkip]('mediasession data is populated from getMedia', function(assert) {
+  const done = assert.async();
+
+  this.player = TestHelpers.makePlayer({
+    mediaSession: true
+  });
+
+  this.player.loadMedia({
+    artist: 'Artist',
+    album: 'Album',
+    title: 'Title',
+    description: 'Description',
+    poster: 'poster.jpg',
+    src: 'foo.mp4'
+  });
+
+  this.player.on('updatemediasession', (e, mediaSessionData) => {
+    assert.deepEqual(mediaSessionData, {
+      artist: 'Artist',
+      album: 'Album',
+      title: 'Title',
+      artwork: [
+        {
+          src: 'poster.jpg',
+          type: 'image/jpeg'
+        }
+      ]
+    }, 'mediasession data as expected from getMedia');
+    done();
+  });
+
+  this.player.trigger('playing');
+});
+
+QUnit[testOrSkip]('mediasession data is populated from playlist', function(assert) {
+  const done = assert.async();
+
+  this.player = TestHelpers.makePlayer({
+    mediaSession: true
+  });
+
+  this.player.usingPlugin = (plugin) => {
+    if (plugin === 'playlist') {
+      return true;
+    }
+  };
+  this.player.playlist = () => [{
+    artist: 'ArtistPlaylist',
+    album: 'AlbumPlaylist',
+    name: 'TitlePlaylist'
+  }];
+  this.player.playlist.currentItem = () => 0;
+  this.player.poster('posterPlaylist.jpg');
+
+  this.player.on('updatemediasession', (e, mediaSessionData) => {
+    assert.deepEqual(mediaSessionData, {
+      artist: 'ArtistPlaylist',
+      album: 'AlbumPlaylist',
+      title: 'TitlePlaylist',
+      artwork: [
+        {
+          src: 'posterPlaylist.jpg',
+          type: 'image/jpeg'
+        }
+      ]
+    }, 'mediasession data as expected from playlist');
+    done();
+  });
+
+  this.player.trigger('playing');
+});
+
+QUnit[testOrSkip]('mediasession data set', function(assert) {
+  this.clock = sinon.useFakeTimers();
+  this.player = TestHelpers.makePlayer({
+    mediaSession: true
+  });
+
+  this.player.loadMedia({
+    artist: 'ArtistA',
+    album: 'AlbumA',
+    title: 'TitleA',
+    description: 'DescriptionA',
+    poster: 'posterA.jpg',
+    src: 'fooA.mp4'
+  });
+
+  this.player.trigger('playing');
+
+  this.clock.tick(100);
+
+  assert.equal(window.navigator.mediaSession.metadata.artist, 'ArtistA', 'mediasession artist retrieved');
+  assert.equal(window.navigator.mediaSession.metadata.title, 'TitleA', 'mediasession title retrieved');
+  assert.equal(window.navigator.mediaSession.metadata.album, 'AlbumA', 'mediasession album retrieved');
+  assert.ok(window.navigator.mediaSession.metadata.artwork[0].src.endsWith('posterA.jpg'), 'mediasession poster retrieved');
+
+  this.clock.restore();
+});
+
+QUnit[testOrSkip]('mediasession can be customised befire being set', function(assert) {
+  assert.expect(3);
+
+  this.clock = sinon.useFakeTimers();
+  this.player = TestHelpers.makePlayer({
+    mediaSession: true
+  });
+
+  this.player.loadMedia({
+    artist: 'ArtistB',
+    album: 'AlbumB',
+    title: 'TitleB',
+    description: 'DescriptionB',
+    poster: 'posterB.jpg',
+    src: 'fooB.mp4'
+  });
+
+  this.player.on('updatemediasession', function(e, metadata) {
+    assert.ok(true, 'updatemediasession triggered');
+    metadata.artist = 'Another artist';
+  });
+
+  this.player.trigger('playing');
+
+  this.clock.tick(100);
+
+  assert.equal(window.navigator.mediaSession.metadata.artist, 'Another artist', 'set with updated artist');
+  assert.equal(window.navigator.mediaSession.metadata.title, 'TitleB', 'mediasession original title used');
+
+  this.clock.restore();
+});
+