Memoize onPlaying and only instantiate one jsmpeg player

web/src/components/player/JSMpegPlayer.tsx

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

web/src/components/player/LivePlayer.tsx

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