Improve screenshot editor image handling and target selection

Author: richiemcilroy

apps/desktop/src-tauri/src/screenshot_editor.rs

@@ -32,6 +32,8 @@ pub struct ScreenshotEditorInstance {
     pub config_tx: watch::Sender<ProjectConfiguration>,
     pub path: PathBuf,
     pub pretty_name: String,
+    pub image_width: u32,
+    pub image_height: u32,
 }
 
 impl ScreenshotEditorInstance {
@@ -300,6 +302,8 @@ impl ScreenshotEditorInstances {
                     config_tx,
                     path: path.clone(),
                     pretty_name: recording_meta.pretty_name.clone(),
+                    image_width: width,
+                    image_height: height,
                 });
 
                 // Spawn render loop
@@ -429,6 +433,8 @@ pub struct SerializedScreenshotEditorInstance {
     pub path: PathBuf,
     pub config: Option<ProjectConfiguration>,
     pub pretty_name: String,
+    pub image_width: u32,
+    pub image_height: u32,
 }
 
 #[tauri::command]
@@ -459,6 +465,8 @@ pub async fn create_screenshot_editor_instance(
         path: instance.path.clone(),
         config: Some(config),
         pretty_name: instance.pretty_name.clone(),
+        image_width: instance.image_width,
+        image_height: instance.image_height,
     })
 }
 

apps/desktop/src-tauri/src/tray.rs

