Enable restart on error and improve file extension handling

Author: richiemcilroy

apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/InProgressRecordingBar.tsx

@@ -290,11 +290,11 @@ export const InProgressRecordingBar = ({
 								</span>
 							)}
 						</div>
-						{Boolean(onRestart) && canRestart && (
+						{Boolean(onRestart) && (canRestart || phase === "error") && (
 							<ActionButton
 								data-no-drag
 								onClick={handleRestart}
-								disabled={!canRestart}
+								disabled={!(canRestart || phase === "error")}
 								aria-label="Restart recording"
 								aria-busy={isRestarting}
 							>

apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/useWebRecorder.ts

@@ -76,6 +76,17 @@ const unwrapExitOrThrow = <T, E>(exit: Exit.Exit<T, E>) => {
 	return exit.value;
 };
 
+const getFileExtensionFromMime = (mime?: string | null) => {
+	if (!mime) return "mp4";
+	const [, subtypeWithParams] = mime.split("/");
+	if (!subtypeWithParams) return "mp4";
+	const [subtypeWithSuffix] = subtypeWithParams.split(";");
+	if (!subtypeWithSuffix) return "mp4";
+	const [subtype] = subtypeWithSuffix.split("+");
+	const normalized = subtype.trim().toLowerCase();
+	return normalized || "mp4";
+};
+
 export const useWebRecorder = ({
 	organisationId,
 	selectedMicId,
@@ -218,11 +229,12 @@ export const useWebRecorder = ({
 		}
 
 		const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+		const extension = getFileExtensionFromMime(blob.type);
 		const url = URL.createObjectURL(blob);
 		errorDownloadUrlRef.current = url;
 		setErrorDownload({
 			url,
-			fileName: `cap-recording-${timestamp}.mp4`,
+			fileName: `cap-recording-${timestamp}.${extension}`,
 		});
 	}, []);