feat: add Cancel Recording button to HUD

src/components/launch/LaunchWindow.tsx

@@ -5,6 +5,7 @@ import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
 import {
+	MdCancel,
 	MdMic,
 	MdMicOff,
 	MdMonitor,
@@ -43,6 +44,7 @@ const ICON_CONFIG = {
 	webcamOff: { icon: MdVideocamOff, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
 	restart: { icon: MdRestartAlt, size: ICON_SIZE },
+	cancel: { icon: MdCancel, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
 	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
 	folder: { icon: FaFolderOpen, size: ICON_SIZE },
@@ -79,6 +81,7 @@ export function LaunchWindow() {
 		recording,
 		toggleRecording,
 		restartRecording,
+		cancelRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
@@ -477,6 +480,18 @@ export function LaunchWindow() {
 					</Tooltip>
 				)}
 
+				{/* Cancel recording */}
+				{recording && (
+					<Tooltip content={t("tooltips.cancelRecording")}>
+						<button
+							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+							onClick={cancelRecording}
+						>
+							{getIcon("cancel", "text-white/60")}
+						</button>
+					</Tooltip>
+				)}
+
 				{/* Open video file */}
 				<Tooltip content={t("tooltips.openVideoFile")}>
 					<button

src/hooks/useScreenRecorder.ts

@@ -43,6 +43,7 @@ type UseScreenRecorderReturn = {
 	recording: boolean;
 	toggleRecording: () => void;
 	restartRecording: () => void;
+	cancelRecording: () => void;
 	microphoneEnabled: boolean;
 	setMicrophoneEnabled: (enabled: boolean) => void;
 	microphoneDeviceId: string | undefined;
@@ -601,10 +602,22 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 	};
 
+	const cancelRecording = () => {
+		const activeScreenRecorder = screenRecorder.current;
+		if (!activeScreenRecorder || activeScreenRecorder.recorder.state !== "recording") return;
+
+		const activeRecordingId = recordingId.current;
+		discardRecordingId.current = activeRecordingId;
+		allowAutoFinalize.current = false;
+
+		stopRecording.current();
+	};
+
 	return {
 		recording,
 		toggleRecording,
 		restartRecording,
+		cancelRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,

src/i18n/locales/en/launch.json

@@ -3,6 +3,7 @@
 		"hideHUD": "Hide HUD",
 		"closeApp": "Close App",
 		"restartRecording": "Restart recording",
+		"cancelRecording": "Cancel recording",
 		"openVideoFile": "Open video file",
 		"openProject": "Open project"
 	},

src/i18n/locales/es/launch.json

@@ -3,6 +3,7 @@
 		"hideHUD": "Ocultar HUD",
 		"closeApp": "Cerrar aplicación",
 		"restartRecording": "Reiniciar grabación",
+		"cancelRecording": "Cancelar grabación",
 		"openVideoFile": "Abrir archivo de video",
 		"openProject": "Abrir proyecto"
 	},

src/i18n/locales/zh-CN/launch.json

@@ -3,6 +3,7 @@
 		"hideHUD": "隐藏控制面板",
 		"closeApp": "关闭应用",
 		"restartRecording": "重新开始录制",
+		"cancelRecording": "取消录制",
 		"openVideoFile": "打开视频文件",
 		"openProject": "打开项目"
 	},

tests/e2e/gif-export.spec.ts

@@ -58,14 +58,15 @@ test("exports a GIF from a loaded video", async () => {
 			);
 		});
 
-		await hudWindow.evaluate((videoPath: string) => {
-			window.electronAPI.setCurrentVideoPath(videoPath);
-			try {
+		try {
+			await hudWindow.evaluate((videoPath: string) => {
+				window.electronAPI.setCurrentVideoPath(videoPath);
 				window.electronAPI.switchToEditor();
-			} catch {
-				// Expected: HUD window closes during this call, killing the context.
-			}
-		}, TEST_VIDEO);
+			}, TEST_VIDEO);
+		} catch {
+			// Expected: switchToEditor() closes the HUD window, which terminates
+			// the Playwright page context before evaluate() can resolve.
+		}
 
 		// ── 3. Switch to the editor window. This closes the HUD and opens
 		//       a new BrowserWindow with ?windowType=editor.