From 6c83ce2ea8d1ddea83641eec7424d42d55d2546d Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 15 Jun 2026 19:29:56 +1000
Subject: [PATCH] Fix caption sidecar default and preview blur anchoring

---
 .../video-editor/AnnotationOverlay.tsx        |  3 ++
 src/components/video-editor/VideoEditor.tsx   |  2 +-
 src/components/video-editor/VideoPlayback.tsx | 47 +++++++++++++++++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/video-editor/AnnotationOverlay.tsx b/src/components/video-editor/AnnotationOverlay.tsx
index c194e9a5..8316468d 100644
--- a/src/components/video-editor/AnnotationOverlay.tsx
+++ b/src/components/video-editor/AnnotationOverlay.tsx
@@ -24,6 +24,7 @@ interface AnnotationOverlayProps {
 	containerHeight: number;
 	recordingRect: Rect;
 	sceneTransform: SceneTransform;
+	interactionScale?: number;
 	onPositionChange: (id: string, position: { x: number; y: number }) => void;
 	onSizeChange: (id: string, size: { width: number; height: number }) => void;
 	onClick: (id: string) => void;
@@ -46,6 +47,7 @@ export function AnnotationOverlay({
 	containerHeight,
 	recordingRect,
 	sceneTransform,
+	interactionScale = 1,
 	onPositionChange,
 	onSizeChange,
 	onClick,
@@ -202,6 +204,7 @@ export function AnnotationOverlay({
 		<Rnd
 			position={{ x, y }}
 			size={{ width, height }}
+			scale={interactionScale}
 			onDragStart={() => {
 				isDraggingRef.current = true;
 			}}
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 415212a6..e26fe423 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -537,7 +537,7 @@ export default function VideoEditor() {
 	const [autoCaptionSettings, setAutoCaptionSettings] = useState<AutoCaptionSettings>(
 		DEFAULT_AUTO_CAPTION_SETTINGS,
 	);
-	const [includeCaptionSidecar, setIncludeCaptionSidecar] = useState(true);
+	const [includeCaptionSidecar, setIncludeCaptionSidecar] = useState(false);
 	const [whisperExecutablePath, setWhisperExecutablePath] = useState<string | null>(
 		initialEditorPreferences.whisperExecutablePath,
 	);
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 829ad795..581378d0 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -3362,7 +3362,28 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 								</div>
 							</div>
 						) : null}
-						<div className="absolute inset-0" style={{ pointerEvents: "none" }}>
+						<div
+							className="absolute"
+							style={{
+								pointerEvents: "none",
+								left: 0,
+								top: 0,
+								width:
+									annotationRecordingRect.width ||
+									(overlayRef.current?.clientWidth || 800),
+								height:
+									annotationRecordingRect.height ||
+									(overlayRef.current?.clientHeight || 600),
+								transform: `translate(${
+									(annotationRecordingRect.x || 0) * annotationSceneTransform.scale +
+									annotationSceneTransform.x
+								}px, ${
+									(annotationRecordingRect.y || 0) * annotationSceneTransform.scale +
+									annotationSceneTransform.y
+								}px) scale(${annotationSceneTransform.scale})`,
+								transformOrigin: "top left",
+							}}
+						>
 							{(() => {
 								const filtered = (annotationRegions || []).filter((annotation) => {
 									if (
@@ -3405,10 +3426,26 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 										key={annotation.id}
 										annotation={annotation}
 										isSelected={annotation.id === selectedAnnotationId}
-										containerWidth={overlayRef.current?.clientWidth || 800}
-										containerHeight={overlayRef.current?.clientHeight || 600}
-												recordingRect={annotationRecordingRect}
-												sceneTransform={annotationSceneTransform}
+												containerWidth={
+													annotationRecordingRect.width ||
+													(overlayRef.current?.clientWidth || 800)
+												}
+												containerHeight={
+													annotationRecordingRect.height ||
+													(overlayRef.current?.clientHeight || 600)
+												}
+												recordingRect={{
+													x: 0,
+													y: 0,
+													width:
+														annotationRecordingRect.width ||
+														(overlayRef.current?.clientWidth || 800),
+													height:
+														annotationRecordingRect.height ||
+														(overlayRef.current?.clientHeight || 600),
+												}}
+												sceneTransform={{ scale: 1, x: 0, y: 0 }}
+												interactionScale={annotationSceneTransform.scale}
 										onPositionChange={(id, position) =>
 											onAnnotationPositionChange?.(id, position)
 										}