secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
James Barnsley
2020-12-13 21:03:28 +13:00
parent c3d7170684
commit b3941a3798
5 changed files with 75 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
mopidy_iris/static/app.js
View File

@ -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), {}, {

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -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

48
src/js/components/MediaSession.js
View File

@ -9,6 +9,7 @@ class MediaSession extends React.Component {
this.state = {
current_track: null,
stream_title: null,
audioRef: React.createRef(), // Allows access from within getDerivedStateFromProps
};
}
@ -19,8 +20,6 @@ class MediaSession extends React.Component {
mediaSession.setActionHandler('play', () => this.actionHandler('play'));
mediaSession.setActionHandler('pause', () => this.actionHandler('pause'));
mediaSession.setActionHandler('seekbackward', () => this.actionHandler('seekbackward'));
mediaSession.setActionHandler('seekforward', () => this.actionHandler('seekforward'));
mediaSession.setActionHandler('seekto', (position) => this.actionHandler('seekto', position));
mediaSession.setActionHandler('previoustrack', () => this.actionHandler('previous'));
mediaSession.setActionHandler('nexttrack', () => this.actionHandler('next'));
@ -29,7 +28,7 @@ class MediaSession extends React.Component {
static getDerivedStateFromProps(
{
current_track,
stream_title,
stream_title = null,
play_state,
time_position,
},
@ -37,25 +36,32 @@ class MediaSession extends React.Component {
) {
if (current_track) {
const {
title,
name,
album = {},
artists = [],
images = {},
} = current_track;
if (current_track.duration) {
console.log({ 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) {
const 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, 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: [
...(images.small ? [{
src: images.small,
@ -78,6 +84,19 @@ class MediaSession extends React.Component {
if (navigator.mediaSession.playbackState !== play_state) {
navigator.mediaSession.playbackState = play_state;
const {
audioRef: {
current,
},
} = state;
if (current) {
if (play_state === 'paused') {
current.pause();
} else {
current.play();
}
}
}
return {
@ -112,6 +131,8 @@ class MediaSession extends React.Component {
}
render = () => {
const { audioRef } = this.state;
return (
// eslint-disable-next-line jsx-a11y/media-has-caption
<audio
@ -120,6 +141,7 @@ class MediaSession extends React.Component {
autoPlay
loop
style={{ display: 'none' }}
ref={audioRef}
/>
);
};