@@ -697,15 +697,12 @@ pub fn create_tray(app: &AppHandle) -> tauri::Result<()> {
                 Ok(TrayItem::TakeScreenshot) => {
                     let app = app.clone();
                     tokio::spawn(async move {
-                        use cap_recording::screen_capture::{ScreenCaptureTarget, list_displays};
+                        use cap_recording::screen_capture::ScreenCaptureTarget;
+                        use scap_targets::Display;
 
-                        let displays = list_displays();
-                        let Some((display, _)) = displays.into_iter().next() else {
-                            tracing::error!("No displays found for screenshot");
-                            return;
-                        };
-
-                        let target = ScreenCaptureTarget::Display { id: display.id };
+                        let display =
+                            Display::get_containing_cursor().unwrap_or_else(Display::primary);
+                        let target = ScreenCaptureTarget::Display { id: display.id() };
 
                         match recording::take_screenshot(app.clone(), target).await {
                             Ok(path) => {

apps/desktop/src/routes/(window-chrome)/new-main/index.tsx

@@ -645,6 +645,7 @@ function Page() {
 		await commands.openTargetSelectOverlays(
 			{ variant: "display", id: target.id },
 			null,
+			"display",
 		);
 		setOptions("targetMode", "display");
 	};
@@ -659,6 +660,7 @@ function Page() {
 		await commands.openTargetSelectOverlays(
 			{ variant: "window", id: target.id },
 			null,
+			"window",
 		);
 		setOptions("targetMode", "window");
 
@@ -686,7 +688,7 @@ function Page() {
 		};
 		const targetMode = __CAP__?.initialTargetMode ?? null;
 		if (targetMode) {
-			await commands.openTargetSelectOverlays(null, null);
+			await commands.openTargetSelectOverlays(null, null, targetMode);
 			setOptions({ targetMode });
 		} else {
 			setOptions({ targetMode });
@@ -720,7 +722,11 @@ function Page() {
 				const newTargetMode = event.payload.target_mode;
 				const displayId = event.payload.display_id;
 				if (newTargetMode) {
-					await commands.openTargetSelectOverlays(null, displayId);
+					await commands.openTargetSelectOverlays(
+						null,
+						displayId,
+						newTargetMode,
+					);
 					setOptions({ targetMode: newTargetMode });
 				} else {
 					setOptions({ targetMode: newTargetMode });
@@ -859,11 +865,11 @@ function Page() {
 		if (isRecording()) return;
 		const nextMode = rawOptions.targetMode === mode ? null : mode;
 		if (nextMode) {
-			await commands.openTargetSelectOverlays(null, null);
+			await commands.openTargetSelectOverlays(null, null, nextMode);
 			setOptions("targetMode", nextMode);
 		} else {
 			setOptions("targetMode", nextMode);
-			commands.closeTargetSelectOverlays();
+			await commands.closeTargetSelectOverlays();
 		}
 	};
 

apps/desktop/src/routes/screenshot-editor/Editor.tsx

@@ -162,6 +162,13 @@ function Dialogs() {
 		useScreenshotEditorContext();
 
 	const path = () => editorInstance()?.path ?? "";
+	const imagePath = () => {
+		const p = path();
+		if (p.endsWith(".cap")) {
+			return `${p}/original.png`;
+		}
+		return p;
+	};
 
 	return (
 		<Dialog.Root
@@ -414,7 +421,7 @@ function Dialogs() {
 														<img
 															class="w-full h-full pointer-events-none select-none"
 															alt="screenshot"
-															src={convertFileSrc(path())}
+															src={convertFileSrc(imagePath())}
 														/>
 													</Cropper>
 												</div>

apps/desktop/src/routes/screenshot-editor/Header.tsx

@@ -33,7 +33,7 @@ import { useScreenshotExport } from "./useScreenshotExport";
 
 export function Header() {
 	const ctx = useScreenshotEditorContext();
-	const { setDialog, project, originalImageSize } = ctx;
+	const { setDialog, project, originalImageSize, isImageFileReady } = ctx;
 	const path = () => ctx.editorInstance()?.path ?? "";
 
 	const { exportImage, isExporting } = useScreenshotExport();
@@ -99,7 +99,7 @@ export function Header() {
 		});
 	};
 
-	const isCropDisabled = () => !originalImageSize();
+	const isCropDisabled = () => !originalImageSize() || !isImageFileReady();
 
 	return (
 		<div

apps/desktop/src/routes/screenshot-editor/context.tsx

@@ -190,6 +190,7 @@ function createScreenshotEditorContext() {
 		height: number;
 	} | null>(null);
 	const [isRenderReady, setIsRenderReady] = createSignal(false);
+	const [isImageFileReady, setIsImageFileReady] = createSignal(false);
 	let wsRef: WebSocket | null = null;
 
 	const [editorInstance] = createResource(async () => {
@@ -202,18 +203,20 @@ function createScreenshotEditorContext() {
 			}
 		}
 
+		setOriginalImageSize({
+			width: instance.imageWidth,
+			height: instance.imageHeight,
+		});
+
 		const hasReceivedWebSocketFrame = { value: false };
 
 		if (instance.path) {
-			const loadImage = (imagePath: string) => {
+			const loadImage = (imagePath: string, retryCount = 0) => {
 				const img = new Image();
 				img.crossOrigin = "anonymous";
 				img.src = convertFileSrc(imagePath);
 				img.onload = async () => {
-					setOriginalImageSize({
-						width: img.naturalWidth,
-						height: img.naturalHeight,
-					});
+					setIsImageFileReady(true);
 					if (hasReceivedWebSocketFrame.value) {
 						return;
 					}
@@ -240,21 +243,18 @@ function createScreenshotEditorContext() {
 						);
 					}
 				};
+				img.onerror = () => {
+					if (retryCount < 10) {
+						setTimeout(() => loadImage(imagePath, retryCount + 1), 200);
+					}
+				};
 				return img;
 			};
 
 			const pathStr = instance.path;
 			const isCapDir = pathStr.endsWith(".cap");
-
-			if (isCapDir) {
-				const originalPath = `${pathStr}/original.png`;
-				const img = loadImage(originalPath);
-				img.onerror = () => {
-					loadImage(pathStr);
-				};
-			} else {
-				loadImage(pathStr);
-			}
+			const imagePath = isCapDir ? `${pathStr}/original.png` : pathStr;
+			loadImage(imagePath);
 		}
 
 		const ws = new WebSocket(instance.framesSocketUrl);
@@ -660,6 +660,7 @@ function createScreenshotEditorContext() {
 		latestFrame,
 		originalImageSize,
 		isRenderReady,
+		isImageFileReady,
 		editorInstance,
 	};
 }

apps/desktop/src/routes/target-select-overlay.tsx

@@ -395,7 +395,7 @@ function Inner() {
 										setOptions({
 											targetMode: "area",
 										});
-										commands.openTargetSelectOverlays(null, null);
+										commands.openTargetSelectOverlays(null, null, "area");
 									}}
 								>
 									Adjust recording area
@@ -883,6 +883,19 @@ function RecordingControls(props: {
 	}));
 	const setCamera = createCameraMutation();
 
+	onMount(() => {
+		if (rawOptions.micName) {
+			setMicInput
+				.mutateAsync(rawOptions.micName)
+				.catch((error) => console.error("Failed to set mic input:", error));
+		}
+
+		if (rawOptions.cameraID && "ModelID" in rawOptions.cameraID)
+			setCamera.mutate({ ModelID: rawOptions.cameraID.ModelID });
+		else if (rawOptions.cameraID && "DeviceID" in rawOptions.cameraID)
+			setCamera.mutate({ DeviceID: rawOptions.cameraID.DeviceID });
+	});
+
 	const selectedCamera = createMemo(() => {
 		if (!rawOptions.cameraID) return null;
 		return findCamera(cameras(), rawOptions.cameraID) ?? null;

apps/desktop/src/utils/tauri.ts

@@ -533,7 +533,7 @@ export type ScreenCaptureTarget = { variant: "window"; id: WindowId } | { varian
 export type ScreenMovementSpring = { stiffness: number; damping: number; mass: number }
 export type SegmentRecordings = { display: Video; camera: Video | null; mic: Audio | null; system_audio: Audio | null }
 export type SerializedEditorInstance = { framesSocketUrl: string; recordingDuration: number; savedProjectConfig: ProjectConfiguration; recordings: ProjectRecordingsMeta; path: string }
-export type SerializedScreenshotEditorInstance = { framesSocketUrl: string; path: string; config: ProjectConfiguration | null; prettyName: string }
+export type SerializedScreenshotEditorInstance = { framesSocketUrl: string; path: string; config: ProjectConfiguration | null; prettyName: string; imageWidth: number; imageHeight: number }
 export type SetCaptureAreaPending = boolean
 export type ShadowConfiguration = { size: number; opacity: number; blur: number }
 export type SharingMeta = { id: string; link: string }