revert to inline funcs

web/src/components/player/MsePlayer.tsx

@@ -372,7 +372,13 @@ function MSEPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled]);
 
-  const handleLoadedData = useCallback(() => {
+  return (
+    <video
+      ref={videoRef}
+      className={className}
+      playsInline
+      preload="auto"
+      onLoadedData={() => {
         handleLoadedMetadata?.();
         if (playTimeoutRef.current) {
           clearTimeout(playTimeoutRef.current);
@@ -380,12 +386,14 @@ function MSEPlayer({
         }
         onPlaying?.();
         setIsPlaying(true);
-  }, [handleLoadedMetadata, onPlaying]);
+      }}
-
+      muted={!audioEnabled}
-  const handleProgress = useCallback(() => {
+      onPause={() => videoRef.current?.play()}
+      onProgress={() => {
         if (!isPlaying && !playTimeoutRef.current && playbackEnabled) {
           playTimeoutRef.current = setTimeout(() => {
-        handleLoadedData();
+            setIsPlaying(true);
+            onPlaying?.();
           }, 5000);
         }
         if (onError != undefined) {
@@ -411,26 +419,7 @@ 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