Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Don't stop mse in background when using pip (#10794)

Browse Source 
* Don't stop mse when pip is enabled and not visible

* Cleanup visibility listener
This commit is contained in:
Nicolas Mowen 2024-04-02 13:39:11 -06:00 committed by GitHub
parent 759ad427d5
commit 15dcf1fcc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/src/components/player/MsePlayer.tsx
View File

@ -33,8 +33,7 @@ function MSEPlayer({
"opus", // OPUS Chrome, Firefox
];
const visibilityThreshold: number = 0;
const visibilityCheck: boolean = true;
const visibilityCheck: boolean = !pip;
const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
@ -235,32 +234,6 @@ function MSEPlayer({
// @ts-expect-error for typing
msRef.current = new MediaSourceConstructor();
if ("hidden" in document && visibilityCheck) {
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
onDisconnect();
} else if (videoRef.current?.isConnected) {
onConnect();
}
});
}
if ("IntersectionObserver" in window && visibilityThreshold) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
onDisconnect();
} else if (videoRef.current?.isConnected) {
onConnect();
}
});
},
{ threshold: visibilityThreshold },
);
observer.observe(videoRef.current!);
}
onConnect();
return () => {
@ -270,6 +243,32 @@ function MSEPlayer({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playbackEnabled, onDisconnect, onConnect]);
// check visibility
useEffect(() => {
if (!playbackEnabled || !visibilityCheck) {
return;
}
if (!("hidden" in document)) {
return;
}
const listener = () => {
if (document.hidden) {
onDisconnect();
} else if (videoRef.current?.isConnected) {
onConnect();
}
};
document.addEventListener("visibilitychange", listener);
return () => {
document.removeEventListener("visibilitychange", listener);
};
}, [playbackEnabled, visibilityCheck, onConnect, onDisconnect]);
// control pip
useEffect(() => {