First implementation of copy

Author: davide-dona

src/components/video-editor/VideoEditor.tsx

@@ -87,6 +87,16 @@ import {
 	toFileUrl,
 	validateProjectData,
 } from "./projectPersistence";
+import {
+	applyAnnotationAttributes,
+	applySpeedAttributes,
+	applyZoomAttributes,
+	buildPastedAnnotation,
+	type CopiedRegion,
+	extractAnnotationAttributes,
+	extractSpeedAttributes,
+	extractZoomAttributes,
+} from "./regionClipboard";
 import { SettingsPanel } from "./SettingsPanel";
 import TimelineEditor from "./timeline/TimelineEditor";
 import { buildAutoZoomSuggestions } from "./timeline/zoomSuggestionUtils";
@@ -300,6 +310,9 @@ export default function VideoEditor() {
 	const nextTrimIdRef = useRef(1);
 	const nextSpeedIdRef = useRef(1);
 
+	// Session clipboard for "copy/paste region attributes" (not undoable, not persisted).
+	const regionClipboardRef = useRef<CopiedRegion | null>(null);
+
 	const { shortcuts, isMac } = useShortcuts();
 	// Windows recordings include captured cursor assets. macOS hides the system
 	// cursor in ScreenCaptureKit and renders telemetry samples with OpenScreen's
@@ -1640,6 +1653,174 @@ export default function VideoEditor() {
 		[pushState],
 	);
 
+	const handleCopySelected = useCallback(() => {
+		if (selectedZoomId) {
+			const region = zoomRegions.find((r) => r.id === selectedZoomId);
+			if (region) {
+				regionClipboardRef.current = extractZoomAttributes(region);
+				toast.success(t("regionClipboard.copied", { region: t("regionClipboard.kinds.zoom") }));
+			}
+			return;
+		}
+		if (selectedSpeedId) {
+			const region = speedRegions.find((r) => r.id === selectedSpeedId);
+			if (region) {
+				regionClipboardRef.current = extractSpeedAttributes(region);
+				toast.success(t("regionClipboard.copied", { region: t("regionClipboard.kinds.speed") }));
+			}
+			return;
+		}
+		if (selectedAnnotationId) {
+			const region = annotationRegions.find((r) => r.id === selectedAnnotationId);
+			if (region) {
+				regionClipboardRef.current = extractAnnotationAttributes(region);
+				toast.success(
+					t("regionClipboard.copied", { region: t("regionClipboard.kinds.annotation") }),
+				);
+			}
+			return;
+		}
+		toast.info(t("regionClipboard.nothingToCopy"));
+	}, [
+		selectedZoomId,
+		selectedSpeedId,
+		selectedAnnotationId,
+		zoomRegions,
+		speedRegions,
+		annotationRegions,
+		t,
+	]);
+
+	const handlePaste = useCallback(() => {
+		const copied = regionClipboardRef.current;
+		// If there's nothing in the clipboard, show a message and return early.
+		if (!copied) {
+			toast.info(t("regionClipboard.nothingToPaste"));
+			return;
+		}
+
+		const regionLabel = t(`regionClipboard.kinds.${copied.kind}`);
+		const pastedToast = () => toast.success(t("regionClipboard.pasted", { region: regionLabel }));
+
+		// Apply onto the selected region of the same kind, keeping its timing.
+		if (copied.kind === "zoom" && selectedZoomId) {
+			pushState((prev) => ({
+				zoomRegions: prev.zoomRegions.map((r) =>
+					r.id === selectedZoomId ? applyZoomAttributes(r, copied) : r,
+				),
+			}));
+			pastedToast();
+			return;
+		}
+		if (copied.kind === "speed" && selectedSpeedId) {
+			pushState((prev) => ({
+				speedRegions: prev.speedRegions.map((r) =>
+					r.id === selectedSpeedId ? applySpeedAttributes(r, copied) : r,
+				),
+			}));
+			pastedToast();
+			return;
+		}
+		if (copied.kind === "annotation" && selectedAnnotationId) {
+			pushState((prev) => ({
+				annotationRegions: prev.annotationRegions.map((r) =>
+					r.id === selectedAnnotationId ? applyAnnotationAttributes(r, copied) : r,
+				),
+			}));
+			pastedToast();
+			return;
+		}
+
+		// Nothing matching selected → create a new region at the playhead.
+		const totalMs = Math.round(duration * 1000);
+		if (totalMs <= 0) return;
+		const defaultDuration = Math.min(Math.max(1000, Math.round(totalMs * 0.05)), totalMs);
+		const startPos = Math.max(0, Math.min(Math.round(currentTime * 1000), totalMs));
+
+		if (copied.kind === "zoom") {
+			const sorted = [...zoomRegions].sort((a, b) => a.startMs - b.startMs);
+			const nextRegion = sorted.find((r) => r.startMs > startPos);
+			const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
+			const overlapping = sorted.some((r) => startPos >= r.startMs && startPos < r.endMs);
+
+			if (overlapping || gapToNext <= 0) {
+				toast.error(t("regionClipboard.cannotPlace"));
+				return;
+			}
+			const id = `zoom-${nextZoomIdRef.current++}`;
+			const region = applyZoomAttributes(
+				{
+					id,
+					startMs: startPos,
+					endMs: startPos + Math.min(defaultDuration, gapToNext),
+					depth: DEFAULT_ZOOM_DEPTH,
+					focus: { cx: 0.5, cy: 0.5 },
+					source: "manual",
+				},
+				copied,
+			);
+			pushState((prev) => ({ zoomRegions: [...prev.zoomRegions, region] }));
+			handleSelectZoom(id);
+			pastedToast();
+			return;
+		}
+
+		if (copied.kind === "speed") {
+			const sorted = [...speedRegions].sort((a, b) => a.startMs - b.startMs);
+			const nextRegion = sorted.find((r) => r.startMs > startPos);
+			const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
+			const overlapping = sorted.some((r) => startPos >= r.startMs && startPos < r.endMs);
+
+			if (overlapping || gapToNext <= 0) {
+				toast.error(t("regionClipboard.cannotPlace"));
+				return;
+			}
+			const id = `speed-${nextSpeedIdRef.current++}`;
+			const region = applySpeedAttributes(
+				{
+					id,
+					startMs: startPos,
+					endMs: startPos + Math.min(defaultDuration, gapToNext),
+					speed: DEFAULT_PLAYBACK_SPEED,
+				},
+				copied,
+			);
+			pushState((prev) => ({ speedRegions: [...prev.speedRegions, region] }));
+			handleSelectSpeed(id);
+			pastedToast();
+			return;
+		}
+
+		// Annotation — overlaps are allowed. A brand-new region clones the full copy
+		// (type, content, styling, position), unlike the styling-only overwrite above.
+		const id = `annotation-${nextAnnotationIdRef.current++}`;
+		const region = buildPastedAnnotation(
+			{
+				id,
+				startMs: startPos,
+				endMs: Math.min(startPos + defaultDuration, totalMs),
+				zIndex: nextAnnotationZIndexRef.current++,
+			},
+			copied,
+		);
+		pushState((prev) => ({ annotationRegions: [...prev.annotationRegions, region] }));
+		handleSelectAnnotation(id);
+		pastedToast();
+	}, [
+		selectedZoomId,
+		selectedSpeedId,
+		selectedAnnotationId,
+		zoomRegions,
+		speedRegions,
+		duration,
+		currentTime,
+		pushState,
+		handleSelectZoom,
+		handleSelectSpeed,
+		handleSelectAnnotation,
+		t,
+	]);
+
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
 			const mod = e.ctrlKey || e.metaKey;
@@ -1658,6 +1839,25 @@ export default function VideoEditor() {
 				return;
 			}
 
+			// Copy/paste region attributes. Skipped while typing in a field so native
+			// text copy/paste keeps working.
+			const editingText =
+				e.target instanceof HTMLInputElement ||
+				e.target instanceof HTMLTextAreaElement ||
+				(e.target instanceof HTMLElement && e.target.isContentEditable);
+			if (!editingText) {
+				if (matchesShortcut(e, shortcuts.copySelected, isMac)) {
+					e.preventDefault();
+					handleCopySelected();
+					return;
+				}
+				if (matchesShortcut(e, shortcuts.paste, isMac)) {
+					e.preventDefault();
+					handlePaste();
+					return;
+				}
+			}
+
 			// Frame-step navigation (arrow keys, no modifiers)
 			if (
 				(e.key === "ArrowLeft" || e.key === "ArrowRight") &&
@@ -1714,7 +1914,7 @@ export default function VideoEditor() {
 
 		window.addEventListener("keydown", handleKeyDown, { capture: true });
 		return () => window.removeEventListener("keydown", handleKeyDown, { capture: true });
-	}, [undo, redo, shortcuts, isMac]);
+	}, [undo, redo, shortcuts, isMac, handleCopySelected, handlePaste]);
 
 	useEffect(() => {
 		if (selectedZoomId && !zoomRegions.some((region) => region.id === selectedZoomId)) {

src/components/video-editor/regionClipboard.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vitest";
+import {
+	applyAnnotationAttributes,
+	applySpeedAttributes,
+	applyZoomAttributes,
+	buildPastedAnnotation,
+	extractAnnotationAttributes,
+	extractSpeedAttributes,
+	extractZoomAttributes,
+} from "./regionClipboard";
+import {
+	type AnnotationRegion,
+	DEFAULT_ANNOTATION_POSITION,
+	DEFAULT_ANNOTATION_SIZE,
+	DEFAULT_ANNOTATION_STYLE,
+	DEFAULT_FIGURE_DATA,
+	type SpeedRegion,
+	type ZoomRegion,
+} from "./types";
+
+const zoom: ZoomRegion = {
+	id: "zoom-1",
+	startMs: 1000,
+	endMs: 3000,
+	depth: 4,
+	customScale: 2.75,
+	focus: { cx: 0.2, cy: 0.8 },
+	focusMode: "manual",
+	rotationPreset: "iso",
+	source: "manual",
+};
+
+const speed: SpeedRegion = { id: "speed-1", startMs: 0, endMs: 500, speed: 2 };
+
+const annotation: AnnotationRegion = {
+	id: "annotation-1",
+	startMs: 0,
+	endMs: 2000,
+	type: "figure",
+	content: "hello",
+	position: { x: 10, y: 90 },
+	size: { width: 40, height: 25 },
+	style: { ...DEFAULT_ANNOTATION_STYLE, color: "#ff0000", textAnimation: "pop" },
+	zIndex: 3,
+	figureData: { ...DEFAULT_FIGURE_DATA, color: "#123456" },
+};
+
+describe("zoom attribute copy/paste", () => {
+	it("round-trips the copyable attributes onto a different clip while keeping its identity/timing", () => {
+		const attrs = extractZoomAttributes(zoom);
+		const target: ZoomRegion = {
+			id: "zoom-2",
+			startMs: 9000,
+			endMs: 9500,
+			depth: 1,
+			focus: { cx: 0.5, cy: 0.5 },
+			source: "manual",
+		};
+		const result = applyZoomAttributes(target, attrs);
+
+		expect(result.id).toBe("zoom-2");
+		expect(result.startMs).toBe(9000);
+		expect(result.endMs).toBe(9500);
+		expect(result.depth).toBe(4);
+		expect(result.customScale).toBe(2.75);
+		expect(result.focus).toEqual({ cx: 0.2, cy: 0.8 });
+		expect(result.focusMode).toBe("manual");
+		expect(result.rotationPreset).toBe("iso");
+	});
+
+	it("deep-copies focus so the source and target are decoupled", () => {
+		const attrs = extractZoomAttributes(zoom);
+		const result = applyZoomAttributes({ ...zoom, id: "zoom-2" }, attrs);
+		result.focus.cx = 0.99;
+		expect(zoom.focus.cx).toBe(0.2);
+	});
+});
+
+describe("speed attribute copy/paste", () => {
+	it("copies only the speed value", () => {
+		const attrs = extractSpeedAttributes(speed);
+		const target: SpeedRegion = { id: "speed-2", startMs: 4000, endMs: 5000, speed: 1 };
+		const result = applySpeedAttributes(target, attrs);
+		expect(result).toEqual({ id: "speed-2", startMs: 4000, endMs: 5000, speed: 2 });
+	});
+});
+
+describe("annotation copy captures everything", () => {
+	it("captures styling plus content, type, and position", () => {
+		const attrs = extractAnnotationAttributes(annotation);
+		expect(attrs.type).toBe("figure");
+		expect(attrs.content).toBe("hello");
+		expect(attrs.position).toEqual({ x: 10, y: 90 });
+		expect(attrs.style.color).toBe("#ff0000");
+		expect(attrs.figureData?.color).toBe("#123456");
+	});
+});
+
+describe("paste onto an existing annotation applies styling only", () => {
+	it("overwrites the look/feel but keeps the target's content, position, timing, and zIndex", () => {
+		const attrs = extractAnnotationAttributes(annotation);
+		const target: AnnotationRegion = {
+			id: "annotation-2",
+			startMs: 7000,
+			endMs: 8000,
+			type: "text",
+			content: "world",
+			position: { ...DEFAULT_ANNOTATION_POSITION },
+			size: { ...DEFAULT_ANNOTATION_SIZE },
+			style: { ...DEFAULT_ANNOTATION_STYLE },
+			zIndex: 9,
+		};
+		const result = applyAnnotationAttributes(target, attrs);
+
+		expect(result.content).toBe("world");
+		expect(result.position).toEqual(DEFAULT_ANNOTATION_POSITION);
+		expect(result.startMs).toBe(7000);
+		expect(result.zIndex).toBe(9);
+		expect(result.style.color).toBe("#ff0000");
+		expect(result.style.textAnimation).toBe("pop");
+		expect(result.size).toEqual({ width: 40, height: 25 });
+		expect(result.figureData?.color).toBe("#123456");
+	});
+
+	it("keeps the target's own figure data when the copied region has none", () => {
+		const textAttrs = extractAnnotationAttributes({ ...annotation, figureData: undefined });
+		const figureTarget: AnnotationRegion = { ...annotation, id: "annotation-3" };
+		const result = applyAnnotationAttributes(figureTarget, textAttrs);
+		expect(result.figureData?.color).toBe("#123456");
+	});
+});
+
+describe("paste as a new annotation clones the full copy", () => {
+	it("clones type, content, styling, and position; takes timing/identity from the base", () => {
+		const attrs = extractAnnotationAttributes(annotation);
+		const result = buildPastedAnnotation(
+			{ id: "annotation-4", startMs: 12000, endMs: 14000, zIndex: 5 },
+			attrs,
+		);
+
+		expect(result.id).toBe("annotation-4");
+		expect(result.startMs).toBe(12000);
+		expect(result.endMs).toBe(14000);
+		expect(result.zIndex).toBe(5);
+		expect(result.type).toBe("figure");
+		expect(result.content).toBe("hello");
+		expect(result.position).toEqual({ x: 10, y: 90 });
+		expect(result.style.color).toBe("#ff0000");
+		expect(result.figureData?.color).toBe("#123456");
+	});
+
+	it("deep-copies position so source and clone are decoupled", () => {
+		const attrs = extractAnnotationAttributes(annotation);
+		const result = buildPastedAnnotation(
+			{ id: "annotation-5", startMs: 0, endMs: 1000, zIndex: 1 },
+			attrs,
+		);
+		result.position.x = 99;
+		expect(annotation.position.x).toBe(10);
+	});
+});