Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-10 03:01:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Handle macOS media controls

Browse source
This commit is contained in:
erik 2026-05-02 18:24:44 +02:00
parent 01e728bd84
commit e65c023772
2 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/routes/Player/Player.js
View file

@ -255,6 +255,12 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [player.nextVideo, handleNextVideoNavigation, profile.settings]);
const onPreviousTrackRequested = React.useCallback(() => {
if (video.state.time !== null && video.state.time > 5000) {
onSeekRequested(0);
}
}, [video.state.time, onSeekRequested]);
const onVideoClick = React.useCallback(() => {
if (video.state.paused !== null && !longPress.current) {
if (video.state.paused) {
@ -534,13 +540,21 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested, onPreviousTrackRequested);
React.useEffect(() => {
const onMediaKey = (action) => {
switch (action) {
case 'play-pause':
video.state.paused ? onPlayRequested() : onPauseRequested();
if (video.state.paused !== null) {
video.state.paused ? onPlayRequested() : onPauseRequested();
}
break;
case 'play':
onPlayRequested();
break;
case 'pause':
onPauseRequested();
break;
case 'next-track':
if (player.nextVideo !== null) {
@ -549,15 +563,13 @@ const Player = ({ urlParams, queryParams }) => {
}
break;
case 'previous-track':
if (video.state.time !== null && video.state.time > 5000) {
onSeekRequested(0);
}
onPreviousTrackRequested();
break;
}
};
shell.on('media-key', onMediaKey);
return () => shell.off('media-key', onMediaKey);
}, [video.state.paused, video.state.time, player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested, onSeekRequested]);
}, [video.state.paused, player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested, onPreviousTrackRequested]);
onShortcut('seekForward', (combo) => {
if (video.state.time !== null) {

17
src/routes/Player/useMediaSession.ts
View file

@ -6,11 +6,12 @@ const useMediaSession = (
onPlayRequested: () => void,
onPauseRequested: () => void,
onNextVideoRequested: () => void,
onPreviousTrackRequested: () => void,
) => {
useEffect(() => {
if (!navigator.mediaSession) return;
const playbackState = !videoState.paused ? 'playing' : 'paused';
const playbackState = videoState.paused === null ? 'none' : videoState.paused ? 'paused' : 'playing';
navigator.mediaSession.playbackState = playbackState;
return () => {
@ -49,9 +50,17 @@ const useMediaSession = (
navigator.mediaSession.setActionHandler('play', onPlayRequested);
navigator.mediaSession.setActionHandler('pause', onPauseRequested);
const nexVideoCallback = player.nextVideo ? onNextVideoRequested : null;
navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
}, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
const nextVideoCallback = player.nextVideo ? onNextVideoRequested : null;
navigator.mediaSession.setActionHandler('nexttrack', nextVideoCallback);
navigator.mediaSession.setActionHandler('previoustrack', onPreviousTrackRequested);
return () => {
navigator.mediaSession.setActionHandler('play', null);
navigator.mediaSession.setActionHandler('pause', null);
navigator.mediaSession.setActionHandler('nexttrack', null);
navigator.mediaSession.setActionHandler('previoustrack', null);
};
}, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested, onPreviousTrackRequested]);
};
export default useMediaSession;