railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup media session handling on the web

Browse Source
This commit is contained in:
Zoe Roux 2024-07-01 03:45:36 +00:00
parent edf5d0c613
commit 39dd30b762
No known key found for this signature in database
1 changed files with 14 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/Video.web.tsx
View File

@ -149,19 +149,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
nativeRef.current.playbackRate = rate;
}, [rate]);
useMediaSession(
source?.metadata,
nativeRef,
useMemo(
() => ({
seek,
resume,
pause,
}),
[seek, resume, pause],
),
showNotificationControls,
);
useMediaSession(source?.metadata, nativeRef, showNotificationControls);
return (
<video
@ -255,11 +243,6 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
const useMediaSession = (
metadata: VideoMetadata | undefined,
nativeRef: RefObject<HTMLVideoElement>,
actions: {
seek: (time: number) => void;
pause: () => void;
resume: () => void;
},
showNotification: boolean,
) => {
const isPlaying = !nativeRef.current?.paused ?? false;
@ -286,19 +269,24 @@ const useMediaSession = (
return;
}
const seekRelative = (offset: number) => {
if (!nativeRef.current) {
return;
const seekTo = (time: number) => {
if (nativeRef.current) {
nativeRef.current.currentTime = time;
}
};
const seekRelative = (offset: number) => {
if (nativeRef.current) {
nativeRef.current.currentTime = nativeRef.current.currentTime + offset;
}
actions.seek(nativeRef.current.currentTime + offset);
};
const mediaActions: [
MediaSessionAction,
MediaSessionActionHandler | null,
][] = [
['play', () => actions.resume()],
['pause', () => actions.pause()],
['play', () => nativeRef.current?.play()],
['pause', () => nativeRef.current?.pause()],
[
'seekbackward',
(evt: MediaSessionActionDetails) =>
@ -309,10 +297,7 @@ const useMediaSession = (
(evt: MediaSessionActionDetails) =>
seekRelative(evt.seekOffset ? evt.seekOffset : 10),
],
[
'seekto',
(evt: MediaSessionActionDetails) => actions.seek(evt.seekTime!),
],
['seekto', (evt: MediaSessionActionDetails) => seekTo(evt.seekTime!)],
];
for (const [action, handler] of mediaActions) {
@ -322,7 +307,7 @@ const useMediaSession = (
// ignored
}
}
}, [enabled, nativeRef, actions]);
}, [enabled, nativeRef]);
useEffect(() => {
if (enabled) {