only call onPlaying when loadeddata is fired or after timeout

web/src/components/player/MsePlayer.tsx

@@ -46,6 +46,7 @@ function MSEPlayer({
 
   const visibilityCheck: boolean = !pip;
   const [isPlaying, setIsPlaying] = useState(false);
+  const playTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
   const [connectTS, setConnectTS] = useState<number>(0);
@@ -371,24 +372,21 @@ function MSEPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled]);
 
-  return (
+  const handleLoadedData = useCallback(() => {
-    <video
-      ref={videoRef}
-      className={className}
-      playsInline
-      preload="auto"
-      onLoadedData={() => {
     handleLoadedMetadata?.();
+    if (playTimeoutRef.current) {
+      clearTimeout(playTimeoutRef.current);
+      playTimeoutRef.current = null;
+    }
     onPlaying?.();
     setIsPlaying(true);
-      }}
+  }, [handleLoadedMetadata, onPlaying]);
-      muted={!audioEnabled}
+
-      onPause={() => videoRef.current?.play()}
+  const handleProgress = useCallback(() => {
-      onProgress={() => {
+    if (!isPlaying && !playTimeoutRef.current && playbackEnabled) {
-        if (!isPlaying) {
+      playTimeoutRef.current = setTimeout(() => {
-          setIsPlaying(true);
+        handleLoadedData();
-          handleLoadedMetadata?.();
+      }, 5000);
-          onPlaying?.();
     }
     if (onError != undefined) {
       if (videoRef.current?.paused) {
@@ -413,7 +411,26 @@ function MSEPlayer({
         }, 3000),
       );
     }
-      }}
+  }, [
+    isPlaying,
+    onError,
+    videoRef,
+    bufferTimeout,
+    onDisconnect,
+    handleLoadedData,
+    playbackEnabled,
+  ]);
+
+  return (
+    <video
+      ref={videoRef}
+      className={className}
+      playsInline
+      preload="auto"
+      onLoadedData={handleLoadedData}
+      muted={!audioEnabled}
+      onPause={() => videoRef.current?.play()}
+      onProgress={handleProgress}
       onError={(e) => {
         if (
           // @ts-expect-error code does exist