reduce flickering

https://github.com/mifi/lossless-cut/issues/2083#issuecomment-2325291719

src/renderer/src/MediaSourcePlayer.tsx

@@ -296,7 +296,15 @@ function MediaSourcePlayer({ rotate, filePath, playerTime, videoStream, audioStr
       return () => undefined;
     }
 
-    const onCanPlay = () => setLoading(false);
+    const clearCanvas = () => {
+      if (canvasRef.current == null) return;
+      canvasRef.current.getContext('2d')?.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    };
+
+    const onCanPlay = () => {
+      clearCanvas();
+      setLoading(false);
+    };
     const getTargetTime = () => masterVideoRef.current!.currentTime - debouncedState.startTime;
 
     const abortController = new AbortController();
@@ -347,9 +355,11 @@ function MediaSourcePlayer({ rotate, filePath, playerTime, videoStream, audioStr
   const { videoStyle, canvasStyle } = useMemo(() => {
     const sharedStyle: CSSProperties = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, display: 'block', width: '100%', height: '100%', objectFit: 'contain', transform: rotate ? `rotate(${rotate}deg)` : undefined };
 
+    const shouldShowCanvas = !debouncedState.playing;
+
     return {
       videoStyle: { ...sharedStyle, visibility: loading || !debouncedState.playing ? 'hidden' : undefined },
-      canvasStyle: { ...sharedStyle, visibility: loading || debouncedState.playing ? 'hidden' : undefined },
+      canvasStyle: { ...sharedStyle, visibility: shouldShowCanvas ? undefined : 'hidden' },
     } as { videoStyle: CSSProperties, canvasStyle: CSSProperties };
   }, [loading, debouncedState.playing, rotate]);