fix: restore editor preview responsiveness after export (#68)

src/components/video-editor/VideoEditor.tsx

@@ -157,6 +157,7 @@ export default function VideoEditor() {
 	const [audioRegions, setAudioRegions] = useState<AudioRegion[]>([]);
 	const [selectedAudioId, setSelectedAudioId] = useState<string | null>(null);
 	const [isExporting, setIsExporting] = useState(false);
+	const [previewVersion, setPreviewVersion] = useState(0);
 	const [exportProgress, setExportProgress] = useState<ExportProgress | null>(null);
 	const [exportError, setExportError] = useState<string | null>(null);
 	const [showExportDialog, setShowExportDialog] = useState(false);
@@ -1774,13 +1775,11 @@ export default function VideoEditor() {
 				setExportError(errorMessage);
 				toast.error(`Export failed: ${errorMessage}`);
 			} finally {
-				if (!isPlaying) {
-					await videoPlaybackRef.current?.refreshFrame().catch(() => undefined);
-				}
 				setIsExporting(false);
 				exporterRef.current = null;
 				setShowExportDialog(keepExportDialogOpen);
 				setExportProgress(null);
+				setPreviewVersion(v => v + 1);
 			}
 		},
 		[
@@ -1881,6 +1880,7 @@ export default function VideoEditor() {
 			setExportProgress(null);
 			setExportError(null);
 			setExportedFilePath(undefined);
+			setPreviewVersion(v => v + 1);
 		}
 	}, []);
 
@@ -1997,6 +1997,7 @@ export default function VideoEditor() {
 								>
 									<div
 										className="relative"
+										key={`preview-wrapper-${previewVersion}`}
 										style={{
 											width: "auto",
 											height: "100%",
@@ -2016,7 +2017,7 @@ export default function VideoEditor() {
 										}}
 									>
 										<VideoPlayback
-											key={videoPath || "no-video"}
+											key={`${videoPath || "no-video"}-${previewVersion}`}
 											aspectRatio={aspectRatio}
 											ref={videoPlaybackRef}
 											videoPath={videoPath || ""}

src/components/video-editor/VideoPlayback.tsx

@@ -148,6 +148,7 @@ export interface VideoPlaybackRef {
   play: () => Promise<void>;
   pause: () => void;
   refreshFrame: () => Promise<void>;
+  relayout: () => void;
 }
 
 const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
@@ -462,6 +463,31 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
           video.currentTime = nudgeTarget;
         });
       },
+      relayout: () => {
+        const fn = layoutVideoContentRef.current;
+        if (fn) {
+          if (videoSpriteRef.current?.texture?.source) {
+            try {
+              videoSpriteRef.current.texture.source.update();
+            } catch (e) {
+              console.warn("[VideoPlayback] Failed to update texture source during relayout:", e);
+            }
+          }
+
+          requestAnimationFrame(() => {
+            fn();
+            if (cursorOverlayRef.current) {
+              cursorOverlayRef.current.update(
+                cursorTelemetryRef.current,
+                currentTimeRef.current,
+                baseMaskRef.current,
+                showCursorRef.current,
+                !isPlayingRef.current || isSeekingRef.current,
+              );
+            }
+          });
+        }
+      },
     }));
 
     const updateFocusFromClientPoint = (clientX: number, clientY: number) => {
@@ -597,6 +623,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
       cursorSwayRef.current = cursorSway;
     }, [cursorSway]);
 
+    // Sync currentTime prop to internal ref (in milliseconds)
+    useEffect(() => {
+      currentTimeRef.current = currentTime * 1000;
+    }, [currentTime]);
+
     useEffect(() => {
       if (!pixiReady || !videoReady) return;