feat(desktop): add timeline slider to crop modal with video preview

its-thepoe · its-thepoe · commit bb67f03d265f · 2025-12-17T02:12:53.000+01:00
Add a timeline slider to the crop modal that allows users to scrub through video frames when selecting crop regions. The implementation includes: - Timeline slider below crop preview for frame-accurate navigation - Video element with screenshot fallback using crossfade transition - Preload strategy: metadata on editor mount, full video on Crop button hover - Loading indicator whilst video loads - Multi-segment timeline support with correct segment switching The video preview replaces the static screenshot when loaded, providing real-time visual feedback during crop adjustments. Technical details: - Video positioned absolute with object-contain to prevent layout shift - Screenshot remains relative to maintain container dimensions - localTime calculation fixed to correctly convert timescale units --- Additional improvements since a1d2ac0: - fix(general_settings): remove unconditional reset of enable_new_recording_flow The flag was being reset to false on every app start, making the setting unusable. Users can now toggle between old and new recording flow in settings. - chore: remove debug telemetry fetch calls from App.tsx, (window-chrome).tsx, and setup.tsx. Deleted all #region agent log blocks and hardcoded local ingest endpoint calls. - chore: remove debug console.log statements from context.ts and Suspense fallbacks - fix(ui-solid): correct IconLucideLoader2 import path to use kebab-case (loader-2.jsx instead of loader2.jsx) - fix(crop-modal): correct localTime calculation in currentSegment memo Changed from `seg.start + (time - elapsed) * seg.timescale` to `seg.start / seg.timescale + (time - elapsed)` for proper time conversion
diff --git a/apps/desktop/src-tauri/src/general_settings.rs b/apps/desktop/src-tauri/src/general_settings.rs
@@ -263,10 +263,6 @@ pub fn init(app: &AppHandle) {
         store.recording_picker_preference_set = true;
     }
 
-    if store.enable_new_recording_flow {
-        store.enable_new_recording_flow = false;
-    }
-
     if let Err(e) = store.save(app) {
         error!("Failed to save general settings: {}", e);
     }
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
@@ -89,20 +89,6 @@ const queryClient = new QueryClient({
 });
 
 export default function App() {
-	// #region agent log
-	fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-		method: "POST",
-		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify({
-			location: "App.tsx:App",
-			message: "App component rendering",
-			data: { pathname: location.pathname },
-			timestamp: Date.now(),
-			sessionId: "debug-session",
-			hypothesisId: "C",
-		}),
-	}).catch(() => {});
-	// #endregion
 	return (
 		<QueryClientProvider client={queryClient}>
 			<Suspense>
@@ -113,38 +99,10 @@ export default function App() {
 }
 
 function Inner() {
-	// #region agent log
-	fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-		method: "POST",
-		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify({
-			location: "App.tsx:Inner",
-			message: "Inner component rendering",
-			data: { pathname: location.pathname },
-			timestamp: Date.now(),
-			sessionId: "debug-session",
-			hypothesisId: "C",
-		}),
-	}).catch(() => {});
-	// #endregion
 	const currentWindow = getCurrentWebviewWindow();
 	createThemeListener(currentWindow);
 
 	onMount(() => {
-		// #region agent log
-		fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				location: "App.tsx:Inner:onMount",
-				message: "Inner onMount",
-				data: { pathname: location.pathname },
-				timestamp: Date.now(),
-				sessionId: "debug-session",
-				hypothesisId: "C",
-			}),
-		}).catch(() => {});
-		// #endregion
 		initAnonymousUser();
 	});
 
