From 67cecb3bb140eb8a829c00ee69aa26544e8a65a1 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Tue, 3 Sep 2024 23:02:03 +0200
Subject: [PATCH] reduce flickering

https://github.com/mifi/lossless-cut/issues/2083#issuecomment-2325291719
---
 src/renderer/src/MediaSourcePlayer.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/MediaSourcePlayer.tsx b/src/renderer/src/MediaSourcePlayer.tsx
index e2540211..22798086 100644
--- a/src/renderer/src/MediaSourcePlayer.tsx
+++ b/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]);