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

web/src/components/player/JSMpegPlayer.tsx

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