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

Prevent onPlaying from being called repeatedly in jsmpeg player (#12482)

Browse Source
This commit is contained in:
Josh Hawkins 2024-07-16 14:40:11 -05:00 committed by GitHub
parent 30f0f73a4e
commit 78c15f3020
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,7 @@ export default function JSMpegPlayer({
const onPlayingRef = useRef(onPlaying); const onPlayingRef = useRef(onPlaying);
const [showCanvas, setShowCanvas] = useState(false); const [showCanvas, setShowCanvas] = useState(false);
const [hasData, setHasData] = useState(false); const [hasData, setHasData] = useState(false);
const hasDataRef = useRef(hasData);
const [dimensionsReady, setDimensionsReady] = useState(false); const [dimensionsReady, setDimensionsReady] = useState(false);
const selectedContainerRef = useMemo( const selectedContainerRef = useMemo(
@ -110,6 +111,8 @@ export default function JSMpegPlayer({
const canvas = canvasRef.current; const canvas = canvasRef.current;
let videoElement: JSMpeg.VideoElement | null = null; let videoElement: JSMpeg.VideoElement | null = null;
setHasData(false);
if (videoWrapper && playbackEnabled) { if (videoWrapper && playbackEnabled) {
// Delayed init to avoid issues with react strict mode // Delayed init to avoid issues with react strict mode
const initPlayer = setTimeout(() => { const initPlayer = setTimeout(() => {
@ -122,7 +125,7 @@ export default function JSMpegPlayer({
audio: false, audio: false,
videoBufferSize: 1024 * 1024 * 4, videoBufferSize: 1024 * 1024 * 4,
onVideoDecode: () => { onVideoDecode: () => {
if (!hasData) { if (!hasDataRef.current) {
setHasData(true); setHasData(true);
onPlayingRef.current?.(); onPlayingRef.current?.();
} }
@ -151,6 +154,10 @@ export default function JSMpegPlayer({
setShowCanvas(hasData && dimensionsReady); setShowCanvas(hasData && dimensionsReady);
}, [hasData, dimensionsReady]); }, [hasData, dimensionsReady]);
useEffect(() => {
hasDataRef.current = hasData;
}, [hasData]);
return ( return (
<div className={cn(className, !containerRef.current && "size-full")}> <div className={cn(className, !containerRef.current && "size-full")}>
<div <div