@@ -174,47 +132,14 @@ function Inner() {
 						const matches = useCurrentMatches();
 
 						onMount(() => {
-							// #region agent log
-							fetch(
-								"http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23",
-								{
-									method: "POST",
-									headers: { "Content-Type": "application/json" },
-									body: JSON.stringify({
-										location: "App.tsx:Router:root:onMount",
-										message: "Router root onMount",
-										data: {
-											pathname: location.pathname,
-											matchCount: matches().length,
-											autoShowFlags: matches().map(
-												(m) => m.route.info?.AUTO_SHOW_WINDOW,
-											),
-										},
-										timestamp: Date.now(),
-										sessionId: "debug-session",
-										hypothesisId: "C,D",
-									}),
-								},
-							).catch(() => {});
-							// #endregion
 							for (const match of matches()) {
 								if (match.route.info?.AUTO_SHOW_WINDOW === false) return;
 							}
 
 							if (location.pathname !== "/camera") currentWindow.show();
 						});
 
-						return (
-							<Suspense
-								fallback={
-									(() => {
-										console.log("Root suspense fallback showing");
-									}) as any
-								}
-							>
-								{props.children}
-							</Suspense>
-						);
+						return <Suspense>{props.children}</Suspense>;
 					}}
 				>
 					<Route path="/" component={WindowChromeLayout}>
diff --git a/apps/desktop/src/routes/(window-chrome).tsx b/apps/desktop/src/routes/(window-chrome).tsx
@@ -16,37 +16,7 @@ import {
 export default function (props: RouteSectionProps) {
 	let unlistenResize: UnlistenFn | undefined;
 
-	// #region agent log
-	fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-		method: "POST",
-		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify({
-			location: "(window-chrome).tsx:render",
-			message: "WindowChrome component rendering",
-			data: { pathname: location.pathname },
-			timestamp: Date.now(),
-			sessionId: "debug-session",
-			hypothesisId: "C",
-		}),
-	}).catch(() => {});
-	// #endregion
-
 	onMount(async () => {
-		// #region agent log
-		fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				location: "(window-chrome).tsx:onMount",
-				message: "WindowChrome onMount",
-				data: { pathname: location.pathname },
-				timestamp: Date.now(),
-				sessionId: "debug-session",
-				hypothesisId: "C",
-			}),
-		}).catch(() => {});
-		// #endregion
-		console.log("window chrome mounted");
 		unlistenResize = await initializeTitlebar();
 		if (location.pathname === "/") getCurrentWindow().show();
 	});
@@ -68,23 +38,10 @@ export default function (props: RouteSectionProps) {
         enterClass="opacity-0"
         exitToClass="opacity-0"
         > */}
-				<Suspense
-					fallback={
-						(() => {
-							console.log("Outer window chrome suspense fallback");
-							return <AbsoluteInsetLoader />;
-						}) as any
-					}
-				>
+				<Suspense fallback={<AbsoluteInsetLoader />}>
 					<Inner>
 						{/* prevents flicker idk */}
-						<Suspense
-							fallback={
-								(() => {
-									console.log("Inner window chrome suspense fallback");
-								}) as any
-							}
-						>
+						<Suspense>
 							{props.children}
 						</Suspense>
 					</Inner>
@@ -115,35 +72,7 @@ function Header() {
 }
 
 function Inner(props: ParentProps) {
-	// #region agent log
-	fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-		method: "POST",
-		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify({
-			location: "(window-chrome).tsx:Inner:render",
-			message: "Inner component rendering",
-			data: { pathname: location.pathname },
-			timestamp: Date.now(),
-			sessionId: "debug-session",
-			hypothesisId: "C",
-		}),
-	}).catch(() => {});
-	// #endregion
 	onMount(() => {
-		// #region agent log
-		fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				location: "(window-chrome).tsx:Inner:onMount",
-				message: "Inner onMount, about to show window",
-				data: { pathname: location.pathname },
-				timestamp: Date.now(),
-				sessionId: "debug-session",
-				hypothesisId: "B,C",
-			}),
-		}).catch(() => {});
-		// #endregion
 		if (location.pathname !== "/") getCurrentWindow().show();
 	});
 
diff --git a/apps/desktop/src/routes/(window-chrome)/setup.tsx b/apps/desktop/src/routes/(window-chrome)/setup.tsx
@@ -94,61 +94,12 @@ export default function () {
 	);
 
 	const handleContinue = () => {
-		// #region agent log
-		fetch("http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({
-				location: "setup.tsx:handleContinue",
-				message: "handleContinue called",
-				data: {},
-				timestamp: Date.now(),
-				sessionId: "debug-session",
-				hypothesisId: "A",
-			}),
-		}).catch(() => {});
-		// #endregion
 		commands
 			.showWindow({ Main: { init_target_mode: null } })
 			.then(() => {
-				// #region agent log
-				fetch(
-					"http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23",
-					{
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify({
-							location: "setup.tsx:handleContinue:then",
-							message: "showWindow resolved, closing setup",
-							data: {},
-							timestamp: Date.now(),
-							sessionId: "debug-session",
-							hypothesisId: "A,B",
-						}),
-					},
-				).catch(() => {});
-				// #endregion
 				getCurrentWindow().close();
 			})
