feat: add restart recording functionality in LaunchWindow and useScreenRecorder

src/components/launch/LaunchWindow.tsx

@@ -4,7 +4,15 @@ import { BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
-import { MdMic, MdMicOff, MdMonitor, MdVideoFile, MdVolumeOff, MdVolumeUp } from "react-icons/md";
+import {
+	MdMic,
+	MdMicOff,
+	MdMonitor,
+	MdRestartAlt,
+	MdVideoFile,
+	MdVolumeOff,
+	MdVolumeUp,
+} from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
@@ -24,6 +32,7 @@ const ICON_CONFIG = {
 	micOn: { icon: MdMic, size: ICON_SIZE },
 	micOff: { icon: MdMicOff, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
+	restart: { icon: MdRestartAlt, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
 	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
 	folder: { icon: FaFolderOpen, size: ICON_SIZE },
@@ -51,6 +60,7 @@ export function LaunchWindow() {
 	const {
 		recording,
 		toggleRecording,
+		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
@@ -256,6 +266,18 @@ export function LaunchWindow() {
 						)}
 					</button>
 
+					{/* Restart recording */}
+					{recording && (
+						<Tooltip content="Restart recording">
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={restartRecording}
+							>
+								{getIcon("restart", "text-white/60")}
+							</button>
+						</Tooltip>
+					)}
+
 					{/* Open video file */}
 					<Tooltip content="Open video file">
 						<button

src/hooks/useScreenRecorder.ts

@@ -41,6 +41,7 @@ const MIC_GAIN_BOOST = 1.4;
 type UseScreenRecorderReturn = {
 	recording: boolean;
 	toggleRecording: () => void;
+	restartRecording: () => void;
 	microphoneEnabled: boolean;
 	setMicrophoneEnabled: (enabled: boolean) => void;
 	microphoneDeviceId: string | undefined;
@@ -61,6 +62,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const mixingContext = useRef<AudioContext | null>(null);
 	const chunks = useRef<Blob[]>([]);
 	const startTime = useRef<number>(0);
+	const discardRecording = useRef(false);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -301,6 +303,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			};
 			recorder.onstop = async () => {
 				stream.current = null;
+				if (discardRecording.current) {
+					discardRecording.current = false;
+					chunks.current = [];
+					return;
+				}
 				if (chunks.current.length === 0) return;
 				const duration = Date.now() - startTime.current;
 				const recordedChunks = chunks.current;
@@ -370,9 +377,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		recording ? stopRecording.current() : startRecording();
 	};
 
+	const restartRecording = () => {
+		if (!recording) return;
+		discardRecording.current = true;
+		stopRecording.current();
+		startRecording();
+	};
+
 	return {
 		recording,
 		toggleRecording,
+		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,