Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-10-15 20:07:23 +02:00
Code Issues Projects Releases Wiki Activity

Memoize onPlaying and only instantiate one jsmpeg player (#12033)

Browse Source
This commit is contained in:
Josh Hawkins 2024-06-17 17:10:41 -06:00 committed by GitHub
parent 6c107883b5
commit 2cbc336bc0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/player/JSMpegPlayer.tsx
View File

@ -25,6 +25,7 @@ export default function JSMpegPlayer({
const playerRef = useRef<HTMLDivElement | null>(null); const playerRef = useRef<HTMLDivElement | null>(null);
const videoRef = useRef(null); const videoRef = useRef(null);
const internalContainerRef = useRef<HTMLDivElement | null>(null); const internalContainerRef = useRef<HTMLDivElement | null>(null);
const onPlayingRef = useRef(onPlaying);
const selectedContainerRef = useMemo( const selectedContainerRef = useMemo(
() => containerRef ?? internalContainerRef, () => containerRef ?? internalContainerRef,
@ -83,7 +84,11 @@ export default function JSMpegPlayer({
const uniqueId = useId(); const uniqueId = useId();
useEffect(() => { useEffect(() => {
if (!playerRef.current) { onPlayingRef.current = onPlaying;
}, [onPlaying]);
useEffect(() => {
if (!playerRef.current || videoRef.current) {
return; return;
} }
@ -96,12 +101,10 @@ export default function JSMpegPlayer({
audio: false, audio: false,
videoBufferSize: 1024 * 1024 * 4, videoBufferSize: 1024 * 1024 * 4,
onPlay: () => { onPlay: () => {
onPlaying?.(); onPlayingRef.current?.();
}, },
}, },
); );
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [url, uniqueId]); }, [url, uniqueId]);
return ( return (

12
web/src/components/player/LivePlayer.tsx
View File

@ -2,7 +2,7 @@ import WebRtcPlayer from "./WebRTCPlayer";
import { CameraConfig } from "@/types/frigateConfig"; import { CameraConfig } from "@/types/frigateConfig";
import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage"; import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import MSEPlayer from "./MsePlayer"; import MSEPlayer from "./MsePlayer";
import JSMpegPlayer from "./JSMpegPlayer"; import JSMpegPlayer from "./JSMpegPlayer";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
@ -125,6 +125,10 @@ export default function LivePlayer({
setLiveReady(false); setLiveReady(false);
}, [preferredLiveMode]); }, [preferredLiveMode]);
const playerIsPlaying = useCallback(() => {
setLiveReady(true);
}, []);
if (!cameraConfig) { if (!cameraConfig) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
@ -141,7 +145,7 @@ export default function LivePlayer({
audioEnabled={playAudio} audioEnabled={playAudio}
microphoneEnabled={micEnabled} microphoneEnabled={micEnabled}
iOSCompatFullScreen={iOSCompatFullScreen} iOSCompatFullScreen={iOSCompatFullScreen}
onPlaying={() => setLiveReady(true)} onPlaying={playerIsPlaying}
pip={pip} pip={pip}
onError={onError} onError={onError}
/> />
@ -154,7 +158,7 @@ export default function LivePlayer({
camera={cameraConfig.live.stream_name} camera={cameraConfig.live.stream_name}
playbackEnabled={cameraActive} playbackEnabled={cameraActive}
audioEnabled={playAudio} audioEnabled={playAudio}
onPlaying={() => setLiveReady(true)} onPlaying={playerIsPlaying}
pip={pip} pip={pip}
setFullResolution={setFullResolution} setFullResolution={setFullResolution}
onError={onError} onError={onError}
@ -177,7 +181,7 @@ export default function LivePlayer({
width={cameraConfig.detect.width} width={cameraConfig.detect.width}
height={cameraConfig.detect.height} height={cameraConfig.detect.height}
containerRef={containerRef} containerRef={containerRef}
onPlaying={() => setLiveReady(true)} onPlaying={playerIsPlaying}
/> />
); );
} else { } else {