Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-24 18:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rework MediaSession to be less bad

Browse Source
This commit is contained in:
qtchaos 2024-01-06 18:43:42 +02:00
parent 949cc216c7
commit fb68efa522
No known key found for this signature in database
GPG Key ID: 7DA98B2B9EF06A90
1 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/player/internals/MediaSession.ts
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useMemo, useRef } from "react";
import { usePlayerStore } from "@/stores/player/store"; import { usePlayerStore } from "@/stores/player/store";
@ -66,6 +66,22 @@ export function MediaSession() {
useEffect(() => { useEffect(() => {
if (!("mediaSession" in navigator)) return; if (!("mediaSession" in navigator)) return;
// If the media is paused, update the navigator
if (mediaPlaying.isPaused) {
navigator.mediaSession.playbackState = "paused";
} else {
navigator.mediaSession.playbackState = "playing";
}
}, [mediaPlaying.isPaused]);
useEffect(() => {
if (!("mediaSession" in navigator)) return;
updatePositionState(dataRef.current.progress.time);
}, [mediaPlaying.playbackRate, updatePositionState]);
useEffect(() => {
if (!("mediaSession" in navigator)) return;
// If not already updating the position state, and the media is loading, queue an update // If not already updating the position state, and the media is loading, queue an update
if ( if (
!shouldUpdatePositionState.current && !shouldUpdatePositionState.current &&
@ -76,8 +92,7 @@ export function MediaSession() {
// If the user has skipped (or MediaSession desynced) by more than 5 seconds, queue an update // If the user has skipped (or MediaSession desynced) by more than 5 seconds, queue an update
if ( if (
Math.abs(dataRef.current.progress.time - lastPlaybackPosition.current) > Math.abs(progress.time - lastPlaybackPosition.current) >= 5 &&
5 &&
!dataRef.current.mediaPlaying.isLoading && !dataRef.current.mediaPlaying.isLoading &&
!shouldUpdatePositionState.current !shouldUpdatePositionState.current
) { ) {
@ -90,21 +105,29 @@ export function MediaSession() {
!dataRef.current.mediaPlaying.isLoading !dataRef.current.mediaPlaying.isLoading
) { ) {
shouldUpdatePositionState.current = false; shouldUpdatePositionState.current = false;
updatePositionState(dataRef.current.progress.time); updatePositionState(progress.time);
} }
lastPlaybackPosition.current = dataRef.current.progress.time; lastPlaybackPosition.current = progress.time;
navigator.mediaSession.playbackState = dataRef.current.mediaPlaying }, [updatePositionState, progress.time]);
.isPlaying
? "playing" useEffect(() => {
: "paused"; if (
!("mediaSession" in navigator) ||
dataRef.current.mediaPlaying.hasPlayedOnce ||
dataRef.current.progress.duration === 0
)
return;
const title = meta?.episode?.title ?? meta?.title ?? "";
const artist = meta?.type === "movie" ? undefined : meta?.title ?? "";
navigator.mediaSession.metadata = new MediaMetadata({ navigator.mediaSession.metadata = new MediaMetadata({
title: dataRef.current.meta?.episode?.title, title,
artist: dataRef.current.meta?.title, artist,
artwork: [ artwork: [
{ {
src: dataRef.current.meta?.poster ?? "", src: meta?.poster ?? "",
sizes: "342x513", sizes: "342x513",
type: "image/png", type: "image/png",
}, },
@ -115,7 +138,6 @@ export function MediaSession() {
if (dataRef.current.mediaPlaying.isLoading) return; if (dataRef.current.mediaPlaying.isLoading) return;
dataRef.current.display?.play(); dataRef.current.display?.play();
navigator.mediaSession.playbackState = "playing";
updatePositionState(dataRef.current.progress.time); updatePositionState(dataRef.current.progress.time);
}); });
@ -123,33 +145,16 @@ export function MediaSession() {
if (dataRef.current.mediaPlaying.isLoading) return; if (dataRef.current.mediaPlaying.isLoading) return;
dataRef.current.display?.pause(); dataRef.current.display?.pause();
navigator.mediaSession.playbackState = "paused";
updatePositionState(dataRef.current.progress.time); updatePositionState(dataRef.current.progress.time);
}); });
navigator.mediaSession.setActionHandler("seekbackward", (evt) => {
const skipTime = evt.seekOffset ?? 10;
dataRef.current.display?.setTime(
dataRef.current.progress.time - skipTime,
);
updatePositionState(dataRef.current.progress.time - skipTime);
});
navigator.mediaSession.setActionHandler("seekforward", (evt) => {
const skipTime = evt.seekOffset ?? 10; // Time to skip in seconds
dataRef.current.display?.setTime(
dataRef.current.progress.time + skipTime,
);
updatePositionState(dataRef.current.progress.time + skipTime);
});
navigator.mediaSession.setActionHandler("seekto", (e) => { navigator.mediaSession.setActionHandler("seekto", (e) => {
if (!e.seekTime) return; if (!e.seekTime) return;
dataRef.current.display?.setTime(e.seekTime); dataRef.current.display?.setTime(e.seekTime);
updatePositionState(e.seekTime); updatePositionState(e.seekTime);
}); });
if (dataRef.current.meta?.episode?.number !== 1) { if ((dataRef.current.meta?.episode?.number ?? 1) !== 1) {
navigator.mediaSession.setActionHandler("previoustrack", () => { navigator.mediaSession.setActionHandler("previoustrack", () => {
changeEpisode(-1); changeEpisode(-1);
}); });
@ -167,12 +172,6 @@ export function MediaSession() {
} else { } else {
navigator.mediaSession.setActionHandler("nexttrack", null); navigator.mediaSession.setActionHandler("nexttrack", null);
} }
}, [ }, [changeEpisode, updatePositionState, meta]);
changeEpisode,
meta,
setDirectMeta,
setShouldStartFromBeginning,
updatePositionState,
]);
return null; return null;
} }