[Feature]: Ability to start a new recording from the editor

electron/electron-env.d.ts

@@ -26,6 +26,7 @@ interface Window {
 	electronAPI: {
 		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
 		switchToEditor: () => Promise<void>;
+		switchToHud: () => Promise<void>;
 		openSourceSelector: () => Promise<void>;
 		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
 		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;

electron/ipc/handlers.ts

@@ -217,7 +217,12 @@ export function registerIpcHandlers(
 	getMainWindow: () => BrowserWindow | null,
 	getSourceSelectorWindow: () => BrowserWindow | null,
 	onRecordingStateChange?: (recording: boolean, sourceName: string) => void,
+	switchToHud?: () => void,
 ) {
+	ipcMain.handle("switch-to-hud", () => {
+		if (switchToHud) switchToHud();
+	});
+
 	ipcMain.handle("get-sources", async (_, opts) => {
 		const sources = await desktopCapturer.getSources(opts);
 		return sources.map((source) => ({

electron/main.ts

@@ -371,6 +371,16 @@ app.whenReady().then(async () => {
 	// Ensure recordings directory exists
 	await ensureRecordingsDir();
 
+	function switchToHudWrapper() {
+		if (mainWindow) {
+			isForceClosing = true;
+			mainWindow.close();
+			isForceClosing = false;
+			mainWindow = null;
+		}
+		showMainWindow();
+	}
+
 	registerIpcHandlers(
 		createEditorWindowWrapper,
 		createSourceSelectorWindowWrapper,
@@ -384,6 +394,7 @@ app.whenReady().then(async () => {
 				showMainWindow();
 			}
 		},
+		switchToHudWrapper,
 	);
 	createWindow();
 });

electron/preload.ts

@@ -18,6 +18,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	switchToEditor: () => {
 		return ipcRenderer.invoke("switch-to-editor");
 	},
+	switchToHud: () => {
+		return ipcRenderer.invoke("switch-to-hud");
+	},
 	openSourceSelector: () => {
 		return ipcRenderer.invoke("open-source-selector");
 	},

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "openscreen",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "openscreen",
-			"version": "1.2.0",
+			"version": "1.3.0",
 			"dependencies": {
 				"@fix-webm-duration/fix": "^1.0.1",
 				"@pixi/filter-drop-shadow": "^5.2.0",

src/components/video-editor/VideoEditor.tsx

@@ -1,8 +1,16 @@
 import type { Span } from "dnd-timeline";
-import { FolderOpen, Languages, Save } from "lucide-react";
+import { FolderOpen, Languages, Save, Video } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { toast } from "sonner";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import { useI18n, useScopedT } from "@/contexts/I18nContext";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
 import { INITIAL_EDITOR_STATE, useEditorHistory } from "@/hooks/useEditorHistory";
@@ -107,6 +115,7 @@ export default function VideoEditor() {
 	const [exportProgress, setExportProgress] = useState<ExportProgress | null>(null);
 	const [exportError, setExportError] = useState<string | null>(null);
 	const [showExportDialog, setShowExportDialog] = useState(false);
+	const [showNewRecordingDialog, setShowNewRecordingDialog] = useState(false);
 	const [exportQuality, setExportQuality] = useState<ExportQuality>("good");
 	const [exportFormat, setExportFormat] = useState<ExportFormat>("mp4");
 	const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(15);
@@ -464,6 +473,13 @@ export default function VideoEditor() {
 		await saveProject(true);
 	}, [saveProject]);
 
+	const handleNewRecordingConfirm = useCallback(async () => {
+		setShowNewRecordingDialog(false);
+		await window.electronAPI.clearCurrentVideoPath();
+		await window.electronAPI.setCurrentRecordingSession(null);
+		await window.electronAPI.switchToHud();
+	}, []);
+
 	const handleLoadProject = useCallback(async () => {
 		const result = await window.electronAPI.loadProjectFile();
 
@@ -1393,6 +1409,36 @@ export default function VideoEditor() {
 
 	return (
 		<div className="flex flex-col h-screen bg-[#09090b] text-slate-200 overflow-hidden selection:bg-[#34B27B]/30">
+			<Dialog open={showNewRecordingDialog} onOpenChange={setShowNewRecordingDialog}>
+				<DialogContent
+					className="sm:max-w-[425px]"
+					style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+				>
+					<DialogHeader>
+						<DialogTitle>New Recording</DialogTitle>
+						<DialogDescription>
+							Start a new recording? Your current recording will be discarded.
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter>
+						<button
+							type="button"
+							onClick={() => setShowNewRecordingDialog(false)}
+							className="px-4 py-2 rounded-md bg-white/10 text-white hover:bg-white/20 text-sm font-medium transition-colors"
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							onClick={handleNewRecordingConfirm}
+							className="px-4 py-2 rounded-md bg-red-500/80 text-white hover:bg-red-500 text-sm font-medium transition-colors"
+						>
+							Confirm
+						</button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
 			<div
 				className="h-10 flex-shrink-0 bg-[#09090b]/80 backdrop-blur-md border-b border-white/5 flex items-center justify-between px-6 z-50"
 				style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
@@ -1418,6 +1464,14 @@ export default function VideoEditor() {
 							))}
 						</select>
 					</div>
+					<button
+						type="button"
+						onClick={() => setShowNewRecordingDialog(true)}
+						className="flex items-center gap-1 px-2 py-1 rounded-md text-white/50 hover:text-white/90 hover:bg-white/10 transition-all duration-150 text-[11px] font-medium"
+					>
+						<Video size={14} />
+						New Recording
+					</button>
 					<button
 						type="button"
 						onClick={handleLoadProject}

src/vite-env.d.ts

@@ -19,6 +19,7 @@ interface Window {
 	electronAPI: {
 		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
 		switchToEditor: () => Promise<void>;
+		switchToHud: () => Promise<void>;
 		openSourceSelector: () => Promise<void>;
 		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
 		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;