feat: export caption sidecars and merge editor follow-ups

electron/ipc/register/export.ts

@@ -252,6 +252,121 @@ function isTempPathSafe(tempPath: string): boolean {
 	return candidate.startsWith(withSep);
 }
 
+type CaptionSidecarCue = {
+	startMs: number;
+	endMs: number;
+	text: string;
+};
+
+type CaptionSidecarPayload = {
+	format: "srt" | "vtt" | "both";
+	cues: CaptionSidecarCue[];
+};
+
+function toSrtTimestamp(totalMs: number): string {
+	const ms = Math.max(0, Math.round(totalMs));
+	const hours = Math.floor(ms / 3_600_000);
+	const minutes = Math.floor((ms % 3_600_000) / 60_000);
+	const seconds = Math.floor((ms % 60_000) / 1000);
+	const millis = ms % 1000;
+	return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")},${String(millis).padStart(3, "0")}`;
+}
+
+function toVttTimestamp(totalMs: number): string {
+	const ms = Math.max(0, Math.round(totalMs));
+	const hours = Math.floor(ms / 3_600_000);
+	const minutes = Math.floor((ms % 3_600_000) / 60_000);
+	const seconds = Math.floor((ms % 60_000) / 1000);
+	const millis = ms % 1000;
+	return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(millis).padStart(3, "0")}`;
+}
+
+function normalizeCaptionSidecarCues(cues: unknown): CaptionSidecarCue[] {
+	if (!Array.isArray(cues)) {
+		return [];
+	}
+
+	return cues
+		.filter((cue): cue is CaptionSidecarCue => {
+			return (
+				typeof cue === "object" &&
+				cue !== null &&
+				typeof cue.startMs === "number" &&
+				typeof cue.endMs === "number" &&
+				typeof cue.text === "string" &&
+				Number.isFinite(cue.startMs) &&
+				Number.isFinite(cue.endMs) &&
+				cue.endMs > cue.startMs &&
+				cue.text.trim().length > 0
+			);
+		})
+		.map((cue) => ({
+			startMs: cue.startMs,
+			endMs: cue.endMs,
+			text: cue.text.replace(/\r\n/g, "\n").trim(),
+		}));
+}
+
+function parseCaptionSidecarPayload(payload: unknown): CaptionSidecarPayload | null {
+	if (typeof payload !== "object" || payload === null) {
+		return null;
+	}
+
+	const candidate = payload as {
+		format?: unknown;
+		cues?: unknown;
+	};
+
+	const format =
+		candidate.format === "srt" || candidate.format === "vtt" || candidate.format === "both"
+			? candidate.format
+			: null;
+	if (!format) {
+		return null;
+	}
+
+	const cues = normalizeCaptionSidecarCues(candidate.cues);
+	if (cues.length === 0) {
+		return null;
+	}
+
+	return { format, cues };
+}
+
+function serializeSrt(cues: CaptionSidecarCue[]): string {
+	return cues
+		.map((cue, index) => {
+			return `${index + 1}\n${toSrtTimestamp(cue.startMs)} --> ${toSrtTimestamp(cue.endMs)}\n${cue.text}`;
+		})
+		.join("\n\n");
+}
+
+function serializeVtt(cues: CaptionSidecarCue[]): string {
+	const body = cues
+		.map((cue) => {
+			return `${toVttTimestamp(cue.startMs)} --> ${toVttTimestamp(cue.endMs)}\n${cue.text}`;
+		})
+		.join("\n\n");
+	return `WEBVTT\n\n${body}`;
+}
+
+async function writeCaptionSidecars(videoPath: string, payload: CaptionSidecarPayload | null) {
+	if (!payload) {
+		return;
+	}
+
+	const parsed = path.parse(videoPath);
+	const basePath = path.join(parsed.dir, parsed.name);
+
+	if (payload.format === "srt" || payload.format === "both") {
+		await fs.writeFile(`${basePath}.srt`, serializeSrt(payload.cues), "utf8");
+	}
+
+	if (payload.format === "vtt" || payload.format === "both") {
+		await fs.writeFile(`${basePath}.vtt`, serializeVtt(payload.cues), "utf8");
+	}
+}
+
 export function registerExportHandlers() {
 	ipcMain.handle(
 		"native-video-export-start",

electron/ipc/register/project.ts

@@ -80,6 +80,12 @@ function normalizeProjectSaveName(projectName?: string | null) {
   return sanitizedName || null;
 }
 
+type NamedProjectSaveMode = "rename" | "copy";
+
+function normalizeNamedProjectSaveMode(value: unknown): NamedProjectSaveMode {
+	return value === "copy" ? "copy" : "rename";
+}
+
 /**
  * Extracts the persisted source video path from a saved project payload.
  */
@@ -292,8 +298,10 @@ export function registerProjectHandlers() {
     try {
       const projectsDir = await getProjectsDir()
       const preparedProject = ensureProjectDataHasProjectId(projectData)
-      const trustedExistingProjectPath = isTrustedProjectPath(existingProjectPath)
-        ? existingProjectPath
+      const trustedExistingProjectPath = existingProjectPath &&
+        path.extname(existingProjectPath).toLowerCase() === `.${PROJECT_FILE_EXTENSION}` &&
+        (isTrustedProjectPath(existingProjectPath) || isPathInsideDirectory(existingProjectPath, projectsDir))
+        ? path.resolve(existingProjectPath)
         : null
 
       if (trustedExistingProjectPath) {
@@ -309,6 +317,13 @@ export function registerProjectHandlers() {
         }
       }
 
+      if (existingProjectPath) {
+        return {
+          success: false,
+          message: 'Project path is no longer trusted. Use Save As to choose a project file.',
+        }
+      }
+
       const safeName = normalizeProjectSaveName(suggestedName) || `project-${Date.now()}`
       const defaultName = `${safeName}.${PROJECT_FILE_EXTENSION}`
 
@@ -351,7 +366,7 @@ export function registerProjectHandlers() {
     }
   })
 
-    ipcMain.handle('save-project-file-named', async (_, projectData: unknown, projectName: string, thumbnailDataUrl?: string | null) => {
+    ipcMain.handle('save-project-file-named', async (_, projectData: unknown, projectName: string, thumbnailDataUrl?: string | null, mode?: unknown) => {
       try {
         const normalizedProjectName = normalizeProjectSaveName(projectName)
         if (!normalizedProjectName) {
@@ -362,14 +377,30 @@ export function registerProjectHandlers() {
         }
 
         const projectsDir = await getProjectsDir()
-        const preparedProject = ensureProjectDataHasProjectId(projectData)
+        const namedSaveMode = normalizeNamedProjectSaveMode(mode)
         const activeProjectPath = isTrustedProjectPath(currentProjectPath)
           ? currentProjectPath
           : null
         const targetProjectPath = path.join(
           projectsDir,
           `${normalizedProjectName}.${PROJECT_FILE_EXTENSION}`,
         )
+        const [activeResolvedPath, targetResolvedPath] = await Promise.all([
+          activeProjectPath ? resolveComparablePath(activeProjectPath) : Promise.resolve(null),
+          resolveComparablePath(targetProjectPath),
+        ])
+        const isSavingToDifferentPath =
+          !activeResolvedPath || activeResolvedPath !== targetResolvedPath
+        const preparedProject =
+          namedSaveMode === "copy" && isSavingToDifferentPath
+            ? (() => {
+                const projectId = randomUUID()
+                return {
+                  projectId,
+                  projectData: withProjectId(projectData, projectId),
+                }
+              })()
+            : ensureProjectDataHasProjectId(projectData)
 
         const overwriteCheck = await ensureNamedProjectSaveDoesNotOverwriteDifferentProject(
           targetProjectPath,
@@ -384,13 +415,7 @@ export function registerProjectHandlers() {
         await saveProjectThumbnail(targetProjectPath, thumbnailDataUrl)
         await rememberRecentProject(targetProjectPath)
 
-        if (activeProjectPath) {
-          const [activeResolvedPath, targetResolvedPath] = await Promise.all([
-            resolveComparablePath(activeProjectPath),
-            resolveComparablePath(targetProjectPath),
-          ])
-
-          if (activeResolvedPath !== targetResolvedPath) {
+        if (namedSaveMode === "rename" && activeProjectPath && isSavingToDifferentPath) {
             await fs.unlink(activeProjectPath).catch((unlinkError: NodeJS.ErrnoException) => {
               if (unlinkError.code !== 'ENOENT') {
                 throw unlinkError
@@ -407,7 +432,6 @@ export function registerProjectHandlers() {
               }
             }
             await saveRecentProjectPaths(filteredRecentProjectPaths)
-          }
         }
 
         setCurrentProjectPath(targetProjectPath)

src/components/video-editor/SettingsPanel.tsx

@@ -73,6 +73,7 @@ import type {
 	ZoomTransitionEasing,
 } from "./types";
 import {
+	ADVANCED_VERTICAL_PADDING_MAX,
 	DEFAULT_AUTO_CAPTION_SETTINGS,
 	DEFAULT_CROP_REGION,
 	DEFAULT_CURSOR_CLICK_BOUNCE,
@@ -107,6 +108,7 @@ import {
 } from "./videoPlayback/uploadedCursorAssets";
 import { WebcamCropControl } from "./WebcamCropControl";
 import {
+	getCropMatchedWebcamHeightPercent,
 	getWebcamPositionForPreset,
 	normalizeWebcamCropRegion,
 	resolveWebcamCorner,
@@ -1662,6 +1664,8 @@ export function SettingsPanel({
 	const webcamPositionPreset = webcam?.positionPreset ?? DEFAULT_WEBCAM_POSITION_PRESET;
 	const webcamPositionX = webcam?.positionX ?? DEFAULT_WEBCAM_POSITION_X;
 	const webcamPositionY = webcam?.positionY ?? DEFAULT_WEBCAM_POSITION_Y;
+	const webcamWidth = webcam?.width ?? webcam?.size ?? DEFAULT_WEBCAM_SIZE;
+	const webcamHeight = webcam?.height ?? webcam?.size ?? DEFAULT_WEBCAM_SIZE;
 	const webcamCrop = normalizeWebcamCropRegion(webcam?.cropRegion);
 
 	const getWallpaperTileState = (candidateValue: string, previewPath?: string) => {
@@ -2413,7 +2417,7 @@ export function SettingsPanel({
 								value={padding.top}
 								defaultValue={DEFAULT_PADDING.top}
 								min={0}
-								max={100}
+								max={ADVANCED_VERTICAL_PADDING_MAX}
 								step={1}
 								onChange={(v) => handlePaddingSideChange("top", v)}
 								formatValue={(v) => `${v}%`}
@@ -2424,7 +2428,7 @@ export function SettingsPanel({
 								value={padding.bottom}
 								defaultValue={DEFAULT_PADDING.bottom}
 								min={0}
-								max={100}
+								max={ADVANCED_VERTICAL_PADDING_MAX}
 								step={1}
 								onChange={(v) => handlePaddingSideChange("bottom", v)}
 								formatValue={(v) => `${v}%`}
@@ -3322,22 +3326,19 @@ export function SettingsPanel({
 						)}
 					</div>
 				)}
-				<div className="rounded-lg border border-foreground/10 bg-foreground/[0.03] px-3 py-2">
-					<div className="text-[10px] text-muted-foreground">
-						{showDevMotionControls
-							? tSettings(
-									"effects.exportBlurMovedToDev",
-									"Export blur tuning is available in Settings > Dev.",
-								)
-							: tSettings(
-									"effects.exportBlurLocked",
-									"Export blur is fixed for this build.",
-								)}
-					</div>
-					<div className="mt-1 text-[12px] font-medium text-foreground">
-						{`${TEMPORAL_MOTION_BLUR_DEFAULT_SAMPLE_COUNT} samples · ${Math.round(TEMPORAL_MOTION_BLUR_DEFAULT_SHUTTER_FRACTION * 100)}% shutter`}
+				{showDevMotionControls ? (
+					<div className="rounded-lg border border-foreground/10 bg-foreground/[0.03] px-3 py-2">
+						<div className="text-[10px] text-muted-foreground">
+							{tSettings(
+								"effects.exportBlurMovedToDev",
+								"Export blur tuning is available in Settings > Dev.",
+							)}
+						</div>
+						<div className="mt-1 text-[12px] font-medium text-foreground">
+							{`${TEMPORAL_MOTION_BLUR_DEFAULT_SAMPLE_COUNT} samples · ${Math.round(TEMPORAL_MOTION_BLUR_DEFAULT_SHUTTER_FRACTION * 100)}% shutter`}
+						</div>
 					</div>
-				</div>
+				) : null}
 				{selectedZoomId && (
 					<Button
 						onClick={() => {
@@ -3874,13 +3875,24 @@ export function SettingsPanel({
 								/>
 							</div>
 							<SliderControl
-								label={tSettings("effects.webcamSize")}
-								value={webcam?.size ?? DEFAULT_WEBCAM_SIZE}
+								label={tSettings("effects.webcamWidth", "Webcam Width")}
+								value={webcamWidth}
 								defaultValue={DEFAULT_WEBCAM_SIZE}
 								min={10}
 								max={100}
 								step={1}
-								onChange={(v) => updateWebcam({ size: v })}
+								onChange={(v) => updateWebcam({ width: v, size: v })}
+								formatValue={(v) => `${Math.round(v)}%`}
+								parseInput={(text) => parseFloat(text.replace(/%$/, ""))}
+							/>
+							<SliderControl
+								label={tSettings("effects.webcamHeight", "Webcam Height")}
+								value={webcamHeight}
+								defaultValue={DEFAULT_WEBCAM_SIZE}
+								min={10}
+								max={100}
+								step={1}
+								onChange={(v) => updateWebcam({ height: v })}
 								formatValue={(v) => `${Math.round(v)}%`}
 								parseInput={(text) => parseFloat(text.replace(/%$/, ""))}
 							/>
@@ -3906,7 +3918,20 @@ export function SettingsPanel({
 									previewCurrentTime={webcamPreviewCurrentTime}
 									previewPlaying={webcamPreviewPlaying}
 									previewTimeOffsetMs={webcam?.timeOffsetMs}
-									onCropChange={(cropRegion) => updateWebcam({ cropRegion })}
+									onCropChange={(cropRegion, previewFrame) =>
+										updateWebcam({
+											cropRegion,
+											height: previewFrame
+												? getCropMatchedWebcamHeightPercent(
+														webcamWidth,
+														webcamWidth,
+														previewFrame.width,
+														previewFrame.height,
+														cropRegion,
+													)
+												: webcamHeight,
+										})
+									}
 								/>
 							</div>
 							<div className="rounded-lg bg-foreground/[0.03] px-2.5 py-2">