MediaSession recognises paused state; Play position now sec instead of ms

mopidy_iris/static/app.js

@@ -107120,6 +107120,7 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "render", function () {
+      var audioRef = _this.state.audioRef;
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/media-has-caption
@@ -107131,6 +107132,7 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
           style: {
             display: 'none'
           },
+          ref: audioRef,
           "data-qa-node": "audio",
           "data-qa-file": "MediaSession"
         })
@@ -107139,7 +107141,9 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
 
     _this.state = {
       current_track: null,
-      stream_title: null
+      stream_title: null,
+      audioRef: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createRef() // Allows access from within getDerivedStateFromProps
+
     };
     return _this;
   }
@@ -107157,12 +107161,6 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
       mediaSession.setActionHandler('pause', function () {
         return _this2.actionHandler('pause');
       });
-      mediaSession.setActionHandler('seekbackward', function () {
-        return _this2.actionHandler('seekbackward');
-      });
-      mediaSession.setActionHandler('seekforward', function () {
-        return _this2.actionHandler('seekforward');
-      });
       mediaSession.setActionHandler('seekto', function (position) {
         return _this2.actionHandler('seekto', position);
       });
@@ -107177,12 +107175,13 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(_ref2, state) {
       var current_track = _ref2.current_track,
-          stream_title = _ref2.stream_title,
+          _ref2$stream_title = _ref2.stream_title,
+          stream_title = _ref2$stream_title === void 0 ? null : _ref2$stream_title,
           play_state = _ref2.play_state,
           time_position = _ref2.time_position;
 
       if (current_track) {
-        var title = current_track.title,
+        var name = current_track.name,
             _current_track$album = current_track.album,
             album = _current_track$album === void 0 ? {} : _current_track$album,
             _current_track$artist = current_track.artists,
@@ -107191,20 +107190,29 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
             images = _current_track$images === void 0 ? {} : _current_track$images;
 
         if (current_track.duration) {
-          console.log({
-            current_track: current_track
-          });
-          navigator.mediaSession.setPositionState({
-            duration: current_track.duration / 1000,
-            playbackRate: 1,
-            position: time_position / 1000
-          });
+          // Only supported on Android as of Chrome 81 and later.
+          if ('setPositionState' in navigator.mediaSession) {
+            var newPositionState = {
+              duration: Math.round(current_track.duration / 1000),
+              position: Math.round(time_position / 1000),
+              playbackRate: 1
+            };
+
+            try {
+              navigator.mediaSession.setPositionState(newPositionState);
+            } catch (error) {
+              console.error('Failed to set MediaSession position', {
+                newPositionState: newPositionState,
+                error: error
+              });
+            }
+          }
         }
 
         navigator.mediaSession.metadata = new window.MediaMetadata({
-          title: stream_title || title || '-',
-          artist: artists.length ? artists[0].name : '-',
-          album: album.name || '-',
+          title: stream_title || name || 'Unknown track',
+          artist: artists.length ? artists[0].name : 'Unknown artist',
+          album: album.name || 'Unknown album',
           artwork: [].concat(_toConsumableArray(images.small ? [{
             src: images.small,
             sizes: '96x96',
@@ -107223,6 +107231,15 @@ var MediaSession = /*#__PURE__*/function (_React$Component) {
 
       if (navigator.mediaSession.playbackState !== play_state) {
         navigator.mediaSession.playbackState = play_state;
+        var current = state.audioRef.current;
+
+        if (current) {
+          if (play_state === 'paused') {
+            current.pause();
+          } else {
+            current.play();
+          }
+        }
       }
 
       return _objectSpread(_objectSpread({}, state), {}, {

mopidy_iris/static/index.html

@@ -106,7 +106,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1607768799";
+	var build = "1607846037";
 	var version = "3.55.3";
 
 	// Construct the script tag