-			.catch((err) => {
-				// #region agent log
-				fetch(
-					"http://127.0.0.1:7243/ingest/1cff95e2-fcb2-4b1f-a666-2aa2ac4f0e23",
-					{
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify({
-							location: "setup.tsx:handleContinue:catch",
-							message: "showWindow failed",
-							data: { error: String(err) },
-							timestamp: Date.now(),
-							sessionId: "debug-session",
-							hypothesisId: "A",
-						}),
-					},
-				).catch(() => {});
-				// #endregion
-			});
+			.catch(() => {});
 	};
 
 	return (
diff --git a/apps/desktop/src/routes/editor/Editor.tsx b/apps/desktop/src/routes/editor/Editor.tsx
@@ -448,7 +448,7 @@ function Dialogs() {
 										if (time < elapsed + segDuration) {
 											return {
 												index: seg.recordingSegment ?? 0,
-												localTime: seg.start + (time - elapsed) * seg.timescale,
+												localTime: seg.start / seg.timescale + (time - elapsed),
 											};
 										}
 										elapsed += segDuration;
diff --git a/apps/desktop/src/routes/editor/context.ts b/apps/desktop/src/routes/editor/context.ts
@@ -749,9 +749,7 @@ export const [EditorInstanceContextProvider, useEditorInstanceContext] =
 			createSignal<CanvasControls | null>(null);
 
 		const [editorInstance] = createResource(async () => {
-			console.log("[Editor] Creating editor instance...");
 			const instance = await commands.createEditorInstance();
-			console.log("[Editor] Editor instance created, setting up WebSocket");
 
 			preloadCropVideoMetadata(
 				`${instance.path}/content/segments/segment-0/display.mp4`,
diff --git a/packages/ui-solid/src/auto-imports.d.ts b/packages/ui-solid/src/auto-imports.d.ts
@@ -82,7 +82,7 @@ declare global {
   const IconLucideHardDrive: typeof import('~icons/lucide/hard-drive.jsx')['default']
   const IconLucideImage: typeof import('~icons/lucide/image.jsx')['default']
   const IconLucideLayout: typeof import('~icons/lucide/layout.jsx')['default']
-  const IconLucideLoader2: typeof import('~icons/lucide/loader2.jsx')['default']
+  const IconLucideLoader2: typeof import('~icons/lucide/loader-2.jsx')['default']
   const IconLucideLoaderCircle: typeof import('~icons/lucide/loader-circle.jsx')['default']
   const IconLucideMaximize: typeof import('~icons/lucide/maximize.jsx')['default']
   const IconLucideMessageSquarePlus: typeof import('~icons/lucide/message-square-plus.jsx')['default']

Original file line number	Diff line number	Diff line change
`@@ -263,10 +263,6 @@ pub fn init(app: &AppHandle) {`
`263`	`263`	`store.recording_picker_preference_set = true;`
`264`	`264`	`}`
`265`	`265`
`266`		`- if store.enable_new_recording_flow {`
`267`		`- store.enable_new_recording_flow = false;`
`268`		`- }`
`269`		`-`
`270`	`266`	`if let Err(e) = store.save(app) {`
`271`	`267`	`error!("Failed to save general settings: {}", e);`
`272`	`268`	`}`
Original file line number	Diff line number	Diff line change
`@@ -448,7 +448,7 @@ function Dialogs() {`
`448`	`448`	`if (time < elapsed + segDuration) {`
`449`	`449`	`return {`
`450`	`450`	`index: seg.recordingSegment ?? 0,`
`451`		`- localTime: seg.start + (time - elapsed) * seg.timescale,`
	`451`	`+ localTime: seg.start / seg.timescale + (time - elapsed),`
`452`	`452`	`};`
`453`	`453`	`}`
`454`	`454`	`elapsed += segDuration;`