diff --git a/src/components/video-editor/BlurSettingsPanel.tsx b/src/components/video-editor/BlurSettingsPanel.tsx
new file mode 100644
index 0000000..09bfe3a
--- /dev/null
+++ b/src/components/video-editor/BlurSettingsPanel.tsx
@@ -0,0 +1,247 @@
+import { Info, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { useScopedT } from "@/contexts/I18nContext";
+import { getBlurOverlayColor } from "@/lib/blurEffects";
+import { cn } from "@/lib/utils";
+import {
+ type AnnotationRegion,
+ type BlurColor,
+ type BlurData,
+ type BlurShape,
+ DEFAULT_BLUR_BLOCK_SIZE,
+ DEFAULT_BLUR_DATA,
+ MAX_BLUR_BLOCK_SIZE,
+ MAX_BLUR_INTENSITY,
+ MIN_BLUR_BLOCK_SIZE,
+ MIN_BLUR_INTENSITY,
+} from "./types";
+
+interface BlurSettingsPanelProps {
+ blurRegion: AnnotationRegion;
+ onBlurDataChange: (blurData: BlurData) => void;
+ onBlurDataCommit?: () => void;
+ onDelete: () => void;
+}
+
+export function BlurSettingsPanel({
+ blurRegion,
+ onBlurDataChange,
+ onBlurDataCommit,
+ onDelete,
+}: BlurSettingsPanelProps) {
+ const t = useScopedT("settings");
+
+ const blurShapeOptions: Array<{ value: BlurShape; labelKey: string }> = [
+ { value: "rectangle", labelKey: "blurShapeRectangle" },
+ { value: "oval", labelKey: "blurShapeOval" },
+ ];
+ const blurColorOptions: Array<{ value: BlurColor; labelKey: string }> = [
+ { value: "white", labelKey: "blurColorWhite" },
+ { value: "black", labelKey: "blurColorBlack" },
+ ];
+
+ return (
+
+
+
+ {t("annotation.blurShape")}
+
+ {t("annotation.active")}
+
+
+
+
+ {blurShapeOptions.map((shape) => {
+ const activeShape = blurRegion.blurData?.shape || DEFAULT_BLUR_DATA.shape;
+ const isActive = activeShape === shape.value;
+ return (
+
{
+ const nextBlurData: BlurData = {
+ ...DEFAULT_BLUR_DATA,
+ ...blurRegion.blurData,
+ shape: shape.value,
+ };
+ onBlurDataChange(nextBlurData);
+ requestAnimationFrame(() => {
+ onBlurDataCommit?.();
+ });
+ }}
+ className={cn(
+ "h-16 rounded-lg border flex flex-col items-center justify-center transition-all p-2 gap-1",
+ isActive
+ ? "bg-[#34B27B] border-[#34B27B]"
+ : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+ )}
+ >
+ {shape.value === "rectangle" && (
+
+ )}
+ {shape.value === "oval" && (
+
+ )}
+
+ {t(`annotation.${shape.labelKey}`)}
+
+
+ );
+ })}
+
+
+
+
+ {t("annotation.blurType")}
+
+ {
+ const nextBlurData: BlurData = {
+ ...DEFAULT_BLUR_DATA,
+ ...blurRegion.blurData,
+ type: value === "mosaic" ? "mosaic" : "blur",
+ };
+ onBlurDataChange(nextBlurData);
+ requestAnimationFrame(() => {
+ onBlurDataCommit?.();
+ });
+ }}
+ >
+
+
+
+ {t("annotation.blurTypeBlur")}
+ {t("annotation.blurTypeMosaic")}
+
+
+
+
+
+
+ {t("annotation.blurColor")}
+
+
+ {blurColorOptions.map((option) => {
+ const activeColor = blurRegion.blurData?.color ?? DEFAULT_BLUR_DATA.color;
+ const isActive = activeColor === option.value;
+ return (
+
{
+ const nextBlurData: BlurData = {
+ ...DEFAULT_BLUR_DATA,
+ ...blurRegion.blurData,
+ color: option.value,
+ };
+ onBlurDataChange(nextBlurData);
+ requestAnimationFrame(() => {
+ onBlurDataCommit?.();
+ });
+ }}
+ className={cn(
+ "h-10 rounded-lg border flex items-center gap-2 px-3 transition-all",
+ isActive
+ ? "bg-[#34B27B] border-[#34B27B]"
+ : "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+ )}
+ >
+
+
+ {t(`annotation.${option.labelKey}`)}
+
+
+ );
+ })}
+
+
+
+
+
+
+ {blurRegion.blurData?.type === "mosaic"
+ ? t("annotation.mosaicBlockSize")
+ : t("annotation.blurIntensity")}
+
+
+ {Math.round(
+ blurRegion.blurData?.type === "mosaic"
+ ? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
+ : (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
+ )}
+ px
+
+
+
{
+ onBlurDataChange({
+ ...DEFAULT_BLUR_DATA,
+ ...blurRegion.blurData,
+ ...(blurRegion.blurData?.type === "mosaic"
+ ? { blockSize: values[0] }
+ : { intensity: values[0] }),
+ });
+ }}
+ onValueCommit={() => onBlurDataCommit?.()}
+ min={blurRegion.blurData?.type === "mosaic" ? MIN_BLUR_BLOCK_SIZE : MIN_BLUR_INTENSITY}
+ max={blurRegion.blurData?.type === "mosaic" ? MAX_BLUR_BLOCK_SIZE : MAX_BLUR_INTENSITY}
+ step={1}
+ className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+ />
+
+
+
+
+
+
+
+ {t("annotation.shortcutsAndTips")}
+
+
+ {t("annotation.tipMovePlayhead")}
+
+
+
+
+ );
+}
diff --git a/src/components/video-editor/KeyboardShortcutsHelp.tsx b/src/components/video-editor/KeyboardShortcutsHelp.tsx
index 5287365..b90b377 100644
--- a/src/components/video-editor/KeyboardShortcutsHelp.tsx
+++ b/src/components/video-editor/KeyboardShortcutsHelp.tsx
@@ -37,8 +37,10 @@ export function KeyboardShortcutsHelp() {
{FIXED_SHORTCUTS.map((fixed) => (
-
-
{fixed.label}
+
+
+ {t(`fixedActions.${fixed.i18nKey}`, { defaultValue: fixed.label })}
+
{isMac
? fixed.display
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 7e556b8..5cac573 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -1,6 +1,6 @@
-import Block from "@uiw/react-color-block";
import {
Bug,
+ ChevronDown,
Crop,
Download,
Film,
@@ -14,7 +14,7 @@ import {
Upload,
X,
} from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import {
Accordion,
@@ -23,6 +23,7 @@ import {
AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
Select,
SelectContent,
@@ -34,34 +35,96 @@ import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useScopedT } from "@/contexts/I18nContext";
-import { getAssetPath } from "@/lib/assetPath";
import { WEBCAM_LAYOUT_PRESETS } from "@/lib/compositeLayout";
import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
import { cn } from "@/lib/utils";
+import { resolveImageWallpaperUrl, WALLPAPER_PATHS } from "@/lib/wallpaper";
import { type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
import { getTestId } from "@/utils/getTestId";
+import ColorPicker from "../ui/color-picker";
import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
+import { BlurSettingsPanel } from "./BlurSettingsPanel";
import { CropControl } from "./CropControl";
import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
import type {
AnnotationRegion,
AnnotationType,
+ BlurData,
CropRegion,
FigureData,
PlaybackSpeed,
WebcamLayoutPreset,
WebcamMaskShape,
+ WebcamSizePreset,
ZoomDepth,
ZoomFocusMode,
} from "./types";
-import { SPEED_OPTIONS } from "./types";
+import { DEFAULT_WEBCAM_SIZE_PRESET, MAX_PLAYBACK_SPEED, SPEED_OPTIONS } from "./types";
+
+function CustomSpeedInput({
+ value,
+ onChange,
+ onError,
+}: {
+ value: number;
+ onChange: (val: number) => void;
+ onError: () => void;
+}) {
+ const isPreset = SPEED_OPTIONS.some((o) => o.speed === value);
+ const [draft, setDraft] = useState(isPreset ? "" : String(Math.round(value)));
+ const [isFocused, setIsFocused] = useState(false);
+
+ const prevValue = useRef(value);
+ if (!isFocused && prevValue.current !== value) {
+ prevValue.current = value;
+ setDraft(isPreset ? "" : String(Math.round(value)));
+ }
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent) => {
+ const digits = e.target.value.replace(/\D/g, "");
+ if (digits === "") {
+ setDraft("");
+ return;
+ }
+ const num = Number(digits);
+ if (num > MAX_PLAYBACK_SPEED) {
+ onError();
+ return;
+ }
+ setDraft(digits);
+ if (num >= 1) onChange(num);
+ },
+ [onChange, onError],
+ );
+
+ const handleBlur = useCallback(() => {
+ setIsFocused(false);
+ if (!draft || Number(draft) < 1) {
+ setDraft(isPreset ? "" : String(Math.round(value)));
+ }
+ }, [draft, isPreset, value]);
+
+ return (
+
+ ×
+
+ );
+}
-const WALLPAPER_COUNT = 18;
-const WALLPAPER_RELATIVE = Array.from(
- { length: WALLPAPER_COUNT },
- (_, i) => `wallpapers/wallpaper${i + 1}.jpg`,
-);
const GRADIENTS = [
"linear-gradient( 111.6deg, rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
"linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)",
@@ -90,6 +153,12 @@ const GRADIENTS = [
];
interface SettingsPanelProps {
+ cursorHighlight?: import("./videoPlayback/cursorHighlight").CursorHighlightConfig;
+ onCursorHighlightChange?: (
+ next: import("./videoPlayback/cursorHighlight").CursorHighlightConfig,
+ ) => void;
+ // macOS only — gates the "Only on clicks" toggle (needs uiohook).
+ cursorHighlightSupportsClicks?: boolean;
selected: string;
onWallpaperChange: (path: string) => void;
selectedZoomDepth?: ZoomDepth | null;
@@ -132,7 +201,11 @@ interface SettingsPanelProps {
onGifSizePresetChange?: (preset: GifSizePreset) => void;
gifOutputDimensions?: { width: number; height: number };
onExport?: () => void;
- unsavedExport?: { arrayBuffer: ArrayBuffer; fileName: string; format: string } | null;
+ unsavedExport?: {
+ arrayBuffer: ArrayBuffer;
+ fileName: string;
+ format: string;
+ } | null;
onSaveUnsavedExport?: () => void;
selectedAnnotationId?: string | null;
annotationRegions?: AnnotationRegion[];
@@ -140,7 +213,13 @@ interface SettingsPanelProps {
onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
onAnnotationStyleChange?: (id: string, style: Partial) => void;
onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
+ onAnnotationDuplicate?: (id: string) => void;
onAnnotationDelete?: (id: string) => void;
+ selectedBlurId?: string | null;
+ blurRegions?: AnnotationRegion[];
+ onBlurDataChange?: (id: string, blurData: BlurData) => void;
+ onBlurDataCommit?: () => void;
+ onBlurDelete?: (id: string) => void;
selectedSpeedId?: string | null;
selectedSpeedValue?: PlaybackSpeed | null;
onSpeedChange?: (speed: PlaybackSpeed) => void;
@@ -150,6 +229,9 @@ interface SettingsPanelProps {
onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
webcamMaskShape?: import("./types").WebcamMaskShape;
onWebcamMaskShapeChange?: (shape: import("./types").WebcamMaskShape) => void;
+ webcamSizePreset?: WebcamSizePreset;
+ onWebcamSizePresetChange?: (size: WebcamSizePreset) => void;
+ onWebcamSizePresetCommit?: () => void;
}
export default SettingsPanel;
@@ -164,6 +246,9 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
];
export function SettingsPanel({
+ cursorHighlight,
+ onCursorHighlightChange,
+ cursorHighlightSupportsClicks = false,
selected,
onWallpaperChange,
selectedZoomDepth,
@@ -213,7 +298,13 @@ export function SettingsPanel({
onAnnotationTypeChange,
onAnnotationStyleChange,
onAnnotationFigureDataChange,
+ onAnnotationDuplicate,
onAnnotationDelete,
+ selectedBlurId,
+ blurRegions = [],
+ onBlurDataChange,
+ onBlurDataCommit,
+ onBlurDelete,
selectedSpeedId,
selectedSpeedValue,
onSpeedChange,
@@ -223,26 +314,17 @@ export function SettingsPanel({
onWebcamLayoutPresetChange,
webcamMaskShape = "rectangle",
onWebcamMaskShapeChange,
+ webcamSizePreset = DEFAULT_WEBCAM_SIZE_PRESET,
+ onWebcamSizePresetChange,
+ onWebcamSizePresetCommit,
}: SettingsPanelProps) {
const t = useScopedT("settings");
- const [wallpaperPaths, setWallpaperPaths] = useState([]);
+ // Resolved URLs are for DOM rendering only (backgroundImage). The canonical
+ // `/wallpapers/wallpaperN.jpg` form in WALLPAPER_PATHS is what gets persisted
+ // on click — never the machine-specific file:// URL.
+ const wallpaperPreviewUrls = useMemo(() => WALLPAPER_PATHS.map(resolveImageWallpaperUrl), []);
const [customImages, setCustomImages] = useState([]);
const fileInputRef = useRef(null);
-
- useEffect(() => {
- let mounted = true;
- (async () => {
- try {
- const resolved = await Promise.all(WALLPAPER_RELATIVE.map((p) => getAssetPath(p)));
- if (mounted) setWallpaperPaths(resolved);
- } catch (_err) {
- if (mounted) setWallpaperPaths(WALLPAPER_RELATIVE.map((p) => `/${p}`));
- }
- })();
- return () => {
- mounted = false;
- };
- }, []);
const colorPalette = [
"#FF0000",
"#FFD700",
@@ -268,6 +350,7 @@ export function SettingsPanel({
const cropSnapshotRef = useRef(null);
const [cropAspectLocked, setCropAspectLocked] = useState(false);
const [cropAspectRatio, setCropAspectRatio] = useState("");
+ const isPortraitCanvas = isPortraitAspectRatio(aspectRatio);
const videoWidth = videoElement?.videoWidth || 1920;
const videoHeight = videoElement?.videoHeight || 1080;
@@ -424,7 +507,7 @@ export function SettingsPanel({
setCustomImages((prev) => prev.filter((img) => img !== imageUrl));
// If the removed image was selected, clear selection
if (selected === imageUrl) {
- onWallpaperChange(wallpaperPaths[0] || WALLPAPER_RELATIVE[0]);
+ onWallpaperChange(WALLPAPER_PATHS[0]);
}
};
@@ -446,6 +529,9 @@ export function SettingsPanel({
const selectedAnnotation = selectedAnnotationId
? annotationRegions.find((a) => a.id === selectedAnnotationId)
: null;
+ const selectedBlur = selectedBlurId
+ ? blurRegions.find((region) => region.id === selectedBlurId)
+ : null;
// If an annotation is selected, show annotation settings instead
if (
@@ -466,11 +552,25 @@ export function SettingsPanel({
? (figureData) => onAnnotationFigureDataChange(selectedAnnotation.id, figureData)
: undefined
}
+ onDuplicate={
+ onAnnotationDuplicate ? () => onAnnotationDuplicate(selectedAnnotation.id) : undefined
+ }
onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
/>
);
}
+ if (selectedBlur && onBlurDataChange && onBlurDelete) {
+ return (
+ onBlurDataChange(selectedBlur.id, blurData)}
+ onBlurDataCommit={onBlurDataCommit}
+ onDelete={() => onBlurDelete(selectedBlur.id)}
+ />
+ );
+ }
+
return (
@@ -584,7 +684,7 @@ export function SettingsPanel({
)}
-
+
{SPEED_OPTIONS.map((option) => {
const isActive = selectedSpeedValue === option.speed;
return (
@@ -609,6 +709,29 @@ export function SettingsPanel({
);
})}
+
+
+
+ {t("speed.customPlaybackSpeed")}
+
+ {selectedSpeedId ? (
+
onSpeedChange?.(val)}
+ onError={() => toast.error(t("speed.maxSpeedError"))}
+ />
+ ) : (
+
+ )}
+
+
{!selectedSpeedId && (
{t("speed.selectRegion")}
)}
@@ -656,15 +779,17 @@ export function SettingsPanel({
- {WEBCAM_LAYOUT_PRESETS.filter(
- (preset) =>
- preset.value === "picture-in-picture" ||
- isPortraitAspectRatio(aspectRatio),
- ).map((preset) => (
+ {WEBCAM_LAYOUT_PRESETS.filter((preset) => {
+ if (preset.value === "picture-in-picture") return true;
+ if (preset.value === "vertical-stack") return isPortraitCanvas;
+ return !isPortraitCanvas;
+ }).map((preset) => (
{preset.value === "picture-in-picture"
? t("layout.pictureInPicture")
- : t("layout.verticalStack")}
+ : preset.value === "vertical-stack"
+ ? t("layout.verticalStack")
+ : t("layout.dualFrame")}
))}
@@ -751,6 +876,27 @@ export function SettingsPanel({
)}
+ {webcamLayoutPreset === "picture-in-picture" && (
+
+
+
+ {t("layout.webcamSize")}
+
+
+ {webcamSizePreset}%
+
+
+
onWebcamSizePresetChange?.(values[0])}
+ onValueCommit={() => onWebcamSizePresetCommit?.()}
+ min={10}
+ max={50}
+ step={1}
+ className="w-full"
+ />
+
+ {cursorHighlight && onCursorHighlightChange && (
+
+
+
Cursor highlight
+
+ onCursorHighlightChange({
+ ...cursorHighlight,
+ enabled: !cursorHighlight.enabled,
+ })
+ }
+ className={`text-[10px] px-2 py-0.5 rounded border transition-colors ${
+ cursorHighlight.enabled
+ ? "bg-[#34B27B]/20 border-[#34B27B]/50 text-[#34B27B]"
+ : "bg-white/5 border-white/10 text-slate-400"
+ }`}
+ >
+ {cursorHighlight.enabled ? "On" : "Off"}
+
+
+
+ {(["dot", "ring"] as const).map((style) => (
+ onCursorHighlightChange({ ...cursorHighlight, style })}
+ className={`text-[10px] px-2 py-1 rounded border capitalize transition-colors ${
+ cursorHighlight.style === style
+ ? "bg-[#34B27B]/20 border-[#34B27B]/50 text-[#34B27B]"
+ : "bg-white/5 border-white/10 text-slate-300 hover:border-white/20"
+ }`}
+ >
+ {style}
+
+ ))}
+
+
+
+
Size
+
+ {cursorHighlight.sizePx}px
+
+
+
+ onCursorHighlightChange({ ...cursorHighlight, sizePx: values[0] })
+ }
+ min={10}
+ max={36}
+ step={1}
+ className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+ />
+
+ {cursorHighlightSupportsClicks && (
+
+
Only on clicks
+
{
+ const turningOn = !cursorHighlight.onlyOnClicks;
+ if (turningOn) {
+ try {
+ const result = await window.electronAPI.requestAccessibilityAccess();
+ if (!result.granted) {
+ toast.message("Accessibility permission needed", {
+ description:
+ "Open System Settings → Privacy & Security → Accessibility, enable Openscreen, then restart the app.",
+ });
+ }
+ } catch (err) {
+ console.warn("Accessibility request failed:", err);
+ }
+ }
+ onCursorHighlightChange({
+ ...cursorHighlight,
+ onlyOnClicks: turningOn,
+ });
+ }}
+ className={`text-[10px] px-2 py-0.5 rounded border transition-colors ${
+ cursorHighlight.onlyOnClicks
+ ? "bg-[#34B27B]/20 border-[#34B27B]/50 text-[#34B27B]"
+ : "bg-white/5 border-white/10 text-slate-400"
+ }`}
+ >
+ {cursorHighlight.onlyOnClicks ? "On" : "Off"}
+
+
+ )}
+
+
Color
+
+
+
+
+
+ {cursorHighlight.color}
+
+
+
+
+
+ onCursorHighlightChange({ ...cursorHighlight, color })
+ }
+ />
+
+
+
+
+
+
Offset X (window recordings)
+
+ {(cursorHighlight.offsetXNorm * 100).toFixed(1)}%
+
+
+
+ onCursorHighlightChange({
+ ...cursorHighlight,
+ offsetXNorm: values[0],
+ })
+ }
+ min={-0.25}
+ max={0.25}
+ step={0.005}
+ className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+ />
+
+
+
+
Offset Y
+
+ {(cursorHighlight.offsetYNorm * 100).toFixed(1)}%
+
+
+
+ onCursorHighlightChange({
+ ...cursorHighlight,
+ offsetYNorm: values[0],
+ })
+ }
+ min={-0.25}
+ max={0.25}
+ step={0.005}
+ className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+ />
+
+
+ )}
+
-
+
onWallpaperChange(path)}
+ onClick={() => onWallpaperChange(canonicalPath)}
role="button"
/>
);
@@ -988,20 +1295,18 @@ export function SettingsPanel({
-
- {
- setSelectedColor(color.hex);
- onWallpaperChange(color.hex);
- }}
- style={{
- width: "100%",
- borderRadius: "8px",
- }}
- />
-
+ {
+ setSelectedColor(color);
+ onWallpaperChange(color);
+ }}
+ />
@@ -1016,7 +1321,9 @@ export function SettingsPanel({
: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
)}
style={{ background: g }}
- aria-label={t("background.gradientLabel", { index: idx + 1 })}
+ aria-label={t("background.gradientLabel", {
+ index: idx + 1,
+ })}
onClick={() => {
setGradient(g);
onWallpaperChange(g);
diff --git a/src/components/video-editor/ShortcutsConfigDialog.tsx b/src/components/video-editor/ShortcutsConfigDialog.tsx
index 775cb8c..6b9ef78 100644
--- a/src/components/video-editor/ShortcutsConfigDialog.tsx
+++ b/src/components/video-editor/ShortcutsConfigDialog.tsx
@@ -126,93 +126,99 @@ export function ShortcutsConfigDialog() {
if (!open) handleClose();
}}
>
-
-
+
+
-
-
- {t("configurable")}
-
- {SHORTCUT_ACTIONS.map((action) => {
- const isCapturing = captureFor === action;
- const hasConflict = conflict?.forAction === action;
- return (
-
-
- {t(`actions.${action}`)}
- {
- setConflict(null);
- setCaptureFor(isCapturing ? null : action);
- }}
- title={isCapturing ? t("pressEscToCancel") : t("clickToChange")}
- className={[
- "px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none",
- isCapturing
- ? "bg-[#34B27B]/20 border-[#34B27B] text-[#34B27B] animate-pulse"
- : hasConflict
- ? "bg-amber-500/10 border-amber-500/50 text-amber-400"
- : "bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer",
- ].join(" ")}
- >
- {isCapturing ? t("pressKey") : formatBinding(draft[action], isMac)}
-
-
- {hasConflict && conflict?.conflictWith.type === "configurable" && (
-
-
- ⚠{" "}
- {t("alreadyUsedBy", { action: t(`actions.${conflict.conflictWith.action}`) })}
-
-
-
- {t("swap")}
-
-
- {tc("actions.cancel")}
-
-
+
+
+
+ {t("configurable")}
+
+ {SHORTCUT_ACTIONS.map((action) => {
+ const isCapturing = captureFor === action;
+ const hasConflict = conflict?.forAction === action;
+ return (
+
+
+ {t(`actions.${action}`)}
+ {
+ setConflict(null);
+ setCaptureFor(isCapturing ? null : action);
+ }}
+ title={isCapturing ? t("pressEscToCancel") : t("clickToChange")}
+ className={[
+ "px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none",
+ isCapturing
+ ? "bg-[#34B27B]/20 border-[#34B27B] text-[#34B27B] animate-pulse"
+ : hasConflict
+ ? "bg-amber-500/10 border-amber-500/50 text-amber-400"
+ : "bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer",
+ ].join(" ")}
+ >
+ {isCapturing ? t("pressKey") : formatBinding(draft[action], isMac)}
+
- )}
+ {hasConflict && conflict?.conflictWith.type === "configurable" && (
+
+
+ ⚠{" "}
+ {t("alreadyUsedBy", {
+ action: t(`actions.${conflict.conflictWith.action}`),
+ })}
+
+
+
+ {t("swap")}
+
+
+ {tc("actions.cancel")}
+
+
+
+ )}
+
+ );
+ })}
+
+
+
+
+ {t("fixed")}
+
+ {FIXED_SHORTCUTS.map(({ i18nKey, label, display }) => (
+
+
+ {t(`fixedActions.${i18nKey}`, { defaultValue: label })}
+
+
+ {display}
+
- );
- })}
+ ))}
+
+
+
{t("helpText")}
-
-
- {t("fixed")}
-
- {FIXED_SHORTCUTS.map(({ label, display }) => (
-
- {label}
-
- {display}
-
-
- ))}
-
-
-
{t("helpText")}
-
-
+
([]);
+ const [cursorClickTimestamps, setCursorClickTimestamps] = useState([]);
const [selectedZoomId, setSelectedZoomId] = useState(null);
const [selectedTrimId, setSelectedTrimId] = useState(null);
const [selectedSpeedId, setSelectedSpeedId] = useState(null);
const [selectedAnnotationId, setSelectedAnnotationId] = useState(null);
+ const [selectedBlurId, setSelectedBlurId] = useState(null);
const [isExporting, setIsExporting] = useState(false);
const [exportProgress, setExportProgress] = useState(null);
const [exportError, setExportError] = useState(null);
const [showExportDialog, setShowExportDialog] = useState(false);
+ const [showNewRecordingDialog, setShowNewRecordingDialog] = useState(false);
const [exportQuality, setExportQuality] = useState("good");
const [exportFormat, setExportFormat] = useState("mp4");
const [gifFrameRate, setGifFrameRate] = useState(15);
@@ -131,14 +155,30 @@ export default function VideoEditor() {
const nextSpeedIdRef = useRef(1);
const { shortcuts, isMac } = useShortcuts();
+ // Off-Mac doesn't have click telemetry, so force `onlyOnClicks` off for
+ // renderers while keeping the persisted value intact for round-tripping.
+ const effectiveCursorHighlight = useMemo(
+ () => (isMac ? cursorHighlight : { ...cursorHighlight, onlyOnClicks: false }),
+ [cursorHighlight, isMac],
+ );
+ const { locale, setLocale, t: rawT } = useI18n();
const t = useScopedT("editor");
const ts = useScopedT("settings");
- const { locale, setLocale } = useI18n();
+ const availableLocales = getAvailableLocales();
const nextAnnotationIdRef = useRef(1);
const nextAnnotationZIndexRef = useRef(1);
const exporterRef = useRef(null);
+ const annotationOnlyRegions = useMemo(
+ () => annotationRegions.filter((region) => region.type !== "blur"),
+ [annotationRegions],
+ );
+ const blurRegions = useMemo(
+ () => annotationRegions.filter((region) => region.type === "blur"),
+ [annotationRegions],
+ );
+
const currentProjectMedia = useMemo(() => {
const screenVideoPath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
if (!screenVideoPath) {
@@ -198,6 +238,7 @@ export default function VideoEditor() {
aspectRatio: normalizedEditor.aspectRatio,
webcamLayoutPreset: normalizedEditor.webcamLayoutPreset,
webcamMaskShape: normalizedEditor.webcamMaskShape,
+ webcamSizePreset: normalizedEditor.webcamSizePreset,
webcamPosition: normalizedEditor.webcamPosition,
});
setExportQuality(normalizedEditor.exportQuality);
@@ -210,6 +251,7 @@ export default function VideoEditor() {
setSelectedTrimId(null);
setSelectedSpeedId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
nextZoomIdRef.current = deriveNextId(
"zoom",
@@ -234,13 +276,11 @@ export default function VideoEditor() {
) + 1;
setLastSavedSnapshot(
- JSON.stringify(
- createProjectData(
- webcamSourcePath
- ? { screenVideoPath: sourcePath, webcamVideoPath: webcamSourcePath }
- : { screenVideoPath: sourcePath },
- normalizedEditor,
- ),
+ createProjectSnapshot(
+ webcamSourcePath
+ ? { screenVideoPath: sourcePath, webcamVideoPath: webcamSourcePath }
+ : { screenVideoPath: sourcePath },
+ normalizedEditor,
),
);
return true;
@@ -252,30 +292,28 @@ export default function VideoEditor() {
if (!currentProjectMedia) {
return null;
}
- return JSON.stringify(
- createProjectData(currentProjectMedia, {
- wallpaper,
- shadowIntensity,
- showBlur,
- motionBlurAmount,
- borderRadius,
- padding,
- cropRegion,
- zoomRegions,
- trimRegions,
- speedRegions,
- annotationRegions,
- aspectRatio,
- webcamLayoutPreset,
- webcamMaskShape,
- webcamPosition,
- exportQuality,
- exportFormat,
- gifFrameRate,
- gifLoop,
- gifSizePreset,
- }),
- );
+ return createProjectSnapshot(currentProjectMedia, {
+ wallpaper,
+ shadowIntensity,
+ showBlur,
+ motionBlurAmount,
+ borderRadius,
+ padding,
+ cropRegion,
+ zoomRegions,
+ trimRegions,
+ speedRegions,
+ annotationRegions,
+ aspectRatio,
+ webcamLayoutPreset,
+ webcamMaskShape,
+ webcamPosition,
+ exportQuality,
+ exportFormat,
+ gifFrameRate,
+ gifLoop,
+ gifSizePreset,
+ });
}, [
currentProjectMedia,
wallpaper,
@@ -300,12 +338,7 @@ export default function VideoEditor() {
gifSizePreset,
]);
- const hasUnsavedChanges = Boolean(
- currentProjectPath &&
- currentProjectSnapshot &&
- lastSavedSnapshot &&
- currentProjectSnapshot !== lastSavedSnapshot,
- );
+ const hasUnsavedChanges = hasProjectUnsavedChanges(currentProjectSnapshot, lastSavedSnapshot);
useEffect(() => {
async function loadInitialData() {
@@ -333,7 +366,17 @@ export default function VideoEditor() {
setWebcamVideoSourcePath(webcamSourcePath);
setWebcamVideoPath(webcamSourcePath ? toFileUrl(webcamSourcePath) : null);
setCurrentProjectPath(null);
- setLastSavedSnapshot(null);
+ setLastSavedSnapshot(
+ createProjectSnapshot(
+ webcamSourcePath
+ ? {
+ screenVideoPath: sourcePath,
+ webcamVideoPath: webcamSourcePath,
+ }
+ : { screenVideoPath: sourcePath },
+ INITIAL_EDITOR_STATE,
+ ),
+ );
return;
}
@@ -345,7 +388,9 @@ export default function VideoEditor() {
setWebcamVideoSourcePath(null);
setWebcamVideoPath(null);
setCurrentProjectPath(null);
- setLastSavedSnapshot(null);
+ setLastSavedSnapshot(
+ createProjectSnapshot({ screenVideoPath: sourcePath }, INITIAL_EDITOR_STATE),
+ );
} else {
setError("No video to load. Please record or select a video.");
}
@@ -359,6 +404,28 @@ export default function VideoEditor() {
loadInitialData();
}, [applyLoadedProject]);
+ // Track whether user preferences have been loaded to avoid
+ // overwriting saved prefs with defaults on the first render
+ const [prefsHydrated, setPrefsHydrated] = useState(false);
+
+ // Load persisted user preferences on mount (intentionally runs once)
+ useEffect(() => {
+ const prefs = loadUserPreferences();
+ updateState({
+ padding: prefs.padding,
+ aspectRatio: prefs.aspectRatio,
+ });
+ setExportQuality(prefs.exportQuality);
+ setExportFormat(prefs.exportFormat);
+ setPrefsHydrated(true);
+ }, [updateState]);
+
+ // Auto-save user preferences when settings change
+ useEffect(() => {
+ if (!prefsHydrated) return;
+ saveUserPreferences({ padding, aspectRatio, exportQuality, exportFormat });
+ }, [prefsHydrated, padding, aspectRatio, exportQuality, exportFormat]);
+
const saveProject = useCallback(
async (forceSaveAs: boolean) => {
if (!videoPath) {
@@ -371,7 +438,7 @@ export default function VideoEditor() {
return false;
}
- const projectData = createProjectData(currentProjectMedia, {
+ const editorState = {
wallpaper,
shadowIntensity,
showBlur,
@@ -386,20 +453,25 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
+ webcamSizePreset,
webcamPosition,
exportQuality,
exportFormat,
gifFrameRate,
gifLoop,
gifSizePreset,
- });
+ cursorHighlight,
+ };
+ const projectData = createProjectData(currentProjectMedia, editorState);
const fileNameBase =
currentProjectMedia.screenVideoPath
.split(/[\\/]/)
.pop()
?.replace(/\.[^.]+$/, "") || `project-${Date.now()}`;
- const projectSnapshot = JSON.stringify(projectData);
+ // Match the normalization path used by `currentProjectSnapshot` so the
+ // post-save baseline compares equal and `hasUnsavedChanges` clears.
+ const projectSnapshot = createProjectSnapshot(currentProjectMedia, editorState);
const result = await window.electronAPI.saveProjectFile(
projectData,
fileNameBase,
@@ -449,6 +521,8 @@ export default function VideoEditor() {
gifSizePreset,
videoPath,
t,
+ webcamSizePreset,
+ cursorHighlight,
],
);
@@ -471,6 +545,16 @@ export default function VideoEditor() {
await saveProject(true);
}, [saveProject]);
+ const handleNewRecordingConfirm = useCallback(async () => {
+ const result = await window.electronAPI.startNewRecording();
+ if (result.success) {
+ setShowNewRecordingDialog(false);
+ } else {
+ console.error("Failed to start new recording:", result.error);
+ setError("Failed to start new recording: " + (result.error || "Unknown error"));
+ }
+ }, []);
+
const handleLoadProject = useCallback(async () => {
const result = await window.electronAPI.loadProjectFile();
@@ -479,18 +563,18 @@ export default function VideoEditor() {
}
if (!result.success) {
- toast.error(result.message || "Failed to load project");
+ toast.error(result.message || t("project.failedToLoad"));
return;
}
const restored = await applyLoadedProject(result.project, result.path ?? null);
if (!restored) {
- toast.error("Invalid project file format");
+ toast.error(t("project.invalidFormat"));
return;
}
- toast.success(`Project loaded from ${result.path}`);
- }, [applyLoadedProject]);
+ toast.success(t("project.loadedFrom", { path: result.path ?? "" }));
+ }, [applyLoadedProject, t]);
useEffect(() => {
const removeLoadListener = window.electronAPI.onMenuLoadProject(handleLoadProject);
@@ -513,6 +597,7 @@ export default function VideoEditor() {
if (!sourcePath) {
if (mounted) {
setCursorTelemetry([]);
+ setCursorClickTimestamps([]);
}
return;
}
@@ -521,11 +606,13 @@ export default function VideoEditor() {
const result = await window.electronAPI.getCursorTelemetry(sourcePath);
if (mounted) {
setCursorTelemetry(result.success ? result.samples : []);
+ setCursorClickTimestamps(result.success ? (result.clicks ?? []) : []);
}
} catch (telemetryError) {
console.warn("Unable to load cursor telemetry:", telemetryError);
if (mounted) {
setCursorTelemetry([]);
+ setCursorClickTimestamps([]);
}
}
}
@@ -572,7 +659,11 @@ export default function VideoEditor() {
const handleSelectZoom = useCallback((id: string | null) => {
setSelectedZoomId(id);
- if (id) setSelectedTrimId(null);
+ if (id) {
+ setSelectedTrimId(null);
+ setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
+ }
}, []);
const handleSelectTrim = useCallback((id: string | null) => {
@@ -580,6 +671,7 @@ export default function VideoEditor() {
if (id) {
setSelectedZoomId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
}
}, []);
@@ -588,6 +680,17 @@ export default function VideoEditor() {
if (id) {
setSelectedZoomId(null);
setSelectedTrimId(null);
+ setSelectedBlurId(null);
+ }
+ }, []);
+
+ const handleSelectBlur = useCallback((id: string | null) => {
+ setSelectedBlurId(id);
+ if (id) {
+ setSelectedZoomId(null);
+ setSelectedTrimId(null);
+ setSelectedAnnotationId(null);
+ setSelectedSpeedId(null);
}
}, []);
@@ -605,6 +708,7 @@ export default function VideoEditor() {
setSelectedZoomId(id);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -623,6 +727,7 @@ export default function VideoEditor() {
setSelectedZoomId(id);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -639,6 +744,7 @@ export default function VideoEditor() {
setSelectedTrimId(id);
setSelectedZoomId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -648,7 +754,11 @@ export default function VideoEditor() {
pushState((prev) => ({
zoomRegions: prev.zoomRegions.map((region) =>
region.id === id
- ? { ...region, startMs: Math.round(span.start), endMs: Math.round(span.end) }
+ ? {
+ ...region,
+ startMs: Math.round(span.start),
+ endMs: Math.round(span.end),
+ }
: region,
),
}));
@@ -661,7 +771,11 @@ export default function VideoEditor() {
pushState((prev) => ({
trimRegions: prev.trimRegions.map((region) =>
region.id === id
- ? { ...region, startMs: Math.round(span.start), endMs: Math.round(span.end) }
+ ? {
+ ...region,
+ startMs: Math.round(span.start),
+ endMs: Math.round(span.end),
+ }
: region,
),
}));
@@ -687,7 +801,11 @@ export default function VideoEditor() {
pushState((prev) => ({
zoomRegions: prev.zoomRegions.map((region) =>
region.id === selectedZoomId
- ? { ...region, depth, focus: clampFocusToDepth(region.focus, depth) }
+ ? {
+ ...region,
+ depth,
+ focus: clampFocusToDepth(region.focus, depth),
+ }
: region,
),
}));
@@ -709,7 +827,9 @@ export default function VideoEditor() {
const handleZoomDelete = useCallback(
(id: string) => {
- pushState((prev) => ({ zoomRegions: prev.zoomRegions.filter((r) => r.id !== id) }));
+ pushState((prev) => ({
+ zoomRegions: prev.zoomRegions.filter((r) => r.id !== id),
+ }));
if (selectedZoomId === id) {
setSelectedZoomId(null);
}
@@ -719,7 +839,9 @@ export default function VideoEditor() {
const handleTrimDelete = useCallback(
(id: string) => {
- pushState((prev) => ({ trimRegions: prev.trimRegions.filter((r) => r.id !== id) }));
+ pushState((prev) => ({
+ trimRegions: prev.trimRegions.filter((r) => r.id !== id),
+ }));
if (selectedTrimId === id) {
setSelectedTrimId(null);
}
@@ -733,6 +855,7 @@ export default function VideoEditor() {
setSelectedZoomId(null);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
}
}, []);
@@ -745,11 +868,14 @@ export default function VideoEditor() {
endMs: Math.round(span.end),
speed: DEFAULT_PLAYBACK_SPEED,
};
- pushState((prev) => ({ speedRegions: [...prev.speedRegions, newRegion] }));
+ pushState((prev) => ({
+ speedRegions: [...prev.speedRegions, newRegion],
+ }));
setSelectedSpeedId(id);
setSelectedZoomId(null);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -810,10 +936,41 @@ export default function VideoEditor() {
style: { ...DEFAULT_ANNOTATION_STYLE },
zIndex,
};
- pushState((prev) => ({ annotationRegions: [...prev.annotationRegions, newRegion] }));
+ pushState((prev) => ({
+ annotationRegions: [...prev.annotationRegions, newRegion],
+ }));
setSelectedAnnotationId(id);
setSelectedZoomId(null);
setSelectedTrimId(null);
+ setSelectedBlurId(null);
+ },
+ [pushState],
+ );
+
+ const handleBlurAdded = useCallback(
+ (span: Span) => {
+ const id = `annotation-${nextAnnotationIdRef.current++}`;
+ const zIndex = nextAnnotationZIndexRef.current++;
+ const newRegion: AnnotationRegion = {
+ id,
+ startMs: Math.round(span.start),
+ endMs: Math.round(span.end),
+ type: "blur",
+ content: "",
+ position: { ...DEFAULT_ANNOTATION_POSITION },
+ size: { ...DEFAULT_ANNOTATION_SIZE },
+ style: { ...DEFAULT_ANNOTATION_STYLE },
+ zIndex,
+ blurData: { ...DEFAULT_BLUR_DATA },
+ };
+ pushState((prev) => ({
+ annotationRegions: [...prev.annotationRegions, newRegion],
+ }));
+ setSelectedBlurId(id);
+ setSelectedAnnotationId(null);
+ setSelectedZoomId(null);
+ setSelectedTrimId(null);
+ setSelectedSpeedId(null);
},
[pushState],
);
@@ -823,7 +980,11 @@ export default function VideoEditor() {
pushState((prev) => ({
annotationRegions: prev.annotationRegions.map((region) =>
region.id === id
- ? { ...region, startMs: Math.round(span.start), endMs: Math.round(span.end) }
+ ? {
+ ...region,
+ startMs: Math.round(span.start),
+ endMs: Math.round(span.end),
+ }
: region,
),
}));
@@ -831,6 +992,33 @@ export default function VideoEditor() {
[pushState],
);
+ const handleAnnotationDuplicate = useCallback(
+ (id: string) => {
+ const duplicateId = `annotation-${nextAnnotationIdRef.current++}`;
+ const duplicateZIndex = nextAnnotationZIndexRef.current++;
+ pushState((prev) => {
+ const source = prev.annotationRegions.find((region) => region.id === id);
+ if (!source) return {};
+
+ const duplicate: AnnotationRegion = {
+ ...source,
+ id: duplicateId,
+ zIndex: duplicateZIndex,
+ position: { x: source.position.x + 4, y: source.position.y + 4 },
+ size: { ...source.size },
+ style: { ...source.style },
+ figureData: source.figureData ? { ...source.figureData } : undefined,
+ };
+
+ return { annotationRegions: [...prev.annotationRegions, duplicate] };
+ });
+ setSelectedAnnotationId(duplicateId);
+ setSelectedZoomId(null);
+ setSelectedTrimId(null);
+ },
+ [pushState],
+ );
+
const handleAnnotationDelete = useCallback(
(id: string) => {
pushState((prev) => ({
@@ -839,8 +1027,11 @@ export default function VideoEditor() {
if (selectedAnnotationId === id) {
setSelectedAnnotationId(null);
}
+ if (selectedBlurId === id) {
+ setSelectedBlurId(null);
+ }
},
- [selectedAnnotationId, pushState],
+ [selectedAnnotationId, selectedBlurId, pushState],
);
const handleAnnotationContentChange = useCallback(
@@ -875,12 +1066,26 @@ export default function VideoEditor() {
if (!region.figureData) {
updatedRegion.figureData = { ...DEFAULT_FIGURE_DATA };
}
+ } else if (type === "blur") {
+ updatedRegion.content = "";
+ if (!region.blurData) {
+ updatedRegion.blurData = { ...DEFAULT_BLUR_DATA };
+ }
}
return updatedRegion;
}),
}));
+
+ if (type === "blur" && selectedAnnotationId === id) {
+ setSelectedAnnotationId(null);
+ setSelectedBlurId(id);
+ setSelectedSpeedId(null);
+ } else if (type !== "blur" && selectedBlurId === id) {
+ setSelectedBlurId(null);
+ setSelectedAnnotationId(id);
+ }
},
- [pushState],
+ [pushState, selectedAnnotationId, selectedBlurId],
);
const handleAnnotationStyleChange = useCallback(
@@ -905,6 +1110,51 @@ export default function VideoEditor() {
[pushState],
);
+ const handleBlurDataPreviewChange = useCallback(
+ (id: string, blurData: BlurData) => {
+ updateState((prev) => ({
+ annotationRegions: prev.annotationRegions.map((region) =>
+ region.id === id
+ ? {
+ ...region,
+ blurData,
+ // Freehand drawing area is the full video surface.
+ ...(blurData.shape === "freehand"
+ ? {
+ position: { x: 0, y: 0 },
+ size: { width: 100, height: 100 },
+ }
+ : {}),
+ }
+ : region,
+ ),
+ }));
+ },
+ [updateState],
+ );
+
+ const handleBlurDataPanelChange = useCallback(
+ (id: string, blurData: BlurData) => {
+ pushState((prev) => ({
+ annotationRegions: prev.annotationRegions.map((region) =>
+ region.id === id
+ ? {
+ ...region,
+ blurData,
+ ...(blurData.shape === "freehand"
+ ? {
+ position: { x: 0, y: 0 },
+ size: { width: 100, height: 100 },
+ }
+ : {}),
+ }
+ : region,
+ ),
+ }));
+ },
+ [pushState],
+ );
+
const handleAnnotationPositionChange = useCallback(
(id: string, position: { x: number; y: number }) => {
pushState((prev) => ({
@@ -945,6 +1195,40 @@ export default function VideoEditor() {
return;
}
+ // Frame-step navigation (arrow keys, no modifiers)
+ if (
+ (e.key === "ArrowLeft" || e.key === "ArrowRight") &&
+ !e.ctrlKey &&
+ !e.metaKey &&
+ !e.shiftKey &&
+ !e.altKey
+ ) {
+ const target = e.target;
+ if (
+ target instanceof HTMLInputElement ||
+ target instanceof HTMLTextAreaElement ||
+ target instanceof HTMLSelectElement ||
+ (target instanceof HTMLElement &&
+ (target.isContentEditable ||
+ target.closest('[role="separator"], [role="slider"], [role="spinbutton"]')))
+ ) {
+ return;
+ }
+ e.preventDefault();
+ const video = videoPlaybackRef.current?.video;
+ if (!video) {
+ return;
+ }
+ const direction = e.key === "ArrowLeft" ? "backward" : "forward";
+ const newTime = computeFrameStepTime(
+ video.currentTime,
+ Number.isFinite(video.duration) ? video.duration : durationRef.current,
+ direction,
+ );
+ video.currentTime = newTime;
+ return;
+ }
+
const isInput =
e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
@@ -984,11 +1268,14 @@ export default function VideoEditor() {
useEffect(() => {
if (
selectedAnnotationId &&
- !annotationRegions.some((region) => region.id === selectedAnnotationId)
+ !annotationOnlyRegions.some((region) => region.id === selectedAnnotationId)
) {
setSelectedAnnotationId(null);
}
- }, [selectedAnnotationId, annotationRegions]);
+ if (selectedBlurId && !blurRegions.some((region) => region.id === selectedBlurId)) {
+ setSelectedBlurId(null);
+ }
+ }, [selectedAnnotationId, selectedBlurId, annotationOnlyRegions, blurRegions]);
useEffect(() => {
if (selectedSpeedId && !speedRegions.some((region) => region.id === selectedSpeedId)) {
@@ -1014,17 +1301,22 @@ export default function VideoEditor() {
const handleExportSaved = useCallback(
(formatLabel: "GIF" | "Video", filePath: string) => {
setExportedFilePath(filePath);
- toast.success(`${formatLabel} exported successfully`, {
- description: filePath,
- action: {
- label: "Show in Folder",
- onClick: () => {
- void handleShowExportedFile(filePath);
+ toast.success(
+ t("export.exportedSuccessfully", {
+ format: formatLabel,
+ }),
+ {
+ description: filePath,
+ action: {
+ label: rawT("common.actions.showInFolder"),
+ onClick: () => {
+ void handleShowExportedFile(filePath);
+ },
},
},
- });
+ );
},
- [handleShowExportedFile],
+ [handleShowExportedFile, t, rawT],
);
const handleSaveUnsavedExport = useCallback(async () => {
@@ -1110,10 +1402,13 @@ export default function VideoEditor() {
annotationRegions,
webcamLayoutPreset,
webcamMaskShape,
+ webcamSizePreset,
webcamPosition,
previewWidth,
previewHeight,
cursorTelemetry,
+ cursorClickTimestamps,
+ cursorHighlight: effectiveCursorHighlight,
onProgress: (progress: ExportProgress) => {
setExportProgress(progress);
},
@@ -1127,6 +1422,12 @@ export default function VideoEditor() {
const timestamp = Date.now();
const fileName = `export-${timestamp}.gif`;
+ if (result.warnings) {
+ for (const warning of result.warnings) {
+ toast.warning(warning);
+ }
+ }
+
const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
if (saveResult.canceled) {
@@ -1243,10 +1544,13 @@ export default function VideoEditor() {
annotationRegions,
webcamLayoutPreset,
webcamMaskShape,
+ webcamSizePreset,
webcamPosition,
previewWidth,
previewHeight,
cursorTelemetry,
+ cursorClickTimestamps,
+ cursorHighlight: effectiveCursorHighlight,
onProgress: (progress: ExportProgress) => {
setExportProgress(progress);
},
@@ -1260,6 +1564,12 @@ export default function VideoEditor() {
const timestamp = Date.now();
const fileName = `export-${timestamp}.mp4`;
+ if (result.warnings) {
+ for (const warning of result.warnings) {
+ toast.warning(warning);
+ }
+ }
+
const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
if (saveResult.canceled) {
@@ -1283,9 +1593,15 @@ export default function VideoEditor() {
}
} catch (error) {
console.error("Export error:", error);
- const errorMessage = error instanceof Error ? error.message : "Unknown error";
- setExportError(errorMessage);
- toast.error(`Export failed: ${errorMessage}`);
+ if (error instanceof BackgroundLoadError) {
+ const message = t("errors.exportBackgroundLoadFailed", { url: error.displayUrl });
+ setExportError(message);
+ toast.error(message);
+ } else {
+ const errorMessage = error instanceof Error ? error.message : "Unknown error";
+ setExportError(errorMessage);
+ toast.error(t("errors.exportFailedWithError", { error: errorMessage }));
+ }
} finally {
setIsExporting(false);
exporterRef.current = null;
@@ -1313,10 +1629,14 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
+ webcamSizePreset,
webcamPosition,
exportQuality,
handleExportSaved,
cursorTelemetry,
+ cursorClickTimestamps,
+ effectiveCursorHighlight,
+ t,
],
);
@@ -1395,7 +1715,7 @@ export default function VideoEditor() {
if (loading) {
return (
-
Loading video...
+
{t("loadingVideo")}
@@ -1418,6 +1738,34 @@ export default function VideoEditor() {
return (
+
+
+
+ {t("newRecording.title")}
+ {t("newRecording.description")}
+
+
+ setShowNewRecordingDialog(false)}
+ className="px-4 py-2 rounded-md bg-white/10 text-white hover:bg-white/20 text-sm font-medium transition-colors"
+ >
+ {t("newRecording.cancel")}
+
+
+ {t("newRecording.confirm")}
+
+
+
+
+
- {SUPPORTED_LOCALES.map((loc) => (
+ {availableLocales.map((loc) => (
{getLocaleName(loc)}
))}
+
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"
+ >
+
updateState({ webcamPosition: pos })}
onWebcamPositionDragEnd={commitState}
@@ -1523,12 +1880,21 @@ export default function VideoEditor() {
cropRegion={cropRegion}
trimRegions={trimRegions}
speedRegions={speedRegions}
- annotationRegions={annotationRegions}
+ annotationRegions={annotationOnlyRegions}
selectedAnnotationId={selectedAnnotationId}
onSelectAnnotation={handleSelectAnnotation}
onAnnotationPositionChange={handleAnnotationPositionChange}
onAnnotationSizeChange={handleAnnotationSizeChange}
+ blurRegions={blurRegions}
+ selectedBlurId={selectedBlurId}
+ onSelectBlur={handleSelectBlur}
+ onBlurPositionChange={handleAnnotationPositionChange}
+ onBlurSizeChange={handleAnnotationSizeChange}
+ onBlurDataChange={handleBlurDataPreviewChange}
+ onBlurDataCommit={commitState}
cursorTelemetry={cursorTelemetry}
+ cursorHighlight={effectiveCursorHighlight}
+ cursorClickTimestamps={cursorClickTimestamps}
/>
pushState({ cursorHighlight: next })}
+ cursorHighlightSupportsClicks={isMac}
selected={wallpaper}
onWallpaperChange={(w) => pushState({ wallpaper: w })}
selectedZoomDepth={
@@ -1644,11 +2020,14 @@ export default function VideoEditor() {
onWebcamLayoutPresetChange={(preset) =>
pushState({
webcamLayoutPreset: preset,
- webcamPosition: preset === "vertical-stack" ? null : webcamPosition,
+ webcamPosition: preset === "picture-in-picture" ? webcamPosition : null,
})
}
webcamMaskShape={webcamMaskShape}
onWebcamMaskShapeChange={(shape) => pushState({ webcamMaskShape: shape })}
+ webcamSizePreset={webcamSizePreset}
+ onWebcamSizePresetChange={(v) => updateState({ webcamSizePreset: v })}
+ onWebcamSizePresetCommit={commitState}
videoElement={videoPlaybackRef.current?.video || null}
exportQuality={exportQuality}
onExportQualityChange={setExportQuality}
@@ -1675,12 +2054,18 @@ export default function VideoEditor() {
)}
onExport={handleOpenExportDialog}
selectedAnnotationId={selectedAnnotationId}
- annotationRegions={annotationRegions}
+ annotationRegions={annotationOnlyRegions}
onAnnotationContentChange={handleAnnotationContentChange}
onAnnotationTypeChange={handleAnnotationTypeChange}
onAnnotationStyleChange={handleAnnotationStyleChange}
onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+ onAnnotationDuplicate={handleAnnotationDuplicate}
onAnnotationDelete={handleAnnotationDelete}
+ selectedBlurId={selectedBlurId}
+ blurRegions={blurRegions}
+ onBlurDataChange={handleBlurDataPanelChange}
+ onBlurDataCommit={commitState}
+ onBlurDelete={handleAnnotationDelete}
selectedSpeedId={selectedSpeedId}
selectedSpeedValue={
selectedSpeedId
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index d659afe..a69c8d7 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -18,13 +18,14 @@ import {
useRef,
useState,
} from "react";
-import { getAssetPath } from "@/lib/assetPath";
import {
getWebcamLayoutCssBoxShadow,
type Size,
type StyledRenderRect,
type WebcamLayoutPreset,
+ type WebcamSizePreset,
} from "@/lib/compositeLayout";
+import { classifyWallpaper, DEFAULT_WALLPAPER, resolveImageWallpaperUrl } from "@/lib/wallpaper";
import { getCssClipPath } from "@/lib/webcamMaskShapes";
import {
type AspectRatio,
@@ -34,6 +35,7 @@ import {
import { AnnotationOverlay } from "./AnnotationOverlay";
import {
type AnnotationRegion,
+ type BlurData,
type SpeedRegion,
type TrimRegion,
ZOOM_DEPTH_SCALES,
@@ -49,7 +51,17 @@ import {
ZOOM_SCALE_DEADZONE,
ZOOM_TRANSLATION_DEADZONE_PX,
} from "./videoPlayback/constants";
-import { adaptiveSmoothFactor, smoothCursorFocus } from "./videoPlayback/cursorFollowUtils";
+import {
+ adaptiveSmoothFactor,
+ interpolateCursorAt,
+ smoothCursorFocus,
+} from "./videoPlayback/cursorFollowUtils";
+import {
+ type CursorHighlightConfig,
+ clickEmphasisAlpha,
+ DEFAULT_CURSOR_HIGHLIGHT,
+ drawCursorHighlightGraphics,
+} from "./videoPlayback/cursorHighlight";
import { clampFocusToStage as clampFocusToStageUtil } from "./videoPlayback/focusUtils";
import { layoutVideoContent as layoutVideoContentUtil } from "./videoPlayback/layoutUtils";
import { clamp01 } from "./videoPlayback/mathUtils";
@@ -69,6 +81,7 @@ interface VideoPlaybackProps {
webcamVideoPath?: string;
webcamLayoutPreset: WebcamLayoutPreset;
webcamMaskShape?: import("./types").WebcamMaskShape;
+ webcamSizePreset?: WebcamSizePreset;
webcamPosition?: { cx: number; cy: number } | null;
onWebcamPositionChange?: (position: { cx: number; cy: number }) => void;
onWebcamPositionDragEnd?: () => void;
@@ -99,7 +112,16 @@ interface VideoPlaybackProps {
onSelectAnnotation?: (id: string | null) => void;
onAnnotationPositionChange?: (id: string, position: { x: number; y: number }) => void;
onAnnotationSizeChange?: (id: string, size: { width: number; height: number }) => void;
+ blurRegions?: AnnotationRegion[];
+ selectedBlurId?: string | null;
+ onSelectBlur?: (id: string | null) => void;
+ onBlurPositionChange?: (id: string, position: { x: number; y: number }) => void;
+ onBlurSizeChange?: (id: string, size: { width: number; height: number }) => void;
+ onBlurDataChange?: (id: string, blurData: BlurData) => void;
+ onBlurDataCommit?: () => void;
cursorTelemetry?: import("./types").CursorTelemetryPoint[];
+ cursorHighlight?: CursorHighlightConfig;
+ cursorClickTimestamps?: number[];
}
export interface VideoPlaybackRef {
@@ -119,6 +141,7 @@ const VideoPlayback = forwardRef(
webcamVideoPath,
webcamLayoutPreset,
webcamMaskShape,
+ webcamSizePreset,
webcamPosition,
onWebcamPositionChange,
onWebcamPositionDragEnd,
@@ -149,7 +172,16 @@ const VideoPlayback = forwardRef(
onSelectAnnotation,
onAnnotationPositionChange,
onAnnotationSizeChange,
+ blurRegions = [],
+ selectedBlurId,
+ onSelectBlur,
+ onBlurPositionChange,
+ onBlurSizeChange,
+ onBlurDataChange,
+ onBlurDataCommit,
cursorTelemetry = [],
+ cursorHighlight = DEFAULT_CURSOR_HIGHLIGHT,
+ cursorClickTimestamps = [],
},
ref,
) => {
@@ -163,13 +195,19 @@ const VideoPlayback = forwardRef(
const timeUpdateAnimationRef = useRef(null);
const [pixiReady, setPixiReady] = useState(false);
const [videoReady, setVideoReady] = useState(false);
+ const [overlaySize, setOverlaySize] = useState({ width: 800, height: 600 });
+ const [overlayElement, setOverlayElement] = useState(null);
const overlayRef = useRef(null);
+
const focusIndicatorRef = useRef(null);
const [webcamLayout, setWebcamLayout] = useState(null);
const [webcamDimensions, setWebcamDimensions] = useState(null);
const currentTimeRef = useRef(0);
const zoomRegionsRef = useRef([]);
const cursorTelemetryRef = useRef([]);
+ const cursorHighlightRef = useRef(DEFAULT_CURSOR_HIGHLIGHT);
+ const cursorClickTimestampsRef = useRef([]);
+ const cursorHighlightGraphicsRef = useRef(null);
const selectedZoomIdRef = useRef(null);
const animationStateRef = useRef({
scale: 1,
@@ -195,7 +233,10 @@ const VideoPlayback = forwardRef(
const isPlayingRef = useRef(isPlaying);
const isSeekingRef = useRef(false);
const allowPlaybackRef = useRef(false);
- const lockedVideoDimensionsRef = useRef<{ width: number; height: number } | null>(null);
+ const lockedVideoDimensionsRef = useRef<{
+ width: number;
+ height: number;
+ } | null>(null);
const layoutVideoContentRef = useRef<(() => void) | null>(null);
const trimRegionsRef = useRef([]);
const speedRegionsRef = useRef([]);
@@ -283,6 +324,7 @@ const VideoPlayback = forwardRef(
padding,
webcamDimensions,
webcamLayoutPreset,
+ webcamSizePreset,
webcamPosition,
webcamMaskShape,
});
@@ -314,6 +356,7 @@ const VideoPlayback = forwardRef(
padding,
webcamDimensions,
webcamLayoutPreset,
+ webcamSizePreset,
webcamPosition,
webcamMaskShape,
]);
@@ -322,6 +365,11 @@ const VideoPlayback = forwardRef(
layoutVideoContentRef.current = layoutVideoContent;
}, [layoutVideoContent]);
+ const setOverlayRefs = useCallback((node: HTMLDivElement | null) => {
+ overlayRef.current = node;
+ setOverlayElement(node);
+ }, []);
+
const selectedZoom = useMemo(() => {
if (!selectedZoomId) return null;
return zoomRegions.find((region) => region.id === selectedZoomId) ?? null;
@@ -338,7 +386,10 @@ const VideoPlayback = forwardRef(
if (!vid) return;
try {
allowPlaybackRef.current = true;
- await vid.play();
+ await vid.play().catch((err) => {
+ console.log("PLAY ERROR:", err);
+ throw err;
+ });
} catch (error) {
allowPlaybackRef.current = false;
throw error;
@@ -481,6 +532,17 @@ const VideoPlayback = forwardRef(
cursorTelemetryRef.current = cursorTelemetry;
}, [cursorTelemetry]);
+ useEffect(() => {
+ cursorHighlightRef.current = cursorHighlight;
+ if (cursorHighlightGraphicsRef.current) {
+ drawCursorHighlightGraphics(cursorHighlightGraphicsRef.current, cursorHighlight);
+ }
+ }, [cursorHighlight]);
+
+ useEffect(() => {
+ cursorClickTimestampsRef.current = cursorClickTimestamps;
+ }, [cursorClickTimestamps]);
+
useEffect(() => {
selectedZoomIdRef.current = selectedZoomId;
}, [selectedZoomId]);
@@ -511,84 +573,24 @@ const VideoPlayback = forwardRef(
useEffect(() => {
if (!pixiReady || !videoReady) return;
+ const el = overlayRef.current;
+ if (!el) return;
- const app = appRef.current;
- const cameraContainer = cameraContainerRef.current;
- const video = videoRef.current;
+ // Seed immediately so overlays never start at 800×600
+ setOverlaySize({ width: el.clientWidth, height: el.clientHeight });
- if (!app || !cameraContainer || !video) return;
-
- const tickerWasStarted = app.ticker?.started || false;
- if (tickerWasStarted && app.ticker) {
- app.ticker.stop();
- }
-
- const wasPlaying = !video.paused;
- if (wasPlaying) {
- video.pause();
- }
-
- animationStateRef.current = {
- scale: 1,
- focusX: DEFAULT_FOCUS.cx,
- focusY: DEFAULT_FOCUS.cy,
- progress: 0,
- x: 0,
- y: 0,
- appliedScale: 1,
- };
-
- // Reset motion blur state for clean transitions
- motionBlurStateRef.current = createMotionBlurState();
-
- if (blurFilterRef.current) {
- blurFilterRef.current.blur = 0;
- }
-
- requestAnimationFrame(() => {
- const container = cameraContainerRef.current;
- const videoStage = videoContainerRef.current;
- const sprite = videoSpriteRef.current;
- const currentApp = appRef.current;
- if (!container || !videoStage || !sprite || !currentApp) {
- return;
- }
-
- container.scale.set(1);
- container.position.set(0, 0);
- videoStage.scale.set(1);
- videoStage.position.set(0, 0);
- sprite.scale.set(1);
- sprite.position.set(0, 0);
-
- layoutVideoContent();
-
- applyZoomTransform({
- cameraContainer: container,
- blurFilter: blurFilterRef.current,
- stageSize: stageSizeRef.current,
- baseMask: baseMaskRef.current,
- zoomScale: 1,
- focusX: DEFAULT_FOCUS.cx,
- focusY: DEFAULT_FOCUS.cy,
- motionIntensity: 0,
- isPlaying: false,
- motionBlurAmount: motionBlurAmountRef.current,
- });
-
- requestAnimationFrame(() => {
- const finalApp = appRef.current;
- if (wasPlaying && video) {
- video.play().catch(() => {
- // Ignore autoplay restoration failures.
- });
- }
- if (tickerWasStarted && finalApp?.ticker) {
- finalApp.ticker.start();
- }
+ const observer = new ResizeObserver((entries) => {
+ if (!entries[0]) return;
+ const { width, height } = entries[0].contentRect;
+ setOverlaySize((prev) => {
+ if (prev.width === width && prev.height === height) return prev;
+ return { width, height };
});
});
- }, [pixiReady, videoReady, layoutVideoContent]);
+
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, [pixiReady, videoReady]);
useEffect(() => {
if (!pixiReady || !videoReady) return;
@@ -615,7 +617,8 @@ const VideoPlayback = forwardRef(
}, [selectedZoom, pixiReady, videoReady, updateOverlayForRegion]);
useEffect(() => {
- const overlayEl = overlayRef.current;
+ if (!pixiReady || !videoReady) return;
+ const overlayEl = overlayElement;
if (!overlayEl) return;
if (!selectedZoom) {
overlayEl.style.cursor = "default";
@@ -624,7 +627,34 @@ const VideoPlayback = forwardRef(
}
overlayEl.style.cursor = isPlaying ? "not-allowed" : "grab";
overlayEl.style.pointerEvents = isPlaying ? "none" : "auto";
- }, [selectedZoom, isPlaying]);
+ }, [selectedZoom, isPlaying, pixiReady, videoReady, overlayElement]);
+
+ useEffect(() => {
+ const overlayEl = overlayElement;
+ if (!overlayEl) return;
+
+ const updateOverlaySize = () => {
+ const width = overlayEl.clientWidth || 800;
+ const height = overlayEl.clientHeight || 600;
+ setOverlaySize((prev) => {
+ if (prev.width === width && prev.height === height) return prev;
+ return { width, height };
+ });
+ };
+
+ updateOverlaySize();
+
+ if (typeof ResizeObserver !== "undefined") {
+ const observer = new ResizeObserver(() => {
+ updateOverlaySize();
+ });
+ observer.observe(overlayEl);
+ return () => observer.disconnect();
+ }
+
+ window.addEventListener("resize", updateOverlaySize);
+ return () => window.removeEventListener("resize", updateOverlaySize);
+ }, [overlayElement]);
useEffect(() => {
const container = containerRef.current;
@@ -648,7 +678,11 @@ const VideoPlayback = forwardRef(
app.ticker.maxFPS = 60;
if (!mounted) {
- app.destroy(true, { children: true, texture: true, textureSource: true });
+ app.destroy(true, {
+ children: true,
+ texture: true,
+ textureSource: true,
+ });
return;
}
@@ -672,7 +706,11 @@ const VideoPlayback = forwardRef(
mounted = false;
setPixiReady(false);
if (app && app.renderer) {
- app.destroy(true, { children: true, texture: true, textureSource: true });
+ app.destroy(true, {
+ children: true,
+ texture: true,
+ textureSource: true,
+ });
}
appRef.current = null;
cameraContainerRef.current = null;
@@ -728,6 +766,12 @@ const VideoPlayback = forwardRef(
videoContainer.mask = maskGraphics;
maskGraphicsRef.current = maskGraphics;
+ const cursorHighlightGraphics = new Graphics();
+ cursorHighlightGraphics.visible = false;
+ videoContainer.addChild(cursorHighlightGraphics);
+ cursorHighlightGraphicsRef.current = cursorHighlightGraphics;
+ drawCursorHighlightGraphics(cursorHighlightGraphics, cursorHighlightRef.current);
+
animationStateRef.current = {
scale: 1,
focusX: DEFAULT_FOCUS.cx,
@@ -743,7 +787,6 @@ const VideoPlayback = forwardRef(
blurFilter.resolution = app.renderer.resolution;
blurFilter.blur = 0;
const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
- videoContainer.filters = [blurFilter, motionBlurFilter];
blurFilterRef.current = blurFilter;
motionBlurFilterRef.current = motionBlurFilter;
@@ -788,10 +831,15 @@ const VideoPlayback = forwardRef(
videoContainer.removeChild(maskGraphics);
maskGraphics.destroy();
}
+ if (cursorHighlightGraphicsRef.current) {
+ videoContainer.removeChild(cursorHighlightGraphicsRef.current);
+ cursorHighlightGraphicsRef.current.destroy();
+ cursorHighlightGraphicsRef.current = null;
+ }
videoContainer.mask = null;
maskGraphicsRef.current = null;
if (blurFilterRef.current) {
- videoContainer.filters = [];
+ videoContainer.filters = null;
blurFilterRef.current.destroy();
blurFilterRef.current = null;
}
@@ -848,17 +896,15 @@ const VideoPlayback = forwardRef(
state.appliedScale = appliedTransform.scale;
};
+ let lastMotionBlurActive: boolean | null = null;
const ticker = () => {
- const bm = baseMaskRef.current;
- const ss = stageSizeRef.current;
- const viewportRatio =
- bm.width > 0 && bm.height > 0
- ? { widthRatio: ss.width / bm.width, heightRatio: ss.height / bm.height }
- : undefined;
const { region, strength, blendedScale, transition } = findDominantRegion(
zoomRegionsRef.current,
currentTimeRef.current,
- { connectZooms: true, cursorTelemetry: cursorTelemetryRef.current, viewportRatio },
+ {
+ connectZooms: true,
+ cursorTelemetry: cursorTelemetryRef.current,
+ },
);
const defaultFocus = DEFAULT_FOCUS;
@@ -1008,6 +1054,56 @@ const VideoPlayback = forwardRef(
motionIntensity,
motionVector,
);
+
+ const cursorGraphics = cursorHighlightGraphicsRef.current;
+ const cursorConfig = cursorHighlightRef.current;
+ const lockedDims = lockedVideoDimensionsRef.current;
+ if (cursorGraphics) {
+ if (cursorConfig.enabled && lockedDims && cursorTelemetryRef.current.length > 0) {
+ const emphasisAlpha = clickEmphasisAlpha(
+ currentTimeRef.current,
+ cursorClickTimestampsRef.current,
+ cursorConfig,
+ );
+ const cursorPoint =
+ emphasisAlpha > 0
+ ? interpolateCursorAt(cursorTelemetryRef.current, currentTimeRef.current)
+ : null;
+ if (cursorPoint) {
+ const baseScale = baseScaleRef.current;
+ const baseOffset = baseOffsetRef.current;
+ const cx = cursorPoint.cx + cursorConfig.offsetXNorm;
+ const cy = cursorPoint.cy + cursorConfig.offsetYNorm;
+ cursorGraphics.position.set(
+ baseOffset.x + cx * lockedDims.width * baseScale,
+ baseOffset.y + cy * lockedDims.height * baseScale,
+ );
+ cursorGraphics.alpha = emphasisAlpha;
+ cursorGraphics.visible = true;
+ } else {
+ cursorGraphics.visible = false;
+ }
+ } else {
+ cursorGraphics.visible = false;
+ }
+ }
+
+ const isMotionBlurActive = (motionBlurAmountRef.current || 0) > 0 && isPlayingRef.current;
+
+ if (isMotionBlurActive !== lastMotionBlurActive && videoContainerRef.current) {
+ if (isMotionBlurActive) {
+ if (blurFilterRef.current && motionBlurFilterRef.current) {
+ videoContainerRef.current.filters = [
+ blurFilterRef.current,
+ motionBlurFilterRef.current,
+ ];
+ lastMotionBlurActive = true;
+ }
+ } else {
+ videoContainerRef.current.filters = null;
+ lastMotionBlurActive = false;
+ }
+ }
};
app.ticker.add(ticker);
@@ -1045,7 +1141,17 @@ const VideoPlayback = forwardRef(
videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
};
- const [resolvedWallpaper, setResolvedWallpaper] = useState(null);
+ const resolvedWallpaper = useMemo(() => {
+ const source = wallpaper || DEFAULT_WALLPAPER;
+ const classified = classifyWallpaper(source);
+ if (classified.kind !== "image") return classified.value;
+ try {
+ return resolveImageWallpaperUrl(classified.path);
+ } catch (err) {
+ console.warn("[VideoPlayback] wallpaper resolve failed:", err);
+ return null;
+ }
+ }, [wallpaper]);
const webcamCssBoxShadow = useMemo(
() => getWebcamLayoutCssBoxShadow(webcamLayoutPreset),
[webcamLayoutPreset],
@@ -1113,58 +1219,6 @@ const VideoPlayback = forwardRef(
webcamVideo.currentTime = 0;
}, [webcamVideoPath]);
- useEffect(() => {
- let mounted = true;
- (async () => {
- try {
- if (!wallpaper) {
- const def = await getAssetPath("wallpapers/wallpaper1.jpg");
- if (mounted) setResolvedWallpaper(def);
- return;
- }
-
- if (
- wallpaper.startsWith("#") ||
- wallpaper.startsWith("linear-gradient") ||
- wallpaper.startsWith("radial-gradient")
- ) {
- if (mounted) setResolvedWallpaper(wallpaper);
- return;
- }
-
- // If it's a data URL (custom uploaded image), use as-is
- if (wallpaper.startsWith("data:")) {
- if (mounted) setResolvedWallpaper(wallpaper);
- return;
- }
-
- // If it's an absolute web/http or file path, use as-is
- if (
- wallpaper.startsWith("http") ||
- wallpaper.startsWith("file://") ||
- wallpaper.startsWith("/")
- ) {
- // If it's an absolute server path (starts with '/'), resolve via getAssetPath as well
- if (wallpaper.startsWith("/")) {
- const rel = wallpaper.replace(/^\//, "");
- const p = await getAssetPath(rel);
- if (mounted) setResolvedWallpaper(p);
- return;
- }
- if (mounted) setResolvedWallpaper(wallpaper);
- return;
- }
- const p = await getAssetPath(wallpaper.replace(/^\//, ""));
- if (mounted) setResolvedWallpaper(p);
- } catch (_err) {
- if (mounted) setResolvedWallpaper(wallpaper || "/wallpapers/wallpaper1.jpg");
- }
- })();
- return () => {
- mounted = false;
- };
- }, [wallpaper]);
-
useEffect(() => {
return () => {
if (videoReadyRafRef.current) {
@@ -1264,9 +1318,9 @@ const VideoPlayback = forwardRef(
{/* Only render overlay after PIXI and video are fully initialized */}
{pixiReady && videoReady && (
(
style={{ display: "none", pointerEvents: "none" }}
/>
{(() => {
- const filtered = (annotationRegions || []).filter((annotation) => {
+ const filteredAnnotations = (annotationRegions || []).filter((annotation) => {
if (typeof annotation.startMs !== "number" || typeof annotation.endMs !== "number")
return false;
if (annotation.id === selectedAnnotationId) return true;
const timeMs = Math.round(currentTime * 1000);
- return timeMs >= annotation.startMs && timeMs <= annotation.endMs;
+ return timeMs >= annotation.startMs && timeMs < annotation.endMs;
});
- // Sort by z-index (lowest to highest) so higher z-index renders on top
- const sorted = [...filtered].sort((a, b) => a.zIndex - b.zIndex);
+ const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
+ if (typeof blurRegion.startMs !== "number" || typeof blurRegion.endMs !== "number")
+ return false;
+
+ if (blurRegion.id === selectedBlurId) return true;
+
+ const timeMs = Math.round(currentTime * 1000);
+ return timeMs >= blurRegion.startMs && timeMs < blurRegion.endMs;
+ });
+
+ const sorted = [
+ ...filteredAnnotations.map((annotation) => ({
+ kind: "annotation" as const,
+ region: annotation,
+ })),
+ ...filteredBlurRegions.map((blurRegion) => ({
+ kind: "blur" as const,
+ region: blurRegion,
+ })),
+ ].sort((a, b) => a.region.zIndex - b.region.zIndex);
+ const previewSnapshotCanvas =
+ filteredBlurRegions.length > 0
+ ? (() => {
+ const app = appRef.current;
+ if (!app?.renderer?.extract) return null;
+ try {
+ return app.renderer.extract.canvas(app.stage);
+ } catch {
+ return null;
+ }
+ })()
+ : null;
// Handle click-through cycling: when clicking same annotation, cycle to next
const handleAnnotationClick = (clickedId: string) => {
if (!onSelectAnnotation) return;
// If clicking on already selected annotation and there are multiple overlapping
- if (clickedId === selectedAnnotationId && sorted.length > 1) {
+ if (clickedId === selectedAnnotationId && filteredAnnotations.length > 1) {
// Find current index and cycle to next
- const currentIndex = sorted.findIndex((a) => a.id === clickedId);
- const nextIndex = (currentIndex + 1) % sorted.length;
- onSelectAnnotation(sorted[nextIndex].id);
+ const currentIndex = filteredAnnotations.findIndex((a) => a.id === clickedId);
+ const nextIndex = (currentIndex + 1) % filteredAnnotations.length;
+ onSelectAnnotation(filteredAnnotations[nextIndex].id);
} else {
// First click or clicking different annotation
onSelectAnnotation(clickedId);
}
};
- return sorted.map((annotation) => (
+ const handleBlurClick = (clickedId: string) => {
+ if (!onSelectBlur) return;
+
+ if (clickedId === selectedBlurId && filteredBlurRegions.length > 1) {
+ const currentIndex = filteredBlurRegions.findIndex((a) => a.id === clickedId);
+ const nextIndex = (currentIndex + 1) % filteredBlurRegions.length;
+ onSelectBlur(filteredBlurRegions[nextIndex].id);
+ } else {
+ onSelectBlur(clickedId);
+ }
+ };
+
+ return sorted.map((item) => (
onAnnotationPositionChange?.(id, position)}
- onSizeChange={(id, size) => onAnnotationSizeChange?.(id, size)}
- onClick={handleAnnotationClick}
- zIndex={annotation.zIndex}
- isSelectedBoost={annotation.id === selectedAnnotationId}
+ key={
+ item.kind === "blur"
+ ? `${item.region.id}-${overlaySize.width}-${overlaySize.height}-${item.region.blurData?.type ?? "blur"}-${item.region.blurData?.shape ?? "rectangle"}-${item.region.blurData?.color ?? "white"}-${Math.round(item.region.blurData?.blockSize ?? 0)}-${Math.round(item.region.blurData?.intensity ?? 0)}-${(item.region.blurData?.freehandPoints ?? []).map((p) => `${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
+ : `${item.region.id}-${overlaySize.width}-${overlaySize.height}`
+ }
+ annotation={item.region}
+ isSelected={
+ item.kind === "blur"
+ ? item.region.id === selectedBlurId
+ : item.region.id === selectedAnnotationId
+ }
+ containerWidth={overlaySize.width}
+ containerHeight={overlaySize.height}
+ onPositionChange={(id, position) =>
+ item.kind === "blur"
+ ? onBlurPositionChange?.(id, position)
+ : onAnnotationPositionChange?.(id, position)
+ }
+ onSizeChange={(id, size) =>
+ item.kind === "blur"
+ ? onBlurSizeChange?.(id, size)
+ : onAnnotationSizeChange?.(id, size)
+ }
+ onBlurDataChange={
+ item.kind === "blur"
+ ? (id, blurData) => onBlurDataChange?.(id, blurData)
+ : undefined
+ }
+ onBlurDataCommit={item.kind === "blur" ? onBlurDataCommit : undefined}
+ onClick={item.kind === "blur" ? handleBlurClick : handleAnnotationClick}
+ zIndex={item.region.zIndex}
+ isSelectedBoost={
+ item.kind === "blur"
+ ? item.region.id === selectedBlurId
+ : item.region.id === selectedAnnotationId
+ }
+ previewSourceCanvas={previewSnapshotCanvas}
+ previewFrameVersion={Math.round(currentTime * 1000)}
/>
));
})()}
diff --git a/src/components/video-editor/projectPersistence.test.ts b/src/components/video-editor/projectPersistence.test.ts
index 3243aca..8a17b9e 100644
--- a/src/components/video-editor/projectPersistence.test.ts
+++ b/src/components/video-editor/projectPersistence.test.ts
@@ -1,6 +1,8 @@
import { describe, expect, it } from "vitest";
import {
createProjectData,
+ createProjectSnapshot,
+ hasProjectUnsavedChanges,
normalizeProjectEditor,
PROJECT_VERSION,
resolveProjectMedia,
@@ -42,6 +44,7 @@ describe("projectPersistence media compatibility", () => {
aspectRatio: "16:9",
webcamLayoutPreset: "picture-in-picture",
webcamMaskShape: "circle",
+ webcamPosition: null,
exportQuality: "good",
exportFormat: "mp4",
gifFrameRate: 15,
@@ -64,4 +67,192 @@ describe("projectPersistence media compatibility", () => {
normalizeProjectEditor({ webcamMaskShape: "not-a-real-shape" as never }).webcamMaskShape,
).toBe("rectangle");
});
+
+ it("normalizes blur region type and mosaic block size safely", () => {
+ const editor = normalizeProjectEditor({
+ annotationRegions: [
+ {
+ id: "annotation-1",
+ startMs: 0,
+ endMs: 500,
+ type: "blur",
+ content: "",
+ position: { x: 10, y: 10 },
+ size: { width: 20, height: 20 },
+ style: {
+ color: "#fff",
+ backgroundColor: "transparent",
+ fontSize: 32,
+ fontFamily: "Inter",
+ fontWeight: "bold",
+ fontStyle: "normal",
+ textDecoration: "none",
+ textAlign: "center",
+ },
+ zIndex: 1,
+ blurData: {
+ type: "mosaic",
+ shape: "rectangle",
+ color: "black",
+ intensity: 999,
+ blockSize: 999,
+ },
+ },
+ {
+ id: "annotation-2",
+ startMs: 0,
+ endMs: 500,
+ type: "blur",
+ content: "",
+ position: { x: 10, y: 10 },
+ size: { width: 20, height: 20 },
+ style: {
+ color: "#fff",
+ backgroundColor: "transparent",
+ fontSize: 32,
+ fontFamily: "Inter",
+ fontWeight: "bold",
+ fontStyle: "normal",
+ textDecoration: "none",
+ textAlign: "center",
+ },
+ zIndex: 2,
+ blurData: {
+ type: "invalid" as never,
+ shape: "rectangle",
+ color: "invalid" as never,
+ intensity: 10,
+ blockSize: 0,
+ },
+ },
+ ],
+ });
+
+ expect(editor.annotationRegions[0].blurData?.type).toBe("mosaic");
+ expect(editor.annotationRegions[0].blurData?.color).toBe("black");
+ expect(editor.annotationRegions[0].blurData?.intensity).toBe(40);
+ expect(editor.annotationRegions[0].blurData?.blockSize).toBe(48);
+ expect(editor.annotationRegions[1].blurData?.type).toBe("blur");
+ expect(editor.annotationRegions[1].blurData?.color).toBe("white");
+ expect(editor.annotationRegions[1].blurData?.blockSize).toBe(4);
+ });
+
+ it("accepts the dual frame webcam layout preset", () => {
+ expect(normalizeProjectEditor({ webcamLayoutPreset: "dual-frame" }).webcamLayoutPreset).toBe(
+ "dual-frame",
+ );
+ });
+
+ it("falls back from dual frame to picture in picture for portrait aspect ratios", () => {
+ expect(
+ normalizeProjectEditor({
+ aspectRatio: "9:16",
+ webcamLayoutPreset: "dual-frame",
+ }).webcamLayoutPreset,
+ ).toBe("picture-in-picture");
+ });
+
+ it("clears webcamPosition when the normalized preset is not picture in picture", () => {
+ expect(
+ normalizeProjectEditor({
+ webcamLayoutPreset: "dual-frame",
+ webcamPosition: { cx: 0.2, cy: 0.8 },
+ }).webcamPosition,
+ ).toBeNull();
+ });
+});
+
+it("creates stable snapshots for identical project state", () => {
+ const media = {
+ screenVideoPath: "/tmp/screen.webm",
+ webcamVideoPath: "/tmp/webcam.webm",
+ };
+ const editor = normalizeProjectEditor({
+ wallpaper: "/wallpapers/wallpaper1.jpg",
+ shadowIntensity: 0,
+ showBlur: false,
+ motionBlurAmount: 0,
+ borderRadius: 0,
+ padding: 50,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ zoomRegions: [],
+ trimRegions: [],
+ speedRegions: [],
+ annotationRegions: [],
+ aspectRatio: "16:9",
+ webcamLayoutPreset: "picture-in-picture",
+ webcamMaskShape: "circle",
+ exportQuality: "good",
+ exportFormat: "mp4",
+ gifFrameRate: 15,
+ gifLoop: true,
+ gifSizePreset: "medium",
+ });
+
+ expect(createProjectSnapshot(media, editor)).toBe(createProjectSnapshot(media, editor));
+});
+
+it("detects unsaved changes from differing snapshots", () => {
+ expect(hasProjectUnsavedChanges(null, null)).toBe(false);
+ expect(hasProjectUnsavedChanges("same", "same")).toBe(false);
+ expect(hasProjectUnsavedChanges("current", "baseline")).toBe(true);
+});
+
+describe("wallpaper legacy normalization", () => {
+ it("rewrites pre-fix packaged paths (resources/assets/wallpapers/…)", () => {
+ const normalized = normalizeProjectEditor({
+ wallpaper: "file:///opt/Openscreen/resources/assets/wallpapers/wallpaper5.jpg",
+ });
+ expect(normalized.wallpaper).toBe("/wallpapers/wallpaper5.jpg");
+ });
+
+ it("rewrites new packaged layout (resources/wallpapers/…)", () => {
+ const normalized = normalizeProjectEditor({
+ wallpaper: "file:///opt/Openscreen/resources/wallpapers/wallpaper3.jpg",
+ });
+ expect(normalized.wallpaper).toBe("/wallpapers/wallpaper3.jpg");
+ });
+
+ it("rewrites unpackaged dev layout (public/wallpapers/…)", () => {
+ const normalized = normalizeProjectEditor({
+ wallpaper: "file:///home/user/project/public/wallpapers/wallpaper1.jpg",
+ });
+ expect(normalized.wallpaper).toBe("/wallpapers/wallpaper1.jpg");
+ });
+
+ it("rewrites Windows-style file URLs with drive letter", () => {
+ const normalized = normalizeProjectEditor({
+ wallpaper: "file:///C:/Users/me/openscreen/resources/wallpapers/wallpaper2.jpg",
+ });
+ expect(normalized.wallpaper).toBe("/wallpapers/wallpaper2.jpg");
+ });
+
+ it("leaves canonical relative paths untouched", () => {
+ const normalized = normalizeProjectEditor({ wallpaper: "/wallpapers/wallpaper2.jpg" });
+ expect(normalized.wallpaper).toBe("/wallpapers/wallpaper2.jpg");
+ });
+
+ it("leaves data URIs untouched", () => {
+ const dataUri = "data:image/png;base64,AAA";
+ expect(normalizeProjectEditor({ wallpaper: dataUri }).wallpaper).toBe(dataUri);
+ });
+
+ it("leaves colors and gradients untouched", () => {
+ expect(normalizeProjectEditor({ wallpaper: "#1a1a2e" }).wallpaper).toBe("#1a1a2e");
+ expect(
+ normalizeProjectEditor({ wallpaper: "linear-gradient(90deg, red, blue)" }).wallpaper,
+ ).toBe("linear-gradient(90deg, red, blue)");
+ });
+
+ it("does NOT rewrite user files outside the known install layout", () => {
+ const userPath = "file:///home/user/Pictures/wallpapers/wallpaper1.jpg";
+ expect(normalizeProjectEditor({ wallpaper: userPath }).wallpaper).toBe(userPath);
+ });
+
+ it("falls back to default for bundled paths outside WALLPAPER_PATHS", () => {
+ const normalized = normalizeProjectEditor({
+ wallpaper: "file:///opt/Openscreen/resources/wallpapers/wallpaper99.jpg",
+ });
+ expect(normalized.wallpaper).toBe("/wallpapers/wallpaper1.jpg");
+ });
});
diff --git a/src/components/video-editor/projectPersistence.ts b/src/components/video-editor/projectPersistence.ts
index d7111b1..beabbe4 100644
--- a/src/components/video-editor/projectPersistence.ts
+++ b/src/components/video-editor/projectPersistence.ts
@@ -1,34 +1,60 @@
+import { normalizeBlurColor, normalizeBlurType } from "@/lib/blurEffects";
import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
import type { ProjectMedia } from "@/lib/recordingSession";
import { normalizeProjectMedia } from "@/lib/recordingSession";
-import { ASPECT_RATIOS, type AspectRatio } from "@/utils/aspectRatioUtils";
+import { DEFAULT_WALLPAPER, WALLPAPER_PATHS } from "@/lib/wallpaper";
+import { ASPECT_RATIOS, type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
import {
type AnnotationRegion,
type CropRegion,
+ clampPlaybackSpeed,
DEFAULT_ANNOTATION_POSITION,
DEFAULT_ANNOTATION_SIZE,
DEFAULT_ANNOTATION_STYLE,
+ DEFAULT_BLUR_BLOCK_SIZE,
+ DEFAULT_BLUR_DATA,
+ DEFAULT_BLUR_FREEHAND_POINTS,
+ DEFAULT_BLUR_INTENSITY,
DEFAULT_CROP_REGION,
DEFAULT_FIGURE_DATA,
DEFAULT_PLAYBACK_SPEED,
DEFAULT_WEBCAM_LAYOUT_PRESET,
DEFAULT_WEBCAM_MASK_SHAPE,
DEFAULT_WEBCAM_POSITION,
+ DEFAULT_WEBCAM_SIZE_PRESET,
DEFAULT_ZOOM_DEPTH,
+ MAX_BLUR_BLOCK_SIZE,
+ MAX_BLUR_INTENSITY,
+ MAX_PLAYBACK_SPEED,
+ MIN_BLUR_BLOCK_SIZE,
+ MIN_BLUR_INTENSITY,
+ MIN_PLAYBACK_SPEED,
type SpeedRegion,
type TrimRegion,
type WebcamLayoutPreset,
type WebcamMaskShape,
type WebcamPosition,
+ type WebcamSizePreset,
type ZoomRegion,
} from "./types";
-const WALLPAPER_COUNT = 18;
+const VALID_BLUR_SHAPES = new Set(["rectangle", "oval", "freehand"] as const);
-export const WALLPAPER_PATHS = Array.from(
- { length: WALLPAPER_COUNT },
- (_, i) => `/wallpapers/wallpaper${i + 1}.jpg`,
-);
+// Pre-fix projects could persist resolved file:// URLs (machine-specific) for
+// bundled wallpapers. Rewrite only paths that match a known install layout
+// (resources/[assets/]wallpapers for packaged, public/wallpapers for dev) so
+// a legitimate user file that happens to live in a folder named "wallpapers"
+// elsewhere is never silently replaced.
+const LEGACY_FILE_WALLPAPER_RE =
+ /^file:\/\/.*?\/(?:resources\/(?:assets\/)?|public\/)wallpapers\/(wallpaper\d+\.jpg)$/i;
+const CANONICAL_WALLPAPERS = new Set(WALLPAPER_PATHS);
+
+function normalizeWallpaperValue(value: string): string {
+ const match = LEGACY_FILE_WALLPAPER_RE.exec(value);
+ if (!match) return value;
+ const canonical = `/wallpapers/${match[1]}`;
+ return CANONICAL_WALLPAPERS.has(canonical) ? canonical : DEFAULT_WALLPAPER;
+}
export const PROJECT_VERSION = 2;
@@ -47,12 +73,14 @@ export interface ProjectEditorState {
aspectRatio: AspectRatio;
webcamLayoutPreset: WebcamLayoutPreset;
webcamMaskShape: WebcamMaskShape;
+ webcamSizePreset: WebcamSizePreset;
webcamPosition: WebcamPosition | null;
exportQuality: ExportQuality;
exportFormat: ExportFormat;
gifFrameRate: GifFrameRate;
gifLoop: boolean;
gifSizePreset: GifSizePreset;
+ cursorHighlight: import("./videoPlayback/cursorHighlight").CursorHighlightConfig;
}
export interface EditorProjectData {
@@ -66,6 +94,26 @@ function isFiniteNumber(value: unknown): value is number {
return typeof value === "number" && Number.isFinite(value);
}
+function computeNormalizedWebcamLayoutPreset(
+ webcamLayoutPreset: Partial["webcamLayoutPreset"],
+ normalizedAspectRatio: AspectRatio,
+): WebcamLayoutPreset {
+ switch (webcamLayoutPreset) {
+ case "picture-in-picture":
+ return webcamLayoutPreset;
+ case "vertical-stack":
+ return isPortraitAspectRatio(normalizedAspectRatio)
+ ? webcamLayoutPreset
+ : DEFAULT_WEBCAM_LAYOUT_PRESET;
+ case "dual-frame":
+ return isPortraitAspectRatio(normalizedAspectRatio)
+ ? DEFAULT_WEBCAM_LAYOUT_PRESET
+ : webcamLayoutPreset;
+ default:
+ return DEFAULT_WEBCAM_LAYOUT_PRESET;
+ }
+}
+
function clamp(value: number, min: number, max: number) {
return Math.min(max, Math.max(min, value));
}
@@ -173,6 +221,26 @@ export function resolveProjectMedia(
export function normalizeProjectEditor(editor: Partial): ProjectEditorState {
const validAspectRatios = new Set(ASPECT_RATIOS);
+ const normalizedAspectRatio: AspectRatio = validAspectRatios.has(
+ editor.aspectRatio as AspectRatio,
+ )
+ ? (editor.aspectRatio as AspectRatio)
+ : "16:9";
+ const normalizedWebcamLayoutPreset = computeNormalizedWebcamLayoutPreset(
+ editor.webcamLayoutPreset,
+ normalizedAspectRatio,
+ );
+ const normalizedWebcamPosition: WebcamPosition | null =
+ normalizedWebcamLayoutPreset === "picture-in-picture" &&
+ editor.webcamPosition &&
+ typeof editor.webcamPosition === "object" &&
+ isFiniteNumber((editor.webcamPosition as WebcamPosition).cx) &&
+ isFiniteNumber((editor.webcamPosition as WebcamPosition).cy)
+ ? {
+ cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
+ cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
+ }
+ : DEFAULT_WEBCAM_POSITION;
const normalizedZoomRegions: ZoomRegion[] = Array.isArray(editor.zoomRegions)
? editor.zoomRegions
@@ -223,14 +291,10 @@ export function normalizeProjectEditor(editor: Partial): Pro
const endMs = Math.max(startMs + 1, rawEnd);
const speed =
- region.speed === 0.25 ||
- region.speed === 0.5 ||
- region.speed === 0.75 ||
- region.speed === 1.25 ||
- region.speed === 1.5 ||
- region.speed === 1.75 ||
- region.speed === 2
- ? region.speed
+ isFiniteNumber(region.speed) &&
+ region.speed >= MIN_PLAYBACK_SPEED &&
+ region.speed <= MAX_PLAYBACK_SPEED
+ ? clampPlaybackSpeed(region.speed)
: DEFAULT_PLAYBACK_SPEED;
return {
@@ -252,12 +316,22 @@ export function normalizeProjectEditor(editor: Partial): Pro
const rawEnd = isFiniteNumber(region.endMs) ? Math.round(region.endMs) : rawStart + 1000;
const startMs = Math.max(0, Math.min(rawStart, rawEnd));
const endMs = Math.max(startMs + 1, rawEnd);
+ const blurShape =
+ typeof region.blurData?.shape === "string" &&
+ VALID_BLUR_SHAPES.has(region.blurData.shape)
+ ? region.blurData.shape
+ : DEFAULT_BLUR_DATA.shape;
+ const blurType = normalizeBlurType(region.blurData?.type);
+ const blurColor = normalizeBlurColor(region.blurData?.color);
return {
id: region.id,
startMs,
endMs,
- type: region.type === "image" || region.type === "figure" ? region.type : "text",
+ type:
+ region.type === "image" || region.type === "figure" || region.type === "blur"
+ ? region.type
+ : "text",
content: typeof region.content === "string" ? region.content : "",
textContent: typeof region.textContent === "string" ? region.textContent : undefined,
imageContent: typeof region.imageContent === "string" ? region.imageContent : undefined,
@@ -304,6 +378,42 @@ export function normalizeProjectEditor(editor: Partial): Pro
...region.figureData,
}
: undefined,
+ blurData:
+ region.blurData && typeof region.blurData === "object"
+ ? {
+ ...DEFAULT_BLUR_DATA,
+ ...region.blurData,
+ type: blurType,
+ shape: blurShape,
+ color: blurColor,
+ intensity: isFiniteNumber(region.blurData.intensity)
+ ? clamp(region.blurData.intensity, MIN_BLUR_INTENSITY, MAX_BLUR_INTENSITY)
+ : DEFAULT_BLUR_INTENSITY,
+ blockSize: isFiniteNumber(region.blurData.blockSize)
+ ? clamp(region.blurData.blockSize, MIN_BLUR_BLOCK_SIZE, MAX_BLUR_BLOCK_SIZE)
+ : DEFAULT_BLUR_BLOCK_SIZE,
+ freehandPoints: Array.isArray(region.blurData.freehandPoints)
+ ? region.blurData.freehandPoints
+ .filter(
+ (
+ point,
+ ): point is {
+ x: number;
+ y: number;
+ } =>
+ Boolean(
+ point &&
+ isFiniteNumber((point as { x?: unknown }).x) &&
+ isFiniteNumber((point as { y?: unknown }).y),
+ ),
+ )
+ .map((point) => ({
+ x: clamp(point.x, 0, 100),
+ y: clamp(point.y, 0, 100),
+ }))
+ : DEFAULT_BLUR_FREEHAND_POINTS,
+ }
+ : undefined,
};
})
: [];
@@ -327,7 +437,10 @@ export function normalizeProjectEditor(editor: Partial): Pro
const cropHeight = clamp(rawCropHeight, 0.01, 1 - cropY);
return {
- wallpaper: typeof editor.wallpaper === "string" ? editor.wallpaper : WALLPAPER_PATHS[0],
+ wallpaper:
+ typeof editor.wallpaper === "string"
+ ? normalizeWallpaperValue(editor.wallpaper)
+ : DEFAULT_WALLPAPER,
shadowIntensity: typeof editor.shadowIntensity === "number" ? editor.shadowIntensity : 0,
showBlur: typeof editor.showBlur === "boolean" ? editor.showBlur : false,
motionBlurAmount: isFiniteNumber(editor.motionBlurAmount)
@@ -349,13 +462,8 @@ export function normalizeProjectEditor(editor: Partial): Pro
trimRegions: normalizedTrimRegions,
speedRegions: normalizedSpeedRegions,
annotationRegions: normalizedAnnotationRegions,
- aspectRatio:
- editor.aspectRatio && validAspectRatios.has(editor.aspectRatio) ? editor.aspectRatio : "16:9",
- webcamLayoutPreset:
- editor.webcamLayoutPreset === "vertical-stack" ||
- editor.webcamLayoutPreset === "picture-in-picture"
- ? editor.webcamLayoutPreset
- : DEFAULT_WEBCAM_LAYOUT_PRESET,
+ aspectRatio: normalizedAspectRatio,
+ webcamLayoutPreset: normalizedWebcamLayoutPreset,
webcamMaskShape:
editor.webcamMaskShape === "rectangle" ||
editor.webcamMaskShape === "circle" ||
@@ -363,16 +471,11 @@ export function normalizeProjectEditor(editor: Partial): Pro
editor.webcamMaskShape === "rounded"
? editor.webcamMaskShape
: DEFAULT_WEBCAM_MASK_SHAPE,
- webcamPosition:
- editor.webcamPosition &&
- typeof editor.webcamPosition === "object" &&
- isFiniteNumber((editor.webcamPosition as WebcamPosition).cx) &&
- isFiniteNumber((editor.webcamPosition as WebcamPosition).cy)
- ? {
- cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
- cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
- }
- : DEFAULT_WEBCAM_POSITION,
+ webcamSizePreset:
+ typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
+ ? Math.max(10, Math.min(50, editor.webcamSizePreset))
+ : DEFAULT_WEBCAM_SIZE_PRESET,
+ webcamPosition: normalizedWebcamPosition,
exportQuality:
editor.exportQuality === "medium" || editor.exportQuality === "source"
? editor.exportQuality
@@ -392,6 +495,52 @@ export function normalizeProjectEditor(editor: Partial): Pro
editor.gifSizePreset === "original"
? editor.gifSizePreset
: "medium",
+ cursorHighlight: normalizeCursorHighlight(editor.cursorHighlight),
+ };
+}
+
+function normalizeCursorHighlight(
+ value: unknown,
+): import("./videoPlayback/cursorHighlight").CursorHighlightConfig {
+ const fallback: import("./videoPlayback/cursorHighlight").CursorHighlightConfig = {
+ enabled: false,
+ style: "ring",
+ sizePx: 24,
+ color: "#FFD700",
+ opacity: 0.9,
+ onlyOnClicks: false,
+ clickEmphasisDurationMs: 350,
+ offsetXNorm: 0,
+ offsetYNorm: 0,
+ };
+ if (!value || typeof value !== "object") return fallback;
+ const v = value as Partial;
+ return {
+ enabled: typeof v.enabled === "boolean" ? v.enabled : fallback.enabled,
+ style: v.style === "dot" || v.style === "ring" ? v.style : fallback.style,
+ sizePx:
+ typeof v.sizePx === "number" && v.sizePx >= 10 && v.sizePx <= 36 ? v.sizePx : fallback.sizePx,
+ color:
+ typeof v.color === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v.color)
+ ? v.color
+ : fallback.color,
+ opacity:
+ typeof v.opacity === "number" && v.opacity >= 0 && v.opacity <= 1
+ ? v.opacity
+ : fallback.opacity,
+ onlyOnClicks: typeof v.onlyOnClicks === "boolean" ? v.onlyOnClicks : fallback.onlyOnClicks,
+ clickEmphasisDurationMs:
+ typeof v.clickEmphasisDurationMs === "number" && v.clickEmphasisDurationMs > 0
+ ? v.clickEmphasisDurationMs
+ : fallback.clickEmphasisDurationMs,
+ offsetXNorm:
+ typeof v.offsetXNorm === "number" && Number.isFinite(v.offsetXNorm)
+ ? Math.max(-1, Math.min(1, v.offsetXNorm))
+ : fallback.offsetXNorm,
+ offsetYNorm:
+ typeof v.offsetYNorm === "number" && Number.isFinite(v.offsetYNorm)
+ ? Math.max(-1, Math.min(1, v.offsetYNorm))
+ : fallback.offsetYNorm,
};
}
@@ -405,3 +554,19 @@ export function createProjectData(
editor,
};
}
+
+export function createProjectSnapshot(
+ media: ProjectMedia,
+ editor: Partial,
+): string {
+ return JSON.stringify(createProjectData(media, normalizeProjectEditor(editor)));
+}
+
+export function hasProjectUnsavedChanges(
+ currentSnapshot: string | null,
+ baselineSnapshot: string | null,
+): boolean {
+ return Boolean(
+ currentSnapshot !== null && baselineSnapshot !== null && currentSnapshot !== baselineSnapshot,
+ );
+}
diff --git a/src/components/video-editor/timeline/Item.tsx b/src/components/video-editor/timeline/Item.tsx
index f265fe4..d2b80c7 100644
--- a/src/components/video-editor/timeline/Item.tsx
+++ b/src/components/video-editor/timeline/Item.tsx
@@ -1,7 +1,8 @@
import type { Span } from "dnd-timeline";
import { useItem } from "dnd-timeline";
-import { Gauge, MessageSquare, Scissors, ZoomIn } from "lucide-react";
+import { Gauge, MessageSquare, MousePointer2, Scissors, ZoomIn } from "lucide-react";
import { useMemo } from "react";
+import { useScopedT } from "@/contexts/I18nContext";
import { cn } from "@/lib/utils";
import glassStyles from "./ItemGlass.module.css";
@@ -14,7 +15,8 @@ interface ItemProps {
onSelect?: () => void;
zoomDepth?: number;
speedValue?: number;
- variant?: "zoom" | "trim" | "annotation" | "speed";
+ isAutoFocus?: boolean;
+ variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
}
// Map zoom depth to multiplier labels
@@ -45,9 +47,11 @@ export default function Item({
onSelect,
zoomDepth = 1,
speedValue,
+ isAutoFocus = false,
variant = "zoom",
children,
}: ItemProps) {
+ const t = useScopedT("timeline");
const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
id,
span,
@@ -132,19 +136,25 @@ export default function Item({
{ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
+ {isAutoFocus && (
+
- Trim
+ {t("labels.trim")}
) : isSpeed ? (
<>
- {speedValue !== undefined ? `${speedValue}×` : "Speed"}
+ {speedValue !== undefined ? `${speedValue}×` : t("labels.speed")}
) : (
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index b64aad0..6fe3474 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -44,6 +44,7 @@ import { detectZoomDwellCandidates, normalizeCursorTelemetry } from "./zoomSugge
const ZOOM_ROW_ID = "row-zoom";
const TRIM_ROW_ID = "row-trim";
const ANNOTATION_ROW_ID = "row-annotation";
+const BLUR_ROW_ID = "row-blur";
const SPEED_ROW_ID = "row-speed";
const FALLBACK_RANGE_MS = 1000;
const TARGET_MARKER_COUNT = 12;
@@ -73,6 +74,12 @@ interface TimelineEditorProps {
onAnnotationDelete?: (id: string) => void;
selectedAnnotationId?: string | null;
onSelectAnnotation?: (id: string | null) => void;
+ blurRegions?: AnnotationRegion[];
+ onBlurAdded?: (span: Span) => void;
+ onBlurSpanChange?: (id: string, span: Span) => void;
+ onBlurDelete?: (id: string) => void;
+ selectedBlurId?: string | null;
+ onSelectBlur?: (id: string | null) => void;
speedRegions?: SpeedRegion[];
onSpeedAdded?: (span: Span) => void;
onSpeedSpanChange?: (id: string, span: Span) => void;
@@ -96,7 +103,8 @@ interface TimelineRenderItem {
label: string;
zoomDepth?: number;
speedValue?: number;
- variant: "zoom" | "trim" | "annotation" | "speed";
+ isAutoFocus?: boolean;
+ variant: "zoom" | "trim" | "annotation" | "speed" | "blur";
}
const SCALE_CANDIDATES = [
@@ -525,10 +533,12 @@ function Timeline({
onSelectZoom,
onSelectTrim,
onSelectAnnotation,
+ onSelectBlur,
onSelectSpeed,
selectedZoomId,
selectedTrimId,
selectedAnnotationId,
+ selectedBlurId,
selectedSpeedId,
keyframes = [],
}: {
@@ -540,10 +550,12 @@ function Timeline({
onSelectZoom?: (id: string | null) => void;
onSelectTrim?: (id: string | null) => void;
onSelectAnnotation?: (id: string | null) => void;
+ onSelectBlur?: (id: string | null) => void;
onSelectSpeed?: (id: string | null) => void;
selectedZoomId: string | null;
selectedTrimId?: string | null;
selectedAnnotationId?: string | null;
+ selectedBlurId?: string | null;
selectedSpeedId?: string | null;
keyframes?: { id: string; time: number }[];
}) {
@@ -568,6 +580,7 @@ function Timeline({
onSelectZoom?.(null);
onSelectTrim?.(null);
onSelectAnnotation?.(null);
+ onSelectBlur?.(null);
onSelectSpeed?.(null);
const rect = e.currentTarget.getBoundingClientRect();
@@ -586,6 +599,7 @@ function Timeline({
onSelectZoom,
onSelectTrim,
onSelectAnnotation,
+ onSelectBlur,
onSelectSpeed,
videoDurationMs,
sidebarWidth,
@@ -637,6 +651,7 @@ function Timeline({
const zoomItems = items.filter((item) => item.rowId === ZOOM_ROW_ID);
const trimItems = items.filter((item) => item.rowId === TRIM_ROW_ID);
const annotationItems = items.filter((item) => item.rowId === ANNOTATION_ROW_ID);
+ const blurItems = items.filter((item) => item.rowId === BLUR_ROW_ID);
const speedItems = items.filter((item) => item.rowId === SPEED_ROW_ID);
return (
@@ -668,6 +683,7 @@ function Timeline({
isSelected={item.id === selectedZoomId}
onSelect={() => onSelectZoom?.(item.id)}
zoomDepth={item.zoomDepth}
+ isAutoFocus={item.isAutoFocus}
variant="zoom"
>
{item.label}
@@ -711,6 +727,22 @@ function Timeline({
))}
+
+ {blurItems.map((item) => (
+ - onSelectBlur?.(item.id)}
+ variant={item.variant}
+ >
+ {item.label}
+
+ ))}
+
+
{speedItems.map((item) => (
- {
+ if (!selectedBlurId || !onBlurDelete || !onSelectBlur) return;
+ onBlurDelete(selectedBlurId);
+ onSelectBlur(null);
+ }, [selectedBlurId, onBlurDelete, onSelectBlur]);
+
const deleteSelectedSpeed = useCallback(() => {
if (!selectedSpeedId || !onSpeedDelete || !onSelectSpeed) return;
onSpeedDelete(selectedSpeedId);
@@ -908,9 +952,10 @@ export default function TimelineEditor({
const isZoomItem = zoomRegions.some((r) => r.id === excludeId);
const isTrimItem = trimRegions.some((r) => r.id === excludeId);
const isAnnotationItem = annotationRegions.some((r) => r.id === excludeId);
+ const isBlurItem = blurRegions.some((r) => r.id === excludeId);
const isSpeedItem = speedRegions.some((r) => r.id === excludeId);
- if (isAnnotationItem) {
+ if (isAnnotationItem || isBlurItem) {
return false;
}
@@ -937,7 +982,7 @@ export default function TimelineEditor({
return false;
},
- [zoomRegions, trimRegions, annotationRegions, speedRegions],
+ [zoomRegions, trimRegions, annotationRegions, blurRegions, speedRegions],
);
// At least 5% of the timeline or 1000ms, whichever is larger, so the region
@@ -1165,6 +1210,21 @@ export default function TimelineEditor({
onAnnotationAdded({ start: startPos, end: endPos });
}, [videoDuration, totalMs, currentTimeMs, onAnnotationAdded, defaultRegionDurationMs]);
+ const handleAddBlur = useCallback(() => {
+ if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onBlurAdded) {
+ return;
+ }
+
+ const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+ if (defaultDuration <= 0) {
+ return;
+ }
+
+ const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+ const endPos = Math.min(startPos + defaultDuration, totalMs);
+ onBlurAdded({ start: startPos, end: endPos });
+ }, [videoDuration, totalMs, currentTimeMs, onBlurAdded, defaultRegionDurationMs]);
+
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
@@ -1183,6 +1243,9 @@ export default function TimelineEditor({
if (matchesShortcut(e, keyShortcuts.addAnnotation, isMac)) {
handleAddAnnotation();
}
+ if (matchesShortcut(e, keyShortcuts.addBlur, isMac)) {
+ handleAddBlur();
+ }
if (matchesShortcut(e, keyShortcuts.addSpeed, isMac)) {
handleAddSpeed();
}
@@ -1223,6 +1286,8 @@ export default function TimelineEditor({
deleteSelectedTrim();
} else if (selectedAnnotationId) {
deleteSelectedAnnotation();
+ } else if (selectedBlurId) {
+ deleteSelectedBlur();
} else if (selectedSpeedId) {
deleteSelectedSpeed();
}
@@ -1235,16 +1300,19 @@ export default function TimelineEditor({
handleAddZoom,
handleAddTrim,
handleAddAnnotation,
+ handleAddBlur,
handleAddSpeed,
deleteSelectedKeyframe,
deleteSelectedZoom,
deleteSelectedTrim,
deleteSelectedAnnotation,
+ deleteSelectedBlur,
deleteSelectedSpeed,
selectedKeyframeId,
selectedZoomId,
selectedTrimId,
selectedAnnotationId,
+ selectedBlurId,
selectedSpeedId,
annotationRegions,
currentTime,
@@ -1271,6 +1339,7 @@ export default function TimelineEditor({
span: { start: region.startMs, end: region.endMs },
label: t("labels.zoomItem", { index: String(index + 1) }),
zoomDepth: region.depth,
+ isAutoFocus: region.focusMode === "auto",
variant: "zoom",
}));
@@ -1304,6 +1373,14 @@ export default function TimelineEditor({
};
});
+ const blurs: TimelineRenderItem[] = blurRegions.map((region, index) => ({
+ id: region.id,
+ rowId: BLUR_ROW_ID,
+ span: { start: region.startMs, end: region.endMs },
+ label: t("labels.blurItem", { index: String(index + 1) }),
+ variant: "blur",
+ }));
+
const speeds: TimelineRenderItem[] = speedRegions.map((region, index) => ({
id: region.id,
rowId: SPEED_ROW_ID,
@@ -1313,8 +1390,8 @@ export default function TimelineEditor({
variant: "speed",
}));
- return [...zooms, ...trims, ...annotations, ...speeds];
- }, [zoomRegions, trimRegions, annotationRegions, speedRegions, t]);
+ return [...zooms, ...trims, ...annotations, ...blurs, ...speeds];
+ }, [zoomRegions, trimRegions, annotationRegions, blurRegions, speedRegions, t]);
// Flat list of all non-annotation region spans for neighbour-clamping during drag/resize
const allRegionSpans = useMemo(() => {
@@ -1335,6 +1412,8 @@ export default function TimelineEditor({
onSpeedSpanChange?.(id, span);
} else if (annotationRegions.some((r) => r.id === id)) {
onAnnotationSpanChange?.(id, span);
+ } else if (blurRegions.some((r) => r.id === id)) {
+ onBlurSpanChange?.(id, span);
}
},
[
@@ -1342,10 +1421,12 @@ export default function TimelineEditor({
trimRegions,
speedRegions,
annotationRegions,
+ blurRegions,
onZoomSpanChange,
onTrimSpanChange,
onSpeedSpanChange,
onAnnotationSpanChange,
+ onBlurSpanChange,
],
);
@@ -1403,6 +1484,25 @@ export default function TimelineEditor({
>
+
+
+
;
@@ -22,8 +17,14 @@ interface I18nContextValue {
locale: Locale;
setLocale: (locale: Locale) => void;
t: (qualifiedKey: string, vars?: TranslateVars) => string;
+ systemLocaleSuggestion: Locale | null;
+ acceptSystemLocaleSuggestion: () => void;
+ dismissSystemLocaleSuggestion: () => void;
+ resolveSystemLocaleSuggestion: () => void;
}
+const SYSTEM_LANGUAGE_PROMPT_SEEN_KEY = "openscreen-system-language-prompt-seen";
+
const I18nContext = createContext(null);
export function useI18n(): I18nContextValue {
@@ -41,7 +42,37 @@ export function useScopedT(namespace: I18nNamespace) {
}
function isSupportedLocale(value: string): value is Locale {
- return (SUPPORTED_LOCALES as readonly string[]).includes(value);
+ return getAvailableLocales().includes(value);
+}
+
+function getSupportedSystemLocale(): Locale | null {
+ if (typeof navigator === "undefined") return null;
+ const availableLocales = getAvailableLocales();
+
+ const candidates =
+ Array.isArray(navigator.languages) && navigator.languages.length > 0
+ ? navigator.languages
+ : [navigator.language];
+
+ for (const candidate of candidates) {
+ if (!candidate) continue;
+ if (isSupportedLocale(candidate)) return candidate;
+
+ const exactMatch = availableLocales.find(
+ (locale) => locale.toLowerCase() === candidate.toLowerCase(),
+ );
+ if (exactMatch) return exactMatch;
+
+ const baseLanguage = candidate.split("-")[0]?.toLowerCase();
+ if (!baseLanguage) continue;
+
+ if (baseLanguage === "zh" && availableLocales.includes("zh-CN")) return "zh-CN";
+
+ const baseMatch = availableLocales.find((locale) => locale.toLowerCase() === baseLanguage);
+ if (baseMatch) return baseMatch;
+ }
+
+ return null;
}
function getInitialLocale(): Locale {
@@ -56,6 +87,16 @@ function getInitialLocale(): Locale {
export function I18nProvider({ children }: { children: ReactNode }) {
const [locale, setLocaleState] = useState(getInitialLocale);
+ const [systemLocaleSuggestion, setSystemLocaleSuggestion] = useState(null);
+ const hasRunSystemLocaleCheckRef = useRef(false);
+
+ const markPromptAsHandled = useCallback(() => {
+ try {
+ localStorage.setItem(SYSTEM_LANGUAGE_PROMPT_SEEN_KEY, "1");
+ } catch {
+ // localStorage may be unavailable
+ }
+ }, []);
const setLocale = useCallback((newLocale: Locale) => {
setLocaleState(newLocale);
@@ -73,6 +114,48 @@ export function I18nProvider({ children }: { children: ReactNode }) {
document.documentElement.lang = locale;
}, [locale]);
+ useEffect(() => {
+ if (hasRunSystemLocaleCheckRef.current) return;
+ hasRunSystemLocaleCheckRef.current = true;
+
+ let hasStoredLocale = false;
+ let hasHandledSystemPrompt = false;
+ try {
+ const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+ hasStoredLocale = Boolean(stored && isSupportedLocale(stored));
+ hasHandledSystemPrompt = localStorage.getItem(SYSTEM_LANGUAGE_PROMPT_SEEN_KEY) === "1";
+ } catch {
+ // localStorage may be unavailable
+ }
+
+ if (hasStoredLocale || hasHandledSystemPrompt) return;
+
+ const detectedSystemLocale = getSupportedSystemLocale();
+ if (!detectedSystemLocale || detectedSystemLocale === DEFAULT_LOCALE) {
+ markPromptAsHandled();
+ return;
+ }
+
+ setSystemLocaleSuggestion(detectedSystemLocale);
+ }, [markPromptAsHandled]);
+
+ const acceptSystemLocaleSuggestion = useCallback(() => {
+ if (!systemLocaleSuggestion) return;
+ setLocale(systemLocaleSuggestion);
+ setSystemLocaleSuggestion(null);
+ markPromptAsHandled();
+ }, [markPromptAsHandled, setLocale, systemLocaleSuggestion]);
+
+ const dismissSystemLocaleSuggestion = useCallback(() => {
+ setSystemLocaleSuggestion(null);
+ markPromptAsHandled();
+ }, [markPromptAsHandled]);
+
+ const resolveSystemLocaleSuggestion = useCallback(() => {
+ setSystemLocaleSuggestion(null);
+ markPromptAsHandled();
+ }, [markPromptAsHandled]);
+
const t = useCallback(
(qualifiedKey: string, vars?: TranslateVars): string => {
const dotIndex = qualifiedKey.indexOf(".");
@@ -84,7 +167,26 @@ export function I18nProvider({ children }: { children: ReactNode }) {
[locale],
);
- const value = useMemo(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
+ const value = useMemo(
+ () => ({
+ locale,
+ setLocale,
+ t,
+ systemLocaleSuggestion,
+ acceptSystemLocaleSuggestion,
+ dismissSystemLocaleSuggestion,
+ resolveSystemLocaleSuggestion,
+ }),
+ [
+ locale,
+ setLocale,
+ t,
+ systemLocaleSuggestion,
+ acceptSystemLocaleSuggestion,
+ dismissSystemLocaleSuggestion,
+ resolveSystemLocaleSuggestion,
+ ],
+ );
return {children} ;
}
diff --git a/src/hooks/useEditorHistory.ts b/src/hooks/useEditorHistory.ts
index d261c1f..a655137 100644
--- a/src/hooks/useEditorHistory.ts
+++ b/src/hooks/useEditorHistory.ts
@@ -7,6 +7,7 @@ import type {
WebcamLayoutPreset,
WebcamMaskShape,
WebcamPosition,
+ WebcamSizePreset,
ZoomRegion,
} from "@/components/video-editor/types";
import {
@@ -14,7 +15,13 @@ import {
DEFAULT_WEBCAM_LAYOUT_PRESET,
DEFAULT_WEBCAM_MASK_SHAPE,
DEFAULT_WEBCAM_POSITION,
+ DEFAULT_WEBCAM_SIZE_PRESET,
} from "@/components/video-editor/types";
+import {
+ type CursorHighlightConfig,
+ DEFAULT_CURSOR_HIGHLIGHT,
+} from "@/components/video-editor/videoPlayback/cursorHighlight";
+import { DEFAULT_WALLPAPER } from "@/lib/wallpaper";
import type { AspectRatio } from "@/utils/aspectRatioUtils";
// Undoable state — selection IDs are intentionally excluded (undoing a
@@ -34,7 +41,9 @@ export interface EditorState {
aspectRatio: AspectRatio;
webcamLayoutPreset: WebcamLayoutPreset;
webcamMaskShape: WebcamMaskShape;
+ webcamSizePreset: WebcamSizePreset;
webcamPosition: WebcamPosition | null;
+ cursorHighlight: CursorHighlightConfig;
}
export const INITIAL_EDITOR_STATE: EditorState = {
@@ -43,7 +52,7 @@ export const INITIAL_EDITOR_STATE: EditorState = {
speedRegions: [],
annotationRegions: [],
cropRegion: DEFAULT_CROP_REGION,
- wallpaper: "/wallpapers/wallpaper1.jpg",
+ wallpaper: DEFAULT_WALLPAPER,
shadowIntensity: 0,
showBlur: false,
motionBlurAmount: 0,
@@ -52,7 +61,9 @@ export const INITIAL_EDITOR_STATE: EditorState = {
aspectRatio: "16:9",
webcamLayoutPreset: DEFAULT_WEBCAM_LAYOUT_PRESET,
webcamMaskShape: DEFAULT_WEBCAM_MASK_SHAPE,
+ webcamSizePreset: DEFAULT_WEBCAM_SIZE_PRESET,
webcamPosition: DEFAULT_WEBCAM_POSITION,
+ cursorHighlight: DEFAULT_CURSOR_HIGHLIGHT,
};
type StateUpdate = Partial | ((prev: EditorState) => Partial);
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 0c418c1..dc9758f 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -41,8 +41,12 @@ const WEBCAM_TARGET_FRAME_RATE = 30;
type UseScreenRecorderReturn = {
recording: boolean;
+ paused: boolean;
+ elapsedSeconds: number;
toggleRecording: () => void;
+ togglePaused: () => void;
restartRecording: () => void;
+ cancelRecording: () => void;
microphoneEnabled: boolean;
setMicrophoneEnabled: (enabled: boolean) => void;
microphoneDeviceId: string | undefined;
@@ -85,6 +89,8 @@ function createRecorderHandle(stream: MediaStream, options: MediaRecorderOptions
export function useScreenRecorder(): UseScreenRecorderReturn {
const t = useScopedT("editor");
const [recording, setRecording] = useState(false);
+ const [paused, setPaused] = useState(false);
+ const [elapsedSeconds, setElapsedSeconds] = useState(0);
const [microphoneEnabled, setMicrophoneEnabled] = useState(false);
const [microphoneDeviceId, setMicrophoneDeviceId] = useState(undefined);
const [webcamDeviceId, setWebcamDeviceId] = useState(undefined);
@@ -97,19 +103,34 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
const microphoneStream = useRef(null);
const webcamStream = useRef(null);
const mixingContext = useRef(null);
- const startTime = useRef(0);
const recordingId = useRef(0);
+ const accumulatedDurationMs = useRef(0);
+ const segmentStartedAt = useRef(null);
const finalizingRecordingId = useRef(null);
const allowAutoFinalize = useRef(false);
const discardRecordingId = useRef(null);
const restarting = useRef(false);
+ const countdownRunId = useRef(0);
+ const [countdownActive, setCountdownActive] = useState(false);
+ const webcamReady = useRef(false);
+ const webcamAcquireId = useRef(0);
+
+ const getRecordingDurationMs = useCallback(() => {
+ const segmentDuration =
+ segmentStartedAt.current === null ? 0 : Date.now() - segmentStartedAt.current;
+ return accumulatedDurationMs.current + segmentDuration;
+ }, []);
const selectMimeType = () => {
+ // H.264 first: hardware-accelerated on all modern devices, gives sharp
+ // real-time output. AV1/VP9 are great for distribution but too
+ // CPU-intensive for live 60 fps capture — they produce blurry frames
+ // when the software encoder can't keep up.
const preferred = [
- "video/webm;codecs=av1",
"video/webm;codecs=h264",
- "video/webm;codecs=vp9",
"video/webm;codecs=vp8",
+ "video/webm;codecs=vp9",
+ "video/webm;codecs=av1",
"video/webm",
];
@@ -145,10 +166,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
microphoneStream.current.getTracks().forEach((track) => track.stop());
microphoneStream.current = null;
}
- if (webcamStream.current) {
- webcamStream.current.getTracks().forEach((track) => track.stop());
- webcamStream.current = null;
- }
if (mixingContext.current) {
mixingContext.current.close().catch(() => {
// Ignore close errors during recorder teardown.
@@ -181,6 +198,85 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
[t],
);
+ useEffect(() => {
+ if (!webcamEnabled) return;
+
+ let cancelled = false;
+ let acquiredStream: MediaStream | null = null;
+ const thisAcquireId = ++webcamAcquireId.current;
+ webcamReady.current = false;
+
+ const acquire = async () => {
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({
+ audio: false,
+ video: webcamDeviceId
+ ? {
+ deviceId: { exact: webcamDeviceId },
+ width: { ideal: WEBCAM_TARGET_WIDTH },
+ height: { ideal: WEBCAM_TARGET_HEIGHT },
+ frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+ }
+ : {
+ width: { ideal: WEBCAM_TARGET_WIDTH },
+ height: { ideal: WEBCAM_TARGET_HEIGHT },
+ frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+ },
+ });
+
+ if (cancelled || thisAcquireId !== webcamAcquireId.current) {
+ stream.getTracks().forEach((track) => {
+ track.onended = null;
+ track.stop();
+ });
+ return;
+ }
+
+ acquiredStream = stream;
+ stream.getVideoTracks().forEach((track) => {
+ track.onended = () => {
+ webcamStream.current = null;
+ if (!restarting.current) {
+ setWebcamEnabledState(false);
+ toast.error(t("recording.cameraDisconnected"));
+ }
+ };
+ });
+ webcamStream.current = stream;
+ webcamReady.current = true;
+ } catch (cameraError) {
+ if (!cancelled) {
+ console.warn("Failed to get webcam access:", cameraError);
+ setWebcamEnabledState(false);
+ const isDeviceError =
+ cameraError instanceof DOMException &&
+ [
+ "NotFoundError",
+ "DevicesNotFoundError",
+ "OverconstrainedError",
+ "NotReadableError",
+ ].includes(cameraError.name);
+ toast.error(t(isDeviceError ? "recording.cameraNotFound" : "recording.cameraBlocked"));
+ webcamReady.current = true;
+ }
+ }
+ };
+
+ void acquire();
+
+ return () => {
+ cancelled = true;
+ webcamReady.current = false;
+ if (acquiredStream) {
+ acquiredStream.getTracks().forEach((track) => {
+ track.onended = null;
+ track.stop();
+ });
+ webcamStream.current = null;
+ }
+ };
+ }, [webcamEnabled, webcamDeviceId, t]);
+
const finalizeRecording = useCallback(
(
activeScreenRecorder: RecorderHandle,
@@ -202,12 +298,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
teardownMedia();
setRecording(false);
+ setPaused(false);
+ setElapsedSeconds(0);
+ accumulatedDurationMs.current = 0;
+ segmentStartedAt.current = null;
window.electronAPI?.setRecordingState(false);
void (async () => {
try {
const screenBlob = await activeScreenRecorder.recordedBlobPromise;
if (discardRecordingId.current === activeRecordingId) {
+ window.electronAPI?.discardCursorTelemetry(activeRecordingId);
return;
}
if (screenBlob.size === 0) {
@@ -273,7 +374,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
const activeWebcamRecorder = webcamRecorder.current;
- const duration = Date.now() - startTime.current;
+ const duration = getRecordingDurationMs();
const activeRecordingId = recordingId.current;
finalizeRecording(
@@ -283,7 +384,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
activeRecordingId,
);
- if (activeScreenRecorder.recorder.state === "recording") {
+ if (
+ activeScreenRecorder.recorder.state === "recording" ||
+ activeScreenRecorder.recorder.state === "paused"
+ ) {
try {
activeScreenRecorder.recorder.stop();
} catch {
@@ -291,7 +395,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
}
if (activeWebcamRecorder) {
- if (activeWebcamRecorder.recorder.state === "recording") {
+ if (
+ activeWebcamRecorder.recorder.state === "recording" ||
+ activeWebcamRecorder.recorder.state === "paused"
+ ) {
try {
activeWebcamRecorder.recorder.stop();
} catch {
@@ -311,19 +418,28 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
return () => {
+ const activeRunId = countdownRunId.current;
if (cleanup) cleanup();
+ countdownRunId.current += 1;
+ void safeHideCountdownOverlay(activeRunId);
allowAutoFinalize.current = false;
restarting.current = false;
discardRecordingId.current = null;
- if (screenRecorder.current?.recorder.state === "recording") {
+ if (
+ screenRecorder.current?.recorder.state === "recording" ||
+ screenRecorder.current?.recorder.state === "paused"
+ ) {
try {
screenRecorder.current.recorder.stop();
} catch {
// Ignore recorder teardown errors during cleanup.
}
}
- if (webcamRecorder.current?.recorder.state === "recording") {
+ if (
+ webcamRecorder.current?.recorder.state === "recording" ||
+ webcamRecorder.current?.recorder.state === "paused"
+ ) {
try {
webcamRecorder.current.recorder.stop();
} catch {
@@ -336,7 +452,117 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
};
}, [teardownMedia]);
- const startRecording = async () => {
+ const safeShowCountdownOverlay = async (value: number, runId: number) => {
+ try {
+ await window.electronAPI.showCountdownOverlay(value, runId);
+ return true;
+ } catch (error) {
+ console.warn("Failed to show countdown overlay:", error);
+ return false;
+ }
+ };
+
+ const cancelCountdown = () => {
+ const activeRunId = countdownRunId.current;
+ countdownRunId.current += 1;
+ setCountdownActive(false);
+ void safeHideCountdownOverlay(activeRunId);
+ };
+
+ const safeSetCountdownOverlayValue = async (value: number, runId: number) => {
+ try {
+ await window.electronAPI.setCountdownOverlayValue(value, runId);
+ } catch (error) {
+ console.warn("Failed to update countdown overlay value:", error);
+ }
+ };
+
+ const safeHideCountdownOverlay = async (runId: number) => {
+ try {
+ await window.electronAPI.hideCountdownOverlay(runId);
+ } catch (error) {
+ console.warn("Failed to hide countdown overlay:", error);
+ }
+ };
+
+ const isCountdownRunActive = (runId?: number) =>
+ runId === undefined || countdownRunId.current === runId;
+
+ const startRecordCountdown = async () => {
+ if (countdownActive || recording) {
+ return;
+ }
+
+ const runId = countdownRunId.current + 1;
+ countdownRunId.current = runId;
+ setCountdownActive(true);
+
+ let selectedSource: ProcessedDesktopSource | null = null;
+ try {
+ selectedSource = await window.electronAPI.getSelectedSource();
+ } catch (error) {
+ console.warn("Failed to read selected source before countdown:", error);
+ }
+
+ if (!isCountdownRunActive(runId)) {
+ return;
+ }
+
+ if (!selectedSource) {
+ if (countdownRunId.current === runId) {
+ setCountdownActive(false);
+ }
+ alert(t("recording.selectSource"));
+ return;
+ }
+
+ let overlayHiddenBeforeStart = false;
+ try {
+ const values = [3, 2, 1];
+ const overlayShown = await safeShowCountdownOverlay(values[0], runId);
+
+ if (countdownRunId.current !== runId) {
+ return;
+ }
+
+ for (const value of values) {
+ if (countdownRunId.current !== runId) {
+ return;
+ }
+
+ if (overlayShown && value !== values[0]) {
+ await safeSetCountdownOverlayValue(value, runId);
+
+ if (countdownRunId.current !== runId) {
+ return;
+ }
+ }
+
+ await new Promise((resolve) => window.setTimeout(resolve, 1000));
+ }
+
+ if (countdownRunId.current !== runId) {
+ return;
+ }
+
+ setCountdownActive(false);
+ await safeHideCountdownOverlay(runId);
+ overlayHiddenBeforeStart = true;
+
+ if (countdownRunId.current !== runId) {
+ return;
+ }
+
+ await startRecording(runId);
+ } finally {
+ if (!overlayHiddenBeforeStart && countdownRunId.current === runId) {
+ setCountdownActive(false);
+ await safeHideCountdownOverlay(runId);
+ }
+ }
+ };
+
+ const startRecording = async (countdownRunToken?: number) => {
try {
const selectedSource = await window.electronAPI.getSelectedSource();
if (!selectedSource) {
@@ -344,6 +570,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
return;
}
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
let screenMediaStream: MediaStream;
const videoConstraints = {
@@ -384,6 +615,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
screenStream.current = screenMediaStream;
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
if (microphoneEnabled) {
try {
microphoneStream.current = await navigator.mediaDevices.getUserMedia({
@@ -408,32 +644,35 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
}
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
if (webcamEnabled) {
- try {
- webcamStream.current = await navigator.mediaDevices.getUserMedia({
- audio: false,
- video: webcamDeviceId
- ? {
- deviceId: { exact: webcamDeviceId },
- width: { ideal: WEBCAM_TARGET_WIDTH },
- height: { ideal: WEBCAM_TARGET_HEIGHT },
- frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
- }
- : {
- width: { ideal: WEBCAM_TARGET_WIDTH },
- height: { ideal: WEBCAM_TARGET_HEIGHT },
- frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
- },
+ if (!webcamReady.current) {
+ await new Promise((resolve) => {
+ const interval = setInterval(() => {
+ if (webcamReady.current) {
+ clearInterval(interval);
+ resolve();
+ }
+ }, 50);
+ setTimeout(() => {
+ clearInterval(interval);
+ resolve();
+ }, 5000);
});
- } catch (cameraError) {
- console.warn("Failed to get webcam access:", cameraError);
- if (webcamStream.current) {
- webcamStream.current.getTracks().forEach((track) => track.stop());
- webcamStream.current = null;
- }
- setWebcamEnabledState(false);
- toast.error(t("recording.cameraDenied"));
}
+ if (!webcamStream.current) {
+ webcamAcquireId.current++;
+ setWebcamEnabledState(false);
+ }
+ }
+
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
}
stream.current = new MediaStream();
@@ -476,6 +715,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
);
}
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
let {
width = DEFAULT_WIDTH,
height = DEFAULT_HEIGHT,
@@ -495,6 +739,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
);
const hasAudio = stream.current.getAudioTracks().length > 0;
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
screenRecorder.current = createRecorderHandle(stream.current, {
mimeType,
videoBitsPerSecond,
@@ -518,10 +767,13 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
recordingId.current = Date.now();
- startTime.current = recordingId.current;
+ accumulatedDurationMs.current = 0;
+ segmentStartedAt.current = Date.now();
allowAutoFinalize.current = true;
setRecording(true);
- window.electronAPI?.setRecordingState(true);
+ setPaused(false);
+ setElapsedSeconds(0);
+ window.electronAPI?.setRecordingState(true, recordingId.current);
const activeScreenRecorder = screenRecorder.current;
const activeWebcamRecorder = webcamRecorder.current;
@@ -536,7 +788,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
finalizeRecording(
activeScreenRecorder,
activeWebcamRecorder ?? null,
- Math.max(0, Date.now() - startTime.current),
+ Math.max(0, getRecordingDurationMs()),
activeRecordingId,
);
},
@@ -552,28 +804,81 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
toast.error(errorMsg);
}
setRecording(false);
+ setPaused(false);
+ setElapsedSeconds(0);
+ accumulatedDurationMs.current = 0;
+ segmentStartedAt.current = null;
screenRecorder.current = null;
webcamRecorder.current = null;
teardownMedia();
}
};
+ const togglePaused = () => {
+ const activeScreenRecorder = screenRecorder.current?.recorder;
+ if (!activeScreenRecorder || activeScreenRecorder.state === "inactive") {
+ return;
+ }
+
+ const activeWebcamRecorder = webcamRecorder.current?.recorder;
+
+ if (activeScreenRecorder.state === "paused") {
+ try {
+ activeScreenRecorder.resume();
+ if (activeWebcamRecorder?.state === "paused") {
+ activeWebcamRecorder.resume();
+ }
+ segmentStartedAt.current = Date.now();
+ setPaused(false);
+ } catch (error) {
+ console.error("Failed to resume recording:", error);
+ }
+ return;
+ }
+
+ if (activeScreenRecorder.state !== "recording") {
+ return;
+ }
+
+ try {
+ accumulatedDurationMs.current = getRecordingDurationMs();
+ segmentStartedAt.current = null;
+ setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
+ activeScreenRecorder.pause();
+ if (activeWebcamRecorder?.state === "recording") {
+ activeWebcamRecorder.pause();
+ }
+ setPaused(true);
+ } catch (error) {
+ console.error("Failed to pause recording:", error);
+ }
+ };
+
const toggleRecording = () => {
- recording ? stopRecording.current() : startRecording();
+ if (recording) {
+ stopRecording.current();
+ return;
+ }
+
+ if (countdownActive) {
+ cancelCountdown();
+ return;
+ }
+
+ void startRecordCountdown();
};
const restartRecording = async () => {
if (restarting.current) return;
const activeScreenRecorder = screenRecorder.current;
- if (!activeScreenRecorder || activeScreenRecorder.recorder.state !== "recording") return;
+ if (!activeScreenRecorder || activeScreenRecorder.recorder.state === "inactive") return;
const activeWebcamRecorder = webcamRecorder.current;
const activeRecordingId = recordingId.current;
restarting.current = true;
discardRecordingId.current = activeRecordingId;
- allowAutoFinalize.current = false;
const stopPromises = [
new Promise((resolve) => {
@@ -581,7 +886,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}),
];
- if (activeWebcamRecorder?.recorder.state === "recording") {
+ if (
+ activeWebcamRecorder?.recorder.state === "recording" ||
+ activeWebcamRecorder?.recorder.state === "paused"
+ ) {
stopPromises.push(
new Promise((resolve) => {
activeWebcamRecorder.recorder.addEventListener("stop", () => resolve(), {
@@ -601,10 +909,52 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
};
+ useEffect(() => {
+ if (!recording) {
+ setElapsedSeconds(0);
+ return;
+ }
+
+ setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+ if (paused) {
+ return;
+ }
+
+ const interval = window.setInterval(() => {
+ setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+ }, 250);
+
+ return () => window.clearInterval(interval);
+ }, [getRecordingDurationMs, paused, recording]);
+
+ const cancelRecording = () => {
+ const activeScreenRecorder = screenRecorder.current;
+ if (
+ activeScreenRecorder?.recorder.state === "recording" ||
+ activeScreenRecorder?.recorder.state === "paused"
+ ) {
+ const activeRecordingId = recordingId.current;
+ discardRecordingId.current = activeRecordingId;
+ allowAutoFinalize.current = false;
+
+ stopRecording.current();
+ return;
+ }
+
+ if (countdownActive) {
+ cancelCountdown();
+ return;
+ }
+ };
+
return {
recording,
+ paused,
+ elapsedSeconds,
toggleRecording,
+ togglePaused,
restartRecording,
+ cancelRecording,
microphoneEnabled,
setMicrophoneEnabled,
microphoneDeviceId,
diff --git a/src/i18n/__tests__/tutorialHelpTranslations.test.ts b/src/i18n/__tests__/tutorialHelpTranslations.test.ts
new file mode 100644
index 0000000..fcfa9d3
--- /dev/null
+++ b/src/i18n/__tests__/tutorialHelpTranslations.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
+import enDialogs from "@/i18n/locales/en/dialogs.json";
+import esDialogs from "@/i18n/locales/es/dialogs.json";
+import frDialogs from "@/i18n/locales/fr/dialogs.json";
+import koKRDialogs from "@/i18n/locales/ko-KR/dialogs.json";
+import trDialogs from "@/i18n/locales/tr/dialogs.json";
+import zhCNDialogs from "@/i18n/locales/zh-CN/dialogs.json";
+
+const tutorialHelpKeys = [
+ "triggerLabel",
+ "title",
+ "description",
+ "explanationBefore",
+ "remove",
+ "explanationMiddle",
+ "covered",
+ "explanationAfter",
+ "visualExample",
+ "removed",
+ "kept",
+ "part1",
+ "part2",
+ "part3",
+ "finalVideo",
+ "step1Title",
+ "step1DescriptionBefore",
+ "step1DescriptionAfter",
+ "step2Title",
+ "step2Description",
+] as const;
+
+const keysThatMayBeEmpty = new Set<(typeof tutorialHelpKeys)[number]>(["step1DescriptionBefore"]);
+
+const dialogsByLocale = {
+ en: enDialogs,
+ "zh-CN": zhCNDialogs,
+ es: esDialogs,
+ fr: frDialogs,
+ tr: trDialogs,
+ "ko-KR": koKRDialogs,
+} satisfies Record }>;
+
+describe("TutorialHelp translations", () => {
+ it("defines every tutorial help key for each supported locale", () => {
+ for (const locale of SUPPORTED_LOCALES) {
+ const tutorial = dialogsByLocale[locale].tutorial;
+
+ for (const key of tutorialHelpKeys) {
+ const message = tutorial[key];
+ const label = `${locale} dialogs.tutorial.${key}`;
+ expect(message, label).toEqual(expect.any(String));
+ if (!keysThatMayBeEmpty.has(key)) {
+ expect((message as string).trim().length, label).toBeGreaterThan(0);
+ }
+ }
+ }
+ });
+});
diff --git a/src/i18n/config.ts b/src/i18n/config.ts
index a96c7ef..788a315 100644
--- a/src/i18n/config.ts
+++ b/src/i18n/config.ts
@@ -1,5 +1,14 @@
export const DEFAULT_LOCALE = "en" as const;
-export const SUPPORTED_LOCALES = ["en", "zh-CN", "es"] as const;
+export const SUPPORTED_LOCALES = [
+ "en",
+ "zh-CN",
+ "zh-TW",
+ "es",
+ "fr",
+ "tr",
+ "ko-KR",
+ "ja-JP",
+] as const;
export const I18N_NAMESPACES = [
"common",
"dialogs",
@@ -10,7 +19,7 @@ export const I18N_NAMESPACES = [
"timeline",
] as const;
-export type Locale = (typeof SUPPORTED_LOCALES)[number];
+export type Locale = string;
export type I18nNamespace = (typeof I18N_NAMESPACES)[number];
export const LOCALE_STORAGE_KEY = "openscreen-locale";
diff --git a/src/i18n/loader.ts b/src/i18n/loader.ts
index 4736db8..36d8eb6 100644
--- a/src/i18n/loader.ts
+++ b/src/i18n/loader.ts
@@ -1,6 +1,10 @@
-import { DEFAULT_LOCALE, type I18nNamespace, type Locale } from "./config";
+import { DEFAULT_LOCALE, I18N_NAMESPACES, type I18nNamespace, type Locale } from "./config";
type MessageMap = Record;
+type LocaleValidationError = {
+ locale: string;
+ missingNamespaces: I18nNamespace[];
+};
const modules = import.meta.glob("./locales/**/*.json", { eager: true }) as Record<
string,
@@ -18,6 +22,62 @@ for (const [path, mod] of Object.entries(modules)) {
messages[locale][namespace] = mod.default;
}
+const REQUIRED_NAMESPACES = new Set(I18N_NAMESPACES);
+
+const localeValidationErrors: LocaleValidationError[] = Object.keys(messages)
+ .map((locale) => {
+ const localeMessages = messages[locale] ?? {};
+ const missingNamespaces = I18N_NAMESPACES.filter((namespace) => !localeMessages[namespace]);
+ return {
+ locale,
+ missingNamespaces,
+ };
+ })
+ .filter((entry) => entry.missingNamespaces.length > 0);
+
+const invalidLocales = new Set(localeValidationErrors.map((entry) => entry.locale));
+
+const availableLocales = Object.keys(messages)
+ .filter((locale) => REQUIRED_NAMESPACES.size > 0 && hasRequiredNamespaces(messages[locale]))
+ .filter((locale) => !invalidLocales.has(locale))
+ .sort((a, b) => {
+ if (a === DEFAULT_LOCALE) return -1;
+ if (b === DEFAULT_LOCALE) return 1;
+ return a.localeCompare(b);
+ });
+
+if (localeValidationErrors.length > 0) {
+ console.error("[i18n] Incomplete locale folders were excluded:");
+ for (const entry of localeValidationErrors) {
+ console.error(
+ `[i18n] ${entry.locale}: missing ${entry.missingNamespaces.map((ns) => `${ns}.json`).join(", ")}`,
+ );
+ }
+}
+
+function hasRequiredNamespaces(localeMessages: Record | undefined): boolean {
+ if (!localeMessages) return false;
+ for (const namespace of REQUIRED_NAMESPACES) {
+ if (!localeMessages[namespace]) return false;
+ }
+ return true;
+}
+
+function isAvailableLocale(locale: string): locale is Locale {
+ return availableLocales.includes(locale);
+}
+
+export function getAvailableLocales(): Locale[] {
+ if (availableLocales.length === 0) {
+ return [DEFAULT_LOCALE];
+ }
+ return availableLocales;
+}
+
+export function getLocaleValidationErrors(): LocaleValidationError[] {
+ return localeValidationErrors;
+}
+
function getMessageValue(obj: unknown, dotPath: string): string | undefined {
const keys = dotPath.split(".");
let current: unknown = obj;
@@ -34,15 +94,18 @@ function interpolate(str: string, vars?: Record): strin
}
export function getMessages(locale: Locale, namespace: I18nNamespace): MessageMap {
- return messages[locale]?.[namespace] ?? {};
+ const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+ return messages[resolvedLocale]?.[namespace] ?? {};
}
export function getLocaleName(locale: Locale): string {
- return getMessageValue(messages[locale]?.common, "locale.name") ?? locale;
+ const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+ return getMessageValue(messages[resolvedLocale]?.common, "locale.name") ?? locale;
}
export function getLocaleShort(locale: Locale): string {
- return getMessageValue(messages[locale]?.common, "locale.short") ?? locale;
+ const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+ return getMessageValue(messages[resolvedLocale]?.common, "locale.short") ?? locale;
}
export function translate(
@@ -52,8 +115,10 @@ export function translate(
vars?: Record,
): string {
const value =
- getMessageValue(messages[locale]?.[namespace], key) ??
- getMessageValue(messages[DEFAULT_LOCALE]?.[namespace], key);
+ getMessageValue(
+ messages[isAvailableLocale(locale) ? locale : DEFAULT_LOCALE]?.[namespace],
+ key,
+ ) ?? getMessageValue(messages[DEFAULT_LOCALE]?.[namespace], key);
if (value == null) return `${namespace}.${key}`;
return interpolate(value, vars);
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
index fdc65e6..cdefe84 100644
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -9,6 +9,7 @@
"open": "Open",
"upload": "Upload",
"export": "Export",
+ "showInFolder": "Show in Folder",
"file": "File",
"edit": "Edit",
"view": "View",
diff --git a/src/i18n/locales/en/dialogs.json b/src/i18n/locales/en/dialogs.json
index 66a33c2..a84b5fd 100644
--- a/src/i18n/locales/en/dialogs.json
+++ b/src/i18n/locales/en/dialogs.json
@@ -27,10 +27,11 @@
"triggerLabel": "How trimming works",
"title": "How Trimming Works",
"description": "Understanding how to cut out unwanted parts of your video.",
- "explanation": "The Trim tool works by defining the segments you want to",
- "explanationRemove": "remove",
- "explanationCovered": "covered",
- "explanationEnd": "by a red trim segment will be cut out when you export.",
+ "explanationBefore": "The Trim tool works by defining the segments you want to",
+ "remove": "remove",
+ "explanationMiddle": " — anything",
+ "covered": "covered",
+ "explanationAfter": "by a red trim segment will be cut out when you export.",
"visualExample": "Visual Example",
"removed": "REMOVED",
"kept": "Kept",
@@ -39,7 +40,9 @@
"part3": "Part 3",
"finalVideo": "Final Video",
"step1Title": "1. Add Trim",
- "step1Description": "Press T or click the scissors icon to mark a section for removal.",
+ "step1DescriptionBefore": "Press ",
+ "step1DescriptionAfter": " or click the scissors icon to mark a section for removal.",
+
"step2Title": "2. Adjust",
"step2Description": "Drag the edges of the red region to cover exactly what you want to cut out."
},
diff --git a/src/i18n/locales/en/editor.json b/src/i18n/locales/en/editor.json
index 6fdc310..13e2e13 100644
--- a/src/i18n/locales/en/editor.json
+++ b/src/i18n/locales/en/editor.json
@@ -1,4 +1,11 @@
{
+ "newRecording": {
+ "title": "Return to Recorder",
+ "description": "Your current session has been saved.",
+ "cancel": "Cancel",
+ "confirm": "Confirm"
+ },
+ "loadingVideo": "Loading video...",
"errors": {
"noVideoLoaded": "No video loaded",
"videoNotReady": "Video not ready",
@@ -8,6 +15,7 @@
"failedToSaveVideo": "Failed to save video",
"exportFailed": "Export failed",
"exportFailedWithError": "Export failed: {{error}}",
+ "exportBackgroundLoadFailed": "Export failed: could not load background image ({{url}})",
"failedToSaveExport": "Failed to save export",
"failedToSaveExportedVideo": "Failed to save exported video",
"failedToRevealInFolder": "Error revealing in folder: {{error}}"
@@ -30,6 +38,8 @@
"systemAudioUnavailable": "System audio not available. Recording without system audio.",
"microphoneDenied": "Microphone access denied. Recording will continue without audio.",
"cameraDenied": "Camera access denied. Recording will continue without webcam.",
+ "cameraDisconnected": "Webcam disconnected.",
+ "cameraNotFound": "Camera not found.",
"permissionDenied": "Recording permission denied. Please allow screen recording."
}
}
diff --git a/src/i18n/locales/en/launch.json b/src/i18n/locales/en/launch.json
index 6e4a4ed..e959a54 100644
--- a/src/i18n/locales/en/launch.json
+++ b/src/i18n/locales/en/launch.json
@@ -3,6 +3,9 @@
"hideHUD": "Hide HUD",
"closeApp": "Close App",
"restartRecording": "Restart recording",
+ "cancelRecording": "Cancel recording",
+ "pauseRecording": "Pause recording",
+ "resumeRecording": "Resume recording",
"openVideoFile": "Open video file",
"openProject": "Open project"
},
@@ -30,5 +33,11 @@
"recording": {
"selectSource": "Please select a source to record"
},
- "language": "Language"
+ "language": "Language",
+ "systemLanguagePrompt": {
+ "title": "Use your system language?",
+ "description": "We detected {{language}} as your system language. Do you want to switch OpenScreen to {{language}}?",
+ "switch": "Switch to {{language}}",
+ "keepDefault": "Keep current language"
+ }
}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 632a569..9b85c2b 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -13,7 +13,9 @@
"speed": {
"playbackSpeed": "Playback Speed",
"selectRegion": "Select a speed region to adjust",
- "deleteRegion": "Delete Speed Region"
+ "deleteRegion": "Delete Speed Region",
+ "customPlaybackSpeed": "Custom Playback Speed",
+ "maxSpeedError": "Speed can't go higher than 16×"
},
"trim": {
"deleteRegion": "Delete Trim Region"
@@ -24,7 +26,9 @@
"selectPreset": "Select preset",
"pictureInPicture": "Picture in Picture",
"verticalStack": "Vertical Stack",
- "webcamShape": "Camera Shape"
+ "dualFrame": "Dual Frame",
+ "webcamShape": "Camera Shape",
+ "webcamSize": "Webcam Size"
},
"effects": {
"title": "Video Effects",
@@ -41,7 +45,9 @@
"color": "Color",
"gradient": "Gradient",
"uploadCustom": "Upload Custom",
- "gradientLabel": "Gradient {{index}}"
+ "gradientLabel": "Gradient {{index}}",
+ "colorWheel": "Color Wheel",
+ "colorPalette": "Color Palette"
},
"crop": {
"title": "Crop",
@@ -98,6 +104,7 @@
"typeText": "Text",
"typeImage": "Image",
"typeArrow": "Arrow",
+ "typeBlur": "Blur",
"textContent": "Text Content",
"textPlaceholder": "Enter your text...",
"fontStyle": "Font Style",
@@ -108,12 +115,26 @@
"background": "Background",
"none": "None",
"color": "Color",
+ "colorWheel": "Color Wheel",
+ "colorPalette": "Color Palette",
"clearBackground": "Clear Background",
"uploadImage": "Upload Image",
"supportedFormats": "Supported formats: JPG, PNG, GIF, WebP",
"arrowDirection": "Arrow Direction",
"strokeWidth": "Stroke Width: {{width}}px",
"arrowColor": "Arrow Color",
+ "blurType": "Blur Type",
+ "blurTypeBlur": "Blur",
+ "blurTypeMosaic": "Mosaic Blur",
+ "blurColor": "Blur Color",
+ "blurColorWhite": "White",
+ "blurColorBlack": "Black",
+ "blurShape": "Blur Shape",
+ "blurIntensity": "Blur Intensity",
+ "mosaicBlockSize": "Mosaic Block Size",
+ "blurShapeRectangle": "Rectangle",
+ "blurShapeOval": "Oval",
+ "blurShapeFreehand": "Freehand",
"deleteAnnotation": "Delete Annotation",
"shortcutsAndTips": "Shortcuts & Tips",
"tipMovePlayhead": "Move playhead to overlapping annotation section and select an item.",
diff --git a/src/i18n/locales/en/shortcuts.json b/src/i18n/locales/en/shortcuts.json
index e943e61..2c26aa4 100644
--- a/src/i18n/locales/en/shortcuts.json
+++ b/src/i18n/locales/en/shortcuts.json
@@ -18,6 +18,7 @@
"addTrim": "Add Trim",
"addSpeed": "Add Speed",
"addAnnotation": "Add Annotation",
+ "addBlur": "Add Blur",
"addKeyframe": "Add Keyframe",
"deleteSelected": "Delete Selected",
"playPause": "Play / Pause"
@@ -29,6 +30,8 @@
"cycleAnnotationsBackward": "Cycle Annotations Backward",
"deleteSelectedAlt": "Delete Selected (alt)",
"panTimeline": "Pan Timeline",
- "zoomTimeline": "Zoom Timeline"
+ "zoomTimeline": "Zoom Timeline",
+ "frameBack": "Frame Back",
+ "frameForward": "Frame Forward"
}
}
diff --git a/src/i18n/locales/en/timeline.json b/src/i18n/locales/en/timeline.json
index f748621..389184b 100644
--- a/src/i18n/locales/en/timeline.json
+++ b/src/i18n/locales/en/timeline.json
@@ -4,21 +4,26 @@
"suggestZooms": "Suggest Zooms from Cursor",
"addTrim": "Add Trim (T)",
"addAnnotation": "Add Annotation (A)",
+ "addBlur": "Add Blur (B)",
"addSpeed": "Add Speed (S)"
},
"hints": {
"pressZoom": "Press Z to add zoom",
"pressTrim": "Press T to add trim",
"pressAnnotation": "Press A to add annotation",
+ "pressBlur": "Press B to add blur region",
"pressSpeed": "Press S to add speed"
},
"labels": {
"pan": "Pan",
"zoom": "Zoom",
+ "trim": "Trim",
+ "speed": "Speed",
"zoomItem": "Zoom {{index}}",
"trimItem": "Trim {{index}}",
"speedItem": "Speed {{index}}",
"annotationItem": "Annotation",
+ "blurItem": "Blur {{index}}",
"imageItem": "Image",
"emptyText": "Empty text"
},
diff --git a/src/i18n/locales/es/common.json b/src/i18n/locales/es/common.json
index a6f61e7..13cccb0 100644
--- a/src/i18n/locales/es/common.json
+++ b/src/i18n/locales/es/common.json
@@ -9,6 +9,7 @@
"open": "Abrir",
"upload": "Subir",
"export": "Exportar",
+ "showInFolder": "Mostrar en carpeta",
"file": "Archivo",
"edit": "Editar",
"view": "Vista",
diff --git a/src/i18n/locales/es/dialogs.json b/src/i18n/locales/es/dialogs.json
index acf2a04..f8a5e63 100644
--- a/src/i18n/locales/es/dialogs.json
+++ b/src/i18n/locales/es/dialogs.json
@@ -27,10 +27,11 @@
"triggerLabel": "Cómo funciona el recorte",
"title": "Cómo funciona el recorte",
"description": "Aprende a eliminar las partes no deseadas de tu video.",
- "explanation": "La herramienta de recorte funciona definiendo los segmentos que deseas",
- "explanationRemove": "eliminar",
- "explanationCovered": "cubierto",
- "explanationEnd": "por un segmento rojo de recorte será eliminado al exportar.",
+ "explanationBefore": "La herramienta de recorte funciona definiendo los segmentos que deseas",
+ "remove": "eliminar",
+ "explanationMiddle": " — cualquier parte",
+ "covered": "cubierta",
+ "explanationAfter": "por un segmento rojo será eliminada al exportar.",
"visualExample": "Ejemplo visual",
"removed": "ELIMINADO",
"kept": "Conservado",
@@ -39,7 +40,8 @@
"part3": "Parte 3",
"finalVideo": "Video final",
"step1Title": "1. Agregar recorte",
- "step1Description": "Presiona T o haz clic en el ícono de tijeras para marcar una sección a eliminar.",
+ "step1DescriptionBefore": "Presiona ",
+ "step1DescriptionAfter": " o haz clic en el ícono de tijeras para marcar una sección a eliminar.",
"step2Title": "2. Ajustar",
"step2Description": "Arrastra los bordes de la región roja para cubrir exactamente lo que deseas eliminar."
},
diff --git a/src/i18n/locales/es/editor.json b/src/i18n/locales/es/editor.json
index 99adc78..8f6ad13 100644
--- a/src/i18n/locales/es/editor.json
+++ b/src/i18n/locales/es/editor.json
@@ -8,6 +8,7 @@
"failedToSaveVideo": "Error al guardar el video",
"exportFailed": "La exportación falló",
"exportFailedWithError": "La exportación falló: {{error}}",
+ "exportBackgroundLoadFailed": "La exportación falló: no se pudo cargar la imagen de fondo ({{url}})",
"failedToSaveExport": "Error al guardar la exportación",
"failedToSaveExportedVideo": "Error al guardar el video exportado",
"failedToRevealInFolder": "Error al mostrar en la carpeta: {{error}}"
@@ -30,6 +31,15 @@
"systemAudioUnavailable": "Audio del sistema no disponible. Grabando sin audio del sistema.",
"microphoneDenied": "Acceso al micrófono denegado. La grabación continuará sin audio.",
"cameraDenied": "Acceso a la cámara denegado. La grabación continuará sin cámara web.",
+ "cameraDisconnected": "Cámara web desconectada.",
+ "cameraNotFound": "Cámara no encontrada.",
"permissionDenied": "Permiso de grabación denegado. Por favor permite la grabación de pantalla."
+ },
+ "loadingVideo": "Cargando video...",
+ "newRecording": {
+ "title": "Volver a la grabadora",
+ "description": "Tu sesión actual ha sido guardada.",
+ "cancel": "Cancelar",
+ "confirm": "Confirmar"
}
}
diff --git a/src/i18n/locales/es/launch.json b/src/i18n/locales/es/launch.json
index b25ec3d..68919aa 100644
--- a/src/i18n/locales/es/launch.json
+++ b/src/i18n/locales/es/launch.json
@@ -3,6 +3,9 @@
"hideHUD": "Ocultar HUD",
"closeApp": "Cerrar aplicación",
"restartRecording": "Reiniciar grabación",
+ "cancelRecording": "Cancelar grabación",
+ "pauseRecording": "Pausar grabación",
+ "resumeRecording": "Reanudar grabación",
"openVideoFile": "Abrir archivo de video",
"openProject": "Abrir proyecto"
},
@@ -30,5 +33,11 @@
"recording": {
"selectSource": "Por favor selecciona una fuente para grabar"
},
- "language": "Idioma"
+ "language": "Idioma",
+ "systemLanguagePrompt": {
+ "title": "¿Usar el idioma del sistema?",
+ "description": "Detectamos {{language}} como idioma de tu sistema. ¿Quieres cambiar OpenScreen a {{language}}?",
+ "switch": "Cambiar a {{language}}",
+ "keepDefault": "Mantener idioma actual"
+ }
}
diff --git a/src/i18n/locales/es/settings.json b/src/i18n/locales/es/settings.json
index 586e840..423b158 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -13,7 +13,9 @@
"speed": {
"playbackSpeed": "Velocidad de reproducción",
"selectRegion": "Selecciona una región de velocidad para ajustar",
- "deleteRegion": "Eliminar región de velocidad"
+ "deleteRegion": "Eliminar región de velocidad",
+ "customPlaybackSpeed": "Velocidad personalizada",
+ "maxSpeedError": "La velocidad no puede superar 16×"
},
"trim": {
"deleteRegion": "Eliminar región de recorte"
@@ -24,7 +26,9 @@
"selectPreset": "Seleccionar predefinido",
"pictureInPicture": "Imagen en imagen",
"verticalStack": "Apilado vertical",
- "webcamShape": "Forma de cámara"
+ "dualFrame": "Marco dual",
+ "webcamShape": "Forma de cámara",
+ "webcamSize": "Tamaño de cámara"
},
"effects": {
"title": "Efectos de video",
@@ -41,7 +45,9 @@
"color": "Color",
"gradient": "Degradado",
"uploadCustom": "Subir personalizado",
- "gradientLabel": "Degradado {{index}}"
+ "gradientLabel": "Degradado {{index}}",
+ "colorWheel": "Rueda de colores",
+ "colorPalette": "Paleta de colores"
},
"crop": {
"title": "Recortar",
@@ -98,6 +104,7 @@
"typeText": "Texto",
"typeImage": "Imagen",
"typeArrow": "Flecha",
+ "typeBlur": "Desenfoque",
"textContent": "Contenido de texto",
"textPlaceholder": "Escribe tu texto...",
"fontStyle": "Estilo de fuente",
@@ -108,12 +115,26 @@
"background": "Fondo",
"none": "Ninguno",
"color": "Color",
+ "colorWheel": "Rueda de colores",
+ "colorPalette": "Paleta de colores",
"clearBackground": "Quitar fondo",
"uploadImage": "Subir imagen",
"supportedFormats": "Formatos compatibles: JPG, PNG, GIF, WebP",
"arrowDirection": "Dirección de la flecha",
"strokeWidth": "Grosor del trazo: {{width}}px",
"arrowColor": "Color de la flecha",
+ "blurType": "Tipo de desenfoque",
+ "blurTypeBlur": "Desenfoque",
+ "blurTypeMosaic": "Desenfoque mosaico",
+ "blurColor": "Color del desenfoque",
+ "blurColorWhite": "Blanco",
+ "blurColorBlack": "Negro",
+ "blurShape": "Forma del desenfoque",
+ "blurIntensity": "Intensidad del desenfoque",
+ "mosaicBlockSize": "Tamano del bloque mosaico",
+ "blurShapeRectangle": "Rectángulo",
+ "blurShapeOval": "Óvalo",
+ "blurShapeFreehand": "Mano alzada",
"deleteAnnotation": "Eliminar anotación",
"shortcutsAndTips": "Atajos y consejos",
"tipMovePlayhead": "Mueve el cabezal de reproducción a la sección de anotación superpuesta y selecciona un elemento.",
diff --git a/src/i18n/locales/es/shortcuts.json b/src/i18n/locales/es/shortcuts.json
index ede18bf..888ded0 100644
--- a/src/i18n/locales/es/shortcuts.json
+++ b/src/i18n/locales/es/shortcuts.json
@@ -18,6 +18,7 @@
"addTrim": "Agregar recorte",
"addSpeed": "Agregar velocidad",
"addAnnotation": "Agregar anotación",
+ "addBlur": "Agregar desenfoque",
"addKeyframe": "Agregar fotograma clave",
"deleteSelected": "Eliminar seleccionado",
"playPause": "Reproducir / Pausar"
@@ -29,6 +30,8 @@
"cycleAnnotationsBackward": "Recorrer anotaciones hacia atrás",
"deleteSelectedAlt": "Eliminar seleccionado (alt)",
"panTimeline": "Desplazar línea de tiempo",
- "zoomTimeline": "Zoom en línea de tiempo"
+ "zoomTimeline": "Zoom en línea de tiempo",
+ "frameBack": "Fotograma anterior",
+ "frameForward": "Fotograma siguiente"
}
}
diff --git a/src/i18n/locales/es/timeline.json b/src/i18n/locales/es/timeline.json
index 9f11bc9..1a1abe1 100644
--- a/src/i18n/locales/es/timeline.json
+++ b/src/i18n/locales/es/timeline.json
@@ -4,23 +4,28 @@
"suggestZooms": "Sugerir zooms desde el cursor",
"addTrim": "Agregar recorte (T)",
"addAnnotation": "Agregar anotación (A)",
- "addSpeed": "Agregar velocidad (S)"
+ "addSpeed": "Agregar velocidad (S)",
+ "addBlur": "Agregar desenfoque (B)"
},
"hints": {
"pressZoom": "Presiona Z para agregar zoom",
"pressTrim": "Presiona T para agregar recorte",
"pressAnnotation": "Presiona A para agregar anotación",
- "pressSpeed": "Presiona S para agregar velocidad"
+ "pressSpeed": "Presiona S para agregar velocidad",
+ "pressBlur": "Presiona B para agregar una región de desenfoque"
},
"labels": {
"pan": "Desplazar",
"zoom": "Zoom",
+ "trim": "Recortar",
+ "speed": "Velocidad",
"zoomItem": "Zoom {{index}}",
"trimItem": "Recorte {{index}}",
"speedItem": "Velocidad {{index}}",
"annotationItem": "Anotación",
"imageItem": "Imagen",
- "emptyText": "Texto vacío"
+ "emptyText": "Texto vacío",
+ "blurItem": "Desenfoque {{index}}"
},
"emptyState": {
"noVideo": "No hay video cargado",
diff --git a/src/i18n/locales/fr/common.json b/src/i18n/locales/fr/common.json
new file mode 100644
index 0000000..5d09214
--- /dev/null
+++ b/src/i18n/locales/fr/common.json
@@ -0,0 +1,30 @@
+{
+ "actions": {
+ "cancel": "Annuler",
+ "save": "Enregistrer",
+ "delete": "Supprimer",
+ "close": "Fermer",
+ "share": "Partager",
+ "done": "Terminer",
+ "open": "Ouvrir",
+ "upload": "Téléverser",
+ "export": "Exporter",
+ "showInFolder": "Afficher dans le dossier",
+ "file": "Fichier",
+ "edit": "Éditer",
+ "view": "Affichage",
+ "window": "Fenêtre",
+ "quit": "Quitter",
+ "stopRecording": "Arrêter l'enregistrement"
+ },
+ "playback": {
+ "play": "Lecture",
+ "pause": "Pause",
+ "fullscreen": "Plein écran",
+ "exitFullscreen": "Quitter le plein écran"
+ },
+ "locale": {
+ "name": "Français",
+ "short": "FR"
+ }
+}
diff --git a/src/i18n/locales/fr/dialogs.json b/src/i18n/locales/fr/dialogs.json
new file mode 100644
index 0000000..dbaae38
--- /dev/null
+++ b/src/i18n/locales/fr/dialogs.json
@@ -0,0 +1,70 @@
+{
+ "export": {
+ "complete": "Export terminé",
+ "yourFormatReady": "Votre {{format}} est prêt",
+ "showInFolder": "Afficher dans le dossier",
+ "finalizingVideo": "Finalisation de l'export vidéo...",
+ "compilingGifProgress": "Compilation du GIF... {{progress}}%",
+ "compilingGifWait": "Compilation du GIF... Cela peut prendre un moment",
+ "takeMoment": "Cela peut prendre un moment...",
+ "failed": "Export échoué",
+ "tryAgain": "Veuillez réessayer",
+ "finalizingVideoTitle": "Finalisation de la vidéo",
+ "compilingGif": "Compilation du GIF",
+ "exportingFormat": "Export de {{format}}",
+ "compiling": "Compilation en cours",
+ "renderingFrames": "Rendu des images",
+ "processing": "Traitement en cours...",
+ "finalizing": "Finalisation...",
+ "compilingStatus": "Compilation...",
+ "status": "Statut",
+ "format": "Format",
+ "frames": "Images",
+ "cancelExport": "Annuler l'export",
+ "savedSuccessfully": "{{format}} enregistré avec succès !"
+ },
+ "tutorial": {
+ "triggerLabel": "Comment fonctionne la coupe",
+ "title": "Comment fonctionne la coupe",
+ "description": "Comprendre comment supprimer les parties indésirables de votre vidéo.",
+ "explanationBefore": "L'outil Coupe fonctionne en définissant les segments que vous souhaitez",
+ "remove": "supprimer",
+ "explanationMiddle": " — tout ce qui est",
+ "covered": "couvert",
+ "explanationAfter": "par un segment de coupe rouge sera coupé lors de l'export.",
+ "visualExample": "Exemple visuel",
+ "removed": "SUPPRIMÉ",
+ "kept": "Conservé",
+ "part1": "Partie 1",
+ "part2": "Partie 2",
+ "part3": "Partie 3",
+ "finalVideo": "Vidéo finale",
+ "step1Title": "1. Ajouter une coupe",
+ "step1DescriptionBefore": "Appuyez sur ",
+ "step1DescriptionAfter": " ou cliquez sur l'icône ciseaux pour marquer une section à supprimer.",
+ "step2Title": "2. Ajuster",
+ "step2Description": "Faites glisser les bords de la région rouge pour couvrir exactement ce que vous souhaitez couper."
+ },
+ "unsavedChanges": {
+ "title": "Modifications non enregistrées",
+ "message": "Vous avez des modifications non enregistrées.",
+ "detail": "Voulez-vous enregistrer votre projet avant de fermer ?",
+ "saveAndClose": "Enregistrer et fermer",
+ "discardAndClose": "Ignorer et fermer",
+ "loadProject": "Charger un projet…",
+ "saveProject": "Enregistrer le projet…",
+ "saveProjectAs": "Enregistrer le projet sous…"
+ },
+ "fileDialogs": {
+ "saveGif": "Enregistrer le GIF exporté",
+ "saveVideo": "Enregistrer la vidéo exportée",
+ "selectVideo": "Sélectionner un fichier vidéo",
+ "saveProject": "Enregistrer le projet OpenScreen",
+ "openProject": "Ouvrir un projet OpenScreen",
+ "gifImage": "Image GIF",
+ "mp4Video": "Vidéo MP4",
+ "videoFiles": "Fichiers vidéo",
+ "openscreenProject": "Projet OpenScreen",
+ "allFiles": "Tous les fichiers"
+ }
+}
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
new file mode 100644
index 0000000..6380c6b
--- /dev/null
+++ b/src/i18n/locales/fr/editor.json
@@ -0,0 +1,45 @@
+{
+ "newRecording": {
+ "title": "Retour à l'enregistreur",
+ "description": "Votre session actuelle a été enregistrée.",
+ "cancel": "Annuler",
+ "confirm": "Confirmer"
+ },
+ "errors": {
+ "noVideoLoaded": "Aucune vidéo chargée",
+ "videoNotReady": "Vidéo non prête",
+ "unableToDetermineSourcePath": "Impossible de déterminer le chemin de la vidéo source",
+ "failedToSaveGif": "Échec de l'enregistrement du GIF",
+ "gifExportFailed": "L'export du GIF a échoué",
+ "failedToSaveVideo": "Échec de l'enregistrement de la vidéo",
+ "exportFailed": "L'export a échoué",
+ "exportFailedWithError": "L'export a échoué : {{error}}",
+ "exportBackgroundLoadFailed": "L'export a échoué : impossible de charger l'image d'arrière-plan ({{url}})",
+ "failedToSaveExport": "Échec de l'enregistrement de l'export",
+ "failedToSaveExportedVideo": "Échec de l'enregistrement de la vidéo exportée",
+ "failedToRevealInFolder": "Erreur lors de l'affichage dans le dossier : {{error}}"
+ },
+ "export": {
+ "canceled": "Export annulé",
+ "exportedSuccessfully": "{{format}} exporté avec succès"
+ },
+ "project": {
+ "saveCanceled": "Enregistrement du projet annulé",
+ "failedToSave": "Échec de l'enregistrement du projet",
+ "savedTo": "Projet enregistré dans {{path}}",
+ "failedToLoad": "Échec du chargement du projet",
+ "invalidFormat": "Format de fichier projet invalide",
+ "loadedFrom": "Projet chargé depuis {{path}}"
+ },
+ "recording": {
+ "failedCameraAccess": "Échec de la demande d'accès à la caméra.",
+ "cameraBlocked": "L'accès à la caméra est bloqué. Activez-le dans les paramètres système pour utiliser la webcam.",
+ "systemAudioUnavailable": "Audio système non disponible. Enregistrement sans audio système.",
+ "microphoneDenied": "Accès au microphone refusé. L'enregistrement continuera sans audio.",
+ "cameraDenied": "Accès à la caméra refusé. L'enregistrement continuera sans webcam.",
+ "cameraDisconnected": "Webcam déconnectée.",
+ "cameraNotFound": "Caméra introuvable.",
+ "permissionDenied": "Permission d'enregistrement refusée. Veuillez autoriser l'enregistrement d'écran."
+ },
+ "loadingVideo": "Chargement de la vidéo..."
+}
diff --git a/src/i18n/locales/fr/launch.json b/src/i18n/locales/fr/launch.json
new file mode 100644
index 0000000..55521cb
--- /dev/null
+++ b/src/i18n/locales/fr/launch.json
@@ -0,0 +1,43 @@
+{
+ "tooltips": {
+ "hideHUD": "Masquer le HUD",
+ "closeApp": "Fermer l'application",
+ "restartRecording": "Redémarrer l'enregistrement",
+ "cancelRecording": "Annuler l'enregistrement",
+ "pauseRecording": "Mettre en pause l'enregistrement",
+ "resumeRecording": "Reprendre l'enregistrement",
+ "openVideoFile": "Ouvrir un fichier vidéo",
+ "openProject": "Ouvrir un projet"
+ },
+ "audio": {
+ "enableSystemAudio": "Activer l'audio système",
+ "disableSystemAudio": "Désactiver l'audio système",
+ "enableMicrophone": "Activer le microphone",
+ "disableMicrophone": "Désactiver le microphone",
+ "defaultMicrophone": "Microphone par défaut"
+ },
+ "webcam": {
+ "enableWebcam": "Activer la webcam",
+ "disableWebcam": "Désactiver la webcam",
+ "defaultCamera": "Caméra par défaut",
+ "searching": "Recherche en cours...",
+ "noneFound": "Aucune caméra trouvée",
+ "unavailable": "Caméra non disponible"
+ },
+ "sourceSelector": {
+ "loading": "Chargement des sources...",
+ "screens": "Écrans ({{count}})",
+ "windows": "Fenêtres ({{count}})",
+ "defaultSourceName": "Écran"
+ },
+ "recording": {
+ "selectSource": "Veuillez sélectionner une source à enregistrer"
+ },
+ "language": "Langue",
+ "systemLanguagePrompt": {
+ "title": "Utiliser la langue de votre système ?",
+ "description": "Nous avons détecté {{language}} comme langue système. Voulez-vous passer OpenScreen en {{language}} ?",
+ "switch": "Passer en {{language}}",
+ "keepDefault": "Conserver la langue actuelle"
+ }
+}
diff --git a/src/i18n/locales/fr/settings.json b/src/i18n/locales/fr/settings.json
new file mode 100644
index 0000000..66df1ba
--- /dev/null
+++ b/src/i18n/locales/fr/settings.json
@@ -0,0 +1,187 @@
+{
+ "zoom": {
+ "level": "Niveau de zoom",
+ "selectRegion": "Sélectionnez une région de zoom à ajuster",
+ "deleteZoom": "Supprimer le zoom",
+ "focusMode": {
+ "title": "Mode focus",
+ "manual": "Manuel",
+ "auto": "Auto",
+ "autoDescription": "La caméra suit la position du curseur enregistré"
+ },
+ "speed": {
+ "title": "Vitesse du zoom",
+ "instant": "Instantané",
+ "fast": "Rapide",
+ "smooth": "Fluide",
+ "lazy": "Lent"
+ }
+ },
+ "speed": {
+ "playbackSpeed": "Vitesse de lecture",
+ "selectRegion": "Sélectionnez une région de vitesse à ajuster",
+ "deleteRegion": "Supprimer la région de vitesse",
+ "customPlaybackSpeed": "Vitesse de lecture personnalisée",
+ "maxSpeedError": "La vitesse ne peut pas dépasser 16×"
+ },
+ "trim": {
+ "deleteRegion": "Supprimer la région de coupe"
+ },
+ "layout": {
+ "title": "Mise en page",
+ "preset": "Préréglage",
+ "selectPreset": "Choisir un préréglage",
+ "pictureInPicture": "Incrustation d'image",
+ "verticalStack": "Empilement vertical",
+ "dualFrame": "Double cadre",
+ "webcamShape": "Forme de la caméra",
+ "webcamSize": "Taille de la caméra"
+ },
+ "effects": {
+ "title": "Effets vidéo",
+ "blurBg": "Flou arrière-plan",
+ "motionBlur": "Flou de mouvement",
+ "off": "désactivé",
+ "shadow": "Ombre",
+ "roundness": "Arrondi",
+ "padding": "Marge"
+ },
+ "background": {
+ "title": "Arrière-plan",
+ "image": "Image",
+ "color": "Couleur",
+ "gradient": "Dégradé",
+ "uploadCustom": "Téléverser une image",
+ "gradientLabel": "Dégradé {{index}}",
+ "colorWheel": "Roue chromatique",
+ "colorPalette": "Palette de couleurs"
+ },
+ "crop": {
+ "title": "Recadrage",
+ "cropVideo": "Recadrer la vidéo",
+ "dragInstruction": "Faites glisser chaque côté pour ajuster la zone de recadrage",
+ "ratio": "Ratio",
+ "free": "Libre",
+ "done": "Terminer",
+ "lockAspectRatio": "Verrouiller le ratio",
+ "unlockAspectRatio": "Déverrouiller le ratio"
+ },
+ "exportFormat": {
+ "mp4": "MP4",
+ "gif": "GIF",
+ "mp4Video": "Vidéo MP4",
+ "mp4Description": "Fichier vidéo haute qualité",
+ "gifAnimation": "Animation GIF",
+ "gifDescription": "Image animée pour le partage"
+ },
+ "exportQuality": {
+ "title": "Qualité d'export",
+ "low": "Faible",
+ "medium": "Moyenne",
+ "high": "Haute"
+ },
+ "gifSettings": {
+ "frameRate": "Fréquence d'images GIF",
+ "size": "Taille du GIF",
+ "loop": "GIF en boucle"
+ },
+ "project": {
+ "save": "Enregistrer le projet",
+ "load": "Charger un projet"
+ },
+ "export": {
+ "videoButton": "Exporter la vidéo",
+ "gifButton": "Exporter le GIF",
+ "chooseSaveLocation": "Choisir l'emplacement d'enregistrement"
+ },
+ "links": {
+ "reportBug": "Signaler un bug",
+ "starOnGithub": "Étoile sur GitHub"
+ },
+ "imageUpload": {
+ "invalidFileType": "Type de fichier invalide",
+ "jpgOnly": "Veuillez téléverser un fichier image JPG ou JPEG.",
+ "uploadSuccess": "Image personnalisée téléversée avec succès !",
+ "failedToUpload": "Échec du téléversement de l'image",
+ "errorReading": "Une erreur s'est produite lors de la lecture du fichier."
+ },
+ "annotation": {
+ "title": "Paramètres d'annotation",
+ "active": "Actif",
+ "typeText": "Texte",
+ "typeImage": "Image",
+ "typeArrow": "Flèche",
+ "typeBlur": "Flou",
+ "textContent": "Contenu du texte",
+ "textPlaceholder": "Saisissez votre texte...",
+ "fontStyle": "Style de police",
+ "selectStyle": "Choisir un style",
+ "size": "Taille",
+ "customFonts": "Polices personnalisées",
+ "textColor": "Couleur du texte",
+ "background": "Arrière-plan",
+ "none": "Aucun",
+ "color": "Couleur",
+ "colorWheel": "Roue chromatique",
+ "colorPalette": "Palette de couleurs",
+ "clearBackground": "Supprimer l'arrière-plan",
+ "uploadImage": "Téléverser une image",
+ "supportedFormats": "Formats supportés : JPG, PNG, GIF, WebP",
+ "arrowDirection": "Direction de la flèche",
+ "strokeWidth": "Épaisseur du trait : {{width}}px",
+ "arrowColor": "Couleur de la flèche",
+ "blurType": "Type de flou",
+ "blurTypeBlur": "Flou",
+ "blurTypeMosaic": "Flou mosaique",
+ "blurColor": "Couleur du flou",
+ "blurColorWhite": "Blanc",
+ "blurColorBlack": "Noir",
+ "blurShape": "Forme du flou",
+ "blurIntensity": "Intensité du flou",
+ "mosaicBlockSize": "Taille des blocs de mosaique",
+ "blurShapeRectangle": "Rectangle",
+ "blurShapeOval": "Ovale",
+ "blurShapeFreehand": "Main levée",
+ "deleteAnnotation": "Supprimer l'annotation",
+ "shortcutsAndTips": "Raccourcis & Astuces",
+ "tipMovePlayhead": "Déplacez la tête de lecture sur la section d'annotation et sélectionnez un élément.",
+ "tipTabCycle": "Utilisez Tab pour cycler entre les éléments superposés.",
+ "tipShiftTabCycle": "Utilisez Shift+Tab pour cycler en sens inverse.",
+ "invalidImageType": "Type de fichier invalide",
+ "imageFormatsOnly": "Veuillez téléverser un fichier image JPG, PNG, GIF ou WebP.",
+ "imageUploadSuccess": "Image téléversée avec succès !",
+ "failedImageUpload": "Échec du téléversement de l'image"
+ },
+ "fontStyles": {
+ "classic": "Classique",
+ "editor": "Éditeur",
+ "strong": "Gras",
+ "typewriter": "Machine à écrire",
+ "deco": "Déco",
+ "simple": "Simple",
+ "modern": "Moderne",
+ "clean": "Épuré"
+ },
+ "customFont": {
+ "dialogTitle": "Ajouter une police Google",
+ "urlLabel": "URL d'import Google Fonts",
+ "urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+ "urlHelp": "Obtenez-la depuis Google Fonts : Sélectionnez une police → Cliquez sur « Obtenir la police » → Copiez l'URL @import",
+ "nameLabel": "Nom d'affichage",
+ "namePlaceholder": "Ma police personnalisée",
+ "nameHelp": "C'est ainsi que la police apparaîtra dans le sélecteur de polices",
+ "addButton": "Ajouter la police",
+ "addingButton": "Ajout en cours...",
+ "errorEmptyUrl": "Veuillez saisir une URL d'import Google Fonts",
+ "errorInvalidUrl": "Veuillez saisir une URL Google Fonts valide",
+ "errorEmptyName": "Veuillez saisir un nom de police",
+ "errorExtractFailed": "Impossible d'extraire la famille de polices depuis l'URL",
+ "successMessage": "Police « {{fontName}} » ajoutée avec succès",
+ "failedToAdd": "Échec de l'ajout de la police",
+ "errorTimeout": "La police a mis trop de temps à charger. Vérifiez l'URL et réessayez.",
+ "errorLoadFailed": "La police n'a pas pu être chargée. Vérifiez que l'URL Google Fonts est correcte."
+ },
+ "language": {
+ "title": "Langue"
+ }
+}
diff --git a/src/i18n/locales/fr/shortcuts.json b/src/i18n/locales/fr/shortcuts.json
new file mode 100644
index 0000000..a0ce83f
--- /dev/null
+++ b/src/i18n/locales/fr/shortcuts.json
@@ -0,0 +1,37 @@
+{
+ "title": "Raccourcis clavier",
+ "customize": "Personnaliser",
+ "configurable": "Configurable",
+ "fixed": "Fixe",
+ "pressKey": "Appuyez sur une touche…",
+ "clickToChange": "Cliquez pour modifier",
+ "pressEscToCancel": "Appuyez sur Échap pour annuler",
+ "helpText": "Cliquez sur un raccourci puis appuyez sur la nouvelle combinaison de touches. Appuyez sur Échap pour annuler.",
+ "resetToDefaults": "Réinitialiser les valeurs par défaut",
+ "alreadyUsedBy": "Déjà utilisé par {{action}}",
+ "swap": "Échanger",
+ "reservedShortcut": "Ce raccourci est réservé pour « {{label}} » et ne peut pas être réassigné.",
+ "savedToast": "Raccourcis clavier enregistrés",
+ "resetToast": "Réinitialisé aux raccourcis par défaut — cliquez sur Enregistrer pour appliquer",
+ "actions": {
+ "addZoom": "Ajouter un zoom",
+ "addTrim": "Ajouter une coupe",
+ "addSpeed": "Ajouter une vitesse",
+ "addAnnotation": "Ajouter une annotation",
+ "addBlur": "Ajouter un flou",
+ "addKeyframe": "Ajouter une image-clé",
+ "deleteSelected": "Supprimer la sélection",
+ "playPause": "Lecture / Pause"
+ },
+ "fixedActions": {
+ "undo": "Annuler",
+ "redo": "Rétablir",
+ "cycleAnnotationsForward": "Parcourir les annotations en avant",
+ "cycleAnnotationsBackward": "Parcourir les annotations en arrière",
+ "deleteSelectedAlt": "Supprimer la sélection (alt)",
+ "panTimeline": "Panoramique de la timeline",
+ "zoomTimeline": "Zoom de la timeline",
+ "frameBack": "Image précédente",
+ "frameForward": "Image suivante"
+ }
+}
diff --git a/src/i18n/locales/fr/timeline.json b/src/i18n/locales/fr/timeline.json
new file mode 100644
index 0000000..b4c6e16
--- /dev/null
+++ b/src/i18n/locales/fr/timeline.json
@@ -0,0 +1,55 @@
+{
+ "buttons": {
+ "addZoom": "Ajouter un zoom (Z)",
+ "suggestZooms": "Suggérer des zooms depuis le curseur",
+ "addTrim": "Ajouter une coupe (T)",
+ "addAnnotation": "Ajouter une annotation (A)",
+ "addSpeed": "Ajouter une vitesse (S)",
+ "addBlur": "Ajouter un flou (B)"
+ },
+ "hints": {
+ "pressZoom": "Appuyez sur Z pour ajouter un zoom",
+ "pressTrim": "Appuyez sur T pour ajouter une coupe",
+ "pressAnnotation": "Appuyez sur A pour ajouter une annotation",
+ "pressSpeed": "Appuyez sur S pour ajouter une vitesse",
+ "pressBlur": "Appuyez sur B pour ajouter une zone de flou"
+ },
+ "labels": {
+ "pan": "Panoramique",
+ "zoom": "Zoom",
+ "trim": "Couper",
+ "speed": "Vitesse",
+ "zoomItem": "Zoom {{index}}",
+ "trimItem": "Coupe {{index}}",
+ "speedItem": "Vitesse {{index}}",
+ "annotationItem": "Annotation",
+ "imageItem": "Image",
+ "emptyText": "Texte vide",
+ "blurItem": "Flou {{index}}"
+ },
+ "emptyState": {
+ "noVideo": "Aucune vidéo chargée",
+ "dragAndDrop": "Glissez-déposez une vidéo pour commencer à éditer"
+ },
+ "errors": {
+ "cannotPlaceZoom": "Impossible de placer le zoom ici",
+ "zoomExistsAtLocation": "Un zoom existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant.",
+ "zoomSuggestionUnavailable": "Gestionnaire de suggestions de zoom non disponible",
+ "noCursorTelemetry": "Aucune télémétrie de curseur disponible",
+ "noCursorTelemetryDescription": "Enregistrez d\u0027abord un screencast pour générer des suggestions basées sur le curseur.",
+ "noUsableTelemetry": "Aucune télémétrie de curseur utilisable",
+ "noUsableTelemetryDescription": "L\u0027enregistrement ne contient pas suffisamment de données de mouvement du curseur.",
+ "noDwellMoments": "Aucun moment de pause du curseur trouvé",
+ "noDwellMomentsDescription": "Essayez un enregistrement avec des pauses plus lentes du curseur sur les actions importantes.",
+ "noAutoZoomSlots": "Aucun emplacement de zoom automatique disponible",
+ "noAutoZoomSlotsDescription": "Les points de pause détectés chevauchent des régions de zoom existantes.",
+ "cannotPlaceTrim": "Impossible de placer la coupe ici",
+ "trimExistsAtLocation": "Une coupe existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant.",
+ "cannotPlaceSpeed": "Impossible de placer la vitesse ici",
+ "speedExistsAtLocation": "Une région de vitesse existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant."
+ },
+ "success": {
+ "addedZoomSuggestions": "{{count}} suggestion de zoom basée sur le curseur ajoutée",
+ "addedZoomSuggestionsPlural": "{{count}} suggestions de zoom basées sur le curseur ajoutées"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/common.json b/src/i18n/locales/ja-JP/common.json
new file mode 100644
index 0000000..ee2205a
--- /dev/null
+++ b/src/i18n/locales/ja-JP/common.json
@@ -0,0 +1,30 @@
+{
+ "actions": {
+ "cancel": "キャンセル",
+ "save": "保存",
+ "delete": "削除",
+ "close": "閉じる",
+ "share": "共有",
+ "done": "完了",
+ "open": "開く",
+ "upload": "アップロード",
+ "export": "エクスポート",
+ "showInFolder": "フォルダに表示",
+ "file": "ファイル",
+ "edit": "編集",
+ "view": "表示",
+ "window": "ウィンドウ",
+ "quit": "終了",
+ "stopRecording": "録画停止"
+ },
+ "playback": {
+ "play": "再生",
+ "pause": "一時停止",
+ "fullscreen": "全画面表示",
+ "exitFullscreen": "全画面表示を終了"
+ },
+ "locale": {
+ "name": "日本語",
+ "short": "JA"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/dialogs.json b/src/i18n/locales/ja-JP/dialogs.json
new file mode 100644
index 0000000..3c3fce5
--- /dev/null
+++ b/src/i18n/locales/ja-JP/dialogs.json
@@ -0,0 +1,71 @@
+{
+ "export": {
+ "complete": "エクスポート完了",
+ "yourFormatReady": "あなたの{{format}}が準備できました",
+ "showInFolder": "フォルダで表示",
+ "finalizingVideo": "ビデオのエクスポートを最終処理中...",
+ "compilingGifProgress": "GIFをコンパイル中... {{progress}}%",
+ "compilingGifWait": "GIFをコンパイル中... しばらくお待ちください",
+ "takeMoment": "少々お待ちください...",
+ "failed": "エクスポートに失敗しました",
+ "tryAgain": "もう一度お試しください",
+ "finalizingVideoTitle": "ビデオの最終処理",
+ "compilingGif": "GIFをコンパイル中",
+ "exportingFormat": "{{format}}をエクスポート中",
+ "compiling": "コンパイル中",
+ "renderingFrames": "フレームをレンダリング中",
+ "processing": "処理中...",
+ "finalizing": "最終処理中...",
+ "compilingStatus": "コンパイル中...",
+ "status": "ステータス",
+ "format": "フォーマット",
+ "frames": "フレーム",
+ "cancelExport": "エクスポートをキャンセル",
+ "savedSuccessfully": "{{format}}を正常に保存しました！"
+ },
+ "tutorial": {
+ "triggerLabel": "トリミングの仕組み",
+ "title": "トリミングの仕組み",
+ "description": "動画の不要な部分を削除する方法について解説します。",
+ "explanationBefore": "トリムツールは、動画から",
+ "remove": "「削除したい部分」",
+ "explanationMiddle": "を指定することで機能します。エクスポート時には、赤い枠で",
+ "covered": "囲まれた部分",
+ "explanationAfter": "がすべてカットされます。",
+ "visualExample": "視覚的な例",
+ "removed": "削除",
+ "kept": "保持",
+ "part1": "パート 1",
+ "part2": "パート 2",
+ "part3": "パート 3",
+ "finalVideo": "完成動画",
+ "step1Title": "1. 削除範囲を追加",
+ "step1DescriptionBefore": "キーボードの",
+ "step1DescriptionAfter": "、またはハサミのアイコンをクリックして、削除したい範囲を指定します。",
+
+ "step2Title": "2. 範囲を調整",
+ "step2Description": "赤い領域の両端をドラッグして、削除したい範囲を正確に調整します。"
+ },
+ "unsavedChanges": {
+ "title": "未保存の変更",
+ "message": "未保存の変更があります。",
+ "detail": "閉じる前にプロジェクトを保存しますか？",
+ "saveAndClose": "保存して閉じる",
+ "discardAndClose": "破棄して閉じる",
+ "loadProject": "プロジェクトを読み込む…",
+ "saveProject": "プロジェクトを保存…",
+ "saveProjectAs": "プロジェクトを名前を付けて保存…"
+ },
+ "fileDialogs": {
+ "saveGif": "エクスポートしたGIFを保存",
+ "saveVideo": "エクスポートしたビデオを保存",
+ "selectVideo": "ビデオファイルを選択",
+ "saveProject": "OpenScreen プロジェクトを保存",
+ "openProject": "OpenScreen プロジェクトを開く",
+ "gifImage": "GIF 画像",
+ "mp4Video": "MP4 ビデオ",
+ "videoFiles": "ビデオファイル",
+ "openscreenProject": "OpenScreen プロジェクト",
+ "allFiles": "すべてのファイル"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/editor.json b/src/i18n/locales/ja-JP/editor.json
new file mode 100644
index 0000000..401dbc7
--- /dev/null
+++ b/src/i18n/locales/ja-JP/editor.json
@@ -0,0 +1,45 @@
+{
+ "newRecording": {
+ "title": "レコーダーに戻る",
+ "description": "現在の作業内容が保存されました。",
+ "cancel": "キャンセル",
+ "confirm": "確認"
+ },
+ "loadingVideo": "ビデオを読み込み中...",
+ "errors": {
+ "noVideoLoaded": "ビデオが読み込まれていません",
+ "videoNotReady": "ビデオが準備できていません",
+ "unableToDetermineSourcePath": "ソースビデオのパスを特定できません",
+ "failedToSaveGif": "GIFの保存に失敗しました",
+ "gifExportFailed": "GIFのエクスポートに失敗しました",
+ "failedToSaveVideo": "ビデオの保存に失敗しました",
+ "exportFailed": "エクスポートに失敗しました",
+ "exportFailedWithError": "エクスポートに失敗しました: {{error}}",
+ "failedToSaveExport": "エクスポートの保存に失敗しました",
+ "failedToSaveExportedVideo": "エクスポートしたビデオの保存に失敗しました",
+ "failedToRevealInFolder": "フォルダの表示に失敗しました: {{error}}",
+ "exportBackgroundLoadFailed": "エクスポートに失敗しました: 背景画像を読み込めませんでした ({{url}})"
+ },
+ "export": {
+ "canceled": "エクスポートがキャンセルされました",
+ "exportedSuccessfully": "{{format}}を正常にエクスポートしました"
+ },
+ "project": {
+ "saveCanceled": "プロジェクトの保存がキャンセルされました",
+ "failedToSave": "プロジェクトの保存に失敗しました",
+ "savedTo": "プロジェクトを保存しました: {{path}}",
+ "failedToLoad": "プロジェクトの読み込みに失敗しました",
+ "invalidFormat": "無効なプロジェクトファイル形式です",
+ "loadedFrom": "プロジェクトを読み込みました: {{path}}"
+ },
+ "recording": {
+ "failedCameraAccess": "カメラのアクセス要求に失敗しました。",
+ "cameraBlocked": "カメラのアクセスがブロックされています。システム設定で有効にして、ウェブカメラを使用してください。",
+ "systemAudioUnavailable": "システムオーディオが利用できません。システムオーディオなしで録画します。",
+ "microphoneDenied": "マイクのアクセスが拒否されました。オーディオなしで録画を続行します。",
+ "cameraDenied": "カメラのアクセスが拒否されました。ウェブカメラなしで録画を続行します。",
+ "permissionDenied": "録画の権限が拒否されました。画面録画を許可してください。",
+ "cameraDisconnected": "ウェブカメラが切断されました。",
+ "cameraNotFound": "カメラが見つかりません。"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/launch.json b/src/i18n/locales/ja-JP/launch.json
new file mode 100644
index 0000000..4504b00
--- /dev/null
+++ b/src/i18n/locales/ja-JP/launch.json
@@ -0,0 +1,43 @@
+{
+ "tooltips": {
+ "hideHUD": "HUDを隠す",
+ "closeApp": "アプリを閉じる",
+ "restartRecording": "録画を再開",
+ "cancelRecording": "録画をキャンセル",
+ "pauseRecording": "録画を一時停止",
+ "resumeRecording": "録画を再開",
+ "openVideoFile": "ビデオファイルを開く",
+ "openProject": "プロジェクトを開く"
+ },
+ "audio": {
+ "enableSystemAudio": "システムオーディオを有効にする",
+ "disableSystemAudio": "システムオーディオを無効にする",
+ "enableMicrophone": "マイクを有効にする",
+ "disableMicrophone": "マイクを無効にする",
+ "defaultMicrophone": "デフォルトのマイク"
+ },
+ "webcam": {
+ "enableWebcam": "ウェブカメラを有効にする",
+ "disableWebcam": "ウェブカメラを無効にする",
+ "defaultCamera": "デフォルトのカメラ",
+ "searching": "検索中...",
+ "noneFound": "カメラが見つかりません",
+ "unavailable": "カメラが利用できません"
+ },
+ "sourceSelector": {
+ "loading": "ソースを読み込み中...",
+ "screens": "画面 ({{count}})",
+ "windows": "ウィンドウ ({{count}})",
+ "defaultSourceName": "画面"
+ },
+ "recording": {
+ "selectSource": "録画するソースを選択してください"
+ },
+ "language": "言語",
+ "systemLanguagePrompt": {
+ "title": "システム言語を使用しますか？",
+ "description": "システム言語として{{language}}が検出されました。OpenScreenを{{language}}に切り替えますか？",
+ "switch": "{{language}}に切り替え",
+ "keepDefault": "現在の言語を保持"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/settings.json b/src/i18n/locales/ja-JP/settings.json
new file mode 100644
index 0000000..129217c
--- /dev/null
+++ b/src/i18n/locales/ja-JP/settings.json
@@ -0,0 +1,187 @@
+{
+ "zoom": {
+ "level": "ズーム倍率",
+ "selectRegion": "ズーム範囲を選択して調整",
+ "deleteZoom": "ズームを削除",
+ "focusMode": {
+ "title": "フォーカスモード",
+ "manual": "手動",
+ "auto": "自動",
+ "autoDescription": "カメラが録画中のカーソル位置に追従します"
+ },
+ "speed": {
+ "title": "ズーム速度",
+ "instant": "即時",
+ "fast": "高速",
+ "smooth": "滑らか",
+ "lazy": "遅延"
+ }
+ },
+ "speed": {
+ "playbackSpeed": "再生速度",
+ "selectRegion": "速度範囲を選択して調整",
+ "deleteRegion": "速度範囲を削除",
+ "customPlaybackSpeed": "カスタム再生速度",
+ "maxSpeedError": "速度は16×を超えることはできません"
+ },
+ "trim": {
+ "deleteRegion": "トリム範囲を削除"
+ },
+ "layout": {
+ "title": "レイアウト",
+ "preset": "プリセット",
+ "selectPreset": "プリセットを選択",
+ "pictureInPicture": "ピクチャーインピクチャー",
+ "verticalStack": "縦積み",
+ "dualFrame": "デュアルフレーム",
+ "webcamShape": "カメラの形状",
+ "webcamSize": "カメラのサイズ"
+ },
+ "effects": {
+ "title": "ビデオ効果",
+ "blurBg": "背景をぼかす",
+ "motionBlur": "モーションブラー",
+ "off": "オフ",
+ "shadow": "影",
+ "roundness": "丸み",
+ "padding": "余白"
+ },
+ "background": {
+ "title": "背景",
+ "image": "画像",
+ "color": "色",
+ "gradient": "グラデーション",
+ "uploadCustom": "カスタムをアップロード",
+ "gradientLabel": "グラデーション {{index}}",
+ "colorWheel": "カラーホイール",
+ "colorPalette": "カラーパレット"
+ },
+ "crop": {
+ "title": "クロップ",
+ "cropVideo": "ビデオをクロップ",
+ "dragInstruction": "各辺をドラッグしてクロップ範囲を調整",
+ "ratio": "比率",
+ "free": "自由",
+ "done": "完了",
+ "lockAspectRatio": "アスペクト比を固定",
+ "unlockAspectRatio": "アスペクト比の固定を解除"
+ },
+ "exportFormat": {
+ "mp4": "MP4",
+ "gif": "GIF",
+ "mp4Video": "MP4 ビデオ",
+ "mp4Description": "高品質のビデオファイル",
+ "gifAnimation": "GIF アニメーション",
+ "gifDescription": "共有用のアニメーション画像"
+ },
+ "exportQuality": {
+ "title": "エクスポート品質",
+ "low": "低画質",
+ "medium": "中画質",
+ "high": "高画質"
+ },
+ "gifSettings": {
+ "frameRate": "GIF フレームレート",
+ "size": "GIF サイズ",
+ "loop": "GIF をループする"
+ },
+ "project": {
+ "save": "プロジェクトを保存",
+ "load": "プロジェクトを読み込む"
+ },
+ "export": {
+ "videoButton": "ビデオをエクスポート",
+ "gifButton": "GIF をエクスポート",
+ "chooseSaveLocation": "保存場所を選択"
+ },
+ "links": {
+ "reportBug": "バグを報告",
+ "starOnGithub": "GitHub でスターを付ける"
+ },
+ "imageUpload": {
+ "invalidFileType": "無効なファイル形式",
+ "jpgOnly": "JPG または JPEG 画像ファイルをアップロードしてください。",
+ "uploadSuccess": "カスタム画像が正常にアップロードされました！",
+ "failedToUpload": "画像のアップロードに失敗しました",
+ "errorReading": "ファイルの読み取り中にエラーが発生しました。"
+ },
+ "annotation": {
+ "title": "注釈設定",
+ "active": "アクティブ",
+ "typeText": "テキスト",
+ "typeImage": "画像",
+ "typeArrow": "矢印",
+ "typeBlur": "ぼかし",
+ "textContent": "テキスト内容",
+ "textPlaceholder": "テキストを入力してください...",
+ "fontStyle": "フォントスタイル",
+ "selectStyle": "スタイルを選択",
+ "size": "サイズ",
+ "customFonts": "カスタムフォント",
+ "textColor": "文字色",
+ "background": "背景",
+ "none": "なし",
+ "color": "色",
+ "colorWheel": "カラーホイール",
+ "colorPalette": "カラーパレット",
+ "clearBackground": "背景をクリア",
+ "uploadImage": "画像をアップロード",
+ "supportedFormats": "サポートされている形式: JPG, PNG, GIF, WebP",
+ "arrowDirection": "矢印の方向",
+ "strokeWidth": "線の太さ: {{width}}px",
+ "arrowColor": "矢印の色",
+ "blurType": "ぼかしの種類",
+ "blurTypeBlur": "ぼかし",
+ "blurTypeMosaic": "モザイクぼかし",
+ "blurColor": "ぼかしの色",
+ "blurColorWhite": "白",
+ "blurColorBlack": "黒",
+ "blurShape": "ぼかしの形状",
+ "blurIntensity": "ぼかしの強さ",
+ "mosaicBlockSize": "モザイクブロックのサイズ",
+ "blurShapeRectangle": "長方形",
+ "blurShapeOval": "楕円",
+ "blurShapeFreehand": "自由形状",
+ "deleteAnnotation": "注釈を削除",
+ "shortcutsAndTips": "ショートカットとヒント",
+ "tipMovePlayhead": "重なっている注釈セクションに再生ヘッドを移動し、項目を選択します。",
+ "tipTabCycle": "Tabキーを使用して重なっている項目を順に切り替えます。",
+ "tipShiftTabCycle": "Shift+Tabキーを使用して逆順に切り替えます。",
+ "invalidImageType": "無効なファイル形式",
+ "imageFormatsOnly": "JPG、PNG、GIF、またはWebP画像ファイルをアップロードしてください。",
+ "imageUploadSuccess": "画像が正常にアップロードされました！",
+ "failedImageUpload": "画像のアップロードに失敗しました"
+ },
+ "fontStyles": {
+ "classic": "クラシック",
+ "editor": "エディター",
+ "strong": "ストロング",
+ "typewriter": "タイプライター",
+ "deco": "デコ",
+ "simple": "シンプル",
+ "modern": "モダン",
+ "clean": "クリーン"
+ },
+ "customFont": {
+ "dialogTitle": "Googleフォントを追加",
+ "urlLabel": "GoogleフォントのインポートURL",
+ "urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+ "urlHelp": "Googleフォントから取得: フォントを選択 → 「フォントを取得」をクリック → @import URLをコピー",
+ "nameLabel": "表示名",
+ "namePlaceholder": "マイカスタムフォント",
+ "nameHelp": "フォントセレクターに表示される名前です",
+ "addButton": "フォントを追加",
+ "addingButton": "追加中...",
+ "errorEmptyUrl": "GoogleフォントのインポートURLを入力してください",
+ "errorInvalidUrl": "有効なGoogleフォントURLを入力してください",
+ "errorEmptyName": "フォント名を入力してください",
+ "errorExtractFailed": "URLからフォントファミリーを抽出できませんでした",
+ "successMessage": "フォント \"{{fontName}}\" が正常に追加されました",
+ "failedToAdd": "フォントの追加に失敗しました",
+ "errorTimeout": "フォントの読み込みに時間がかかりすぎました。URLを確認して再試行してください。",
+ "errorLoadFailed": "フォントを読み込めませんでした。GoogleフォントのURLが正しいことを確認してください。"
+ },
+ "language": {
+ "title": "言語"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/shortcuts.json b/src/i18n/locales/ja-JP/shortcuts.json
new file mode 100644
index 0000000..d4b4a90
--- /dev/null
+++ b/src/i18n/locales/ja-JP/shortcuts.json
@@ -0,0 +1,37 @@
+{
+ "title": "キーボードショートカット",
+ "customize": "カスタマイズ",
+ "configurable": "設定可能",
+ "fixed": "固定",
+ "pressKey": "キーを押してください…",
+ "clickToChange": "クリックして変更",
+ "pressEscToCancel": "Escキーを押してキャンセル",
+ "helpText": "ショートカットをクリックして新しいキーの組み合わせを押します。Escキーを押してキャンセルします。",
+ "resetToDefaults": "デフォルトにリセット",
+ "alreadyUsedBy": "すでに {{action}} に使用されています",
+ "swap": "入れ替え",
+ "reservedShortcut": "このショートカットは \"{{label}}\" に予約されており、再割り当てできません。",
+ "savedToast": "キーボードショートカットが保存されました",
+ "resetToast": "デフォルトのショートカットにリセット — 保存をクリックして適用",
+ "actions": {
+ "addZoom": "ズームを追加",
+ "addTrim": "トリムを追加",
+ "addSpeed": "速度を追加",
+ "addAnnotation": "注釈を追加",
+ "addBlur": "ぼかしを追加",
+ "addKeyframe": "キーフレームを追加",
+ "deleteSelected": "選択を削除",
+ "playPause": "再生 / 一時停止"
+ },
+ "fixedActions": {
+ "undo": "元に戻す",
+ "redo": "やり直す",
+ "cycleAnnotationsForward": "注釈を順に切り替え",
+ "cycleAnnotationsBackward": "注釈を逆順に切り替え",
+ "deleteSelectedAlt": "選択を削除 (alt)",
+ "panTimeline": "タイムラインをパン",
+ "zoomTimeline": "タイムラインをズーム",
+ "frameBack": "フレームを戻す",
+ "frameForward": "フレームを進める"
+ }
+}
diff --git a/src/i18n/locales/ja-JP/timeline.json b/src/i18n/locales/ja-JP/timeline.json
new file mode 100644
index 0000000..e0507f6
--- /dev/null
+++ b/src/i18n/locales/ja-JP/timeline.json
@@ -0,0 +1,55 @@
+{
+ "buttons": {
+ "addZoom": "ズームを追加 (Z)",
+ "suggestZooms": "カーソル位置からズームを提案",
+ "addTrim": "トリムを追加 (T)",
+ "addAnnotation": "注釈を追加 (A)",
+ "addBlur": "ぼかしを追加 (B)",
+ "addSpeed": "速度を追加 (S)"
+ },
+ "hints": {
+ "pressZoom": "Zキーを押してズームを追加",
+ "pressTrim": "Tキーを押してトリムを追加",
+ "pressAnnotation": "Aキーを押して注釈を追加",
+ "pressBlur": "Bキーを押してぼかしを追加",
+ "pressSpeed": "Sキーを押して速度を追加"
+ },
+ "labels": {
+ "pan": "移動",
+ "zoom": "ズーム",
+ "trim": "トリム",
+ "speed": "速度",
+ "zoomItem": "ズーム {{index}}",
+ "trimItem": "トリム {{index}}",
+ "speedItem": "速度 {{index}}",
+ "annotationItem": "注釈",
+ "blurItem": "ぼかし {{index}}",
+ "imageItem": "画像",
+ "emptyText": "空のテキスト"
+ },
+ "emptyState": {
+ "noVideo": "ビデオが読み込まれていません",
+ "dragAndDrop": "ビデオをドラッグアンドドロップして編集を開始してください"
+ },
+ "errors": {
+ "cannotPlaceZoom": "ここにズームを配置できません",
+ "zoomExistsAtLocation": "この場所にはすでにズームが存在するか、十分なスペースがありません。",
+ "zoomSuggestionUnavailable": "ズームの自動提案機能が利用できません",
+ "noCursorTelemetry": "カーソルの動きが記録されていません",
+ "noCursorTelemetryDescription": "まず画面収録を行い、カーソルに基づく提案を生成してください。",
+ "noUsableTelemetry": "使用可能なカーソルの動きデータがありません",
+ "noUsableTelemetryDescription": "録画には十分なカーソルの動きデータが含まれていません。",
+ "noDwellMoments": "カーソルが静止したポイントが見つかりません",
+ "noDwellMomentsDescription": "強調したい操作の際に、カーソルを一時停止させて録画してみてください。",
+ "noAutoZoomSlots": "自動ズームを適用できる箇所がありません",
+ "noAutoZoomSlotsDescription": "検出された滞留ポイントが既存のズーム領域と重なっています。",
+ "cannotPlaceTrim": "ここに切り取りを配置できません",
+ "trimExistsAtLocation": "この場所にはすでに切り取りが存在するか、十分なスペースがありません。",
+ "cannotPlaceSpeed": "ここに速度を配置できません",
+ "speedExistsAtLocation": "この場所にはすでに速度が存在するか、十分なスペースがありません。"
+ },
+ "success": {
+ "addedZoomSuggestions": "カーソルに基づくズーム提案を {{count}} 件追加しました",
+ "addedZoomSuggestionsPlural": "カーソルに基づくズーム提案を {{count}} 件追加しました"
+ }
+}
diff --git a/src/i18n/locales/ko-KR/common.json b/src/i18n/locales/ko-KR/common.json
new file mode 100644
index 0000000..5d90118
--- /dev/null
+++ b/src/i18n/locales/ko-KR/common.json
@@ -0,0 +1,30 @@
+{
+ "actions": {
+ "cancel": "취소",
+ "save": "저장",
+ "delete": "삭제",
+ "close": "닫기",
+ "share": "공유",
+ "done": "완료",
+ "open": "열기",
+ "upload": "업로드",
+ "export": "내보내기",
+ "showInFolder": "폴더에 표시",
+ "file": "파일",
+ "edit": "편집",
+ "view": "보기",
+ "window": "창",
+ "quit": "종료",
+ "stopRecording": "녹화 중지"
+ },
+ "playback": {
+ "play": "재생",
+ "pause": "일시정지",
+ "fullscreen": "전체화면",
+ "exitFullscreen": "전체화면 종료"
+ },
+ "locale": {
+ "name": "한국어",
+ "short": "KO"
+ }
+}
diff --git a/src/i18n/locales/ko-KR/dialogs.json b/src/i18n/locales/ko-KR/dialogs.json
new file mode 100644
index 0000000..3093cdf
--- /dev/null
+++ b/src/i18n/locales/ko-KR/dialogs.json
@@ -0,0 +1,70 @@
+{
+ "export": {
+ "complete": "내보내기 완료",
+ "yourFormatReady": "{{format}} 파일이 준비되었습니다",
+ "showInFolder": "폴더에서 보기",
+ "finalizingVideo": "비디오 내보내기 마무리 중...",
+ "compilingGifProgress": "GIF 생성 중... {{progress}}%",
+ "compilingGifWait": "GIF 생성 중... 잠시 시간이 걸릴 수 있습니다",
+ "takeMoment": "잠시 기다려 주세요...",
+ "failed": "내보내기 실패",
+ "tryAgain": "다시 시도해 주세요",
+ "finalizingVideoTitle": "비디오 마무리 중",
+ "compilingGif": "GIF 생성 중",
+ "exportingFormat": "{{format}} 내보내는 중",
+ "compiling": "생성 중...",
+ "renderingFrames": "프레임 렌더링 중",
+ "processing": "처리 중...",
+ "finalizing": "마무리 중...",
+ "compilingStatus": "생성 중...",
+ "status": "상태",
+ "format": "형식",
+ "frames": "프레임",
+ "cancelExport": "내보내기 취소",
+ "savedSuccessfully": "{{format}} 저장이 완료되었습니다!"
+ },
+ "tutorial": {
+ "triggerLabel": "트리밍 사용법",
+ "title": "트리밍 사용법",
+ "description": "비디오에서 불필요한 부분을 잘라내는 방법을 알아보세요.",
+ "explanationBefore": "트림 도구는 제거할 구간을",
+ "remove": "지정",
+ "explanationMiddle": "하는 방식으로 동작합니다 —",
+ "covered": "빨간 트림 구간으로 덮인",
+ "explanationAfter": "부분은 내보낼 때 잘려나갑니다.",
+ "visualExample": "화면 예시",
+ "removed": "제거됨",
+ "kept": "유지됨",
+ "part1": "파트 1",
+ "part2": "파트 2",
+ "part3": "파트 3",
+ "finalVideo": "최종 비디오",
+ "step1Title": "1. 트림 추가",
+ "step1DescriptionBefore": "",
+ "step1DescriptionAfter": "키를 누르거나 가위 아이콘을 클릭해 제거할 구간을 표시하세요.",
+ "step2Title": "2. 조정",
+ "step2Description": "빨간 구간의 가장자리를 드래그해 잘라낼 범위를 설정하세요."
+ },
+ "unsavedChanges": {
+ "title": "저장되지 않은 변경 사항",
+ "message": "저장되지 않은 변경 사항이 있습니다.",
+ "detail": "닫기 전에 프로젝트를 저장하시겠습니까?",
+ "saveAndClose": "저장 후 닫기",
+ "discardAndClose": "저장하지 않고 닫기",
+ "loadProject": "프로젝트 불러오기...",
+ "saveProject": "프로젝트 저장...",
+ "saveProjectAs": "다른 이름으로 프로젝트 저장..."
+ },
+ "fileDialogs": {
+ "saveGif": "내보낸 GIF 저장",
+ "saveVideo": "내보낸 비디오 저장",
+ "selectVideo": "비디오 파일 선택",
+ "saveProject": "OpenScreen 프로젝트 저장",
+ "openProject": "OpenScreen 프로젝트 열기",
+ "gifImage": "GIF 이미지",
+ "mp4Video": "MP4 비디오",
+ "videoFiles": "비디오 파일",
+ "openscreenProject": "OpenScreen 프로젝트",
+ "allFiles": "모든 파일"
+ }
+}
diff --git a/src/i18n/locales/ko-KR/editor.json b/src/i18n/locales/ko-KR/editor.json
new file mode 100644
index 0000000..ce16244
--- /dev/null
+++ b/src/i18n/locales/ko-KR/editor.json
@@ -0,0 +1,45 @@
+{
+ "newRecording": {
+ "title": "녹화로 돌아가기",
+ "description": "현재 세션이 저장되었습니다.",
+ "cancel": "취소",
+ "confirm": "확인"
+ },
+ "loadingVideo": "비디오 로드 중...",
+ "errors": {
+ "noVideoLoaded": "불러온 비디오가 없습니다",
+ "videoNotReady": "비디오가 준비되지 않았습니다",
+ "unableToDetermineSourcePath": "소스 비디오 경로를 확인할 수 없습니다",
+ "failedToSaveGif": "GIF 저장에 실패했습니다",
+ "gifExportFailed": "GIF 내보내기에 실패했습니다",
+ "failedToSaveVideo": "비디오 저장에 실패했습니다",
+ "exportFailed": "내보내기에 실패했습니다",
+ "exportFailedWithError": "내보내기 실패: {{error}}",
+ "exportBackgroundLoadFailed": "내보내기 실패: 배경 이미지를 불러올 수 없습니다 ({{url}})",
+ "failedToSaveExport": "내보낸 파일 저장에 실패했습니다",
+ "failedToSaveExportedVideo": "내보낸 비디오 저장에 실패했습니다",
+ "failedToRevealInFolder": "폴더에서 파일 표시 오류: {{error}}"
+ },
+ "export": {
+ "canceled": "내보내기가 취소되었습니다",
+ "exportedSuccessfully": "{{format}} 내보내기가 완료되었습니다"
+ },
+ "project": {
+ "saveCanceled": "프로젝트 저장이 취소되었습니다",
+ "failedToSave": "프로젝트 저장에 실패했습니다",
+ "savedTo": "프로젝트가 {{path}}에 저장되었습니다",
+ "failedToLoad": "프로젝트 불러오기에 실패했습니다",
+ "invalidFormat": "유효하지 않은 프로젝트 파일 형식입니다",
+ "loadedFrom": "{{path}}에서 프로젝트를 불러왔습니다"
+ },
+ "recording": {
+ "failedCameraAccess": "카메라 접근 권한 요청에 실패했습니다.",
+ "cameraBlocked": "카메라 접근이 차단되어 있습니다. 시스템 설정에서 권한을 허용해 주세요.",
+ "systemAudioUnavailable": "시스템 오디오를 사용할 수 없습니다. 시스템 오디오 없이 녹화합니다.",
+ "microphoneDenied": "마이크 접근이 거부되었습니다. 오디오 없이 녹화를 계속합니다.",
+ "cameraDenied": "카메라 접근이 거부되었습니다. 웹캠 없이 녹화를 계속합니다.",
+ "permissionDenied": "녹화 권한이 거부되었습니다. 화면 녹화를 허용해 주세요.",
+ "cameraDisconnected": "웹캠 연결이 끊어졌습니다.",
+ "cameraNotFound": "카메라를 찾을 수 없습니다."
+ }
+}
diff --git a/src/i18n/locales/ko-KR/launch.json b/src/i18n/locales/ko-KR/launch.json
new file mode 100644
index 0000000..d9f6d6a
--- /dev/null
+++ b/src/i18n/locales/ko-KR/launch.json
@@ -0,0 +1,43 @@
+{
+ "tooltips": {
+ "hideHUD": "HUD 숨기기",
+ "closeApp": "앱 닫기",
+ "restartRecording": "녹화 다시 시작",
+ "cancelRecording": "녹화 취소",
+ "pauseRecording": "녹화 일시정지",
+ "resumeRecording": "녹화 재개",
+ "openVideoFile": "비디오 파일 열기",
+ "openProject": "프로젝트 열기"
+ },
+ "audio": {
+ "enableSystemAudio": "시스템 오디오 활성화",
+ "disableSystemAudio": "시스템 오디오 비활성화",
+ "enableMicrophone": "마이크 활성화",
+ "disableMicrophone": "마이크 비활성화",
+ "defaultMicrophone": "기본 마이크"
+ },
+ "webcam": {
+ "enableWebcam": "웹캠 활성화",
+ "disableWebcam": "웹캠 비활성화",
+ "defaultCamera": "기본 카메라",
+ "searching": "검색 중...",
+ "noneFound": "카메라를 찾을 수 없음",
+ "unavailable": "카메라를 사용할 수 없음"
+ },
+ "sourceSelector": {
+ "loading": "소스 불러오는 중...",
+ "screens": "화면 ({{count}}개)",
+ "windows": "창 ({{count}}개)",
+ "defaultSourceName": "화면"
+ },
+ "recording": {
+ "selectSource": "녹화할 소스를 선택해 주세요"
+ },
+ "language": "언어",
+ "systemLanguagePrompt": {
+ "title": "시스템 언어를 사용하시겠습니까?",
+ "description": "시스템 언어가 {{language}}(으)로 감지되었습니다. OpenScreen을 {{language}}(으)로 전환하시겠습니까?",
+ "switch": "{{language}}(으)로 전환",
+ "keepDefault": "현재 언어 유지"
+ }
+}
diff --git a/src/i18n/locales/ko-KR/settings.json b/src/i18n/locales/ko-KR/settings.json
new file mode 100644
index 0000000..08fdb3c
--- /dev/null
+++ b/src/i18n/locales/ko-KR/settings.json
@@ -0,0 +1,180 @@
+{
+ "zoom": {
+ "level": "줌 레벨",
+ "selectRegion": "조정할 줌 구간을 선택하세요",
+ "deleteZoom": "줌 삭제",
+ "focusMode": {
+ "title": "포커스 모드",
+ "manual": "수동",
+ "auto": "자동",
+ "autoDescription": "녹화된 커서 위치를 따라 카메라가 이동합니다"
+ }
+ },
+ "speed": {
+ "playbackSpeed": "재생 속도",
+ "selectRegion": "조정할 속도 구간을 선택하세요",
+ "deleteRegion": "속도 구간 삭제",
+ "customPlaybackSpeed": "재생 속도 직접 입력",
+ "maxSpeedError": "속도는 16×를 초과할 수 없습니다"
+ },
+ "trim": {
+ "deleteRegion": "트림 구간 삭제"
+ },
+ "layout": {
+ "title": "레이아웃",
+ "preset": "프리셋",
+ "selectPreset": "프리셋 선택",
+ "pictureInPicture": "화면 속 화면",
+ "verticalStack": "세로 배치",
+ "webcamShape": "카메라 모양",
+ "webcamSize": "웹캠 크기",
+ "dualFrame": "듀얼 프레임"
+ },
+ "effects": {
+ "title": "비디오 효과",
+ "blurBg": "배경 흐림",
+ "motionBlur": "모션 블러",
+ "off": "끄기",
+ "shadow": "그림자",
+ "roundness": "모서리 둥글기",
+ "padding": "여백"
+ },
+ "background": {
+ "title": "배경",
+ "image": "이미지",
+ "color": "색상",
+ "gradient": "그라디언트",
+ "uploadCustom": "직접 업로드",
+ "gradientLabel": "그라디언트 {{index}}",
+ "colorWheel": "색상 휠",
+ "colorPalette": "색상 팔레트"
+ },
+ "crop": {
+ "title": "자르기",
+ "cropVideo": "비디오 자르기",
+ "dragInstruction": "각 면을 드래그해 자르기 영역을 조정하세요",
+ "ratio": "비율",
+ "free": "자유",
+ "done": "완료",
+ "lockAspectRatio": "화면 비율 고정",
+ "unlockAspectRatio": "화면 비율 해제"
+ },
+ "exportFormat": {
+ "mp4": "MP4",
+ "gif": "GIF",
+ "mp4Video": "MP4 비디오",
+ "mp4Description": "고화질 비디오 파일",
+ "gifAnimation": "GIF 애니메이션",
+ "gifDescription": "공유용 애니메이션 이미지"
+ },
+ "exportQuality": {
+ "title": "내보내기 품질",
+ "low": "낮음",
+ "medium": "보통",
+ "high": "높음"
+ },
+ "gifSettings": {
+ "frameRate": "GIF 프레임 속도",
+ "size": "GIF 크기",
+ "loop": "GIF 반복"
+ },
+ "project": {
+ "save": "프로젝트 저장",
+ "load": "프로젝트 불러오기"
+ },
+ "export": {
+ "videoButton": "비디오 내보내기",
+ "gifButton": "GIF 내보내기",
+ "chooseSaveLocation": "저장 위치 선택"
+ },
+ "links": {
+ "reportBug": "버그 신고",
+ "starOnGithub": "GitHub에 Star 남기기"
+ },
+ "imageUpload": {
+ "invalidFileType": "지원하지 않는 파일 형식입니다",
+ "jpgOnly": "JPG 또는 JPEG 이미지 파일을 업로드해 주세요.",
+ "uploadSuccess": "커스텀 이미지가 성공적으로 업로드되었습니다!",
+ "failedToUpload": "이미지 업로드에 실패했습니다",
+ "errorReading": "파일을 읽는 중 오류가 발생했습니다."
+ },
+ "annotation": {
+ "title": "주석 설정",
+ "active": "활성",
+ "typeText": "텍스트",
+ "typeImage": "이미지",
+ "typeArrow": "화살표",
+ "textContent": "텍스트 내용",
+ "textPlaceholder": "텍스트를 입력하세요...",
+ "fontStyle": "폰트 스타일",
+ "selectStyle": "스타일 선택",
+ "size": "크기",
+ "customFonts": "커스텀 폰트",
+ "textColor": "텍스트 색상",
+ "background": "배경",
+ "none": "없음",
+ "color": "색상",
+ "colorWheel": "색상 휠",
+ "colorPalette": "색상 팔레트",
+ "clearBackground": "배경 지우기",
+ "uploadImage": "이미지 업로드",
+ "supportedFormats": "지원 형식: JPG, PNG, GIF, WebP",
+ "arrowDirection": "화살표 방향",
+ "strokeWidth": "선 두께: {{width}}px",
+ "arrowColor": "화살표 색상",
+ "deleteAnnotation": "주석 삭제",
+ "shortcutsAndTips": "단축키 및 팁",
+ "tipMovePlayhead": "재생 헤드를 주석 구간으로 옮겨 항목을 선택하세요.",
+ "tipTabCycle": "Tab 키로 겹치는 항목을 순환할 수 있습니다.",
+ "tipShiftTabCycle": "Shift+Tab으로 역방향 순환할 수 있습니다.",
+ "invalidImageType": "지원하지 않는 파일 형식입니다",
+ "imageFormatsOnly": "JPG, PNG, GIF 또는 WebP 이미지 파일을 업로드해 주세요.",
+ "imageUploadSuccess": "이미지가 성공적으로 업로드되었습니다!",
+ "failedImageUpload": "이미지 업로드에 실패했습니다",
+ "blurColor": "블러 색상",
+ "blurColorBlack": "검정",
+ "blurColorWhite": "흰색",
+ "blurIntensity": "블러 강도",
+ "blurShape": "블러 모양",
+ "blurShapeFreehand": "자유 곡선",
+ "blurShapeOval": "타원",
+ "blurShapeRectangle": "사각형",
+ "blurType": "블러 종류",
+ "blurTypeBlur": "블러",
+ "blurTypeMosaic": "모자이크 블러",
+ "mosaicBlockSize": "모자이크 블록 크기",
+ "typeBlur": "블러"
+ },
+ "fontStyles": {
+ "classic": "클래식",
+ "editor": "에디터",
+ "strong": "강조",
+ "typewriter": "타자기",
+ "deco": "데코",
+ "simple": "심플",
+ "modern": "모던",
+ "clean": "클린"
+ },
+ "customFont": {
+ "dialogTitle": "Google 폰트 추가",
+ "urlLabel": "Google Fonts 가져오기 URL",
+ "urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+ "urlHelp": "Google Fonts에서 폰트 선택 → \"폰트 가져오기\" 클릭 → @import URL 복사",
+ "nameLabel": "표시 이름",
+ "namePlaceholder": "내 커스텀 폰트",
+ "nameHelp": "폰트 선택기에서 표시될 이름입니다",
+ "addButton": "폰트 추가",
+ "addingButton": "추가 중...",
+ "errorEmptyUrl": "Google Fonts 가져오기 URL을 입력해 주세요",
+ "errorInvalidUrl": "유효한 Google Fonts URL을 입력해 주세요",
+ "errorEmptyName": "폰트 이름을 입력해 주세요",
+ "errorExtractFailed": "URL에서 폰트 패밀리를 추출할 수 없습니다",
+ "successMessage": "\"{{fontName}}\" 폰트가 성공적으로 추가되었습니다",
+ "failedToAdd": "폰트 추가에 실패했습니다",
+ "errorTimeout": "폰트 로딩 시간이 초과되었습니다. URL을 확인하고 다시 시도해 주세요.",
+ "errorLoadFailed": "폰트를 불러올 수 없습니다. Google Fonts URL이 올바른지 확인해 주세요."
+ },
+ "language": {
+ "title": "언어"
+ }
+}
diff --git a/src/i18n/locales/ko-KR/shortcuts.json b/src/i18n/locales/ko-KR/shortcuts.json
new file mode 100644
index 0000000..13b11a6
--- /dev/null
+++ b/src/i18n/locales/ko-KR/shortcuts.json
@@ -0,0 +1,37 @@
+{
+ "title": "키보드 단축키",
+ "customize": "사용자 지정",
+ "configurable": "변경 가능",
+ "fixed": "고정",
+ "pressKey": "키를 누르세요...",
+ "clickToChange": "클릭해서 변경",
+ "pressEscToCancel": "Esc를 눌러 취소",
+ "helpText": "단축키를 클릭한 후 새 키 조합을 누르세요. 취소하려면 Esc를 누르세요.",
+ "resetToDefaults": "기본값으로 초기화",
+ "alreadyUsedBy": "이미 {{action}}에서 사용 중입니다",
+ "swap": "교체",
+ "reservedShortcut": "이 단축키는 \"{{label}}\"에 예약되어 있어 변경할 수 없습니다.",
+ "savedToast": "키보드 단축키가 저장되었습니다",
+ "resetToast": "기본 단축키로 초기화되었습니다 — 저장을 클릭해 적용하세요",
+ "actions": {
+ "addZoom": "줌 추가",
+ "addTrim": "트림 추가",
+ "addSpeed": "속도 추가",
+ "addAnnotation": "주석 추가",
+ "addKeyframe": "키프레임 추가",
+ "deleteSelected": "선택 항목 삭제",
+ "playPause": "재생 / 일시정지",
+ "addBlur": "블러 추가"
+ },
+ "fixedActions": {
+ "undo": "실행 취소",
+ "redo": "다시 실행",
+ "cycleAnnotationsForward": "주석 앞으로 순환",
+ "cycleAnnotationsBackward": "주석 뒤로 순환",
+ "deleteSelectedAlt": "선택 항목 삭제 (대체)",
+ "panTimeline": "타임라인 이동",
+ "zoomTimeline": "타임라인 확대/축소",
+ "frameBack": "이전 프레임",
+ "frameForward": "다음 프레임"
+ }
+}
diff --git a/src/i18n/locales/ko-KR/timeline.json b/src/i18n/locales/ko-KR/timeline.json
new file mode 100644
index 0000000..52e2ca7
--- /dev/null
+++ b/src/i18n/locales/ko-KR/timeline.json
@@ -0,0 +1,55 @@
+{
+ "buttons": {
+ "addZoom": "줌 추가 (Z)",
+ "suggestZooms": "커서 기반 줌 제안",
+ "addTrim": "트림 추가 (T)",
+ "addAnnotation": "주석 추가 (A)",
+ "addSpeed": "속도 추가 (S)",
+ "addBlur": "블러 추가 (B)"
+ },
+ "hints": {
+ "pressZoom": "Z를 눌러 줌 추가",
+ "pressTrim": "T를 눌러 트림 추가",
+ "pressAnnotation": "A를 눌러 주석 추가",
+ "pressSpeed": "S를 눌러 속도 추가",
+ "pressBlur": "B 키를 눌러 블러 영역을 추가하세요"
+ },
+ "labels": {
+ "pan": "이동",
+ "zoom": "줌",
+ "trim": "트림",
+ "speed": "속도",
+ "zoomItem": "줌 {{index}}",
+ "trimItem": "트림 {{index}}",
+ "speedItem": "속도 {{index}}",
+ "annotationItem": "주석",
+ "imageItem": "이미지",
+ "emptyText": "빈 텍스트",
+ "blurItem": "블러 {{index}}"
+ },
+ "emptyState": {
+ "noVideo": "불러온 비디오 없음",
+ "dragAndDrop": "비디오를 드래그 앤 드롭해서 편집을 시작하세요"
+ },
+ "errors": {
+ "cannotPlaceZoom": "이 위치에 줌을 추가할 수 없습니다",
+ "zoomExistsAtLocation": "이 위치에 이미 줌이 있거나 공간이 부족합니다.",
+ "zoomSuggestionUnavailable": "줌 제안 기능을 사용할 수 없습니다",
+ "noCursorTelemetry": "커서 데이터가 없습니다",
+ "noCursorTelemetryDescription": "커서 기반 제안을 생성하려면 먼저 화면을 녹화해 주세요.",
+ "noUsableTelemetry": "사용 가능한 커서 데이터가 없습니다",
+ "noUsableTelemetryDescription": "녹화에 충분한 커서 이동 데이터가 포함되어 있지 않습니다.",
+ "noDwellMoments": "명확한 커서 정지 구간을 찾을 수 없습니다",
+ "noDwellMomentsDescription": "중요한 동작에서 커서를 천천히 멈추며 녹화해 보세요.",
+ "noAutoZoomSlots": "자동 줌 슬롯이 없습니다",
+ "noAutoZoomSlotsDescription": "감지된 정지 지점이 기존 줌 구간과 겹칩니다.",
+ "cannotPlaceTrim": "이 위치에 트림을 추가할 수 없습니다",
+ "trimExistsAtLocation": "이 위치에 이미 트림이 있거나 공간이 부족합니다.",
+ "cannotPlaceSpeed": "이 위치에 속도를 추가할 수 없습니다",
+ "speedExistsAtLocation": "이 위치에 이미 속도 구간이 있거나 공간이 부족합니다."
+ },
+ "success": {
+ "addedZoomSuggestions": "커서 기반 줌 제안 {{count}}개가 추가되었습니다",
+ "addedZoomSuggestionsPlural": "커서 기반 줌 제안 {{count}}개가 추가되었습니다"
+ }
+}
diff --git a/src/i18n/locales/tr/common.json b/src/i18n/locales/tr/common.json
new file mode 100644
index 0000000..13d006b
--- /dev/null
+++ b/src/i18n/locales/tr/common.json
@@ -0,0 +1,30 @@
+{
+ "actions": {
+ "cancel": "İptal",
+ "save": "Kaydet",
+ "delete": "Sil",
+ "close": "Kapat",
+ "share": "Paylaş",
+ "done": "Tamam",
+ "open": "Aç",
+ "upload": "Yükle",
+ "export": "Dışa Aktar",
+ "showInFolder": "Klasörde Göster",
+ "file": "Dosya",
+ "edit": "Düzenle",
+ "view": "Görünüm",
+ "window": "Pencere",
+ "quit": "Çıkış",
+ "stopRecording": "Kaydı Durdur"
+ },
+ "playback": {
+ "play": "Oynat",
+ "pause": "Duraklat",
+ "fullscreen": "Tam Ekran",
+ "exitFullscreen": "Tam Ekrandan Çık"
+ },
+ "locale": {
+ "name": "Türkçe",
+ "short": "TR"
+ }
+}
diff --git a/src/i18n/locales/tr/dialogs.json b/src/i18n/locales/tr/dialogs.json
new file mode 100644
index 0000000..9fab50d
--- /dev/null
+++ b/src/i18n/locales/tr/dialogs.json
@@ -0,0 +1,70 @@
+{
+ "export": {
+ "complete": "Dışa Aktarım Tamamlandı",
+ "yourFormatReady": "{{format}} dosyanız hazır",
+ "showInFolder": "Klasörde Göster",
+ "finalizingVideo": "Video dışa aktarımı sonlandırılıyor...",
+ "compilingGifProgress": "GIF derleniyor... %{{progress}}",
+ "compilingGifWait": "GIF derleniyor... Bu biraz zaman alabilir",
+ "takeMoment": "Bu biraz zaman alabilir...",
+ "failed": "Dışa Aktarım Başarısız",
+ "tryAgain": "Lütfen tekrar deneyin",
+ "finalizingVideoTitle": "Video Sonlandırılıyor",
+ "compilingGif": "GIF Derleniyor",
+ "exportingFormat": "{{format}} Dışa Aktarılıyor",
+ "compiling": "Derleniyor",
+ "renderingFrames": "Kareler İşleniyor",
+ "processing": "İşleniyor...",
+ "finalizing": "Sonlandırılıyor...",
+ "compilingStatus": "Derleniyor...",
+ "status": "Durum",
+ "format": "Biçim",
+ "frames": "Kareler",
+ "cancelExport": "Dışa Aktarımı İptal Et",
+ "savedSuccessfully": "{{format}} başarıyla kaydedildi!"
+ },
+ "tutorial": {
+ "triggerLabel": "Kırpma nasıl çalışır",
+ "title": "Kırpma Nasıl Çalışır",
+ "description": "Videonuzun istenmeyen bölümlerini nasıl keseceğinizi anlayın.",
+ "explanationBefore": "Kırpma aracı, istediğiniz bölümleri",
+ "remove": "kaldırmak",
+ "explanationMiddle": " için kullanılır; kırmızı kırpma bölgesiyle",
+ "covered": "kaplanan",
+ "explanationAfter": "her şey dışa aktarımda kesilecektir.",
+ "visualExample": "Görsel Örnek",
+ "removed": "KALDIRILDI",
+ "kept": "Korundu",
+ "part1": "Bölüm 1",
+ "part2": "Bölüm 2",
+ "part3": "Bölüm 3",
+ "finalVideo": "Son Video",
+ "step1Title": "1. Kırpma Ekle",
+ "step1DescriptionBefore": "Kaldırılacak bölümü işaretlemek için ",
+ "step1DescriptionAfter": " tuşuna basın veya makas simgesine tıklayın.",
+ "step2Title": "2. Ayarla",
+ "step2Description": "Kesmek istediğiniz kısmı tam olarak kaplamak için kırmızı bölgenin kenarlarını sürükleyin."
+ },
+ "unsavedChanges": {
+ "title": "Kaydedilmemiş Değişiklikler",
+ "message": "Kaydedilmemiş değişiklikleriniz var.",
+ "detail": "Kapatmadan önce projenizi kaydetmek ister misiniz?",
+ "saveAndClose": "Kaydet ve Kapat",
+ "discardAndClose": "Kaydetmeden Kapat",
+ "loadProject": "Proje Yükle…",
+ "saveProject": "Proje Kaydet…",
+ "saveProjectAs": "Farklı Kaydet…"
+ },
+ "fileDialogs": {
+ "saveGif": "Dışa Aktarılan GIF'i Kaydet",
+ "saveVideo": "Dışa Aktarılan Videoyu Kaydet",
+ "selectVideo": "Video Dosyası Seç",
+ "saveProject": "OpenScreen Projesini Kaydet",
+ "openProject": "OpenScreen Projesini Aç",
+ "gifImage": "GIF Görüntüsü",
+ "mp4Video": "MP4 Video",
+ "videoFiles": "Video Dosyaları",
+ "openscreenProject": "OpenScreen Projesi",
+ "allFiles": "Tüm Dosyalar"
+ }
+}
diff --git a/src/i18n/locales/tr/editor.json b/src/i18n/locales/tr/editor.json
new file mode 100644
index 0000000..0aece8a
--- /dev/null
+++ b/src/i18n/locales/tr/editor.json
@@ -0,0 +1,45 @@
+{
+ "errors": {
+ "noVideoLoaded": "Video yüklenmedi",
+ "videoNotReady": "Video hazır değil",
+ "unableToDetermineSourcePath": "Kaynak video yolu belirlenemiyor",
+ "failedToSaveGif": "GIF kaydedilemedi",
+ "gifExportFailed": "GIF dışa aktarımı başarısız oldu",
+ "failedToSaveVideo": "Video kaydedilemedi",
+ "exportFailed": "Dışa aktarım başarısız oldu",
+ "exportFailedWithError": "Dışa aktarım başarısız: {{error}}",
+ "exportBackgroundLoadFailed": "Dışa aktarım başarısız: arka plan görüntüsü yüklenemedi ({{url}})",
+ "failedToSaveExport": "Dışa aktarım kaydedilemedi",
+ "failedToSaveExportedVideo": "Dışa aktarılan video kaydedilemedi",
+ "failedToRevealInFolder": "Klasörde gösterme hatası: {{error}}"
+ },
+ "export": {
+ "canceled": "Dışa aktarım iptal edildi",
+ "exportedSuccessfully": "{{format}} başarıyla dışa aktarıldı"
+ },
+ "project": {
+ "saveCanceled": "Proje kaydetme iptal edildi",
+ "failedToSave": "Proje kaydedilemedi",
+ "savedTo": "Proje şuraya kaydedildi: {{path}}",
+ "failedToLoad": "Proje yüklenemedi",
+ "invalidFormat": "Geçersiz proje dosyası biçimi",
+ "loadedFrom": "Proje şuradan yüklendi: {{path}}"
+ },
+ "recording": {
+ "failedCameraAccess": "Kamera erişimi istenemedi.",
+ "cameraBlocked": "Kamera erişimi engellendi. Kamerayı kullanmak için sistem ayarlarından izin verin.",
+ "systemAudioUnavailable": "Sistem sesi kullanılamıyor. Sistem sesi olmadan kaydediliyor.",
+ "microphoneDenied": "Mikrofon erişimi reddedildi. Kayıt ses olmadan devam edecek.",
+ "cameraDenied": "Kamera erişimi reddedildi. Kayıt kamera olmadan devam edecek.",
+ "permissionDenied": "Kayıt izni reddedildi. Lütfen ekran kaydına izin verin.",
+ "cameraDisconnected": "Webcam bağlantısı kesildi.",
+ "cameraNotFound": "Kamera bulunamadı."
+ },
+ "loadingVideo": "Video yükleniyor...",
+ "newRecording": {
+ "title": "Kaydediciye Dön",
+ "description": "Mevcut oturumunuz kaydedildi.",
+ "cancel": "İptal",
+ "confirm": "Onayla"
+ }
+}
diff --git a/src/i18n/locales/tr/launch.json b/src/i18n/locales/tr/launch.json
new file mode 100644
index 0000000..177ba3f
--- /dev/null
+++ b/src/i18n/locales/tr/launch.json
@@ -0,0 +1,54 @@
+{
+ "tooltips": {
+ "hideHUD": "Kontrol panelini gizle",
+ "closeApp": "Uygulamayı kapat",
+ "restartRecording": "Kaydı yeniden başlat",
+ "cancelRecording": "Kaydı iptal et",
+ "pauseRecording": "Kaydı duraklat",
+ "resumeRecording": "Kayda devam et",
+ "openVideoFile": "Video dosyası aç",
+ "openProject": "Proje aç"
+ },
+ "audio": {
+ "enableSystemAudio": "Sistem sesini etkinleştir",
+ "disableSystemAudio": "Sistem sesini devre dışı bırak",
+ "enableMicrophone": "Mikrofonu etkinleştir",
+ "disableMicrophone": "Mikrofonu devre dışı bırak",
+ "defaultMicrophone": "Varsayılan Mikrofon",
+ "enableNoiseReduction": "Gürültü azaltmayı etkinleştir (yapay zeka destekli)",
+ "disableNoiseReduction": "Gürültü azaltmayı devre dışı bırak",
+ "noiseReduction": "Gürültü azaltma",
+ "clickToCycle": "Seviye değiştirmek için tıklayın",
+ "nrLevel": {
+ "light": "Hafif",
+ "moderate": "Orta",
+ "aggressive": "Güçlü"
+ },
+ "noiseReductionPrompt": "Daha net ses için yapay zeka destekli gürültü azaltmayı etkinleştirmek ister misiniz?",
+ "enableNoiseReductionShort": "Etkinleştir"
+ },
+ "webcam": {
+ "enableWebcam": "Kamerayı etkinleştir",
+ "disableWebcam": "Kamerayı devre dışı bırak",
+ "defaultCamera": "Varsayılan Kamera",
+ "searching": "Aranıyor...",
+ "noneFound": "Kamera bulunamadı",
+ "unavailable": "Kamera kullanılamıyor"
+ },
+ "sourceSelector": {
+ "loading": "Kaynaklar yükleniyor...",
+ "screens": "Ekranlar ({{count}})",
+ "windows": "Pencereler ({{count}})",
+ "defaultSourceName": "Ekran"
+ },
+ "recording": {
+ "selectSource": "Lütfen kayıt için bir kaynak seçin"
+ },
+ "language": "Dil",
+ "systemLanguagePrompt": {
+ "title": "Sistem dilinizi kullanmak ister misiniz?",
+ "description": "Sistem diliniz {{language}} olarak algılandı. OpenScreen i {{language}} diline geçirmek ister misiniz?",
+ "switch": "{{language}} diline geç",
+ "keepDefault": "Mevcut dili koru"
+ }
+}
diff --git a/src/i18n/locales/tr/settings.json b/src/i18n/locales/tr/settings.json
new file mode 100644
index 0000000..143c467
--- /dev/null
+++ b/src/i18n/locales/tr/settings.json
@@ -0,0 +1,191 @@
+{
+ "zoom": {
+ "level": "Yakınlaştırma Seviyesi",
+ "selectRegion": "Ayarlamak için bir yakınlaştırma bölgesi seçin",
+ "deleteZoom": "Yakınlaştırmayı Sil",
+ "focusMode": {
+ "title": "Odak Modu",
+ "manual": "Manuel",
+ "auto": "Otomatik",
+ "autoDescription": "Kamera kaydedilen imleç konumunu takip eder"
+ }
+ },
+ "speed": {
+ "playbackSpeed": "Oynatma Hızı",
+ "selectRegion": "Ayarlamak için bir hız bölgesi seçin",
+ "deleteRegion": "Hız Bölgesini Sil",
+ "customPlaybackSpeed": "Özel Oynatma Hızı",
+ "maxSpeedError": "Hız 16× değerinden yüksek olamaz"
+ },
+ "trim": {
+ "deleteRegion": "Kırpma Bölgesini Sil"
+ },
+ "layout": {
+ "title": "Düzen",
+ "preset": "Ön Ayar",
+ "selectPreset": "Ön ayar seçin",
+ "pictureInPicture": "Resim İçinde Resim",
+ "verticalStack": "Dikey Yığın",
+ "webcamShape": "Kamera Şekli",
+ "dualFrame": "Çift Kare",
+ "webcamSize": "Webcam Boyutu"
+ },
+ "effects": {
+ "title": "Video Efektleri",
+ "blurBg": "Arka Planı Bulanıklaştır",
+ "motionBlur": "Hareket Bulanıklığı",
+ "off": "kapalı",
+ "shadow": "Gölge",
+ "roundness": "Yuvarlaklık",
+ "padding": "Dolgu"
+ },
+ "background": {
+ "title": "Arka Plan",
+ "image": "Görüntü",
+ "color": "Renk",
+ "gradient": "Gradyan",
+ "uploadCustom": "Özel Yükle",
+ "gradientLabel": "Gradyan {{index}}",
+ "colorWheel": "Renk çarkı",
+ "colorPalette": "Renk paleti"
+ },
+ "crop": {
+ "title": "Kırpma",
+ "cropVideo": "Videoyu Kırp",
+ "dragInstruction": "Kırpma alanını ayarlamak için her kenarı sürükleyin",
+ "ratio": "Oran",
+ "free": "Serbest",
+ "done": "Tamam",
+ "lockAspectRatio": "En boy oranını kilitle",
+ "unlockAspectRatio": "En boy oranının kilidini aç"
+ },
+ "exportFormat": {
+ "mp4": "MP4",
+ "gif": "GIF",
+ "mp4Video": "MP4 Video",
+ "mp4Description": "Yüksek kaliteli video dosyası",
+ "gifAnimation": "GIF Animasyon",
+ "gifDescription": "Paylaşım için hareketli görüntü"
+ },
+ "exportQuality": {
+ "title": "Dışa Aktarım Kalitesi",
+ "low": "Düşük",
+ "medium": "Orta",
+ "high": "Yüksek"
+ },
+ "gifSettings": {
+ "frameRate": "GIF Kare Hızı",
+ "size": "GIF Boyutu",
+ "loop": "GIF Döngüsü"
+ },
+ "project": {
+ "save": "Projeyi Kaydet",
+ "load": "Proje Yükle"
+ },
+ "export": {
+ "videoButton": "Videoyu Dışa Aktar",
+ "gifButton": "GIF Olarak Dışa Aktar",
+ "chooseSaveLocation": "Kayıt Konumu Seç"
+ },
+ "links": {
+ "reportBug": "Hata Bildir",
+ "starOnGithub": "GitHub'da Yıldızla"
+ },
+ "imageUpload": {
+ "invalidFileType": "Geçersiz dosya türü",
+ "jpgOnly": "Lütfen bir JPG veya JPEG görüntü dosyası yükleyin.",
+ "uploadSuccess": "Özel görüntü başarıyla yüklendi!",
+ "failedToUpload": "Görüntü yüklenemedi",
+ "errorReading": "Dosya okunurken bir hata oluştu."
+ },
+ "annotation": {
+ "title": "Açıklama Ayarları",
+ "active": "Aktif",
+ "typeText": "Metin",
+ "typeImage": "Görüntü",
+ "typeArrow": "Ok",
+ "typeBlur": "Bulanık",
+ "textContent": "Metin İçeriği",
+ "textPlaceholder": "Metninizi girin...",
+ "fontStyle": "Yazı Tipi Stili",
+ "selectStyle": "Stil seçin",
+ "size": "Boyut",
+ "customFonts": "Özel Yazı Tipleri",
+ "textColor": "Metin Rengi",
+ "background": "Arka Plan",
+ "none": "Yok",
+ "color": "Renk",
+ "colorWheel": "Renk çarkı",
+ "colorPalette": "Renk paleti",
+ "clearBackground": "Arka Planı Temizle",
+ "uploadImage": "Görüntü Yükle",
+ "supportedFormats": "Desteklenen biçimler: JPG, PNG, GIF, WebP",
+ "arrowDirection": "Ok Yönü",
+ "strokeWidth": "Çizgi Kalınlığı: {{width}}px",
+ "arrowColor": "Ok Rengi",
+ "blurShape": "Bulanık Şekli",
+ "blurIntensity": "Bulanıklık Yoğunluğu",
+ "blurShapeRectangle": "Dikdörtgen",
+ "blurShapeOval": "Oval",
+ "blurShapeFreehand": "Serbest",
+ "deleteAnnotation": "Açıklamayı Sil",
+ "shortcutsAndTips": "Kısayollar ve İpuçları",
+ "tipMovePlayhead": "Oynatma imlecini çakışan açıklama bölümüne taşıyın ve bir öğe seçin.",
+ "tipTabCycle": "Çakışan öğeler arasında geçiş yapmak için Tab tuşunu kullanın.",
+ "tipShiftTabCycle": "Geriye doğru geçiş yapmak için Shift+Tab kullanın.",
+ "invalidImageType": "Geçersiz dosya türü",
+ "imageFormatsOnly": "Lütfen bir JPG, PNG, GIF veya WebP görüntü dosyası yükleyin.",
+ "imageUploadSuccess": "Görüntü başarıyla yüklendi!",
+ "failedImageUpload": "Görüntü yüklenemedi",
+ "blurColor": "Bulanıklık Rengi",
+ "blurColorBlack": "Siyah",
+ "blurColorWhite": "Beyaz",
+ "blurType": "Bulanıklık Türü",
+ "blurTypeBlur": "Bulanık",
+ "blurTypeMosaic": "Mozaik Bulanıklık",
+ "mosaicBlockSize": "Mozaik Blok Boyutu"
+ },
+ "fontStyles": {
+ "classic": "Klasik",
+ "editor": "Editör",
+ "strong": "Kalın",
+ "typewriter": "Daktilo",
+ "deco": "Dekoratif",
+ "simple": "Sade",
+ "modern": "Modern",
+ "clean": "Temiz"
+ },
+ "customFont": {
+ "dialogTitle": "Google Yazı Tipi Ekle",
+ "urlLabel": "Google Fonts İçe Aktarım URL'si",
+ "urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+ "urlHelp": "Google Fonts'tan alabilirsiniz: Bir yazı tipi seçin → \"Get font\"a tıklayın → @import URL'sini kopyalayın",
+ "nameLabel": "Görünen Ad",
+ "namePlaceholder": "Özel Yazı Tipim",
+ "nameHelp": "Yazı tipinin seçicide nasıl görüneceğini belirler",
+ "addButton": "Yazı Tipi Ekle",
+ "addingButton": "Ekleniyor...",
+ "errorEmptyUrl": "Lütfen bir Google Fonts içe aktarım URL'si girin",
+ "errorInvalidUrl": "Lütfen geçerli bir Google Fonts URL'si girin",
+ "errorEmptyName": "Lütfen bir yazı tipi adı girin",
+ "errorExtractFailed": "URL'den yazı tipi ailesi çıkarılamadı",
+ "successMessage": "\"{{fontName}}\" yazı tipi başarıyla eklendi",
+ "failedToAdd": "Yazı tipi eklenemedi",
+ "errorTimeout": "Yazı tipinin yüklenmesi çok uzun sürdü. Lütfen URL'yi kontrol edip tekrar deneyin.",
+ "errorLoadFailed": "Yazı tipi yüklenemedi. Lütfen Google Fonts URL'sinin doğruluğunu kontrol edin."
+ },
+ "language": {
+ "title": "Dil"
+ },
+ "audio": {
+ "title": "Ses",
+ "noiseReduction": "Gürültü Azaltma",
+ "level": "Seviye",
+ "nrLevel": {
+ "light": "Hafif",
+ "moderate": "Orta",
+ "aggressive": "Güçlü"
+ },
+ "nrDescription": "Yapay zeka destekli gürültü azaltma arka plan gürültüsünü temizler. Daha yüksek seviyeler daha agresiftir ancak ses kalitesini etkileyebilir."
+ }
+}
diff --git a/src/i18n/locales/tr/shortcuts.json b/src/i18n/locales/tr/shortcuts.json
new file mode 100644
index 0000000..69b28ed
--- /dev/null
+++ b/src/i18n/locales/tr/shortcuts.json
@@ -0,0 +1,37 @@
+{
+ "title": "Klavye Kısayolları",
+ "customize": "Özelleştir",
+ "configurable": "Yapılandırılabilir",
+ "fixed": "Sabit",
+ "pressKey": "Bir tuşa basın…",
+ "clickToChange": "Değiştirmek için tıklayın",
+ "pressEscToCancel": "İptal etmek için Esc tuşuna basın",
+ "helpText": "Bir kısayola tıklayın, ardından yeni tuş kombinasyonuna basın. İptal etmek için Esc tuşuna basın.",
+ "resetToDefaults": "Varsayılanlara sıfırla",
+ "alreadyUsedBy": "\"{{action}}\" tarafından zaten kullanılıyor",
+ "swap": "Değiştir",
+ "reservedShortcut": "Bu kısayol \"{{label}}\" için ayrılmıştır ve yeniden atanamaz.",
+ "savedToast": "Klavye kısayolları kaydedildi",
+ "resetToast": "Varsayılan kısayollara sıfırlandı — uygulamak için Kaydet'e tıklayın",
+ "actions": {
+ "addZoom": "Yakınlaştırma Ekle",
+ "addTrim": "Kırpma Ekle",
+ "addSpeed": "Hız Ekle",
+ "addAnnotation": "Açıklama Ekle",
+ "addBlur": "Bulanik Ekle",
+ "addKeyframe": "Anahtar Kare Ekle",
+ "deleteSelected": "Seçileni Sil",
+ "playPause": "Oynat / Duraklat"
+ },
+ "fixedActions": {
+ "undo": "Geri Al",
+ "redo": "Yinele",
+ "cycleAnnotationsForward": "Açıklamalar Arasında İleri Geç",
+ "cycleAnnotationsBackward": "Açıklamalar Arasında Geri Geç",
+ "deleteSelectedAlt": "Seçileni Sil (alternatif)",
+ "panTimeline": "Zaman Çizelgesini Kaydır",
+ "zoomTimeline": "Zaman Çizelgesini Yakınlaştır",
+ "frameBack": "Önceki Kare",
+ "frameForward": "Sonraki Kare"
+ }
+}
diff --git a/src/i18n/locales/tr/timeline.json b/src/i18n/locales/tr/timeline.json
new file mode 100644
index 0000000..2632f7a
--- /dev/null
+++ b/src/i18n/locales/tr/timeline.json
@@ -0,0 +1,55 @@
+{
+ "buttons": {
+ "addZoom": "Yakınlaştırma Ekle (Z)",
+ "suggestZooms": "İmleçten Yakınlaştırma Öner",
+ "addTrim": "Kırpma Ekle (T)",
+ "addAnnotation": "Açıklama Ekle (A)",
+ "addSpeed": "Hız Ekle (S)",
+ "addBlur": "Bulanık ekle (B)"
+ },
+ "hints": {
+ "pressZoom": "Yakınlaştırma eklemek için Z tuşuna basın",
+ "pressTrim": "Kırpma eklemek için T tuşuna basın",
+ "pressAnnotation": "Açıklama eklemek için A tuşuna basın",
+ "pressSpeed": "Hız eklemek için S tuşuna basın",
+ "pressBlur": "Bulanık bölge eklemek için B tuşuna basın"
+ },
+ "labels": {
+ "pan": "Kaydır",
+ "zoom": "Yakınlaştır",
+ "trim": "Kırp",
+ "speed": "Hız",
+ "zoomItem": "Yakınlaştırma {{index}}",
+ "trimItem": "Kırpma {{index}}",
+ "speedItem": "Hız {{index}}",
+ "annotationItem": "Açıklama",
+ "imageItem": "Görüntü",
+ "emptyText": "Boş metin",
+ "blurItem": "Bulanık {{index}}"
+ },
+ "emptyState": {
+ "noVideo": "Video Yüklenmedi",
+ "dragAndDrop": "Düzenlemeye başlamak için bir video sürükleyip bırakın"
+ },
+ "errors": {
+ "cannotPlaceZoom": "Buraya yakınlaştırma yerleştirilemiyor",
+ "zoomExistsAtLocation": "Bu konumda zaten bir yakınlaştırma var veya yeterli alan yok.",
+ "zoomSuggestionUnavailable": "Yakınlaştırma öneri işleyicisi kullanılamıyor",
+ "noCursorTelemetry": "İmleç telemetrisi mevcut değil",
+ "noCursorTelemetryDescription": "İmleç tabanlı öneriler oluşturmak için önce bir ekran kaydı yapın.",
+ "noUsableTelemetry": "Kullanılabilir imleç telemetrisi yok",
+ "noUsableTelemetryDescription": "Kayıt yeterli imleç hareketi verisi içermiyor.",
+ "noDwellMoments": "Belirgin imleç bekleme anları bulunamadı",
+ "noDwellMomentsDescription": "Önemli işlemlerde daha yavaş imleç duraklamaları olan bir kayıt deneyin.",
+ "noAutoZoomSlots": "Otomatik yakınlaştırma alanı yok",
+ "noAutoZoomSlotsDescription": "Algılanan bekleme noktaları mevcut yakınlaştırma bölgeleriyle çakışıyor.",
+ "cannotPlaceTrim": "Buraya kırpma yerleştirilemiyor",
+ "trimExistsAtLocation": "Bu konumda zaten bir kırpma var veya yeterli alan yok.",
+ "cannotPlaceSpeed": "Buraya hız yerleştirilemiyor",
+ "speedExistsAtLocation": "Bu konumda zaten bir hız bölgesi var veya yeterli alan yok."
+ },
+ "success": {
+ "addedZoomSuggestions": "{{count}} imleç tabanlı yakınlaştırma önerisi eklendi",
+ "addedZoomSuggestionsPlural": "{{count}} imleç tabanlı yakınlaştırma önerisi eklendi"
+ }
+}
diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json
index 9a3cc1c..2291fa6 100644
--- a/src/i18n/locales/zh-CN/common.json
+++ b/src/i18n/locales/zh-CN/common.json
@@ -9,6 +9,7 @@
"open": "打开",
"upload": "上传",
"export": "导出",
+ "showInFolder": "在文件夹中显示",
"file": "文件",
"edit": "编辑",
"view": "视图",
@@ -23,7 +24,7 @@
"exitFullscreen": "退出全屏"
},
"locale": {
- "name": "中文",
- "short": "中文"
+ "name": "简体中文",
+ "short": "简中"
}
}
diff --git a/src/i18n/locales/zh-CN/dialogs.json b/src/i18n/locales/zh-CN/dialogs.json
index 3f181bc..0385b36 100644
--- a/src/i18n/locales/zh-CN/dialogs.json
+++ b/src/i18n/locales/zh-CN/dialogs.json
@@ -27,10 +27,11 @@
"triggerLabel": "剪辑功能说明",
"title": "剪辑功能说明",
"description": "了解如何剪掉视频中不需要的部分。",
- "explanation": "剪辑工具通过定义您要",
- "explanationRemove": "移除",
- "explanationCovered": "覆盖",
- "explanationEnd": "的片段来工作。被红色剪辑区域覆盖的部分将在导出时被剪掉。",
+ "explanationBefore": "剪辑工具通过定义您要",
+ "remove": "移除",
+ "explanationMiddle": "——任何被",
+ "covered": "覆盖",
+ "explanationAfter": "的红色剪辑区域部分将在导出时被剪掉。",
"visualExample": "示例演示",
"removed": "已移除",
"kept": "保留",
@@ -39,7 +40,8 @@
"part3": "第 3 部分",
"finalVideo": "最终视频",
"step1Title": "1. 添加剪辑",
- "step1Description": "按 T 或点击剪刀图标来标记要移除的片段。",
+ "step1DescriptionBefore": "按",
+ "step1DescriptionAfter": "键或点击剪刀图标来标记要移除的片段。",
"step2Title": "2. 调整",
"step2Description": "拖动红色区域的边缘，精确覆盖您要剪掉的部分。"
},
diff --git a/src/i18n/locales/zh-CN/editor.json b/src/i18n/locales/zh-CN/editor.json
index 5d27bef..f6c02d4 100644
--- a/src/i18n/locales/zh-CN/editor.json
+++ b/src/i18n/locales/zh-CN/editor.json
@@ -1,4 +1,11 @@
{
+ "newRecording": {
+ "title": "返回录屏",
+ "description": "当前会话已保存。",
+ "cancel": "取消",
+ "confirm": "确认"
+ },
+ "loadingVideo": "正在加载视频...",
"errors": {
"noVideoLoaded": "未加载视频",
"videoNotReady": "视频未就绪",
@@ -8,6 +15,7 @@
"failedToSaveVideo": "保存视频失败",
"exportFailed": "导出失败",
"exportFailedWithError": "导出失败：{{error}}",
+ "exportBackgroundLoadFailed": "导出失败：无法加载背景图片（{{url}}）",
"failedToSaveExport": "保存导出文件失败",
"failedToSaveExportedVideo": "保存导出的视频失败",
"failedToRevealInFolder": "在文件夹中显示时出错：{{error}}"
@@ -30,6 +38,8 @@
"systemAudioUnavailable": "系统音频不可用。将在无系统音频的情况下录制。",
"microphoneDenied": "麦克风权限被拒绝。录制将继续，但不包含音频。",
"cameraDenied": "摄像头权限被拒绝。录制将继续，但不包含摄像头画面。",
+ "cameraDisconnected": "摄像头已断开连接。",
+ "cameraNotFound": "未找到摄像头。",
"permissionDenied": "录屏权限被拒绝。请允许屏幕录制。"
}
}
diff --git a/src/i18n/locales/zh-CN/launch.json b/src/i18n/locales/zh-CN/launch.json
index 84fdcef..a5c2a9d 100644
--- a/src/i18n/locales/zh-CN/launch.json
+++ b/src/i18n/locales/zh-CN/launch.json
@@ -3,6 +3,9 @@
"hideHUD": "隐藏控制面板",
"closeApp": "关闭应用",
"restartRecording": "重新开始录制",
+ "cancelRecording": "取消录制",
+ "pauseRecording": "暂停录制",
+ "resumeRecording": "继续录制",
"openVideoFile": "打开视频文件",
"openProject": "打开项目"
},
@@ -30,5 +33,11 @@
"recording": {
"selectSource": "请选择要录制的源"
},
- "language": "语言"
+ "language": "语言",
+ "systemLanguagePrompt": {
+ "title": "使用系统语言吗？",
+ "description": "我们检测到你的系统语言是{{language}}。是否将 OpenScreen 切换为{{language}}？",
+ "switch": "切换到{{language}}",
+ "keepDefault": "保持当前语言"
+ }
}
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index ab0d41b..708ae5e 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -13,7 +13,9 @@
"speed": {
"playbackSpeed": "播放速度",
"selectRegion": "选择要调整的速度区域",
- "deleteRegion": "删除速度区域"
+ "deleteRegion": "删除速度区域",
+ "customPlaybackSpeed": "自定义播放速度",
+ "maxSpeedError": "速度不能超过 16×"
},
"trim": {
"deleteRegion": "删除剪辑区域"
@@ -24,7 +26,9 @@
"selectPreset": "选择预设",
"pictureInPicture": "画中画",
"verticalStack": "垂直堆叠",
- "webcamShape": "摄像头形状"
+ "dualFrame": "双画框",
+ "webcamShape": "摄像头形状",
+ "webcamSize": "摄像头大小"
},
"effects": {
"title": "视频效果",
@@ -41,7 +45,9 @@
"color": "颜色",
"gradient": "渐变",
"uploadCustom": "上传自定义",
- "gradientLabel": "渐变 {{index}}"
+ "gradientLabel": "渐变 {{index}}",
+ "colorWheel": "颜色轮",
+ "colorPalette": "颜色调色板"
},
"crop": {
"title": "裁剪",
@@ -98,6 +104,7 @@
"typeText": "文本",
"typeImage": "图片",
"typeArrow": "箭头",
+ "typeBlur": "模糊",
"textContent": "文本内容",
"textPlaceholder": "输入您的文本...",
"fontStyle": "字体样式",
@@ -108,12 +115,19 @@
"background": "背景",
"none": "无",
"color": "颜色",
+ "colorWheel": "颜色轮",
+ "colorPalette": "颜色调色板",
"clearBackground": "清除背景",
"uploadImage": "上传图片",
"supportedFormats": "支持的格式：JPG、PNG、GIF、WebP",
"arrowDirection": "箭头方向",
"strokeWidth": "描边宽度：{{width}}px",
"arrowColor": "箭头颜色",
+ "blurShape": "模糊形状",
+ "blurIntensity": "模糊强度",
+ "blurShapeRectangle": "矩形",
+ "blurShapeOval": "椭圆",
+ "blurShapeFreehand": "自由手绘",
"deleteAnnotation": "删除标注",
"shortcutsAndTips": "快捷键与提示",
"tipMovePlayhead": "将播放头移动到重叠的标注区域并选择一个项目。",
@@ -122,7 +136,14 @@
"invalidImageType": "无效的文件类型",
"imageFormatsOnly": "请上传 JPG、PNG、GIF 或 WebP 格式的图片文件。",
"imageUploadSuccess": "图片上传成功！",
- "failedImageUpload": "上传图片失败"
+ "failedImageUpload": "上传图片失败",
+ "blurColor": "模糊颜色",
+ "blurColorBlack": "黑色",
+ "blurColorWhite": "白色",
+ "blurType": "模糊类型",
+ "blurTypeBlur": "模糊",
+ "blurTypeMosaic": "马赛克模糊",
+ "mosaicBlockSize": "马赛克块大小"
},
"fontStyles": {
"classic": "经典",
diff --git a/src/i18n/locales/zh-CN/shortcuts.json b/src/i18n/locales/zh-CN/shortcuts.json
index 5099b27..3328239 100644
--- a/src/i18n/locales/zh-CN/shortcuts.json
+++ b/src/i18n/locales/zh-CN/shortcuts.json
@@ -18,6 +18,7 @@
"addTrim": "添加剪辑",
"addSpeed": "添加速度",
"addAnnotation": "添加标注",
+ "addBlur": "添加模糊",
"addKeyframe": "添加关键帧",
"deleteSelected": "删除所选",
"playPause": "播放 / 暂停"
@@ -29,6 +30,8 @@
"cycleAnnotationsBackward": "向后切换标注",
"deleteSelectedAlt": "删除所选（替代）",
"panTimeline": "平移时间轴",
- "zoomTimeline": "缩放时间轴"
+ "zoomTimeline": "缩放时间轴",
+ "frameBack": "上一帧",
+ "frameForward": "下一帧"
}
}
diff --git a/src/i18n/locales/zh-CN/timeline.json b/src/i18n/locales/zh-CN/timeline.json
index d712751..783fef6 100644
--- a/src/i18n/locales/zh-CN/timeline.json
+++ b/src/i18n/locales/zh-CN/timeline.json
@@ -4,23 +4,28 @@
"suggestZooms": "根据光标建议缩放",
"addTrim": "添加剪辑 (T)",
"addAnnotation": "添加标注 (A)",
- "addSpeed": "添加速度 (S)"
+ "addSpeed": "添加速度 (S)",
+ "addBlur": "添加模糊 (B)"
},
"hints": {
"pressZoom": "按 Z 添加缩放",
"pressTrim": "按 T 添加剪辑",
"pressAnnotation": "按 A 添加标注",
- "pressSpeed": "按 S 添加速度"
+ "pressSpeed": "按 S 添加速度",
+ "pressBlur": "按 B 添加模糊区域"
},
"labels": {
"pan": "平移",
"zoom": "缩放",
+ "trim": "剪辑",
+ "speed": "速度",
"zoomItem": "缩放 {{index}}",
"trimItem": "剪辑 {{index}}",
"speedItem": "速度 {{index}}",
"annotationItem": "标注",
"imageItem": "图片",
- "emptyText": "空文本"
+ "emptyText": "空文本",
+ "blurItem": "模糊 {{index}}"
},
"emptyState": {
"noVideo": "未加载视频",
diff --git a/src/i18n/locales/zh-TW/common.json b/src/i18n/locales/zh-TW/common.json
new file mode 100644
index 0000000..1ddab48
--- /dev/null
+++ b/src/i18n/locales/zh-TW/common.json
@@ -0,0 +1,30 @@
+{
+ "actions": {
+ "cancel": "取消",
+ "save": "儲存",
+ "delete": "刪除",
+ "close": "關閉",
+ "share": "分享",
+ "done": "完成",
+ "open": "開啟",
+ "upload": "上傳",
+ "export": "匯出",
+ "showInFolder": "在資料夾中顯示",
+ "file": "檔案",
+ "edit": "編輯",
+ "view": "檢視",
+ "window": "視窗",
+ "quit": "退出",
+ "stopRecording": "停止錄製"
+ },
+ "playback": {
+ "play": "播放",
+ "pause": "暫停",
+ "fullscreen": "全螢幕",
+ "exitFullscreen": "退出全螢幕"
+ },
+ "locale": {
+ "name": "繁體中文",
+ "short": "繁中"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/dialogs.json b/src/i18n/locales/zh-TW/dialogs.json
new file mode 100644
index 0000000..b582aba
--- /dev/null
+++ b/src/i18n/locales/zh-TW/dialogs.json
@@ -0,0 +1,70 @@
+{
+ "export": {
+ "complete": "匯出完成",
+ "yourFormatReady": "您的 {{format}} 已準備就緒",
+ "showInFolder": "在資料夾中顯示",
+ "finalizingVideo": "正在完成影片匯出...",
+ "compilingGifProgress": "正在編譯 GIF... {{progress}}%",
+ "compilingGifWait": "正在編譯 GIF... 這可能需要一些時間",
+ "takeMoment": "這可能需要一點時間...",
+ "failed": "匯出失敗",
+ "tryAgain": "請重試",
+ "finalizingVideoTitle": "正在完成影片",
+ "compilingGif": "正在編譯 GIF",
+ "exportingFormat": "正在匯出 {{format}}",
+ "compiling": "編譯中",
+ "renderingFrames": "渲染影格",
+ "processing": "處理中...",
+ "finalizing": "正在完成...",
+ "compilingStatus": "編譯中...",
+ "status": "狀態",
+ "format": "格式",
+ "frames": "影格",
+ "cancelExport": "取消匯出",
+ "savedSuccessfully": "{{format}} 儲存成功！"
+ },
+ "tutorial": {
+ "triggerLabel": "剪輯功能說明",
+ "title": "剪輯功能說明",
+ "description": "了解如何剪掉影片中不需要的部分。",
+ "explanationBefore": "剪輯工具透過定義您要",
+ "remove": "移除",
+ "explanationMiddle": "——任何被",
+ "covered": "覆蓋",
+ "explanationAfter": "的紅色剪輯區域部分將在匯出時被剪掉。",
+ "visualExample": "示例演示",
+ "removed": "已移除",
+ "kept": "保留",
+ "part1": "第 1 部分",
+ "part2": "第 2 部分",
+ "part3": "第 3 部分",
+ "finalVideo": "最終影片",
+ "step1Title": "1. 添加剪輯",
+ "step1DescriptionBefore": "按",
+ "step1DescriptionAfter": "鍵或點擊剪刀圖示來標記要移除的片段。",
+ "step2Title": "2. 調整",
+ "step2Description": "拖動紅色區域的邊緣，精確覆蓋您要剪掉的部分。"
+ },
+ "unsavedChanges": {
+ "title": "未儲存的變更",
+ "message": "您有未儲存的變更。",
+ "detail": "是否在關閉前儲存專案？",
+ "saveAndClose": "儲存並關閉",
+ "discardAndClose": "捨棄並關閉",
+ "loadProject": "載入專案…",
+ "saveProject": "儲存專案…",
+ "saveProjectAs": "專案另存新檔…"
+ },
+ "fileDialogs": {
+ "saveGif": "儲存匯出的 GIF",
+ "saveVideo": "儲存匯出的影片",
+ "selectVideo": "選擇影片檔案",
+ "saveProject": "儲存 OpenScreen 專案",
+ "openProject": "開啟 OpenScreen 專案",
+ "gifImage": "GIF 圖片",
+ "mp4Video": "MP4 影片",
+ "videoFiles": "影片檔案",
+ "openscreenProject": "OpenScreen 專案",
+ "allFiles": "所有檔案"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/editor.json b/src/i18n/locales/zh-TW/editor.json
new file mode 100644
index 0000000..21f3ba6
--- /dev/null
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -0,0 +1,45 @@
+{
+ "newRecording": {
+ "title": "返回錄影",
+ "description": "目前工作階段已儲存。",
+ "cancel": "取消",
+ "confirm": "確認"
+ },
+ "loadingVideo": "正在載入影片...",
+ "errors": {
+ "noVideoLoaded": "未載入影片",
+ "videoNotReady": "影片未就緒",
+ "unableToDetermineSourcePath": "無法確定來源影片路徑",
+ "failedToSaveGif": "儲存 GIF 失敗",
+ "gifExportFailed": "GIF 匯出失敗",
+ "failedToSaveVideo": "儲存影片失敗",
+ "exportFailed": "匯出失敗",
+ "exportFailedWithError": "匯出失敗：{{error}}",
+ "exportBackgroundLoadFailed": "匯出失敗：無法載入背景圖片（{{url}}）",
+ "failedToSaveExport": "儲存匯出檔案失敗",
+ "failedToSaveExportedVideo": "儲存匯出的影片失敗",
+ "failedToRevealInFolder": "在資料夾中顯示時出錯：{{error}}"
+ },
+ "export": {
+ "canceled": "匯出已取消",
+ "exportedSuccessfully": "{{format}} 匯出成功"
+ },
+ "project": {
+ "saveCanceled": "專案儲存已取消",
+ "failedToSave": "儲存專案失敗",
+ "savedTo": "專案已儲存至 {{path}}",
+ "failedToLoad": "載入專案失敗",
+ "invalidFormat": "無效的專案檔案格式",
+ "loadedFrom": "專案已從 {{path}} 載入"
+ },
+ "recording": {
+ "failedCameraAccess": "請求攝影機權限失敗。",
+ "cameraBlocked": "攝影機權限已被封鎖。請在系統設定中啟用以使用攝影機。",
+ "systemAudioUnavailable": "系統音訊不可用。將在無系統音訊的情況下錄製。",
+ "microphoneDenied": "麥克風權限被拒絕。錄製將繼續，但不包含音訊。",
+ "cameraDenied": "攝影機權限被拒絕。錄製將繼續，但不包含攝影機畫面。",
+ "permissionDenied": "錄影權限被拒絕。請允許螢幕錄製。",
+ "cameraDisconnected": "網路攝影機已中斷連線。",
+ "cameraNotFound": "找不到攝影機。"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/launch.json b/src/i18n/locales/zh-TW/launch.json
new file mode 100644
index 0000000..ea7e625
--- /dev/null
+++ b/src/i18n/locales/zh-TW/launch.json
@@ -0,0 +1,43 @@
+{
+ "tooltips": {
+ "hideHUD": "隱藏控制面板",
+ "closeApp": "關閉應用程式",
+ "restartRecording": "重新開始錄製",
+ "cancelRecording": "取消錄製",
+ "pauseRecording": "暫停錄製",
+ "resumeRecording": "繼續錄製",
+ "openVideoFile": "開啟影片檔案",
+ "openProject": "開啟專案"
+ },
+ "audio": {
+ "enableSystemAudio": "啟用系統音訊",
+ "disableSystemAudio": "停用系統音訊",
+ "enableMicrophone": "啟用麥克風",
+ "disableMicrophone": "停用麥克風",
+ "defaultMicrophone": "預設麥克風"
+ },
+ "webcam": {
+ "enableWebcam": "啟用攝影機",
+ "disableWebcam": "停用攝影機",
+ "defaultCamera": "預設攝影機",
+ "searching": "正在搜尋...",
+ "noneFound": "未找到攝影機",
+ "unavailable": "攝影機不可用"
+ },
+ "sourceSelector": {
+ "loading": "正在載入來源...",
+ "screens": "螢幕 ({{count}})",
+ "windows": "視窗 ({{count}})",
+ "defaultSourceName": "螢幕"
+ },
+ "recording": {
+ "selectSource": "請選擇要錄製的來源"
+ },
+ "language": "語言",
+ "systemLanguagePrompt": {
+ "title": "要使用系統語言嗎？",
+ "description": "偵測到系統語言為 {{language}}。要將 OpenScreen 切換為 {{language}} 嗎？",
+ "switch": "切換為 {{language}}",
+ "keepDefault": "保持目前語言"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/settings.json b/src/i18n/locales/zh-TW/settings.json
new file mode 100644
index 0000000..c93e8d5
--- /dev/null
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -0,0 +1,187 @@
+{
+ "zoom": {
+ "level": "縮放級別",
+ "selectRegion": "選擇要調整的縮放區域",
+ "deleteZoom": "刪除縮放",
+ "focusMode": {
+ "title": "對焦模式",
+ "manual": "手動",
+ "auto": "自動",
+ "autoDescription": "攝影機跟隨錄製時的游標位置"
+ },
+ "speed": {
+ "title": "縮放速度",
+ "instant": "即時",
+ "fast": "快速",
+ "smooth": "平滑",
+ "lazy": "緩慢"
+ }
+ },
+ "speed": {
+ "playbackSpeed": "播放速度",
+ "selectRegion": "選擇要調整的速度區域",
+ "deleteRegion": "刪除速度區域",
+ "customPlaybackSpeed": "自訂播放速度",
+ "maxSpeedError": "速度不能超過 16×"
+ },
+ "trim": {
+ "deleteRegion": "刪除剪輯區域"
+ },
+ "layout": {
+ "title": "版面配置",
+ "preset": "預設",
+ "selectPreset": "選擇預設",
+ "pictureInPicture": "子母畫面",
+ "verticalStack": "垂直堆疊",
+ "dualFrame": "雙畫框",
+ "webcamShape": "攝影機形狀",
+ "webcamSize": "攝影機大小"
+ },
+ "effects": {
+ "title": "影片效果",
+ "blurBg": "模糊背景",
+ "motionBlur": "動態模糊",
+ "off": "關",
+ "shadow": "陰影",
+ "roundness": "圓角",
+ "padding": "內邊距"
+ },
+ "background": {
+ "title": "背景",
+ "image": "圖片",
+ "color": "顏色",
+ "gradient": "漸層",
+ "uploadCustom": "上傳自訂",
+ "gradientLabel": "漸層 {{index}}",
+ "colorWheel": "色輪",
+ "colorPalette": "調色盤"
+ },
+ "crop": {
+ "title": "裁剪",
+ "cropVideo": "裁剪影片",
+ "dragInstruction": "拖動每一側來調整裁剪區域",
+ "ratio": "比例",
+ "free": "自由",
+ "done": "完成",
+ "lockAspectRatio": "鎖定長寬比",
+ "unlockAspectRatio": "解鎖長寬比"
+ },
+ "exportFormat": {
+ "mp4": "MP4",
+ "gif": "GIF",
+ "mp4Video": "MP4 影片",
+ "mp4Description": "高品質影片檔案",
+ "gifAnimation": "GIF 動畫",
+ "gifDescription": "可分享的動態圖片"
+ },
+ "exportQuality": {
+ "title": "匯出品質",
+ "low": "低",
+ "medium": "中",
+ "high": "高"
+ },
+ "gifSettings": {
+ "frameRate": "GIF 影格率",
+ "size": "GIF 尺寸",
+ "loop": "循環 GIF"
+ },
+ "project": {
+ "save": "儲存專案",
+ "load": "載入專案"
+ },
+ "export": {
+ "videoButton": "匯出影片",
+ "gifButton": "匯出 GIF",
+ "chooseSaveLocation": "選擇儲存位置"
+ },
+ "links": {
+ "reportBug": "回報錯誤",
+ "starOnGithub": "在 GitHub 上加星"
+ },
+ "imageUpload": {
+ "invalidFileType": "無效的檔案類型",
+ "jpgOnly": "請上傳 JPG 或 JPEG 格式的圖片檔案。",
+ "uploadSuccess": "自訂圖片上傳成功！",
+ "failedToUpload": "上傳圖片失敗",
+ "errorReading": "讀取檔案時出錯。"
+ },
+ "annotation": {
+ "title": "標註設定",
+ "active": "啟用",
+ "typeText": "文字",
+ "typeImage": "圖片",
+ "typeArrow": "箭頭",
+ "typeBlur": "模糊",
+ "textContent": "文字內容",
+ "textPlaceholder": "輸入您的文字...",
+ "fontStyle": "字體樣式",
+ "selectStyle": "選擇樣式",
+ "size": "大小",
+ "customFonts": "自訂字體",
+ "textColor": "文字顏色",
+ "background": "背景",
+ "none": "無",
+ "color": "顏色",
+ "colorWheel": "色輪",
+ "colorPalette": "調色盤",
+ "clearBackground": "清除背景",
+ "uploadImage": "上傳圖片",
+ "supportedFormats": "支援的格式：JPG、PNG、GIF、WebP",
+ "arrowDirection": "箭頭方向",
+ "strokeWidth": "描邊寬度：{{width}}px",
+ "arrowColor": "箭頭顏色",
+ "blurShape": "模糊形狀",
+ "blurIntensity": "模糊強度",
+ "blurShapeRectangle": "矩形",
+ "blurShapeOval": "橢圓",
+ "blurShapeFreehand": "自由手繪",
+ "deleteAnnotation": "刪除標註",
+ "shortcutsAndTips": "快捷鍵與提示",
+ "tipMovePlayhead": "將播放頭移動到重疊的標註區域並選擇一個項目。",
+ "tipTabCycle": "使用 Tab 鍵在重疊項目之間循環切換。",
+ "tipShiftTabCycle": "使用 Shift+Tab 反向循環切換。",
+ "invalidImageType": "無效的檔案類型",
+ "imageFormatsOnly": "請上傳 JPG、PNG、GIF 或 WebP 格式的圖片檔案。",
+ "imageUploadSuccess": "圖片上傳成功！",
+ "failedImageUpload": "上傳圖片失敗",
+ "blurColor": "模糊顏色",
+ "blurColorBlack": "黑色",
+ "blurColorWhite": "白色",
+ "blurType": "模糊類型",
+ "blurTypeBlur": "模糊",
+ "blurTypeMosaic": "馬賽克模糊",
+ "mosaicBlockSize": "馬賽克區塊大小"
+ },
+ "fontStyles": {
+ "classic": "經典",
+ "editor": "編輯器",
+ "strong": "粗體",
+ "typewriter": "打字機",
+ "deco": "裝飾",
+ "simple": "簡約",
+ "modern": "現代",
+ "clean": "簡潔"
+ },
+ "customFont": {
+ "dialogTitle": "新增 Google 字體",
+ "urlLabel": "Google Fonts 匯入 URL",
+ "urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+ "urlHelp": "從 Google Fonts 取得：選擇字體 → 點擊 \"Get font\" → 複製 @import URL",
+ "nameLabel": "顯示名稱",
+ "namePlaceholder": "我的自訂字體",
+ "nameHelp": "這是字體在字體選擇器中顯示的名稱",
+ "addButton": "新增字體",
+ "addingButton": "新增中...",
+ "errorEmptyUrl": "請輸入 Google Fonts 匯入 URL",
+ "errorInvalidUrl": "請輸入有效的 Google Fonts URL",
+ "errorEmptyName": "請輸入字體名稱",
+ "errorExtractFailed": "無法從 URL 中提取字體系列",
+ "successMessage": "字體 \"{{fontName}}\" 新增成功",
+ "failedToAdd": "新增字體失敗",
+ "errorTimeout": "字體載入時間過長。請檢查 URL 並重試。",
+ "errorLoadFailed": "無法載入該字體。請確認 Google Fonts URL 是否正確。"
+ },
+ "language": {
+ "title": "語言"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/shortcuts.json b/src/i18n/locales/zh-TW/shortcuts.json
new file mode 100644
index 0000000..54c0cfc
--- /dev/null
+++ b/src/i18n/locales/zh-TW/shortcuts.json
@@ -0,0 +1,37 @@
+{
+ "title": "鍵盤快捷鍵",
+ "customize": "自訂",
+ "configurable": "可設定",
+ "fixed": "固定",
+ "pressKey": "請按下按鍵…",
+ "clickToChange": "點擊以變更",
+ "pressEscToCancel": "按 Esc 取消",
+ "helpText": "點擊一個快捷鍵，然後按下新的組合鍵。按 Esc 取消。",
+ "resetToDefaults": "還原預設設定",
+ "alreadyUsedBy": "已被 \"{{action}}\" 使用",
+ "swap": "交換",
+ "reservedShortcut": "此快捷鍵已保留給 \"{{label}}\"，無法重新指定。",
+ "savedToast": "鍵盤快捷鍵已儲存",
+ "resetToast": "已還原預設快捷鍵 — 點擊儲存以套用",
+ "actions": {
+ "addZoom": "新增縮放",
+ "addTrim": "新增剪輯",
+ "addSpeed": "新增速度",
+ "addAnnotation": "新增標註",
+ "addBlur": "新增模糊",
+ "addKeyframe": "新增關鍵影格",
+ "deleteSelected": "刪除所選",
+ "playPause": "播放 / 暫停"
+ },
+ "fixedActions": {
+ "undo": "復原",
+ "redo": "重做",
+ "cycleAnnotationsForward": "向前切換標註",
+ "cycleAnnotationsBackward": "向後切換標註",
+ "deleteSelectedAlt": "刪除所選（替代）",
+ "panTimeline": "平移時間軸",
+ "zoomTimeline": "縮放時間軸",
+ "frameBack": "上一影格",
+ "frameForward": "下一影格"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/timeline.json b/src/i18n/locales/zh-TW/timeline.json
new file mode 100644
index 0000000..cd47b74
--- /dev/null
+++ b/src/i18n/locales/zh-TW/timeline.json
@@ -0,0 +1,55 @@
+{
+ "buttons": {
+ "addZoom": "新增縮放 (Z)",
+ "suggestZooms": "根據游標建議縮放",
+ "addTrim": "新增剪輯 (T)",
+ "addAnnotation": "新增標註 (A)",
+ "addSpeed": "新增速度 (S)",
+ "addBlur": "新增模糊 (B)"
+ },
+ "hints": {
+ "pressZoom": "按 Z 新增縮放",
+ "pressTrim": "按 T 新增剪輯",
+ "pressAnnotation": "按 A 新增標註",
+ "pressSpeed": "按 S 新增速度",
+ "pressBlur": "按 B 新增模糊區域"
+ },
+ "labels": {
+ "pan": "平移",
+ "zoom": "縮放",
+ "trim": "剪輯",
+ "speed": "速度",
+ "zoomItem": "縮放 {{index}}",
+ "trimItem": "剪輯 {{index}}",
+ "speedItem": "速度 {{index}}",
+ "annotationItem": "標註",
+ "imageItem": "圖片",
+ "emptyText": "空文字",
+ "blurItem": "模糊 {{index}}"
+ },
+ "emptyState": {
+ "noVideo": "未載入影片",
+ "dragAndDrop": "拖放影片以開始編輯"
+ },
+ "errors": {
+ "cannotPlaceZoom": "無法在此處放置縮放",
+ "zoomExistsAtLocation": "此位置已存在縮放或沒有足夠的空間。",
+ "zoomSuggestionUnavailable": "縮放建議處理器不可用",
+ "noCursorTelemetry": "無可用的游標遙測資料",
+ "noCursorTelemetryDescription": "請先錄製一段螢幕錄影以產生基於游標的建議。",
+ "noUsableTelemetry": "無可用的游標遙測資料",
+ "noUsableTelemetryDescription": "錄製內容沒有包含足夠的游標移動資料。",
+ "noDwellMoments": "未找到明確的游標停留時刻",
+ "noDwellMomentsDescription": "請嘗試在重要操作上進行較慢游標停留的錄製。",
+ "noAutoZoomSlots": "無可用的自動縮放位置",
+ "noAutoZoomSlotsDescription": "偵測到的停留點與現有縮放區域重疊。",
+ "cannotPlaceTrim": "無法在此處放置剪輯",
+ "trimExistsAtLocation": "此位置已存在剪輯或沒有足夠的空間。",
+ "cannotPlaceSpeed": "無法在此處放置速度",
+ "speedExistsAtLocation": "此位置已存在速度區域或沒有足夠的空間。"
+ },
+ "success": {
+ "addedZoomSuggestions": "已新增 {{count}} 個基於游標的縮放建議",
+ "addedZoomSuggestionsPlural": "已新增 {{count}} 個基於游標的縮放建議"
+ }
+}
diff --git a/src/index.css b/src/index.css
index 74f5669..694f8bd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -88,6 +88,10 @@
display: none; /* Chrome, Safari, Opera */
}
+ .squircle {
+ corner-shape: squircle;
+ }
+
/* Smooth playback scrubber */
input[type="range"] {
-webkit-appearance: none;
diff --git a/src/lib/__tests__/frameStepNavigation.test.ts b/src/lib/__tests__/frameStepNavigation.test.ts
new file mode 100644
index 0000000..ab0393b
--- /dev/null
+++ b/src/lib/__tests__/frameStepNavigation.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+
+import { computeFrameStepTime, FRAME_DURATION_SEC } from "@/lib/frameStep";
+
+describe("computeFrameStepTime", () => {
+ const duration = 10;
+
+ it("moves forward by one frame from the middle", () => {
+ const result = computeFrameStepTime(5, duration, "forward");
+ expect(result).toBeCloseTo(5 + FRAME_DURATION_SEC, 10);
+ });
+
+ it("moves backward by one frame from the middle", () => {
+ const result = computeFrameStepTime(5, duration, "backward");
+ expect(result).toBeCloseTo(5 - FRAME_DURATION_SEC, 10);
+ });
+
+ it("clamps to 0 when stepping backward at the beginning", () => {
+ const result = computeFrameStepTime(0, duration, "backward");
+ expect(result).toBe(0);
+ });
+
+ it("clamps to 0 when stepping backward near the beginning", () => {
+ const result = computeFrameStepTime(FRAME_DURATION_SEC / 2, duration, "backward");
+ expect(result).toBe(0);
+ });
+
+ it("clamps to duration when stepping forward at the end", () => {
+ const result = computeFrameStepTime(duration, duration, "forward");
+ expect(result).toBe(duration);
+ });
+
+ it("clamps to duration when stepping forward near the end", () => {
+ const result = computeFrameStepTime(duration - FRAME_DURATION_SEC / 2, duration, "forward");
+ expect(result).toBe(duration);
+ });
+
+ it("handles duration of 0 gracefully", () => {
+ expect(computeFrameStepTime(0, 0, "forward")).toBe(0);
+ expect(computeFrameStepTime(0, 0, "backward")).toBe(0);
+ });
+});
diff --git a/src/lib/assetPath.ts b/src/lib/assetPath.ts
index 8188de5..edba758 100644
--- a/src/lib/assetPath.ts
+++ b/src/lib/assetPath.ts
@@ -1,9 +1,29 @@
+export class UnsafeAssetPathError extends Error {
+ constructor(segment: string) {
+ super(`Unsafe asset path segment: ${segment}`);
+ this.name = "UnsafeAssetPathError";
+ }
+}
+
+export class AssetBaseUnavailableError extends Error {
+ constructor() {
+ super("electronAPI.assetBaseUrl is not available; preload did not load correctly");
+ this.name = "AssetBaseUnavailableError";
+ }
+}
+
function encodeRelativeAssetPath(relativePath: string): string {
return relativePath
.replace(/^\/+/, "")
.split("/")
.filter(Boolean)
- .map((part) => encodeURIComponent(part))
+ .map((part) => {
+ const decoded = decodeURIComponent(part);
+ if (decoded === "." || decoded === "..") {
+ throw new UnsafeAssetPathError(decoded);
+ }
+ return encodeURIComponent(decoded);
+ })
.join("/");
}
@@ -11,33 +31,22 @@ function ensureTrailingSlash(value: string): string {
return value.endsWith("/") ? value : `${value}/`;
}
-export async function getAssetPath(relativePath: string): Promise {
- const encodedRelativePath = encodeRelativeAssetPath(relativePath);
+export function getAssetPath(relativePath: string): string {
+ const encoded = encodeRelativeAssetPath(relativePath);
- try {
- if (typeof window !== "undefined") {
- // If running in a dev server (http/https), prefer the web-served path
- if (
- window.location &&
- window.location.protocol &&
- window.location.protocol.startsWith("http")
- ) {
- return `/${encodedRelativePath}`;
- }
-
- if (window.electronAPI && typeof window.electronAPI.getAssetBasePath === "function") {
- const base = await window.electronAPI.getAssetBasePath();
- if (base) {
- return new URL(encodedRelativePath, ensureTrailingSlash(base)).toString();
- }
- }
- }
- } catch {
- // ignore and use fallback
+ if (typeof window === "undefined") {
+ return `/${encoded}`;
}
- // Fallback for web/dev server: public/wallpapers are served at '/wallpapers/...'
- return `/${encodedRelativePath}`;
+ if (window.location?.protocol?.startsWith("http")) {
+ return `/${encoded}`;
+ }
+
+ const base = window.electronAPI?.assetBaseUrl;
+ if (!base) {
+ throw new AssetBaseUnavailableError();
+ }
+ return new URL(encoded, ensureTrailingSlash(base)).toString();
}
export default getAssetPath;
diff --git a/src/lib/blurEffects.test.ts b/src/lib/blurEffects.test.ts
new file mode 100644
index 0000000..4797e69
--- /dev/null
+++ b/src/lib/blurEffects.test.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import { applyMosaicToImageData, getBlurOverlayColor, normalizeBlurColor } from "./blurEffects";
+
+function createTestImageData(width: number, height: number) {
+ const data = new Uint8ClampedArray(width * height * 4);
+
+ for (let y = 0; y < height; y++) {
+ for (let x = 0; x < width; x++) {
+ const offset = (y * width + x) * 4;
+ data[offset] = x * 20 + y;
+ data[offset + 1] = y * 20 + x;
+ data[offset + 2] = (x + y) * 10;
+ data[offset + 3] = 255;
+ }
+ }
+
+ return {
+ data,
+ width,
+ height,
+ } as ImageData;
+}
+
+describe("applyMosaicToImageData", () => {
+ it("collapses each block to a single representative color", () => {
+ const imageData = createTestImageData(4, 4);
+ const original = new Uint8ClampedArray(imageData.data);
+
+ applyMosaicToImageData(imageData, 2);
+
+ const topLeft = Array.from(imageData.data.slice(0, 4));
+ const topRightOffset = (1 * 4 + 1) * 4;
+ const topRight = Array.from(imageData.data.slice(topRightOffset, topRightOffset + 4));
+ expect(topLeft).toEqual(topRight);
+
+ expect(Array.from(original.slice(0, 4))).not.toEqual(topLeft);
+ });
+
+ it("reduces unique pixel colors, making the transform information-lossy", () => {
+ const imageData = createTestImageData(8, 8);
+ const before = new Set();
+ const after = new Set();
+
+ for (let i = 0; i < imageData.data.length; i += 4) {
+ before.add(
+ `${imageData.data[i]}-${imageData.data[i + 1]}-${imageData.data[i + 2]}-${imageData.data[i + 3]}`,
+ );
+ }
+
+ applyMosaicToImageData(imageData, 4);
+
+ for (let i = 0; i < imageData.data.length; i += 4) {
+ after.add(
+ `${imageData.data[i]}-${imageData.data[i + 1]}-${imageData.data[i + 2]}-${imageData.data[i + 3]}`,
+ );
+ }
+
+ expect(after.size).toBeLessThan(before.size);
+ expect(after.size).toBe(4);
+ });
+});
+
+describe("blur color helpers", () => {
+ it("normalizes invalid blur colors to white", () => {
+ expect(normalizeBlurColor("black")).toBe("black");
+ expect(normalizeBlurColor("invalid")).toBe("white");
+ });
+
+ it("returns a dark overlay when black blur color is selected", () => {
+ expect(
+ getBlurOverlayColor({
+ type: "blur",
+ shape: "rectangle",
+ color: "black",
+ intensity: 12,
+ blockSize: 12,
+ }),
+ ).toBe("rgba(0, 0, 0, 0.18)");
+ });
+});
diff --git a/src/lib/blurEffects.ts b/src/lib/blurEffects.ts
new file mode 100644
index 0000000..6933924
--- /dev/null
+++ b/src/lib/blurEffects.ts
@@ -0,0 +1,113 @@
+import {
+ type BlurColor,
+ type BlurData,
+ type BlurType,
+ DEFAULT_BLUR_BLOCK_SIZE,
+ DEFAULT_BLUR_INTENSITY,
+ MAX_BLUR_BLOCK_SIZE,
+ MAX_BLUR_INTENSITY,
+ MIN_BLUR_BLOCK_SIZE,
+ MIN_BLUR_INTENSITY,
+} from "@/components/video-editor/types";
+
+function clamp(value: number, min: number, max: number) {
+ if (!Number.isFinite(value)) return min;
+ return Math.min(max, Math.max(min, value));
+}
+
+export function normalizeBlurType(value: unknown): BlurType {
+ return value === "mosaic" ? "mosaic" : "blur";
+}
+
+export function normalizeBlurColor(value: unknown): BlurColor {
+ return value === "black" ? "black" : "white";
+}
+
+export function getNormalizedBlurIntensity(blurData?: BlurData | null): number {
+ return clamp(
+ blurData?.intensity ?? DEFAULT_BLUR_INTENSITY,
+ MIN_BLUR_INTENSITY,
+ MAX_BLUR_INTENSITY,
+ );
+}
+
+export function getNormalizedMosaicBlockSize(blurData?: BlurData | null, scaleFactor = 1): number {
+ const rawBlockSize = clamp(
+ blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE,
+ MIN_BLUR_BLOCK_SIZE,
+ MAX_BLUR_BLOCK_SIZE,
+ );
+ return Math.max(1, Math.round(rawBlockSize * Math.max(scaleFactor, 0.01)));
+}
+
+export function getBlurOverlayColor(blurData?: BlurData | null): string {
+ const blurColor = normalizeBlurColor(blurData?.color);
+ const blurType = normalizeBlurType(blurData?.type);
+
+ if (blurColor === "black") {
+ return blurType === "mosaic" ? "rgba(0, 0, 0, 0.72)" : "rgba(0, 0, 0, 0.56)";
+ }
+
+ return blurType === "mosaic" ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.02)";
+}
+
+export function getMosaicGridOverlayColor(blurData?: BlurData | null): string {
+ return normalizeBlurColor(blurData?.color) === "black"
+ ? "rgba(255,255,255,0.05)"
+ : "rgba(255,255,255,0.04)";
+}
+
+export function applyMosaicToImageData(imageData: ImageData, blockSize: number): ImageData {
+ const width = imageData.width;
+ const height = imageData.height;
+ const data = imageData.data;
+ const normalizedBlockSize = Math.max(1, Math.floor(blockSize));
+
+ if (width <= 0 || height <= 0 || normalizedBlockSize <= 1) {
+ return imageData;
+ }
+
+ for (let blockY = 0; blockY < height; blockY += normalizedBlockSize) {
+ for (let blockX = 0; blockX < width; blockX += normalizedBlockSize) {
+ const blockWidth = Math.min(normalizedBlockSize, width - blockX);
+ const blockHeight = Math.min(normalizedBlockSize, height - blockY);
+ const pixelCount = blockWidth * blockHeight;
+
+ if (pixelCount <= 0) {
+ continue;
+ }
+
+ let redTotal = 0;
+ let greenTotal = 0;
+ let blueTotal = 0;
+ let alphaTotal = 0;
+
+ for (let y = blockY; y < blockY + blockHeight; y++) {
+ for (let x = blockX; x < blockX + blockWidth; x++) {
+ const offset = (y * width + x) * 4;
+ redTotal += data[offset];
+ greenTotal += data[offset + 1];
+ blueTotal += data[offset + 2];
+ alphaTotal += data[offset + 3];
+ }
+ }
+
+ const averageRed = Math.round(redTotal / pixelCount);
+ const averageGreen = Math.round(greenTotal / pixelCount);
+ const averageBlue = Math.round(blueTotal / pixelCount);
+ const averageAlpha = Math.round(alphaTotal / pixelCount);
+
+ for (let y = blockY; y < blockY + blockHeight; y++) {
+ for (let x = blockX; x < blockX + blockWidth; x++) {
+ const offset = (y * width + x) * 4;
+ data[offset] = averageRed;
+ data[offset + 1] = averageGreen;
+ data[offset + 2] = averageBlue;
+ data[offset + 3] = averageAlpha;
+ }
+ }
+ }
+ }
+
+ return imageData;
+}
diff --git a/src/lib/compositeLayout.test.ts b/src/lib/compositeLayout.test.ts
index 93ce2c5..596eb75 100644
--- a/src/lib/compositeLayout.test.ts
+++ b/src/lib/compositeLayout.test.ts
@@ -24,16 +24,111 @@ describe("computeCompositeLayout", () => {
webcamSize: { width: 1920, height: 1080 },
});
+ const refDim = Math.sqrt(1280 * 720);
+ const defaultFraction = 25 / 100; // DEFAULT_WEBCAM_SIZE_PRESET = 25
expect(layout).not.toBeNull();
expect(layout!.webcamRect).not.toBeNull();
- expect(layout!.webcamRect!.width).toBeLessThanOrEqual(Math.round(1280 * 0.18) + 1);
- expect(layout!.webcamRect!.height).toBeLessThanOrEqual(Math.round(720 * 0.18) + 1);
+ expect(layout!.webcamRect!.width).toBeLessThanOrEqual(Math.round(refDim * defaultFraction) + 1);
+ expect(layout!.webcamRect!.height).toBeLessThanOrEqual(
+ Math.round(refDim * defaultFraction) + 1,
+ );
expect(
Math.abs(layout!.webcamRect!.width * 1080 - layout!.webcamRect!.height * 1920),
).toBeLessThanOrEqual(1920);
});
- it("uses cover-style full-width stacking in vertical stack mode", () => {
+ it("produces consistent webcam size across landscape and portrait aspect ratios", () => {
+ const webcamSize = { width: 1280, height: 720 };
+ const landscape = computeCompositeLayout({
+ canvasSize: { width: 1920, height: 1080 },
+ screenSize: { width: 1920, height: 1080 },
+ webcamSize,
+ webcamSizePreset: 50,
+ });
+ const portrait = computeCompositeLayout({
+ canvasSize: { width: 1080, height: 1920 },
+ screenSize: { width: 1080, height: 1920 },
+ webcamSize,
+ webcamSizePreset: 50,
+ });
+
+ expect(landscape).not.toBeNull();
+ expect(portrait).not.toBeNull();
+ // Same total pixel count — webcam area should be comparable
+ const landscapeArea = landscape!.webcamRect!.width * landscape!.webcamRect!.height;
+ const portraitArea = portrait!.webcamRect!.width * portrait!.webcamRect!.height;
+ expect(landscapeArea).toBe(portraitArea);
+ });
+
+ it("scales the webcam proportionally as webcamSizePreset increases", () => {
+ const canvasSize = { width: 1920, height: 1080 };
+ const screenSize = { width: 1920, height: 1080 };
+ const webcamSize = { width: 1280, height: 720 };
+
+ const small = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 10,
+ });
+ const medium = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 25,
+ });
+ const large = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 50,
+ });
+
+ expect(small!.webcamRect!.width).toBeLessThan(medium!.webcamRect!.width);
+ expect(medium!.webcamRect!.width).toBeLessThan(large!.webcamRect!.width);
+ expect(small!.webcamRect!.height).toBeLessThan(medium!.webcamRect!.height);
+ expect(medium!.webcamRect!.height).toBeLessThan(large!.webcamRect!.height);
+ });
+
+ it("clamps webcamSizePreset to the valid range (10–50)", () => {
+ const canvasSize = { width: 1920, height: 1080 };
+ const screenSize = { width: 1920, height: 1080 };
+ const webcamSize = { width: 1280, height: 720 };
+
+ const atMin = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 10,
+ });
+ const belowMin = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 1,
+ });
+ const atMax = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 50,
+ });
+ const aboveMax = computeCompositeLayout({
+ canvasSize,
+ screenSize,
+ webcamSize,
+ webcamSizePreset: 100,
+ });
+
+ // Values below 10 should clamp to 10
+ expect(belowMin!.webcamRect!.width).toBe(atMin!.webcamRect!.width);
+ expect(belowMin!.webcamRect!.height).toBe(atMin!.webcamRect!.height);
+ // Values above 50 should clamp to 50
+ expect(aboveMax!.webcamRect!.width).toBe(atMax!.webcamRect!.width);
+ expect(aboveMax!.webcamRect!.height).toBe(atMax!.webcamRect!.height);
+ });
+
+ it("centers the combined screen and webcam stack in vertical stack mode", () => {
const layout = computeCompositeLayout({
canvasSize: { width: 1920, height: 1080 },
maxContentSize: { width: 1536, height: 864 },
@@ -43,23 +138,19 @@ describe("computeCompositeLayout", () => {
});
expect(layout).not.toBeNull();
- expect(layout?.screenRect).toEqual({
- x: 0,
- y: 0,
- width: 1920,
- height: 0,
- });
- expect(layout?.webcamRect).toEqual({
- x: 0,
- y: 0,
- width: 1920,
- height: 1080,
- borderRadius: 0,
- });
- expect(layout?.screenCover).toBe(true);
+ // Webcam is full-width at the bottom
+ expect(layout!.webcamRect).not.toBeNull();
+ expect(layout!.webcamRect!.x).toBe(0);
+ expect(layout!.webcamRect!.width).toBe(1920);
+ expect(layout!.webcamRect!.borderRadius).toBe(0);
+ // Screen fills remaining space at the top (cover mode)
+ expect(layout!.screenRect.x).toBe(0);
+ expect(layout!.screenRect.y).toBe(0);
+ expect(layout!.screenRect.width).toBe(1920);
+ expect(layout!.screenCover).toBe(true);
});
- it("fills the canvas with the screen when vertical stack has no webcam", () => {
+ it("keeps the screen full-canvas and omits the webcam when dimensions are unavailable in stack mode", () => {
const layout = computeCompositeLayout({
canvasSize: { width: 1920, height: 1080 },
maxContentSize: { width: 1536, height: 864 },
@@ -78,6 +169,29 @@ describe("computeCompositeLayout", () => {
expect(layout?.screenCover).toBe(true);
});
+ it("uses a 2:1 split layout in dual frame mode", () => {
+ const layout = computeCompositeLayout({
+ canvasSize: { width: 1920, height: 1080 },
+ maxContentSize: { width: 1536, height: 864 },
+ screenSize: { width: 1920, height: 1080 },
+ webcamSize: { width: 1280, height: 720 },
+ layoutPreset: "dual-frame",
+ });
+
+ expect(layout).not.toBeNull();
+ expect(layout?.webcamRect).not.toBeNull();
+ expect(layout?.screenRect.y).toBe(108);
+ expect(layout?.screenRect.height).toBe(864);
+ expect(layout?.screenBorderRadius).toBe(layout?.webcamRect?.borderRadius);
+ expect(layout?.webcamRect?.y).toBe(108);
+ expect(layout?.webcamRect?.height).toBe(864);
+ expect(layout?.webcamRect?.x).toBeGreaterThan(layout?.screenRect.x ?? 0);
+ expect(
+ Math.abs((layout?.screenRect.width ?? 0) - 2 * (layout?.webcamRect?.width ?? 0)),
+ ).toBeLessThanOrEqual(1);
+ expect(layout?.screenCover).toBe(true);
+ });
+
it("forces circular and square masks to use square dimensions", () => {
const circularLayout = computeCompositeLayout({
canvasSize: { width: 1920, height: 1080 },
diff --git a/src/lib/compositeLayout.ts b/src/lib/compositeLayout.ts
index a3c84e8..e6db733 100644
--- a/src/lib/compositeLayout.ts
+++ b/src/lib/compositeLayout.ts
@@ -15,7 +15,9 @@ export interface Size {
height: number;
}
-export type WebcamLayoutPreset = "picture-in-picture" | "vertical-stack";
+export type WebcamLayoutPreset = "picture-in-picture" | "vertical-stack" | "dual-frame";
+/** Webcam size as a percentage of the canvas reference dimension (10–50). */
+export type WebcamSizePreset = number;
export interface WebcamLayoutShadow {
color: string;
@@ -32,7 +34,6 @@ interface BorderRadiusRule {
interface OverlayTransform {
type: "overlay";
- maxStageFraction: number;
marginFraction: number;
minMargin: number;
minSize: number;
@@ -43,9 +44,17 @@ interface StackTransform {
gap: number;
}
+interface SplitTransform {
+ type: "split";
+ gapFraction: number;
+ minGap: number;
+ screenUnits: number;
+ webcamUnits: number;
+}
+
export interface WebcamLayoutPresetDefinition {
label: string;
- transform: OverlayTransform | StackTransform;
+ transform: OverlayTransform | StackTransform | SplitTransform;
borderRadius: BorderRadiusRule;
shadow: WebcamLayoutShadow | null;
}
@@ -53,11 +62,18 @@ export interface WebcamLayoutPresetDefinition {
export interface WebcamCompositeLayout {
screenRect: RenderRect;
webcamRect: StyledRenderRect | null;
+ screenBorderRadius?: number;
/** When true, the video should be scaled to cover screenRect (cropping overflow). */
screenCover?: boolean;
}
-const MAX_STAGE_FRACTION = 0.18;
+/** Convert a webcam size percentage (10–50) to a fraction of the reference dimension. */
+function webcamSizeToFraction(percent: number): number {
+ const safe = Number.isFinite(percent) ? percent : 25;
+ const clamped = Math.max(10, Math.min(50, safe));
+ return clamped / 100;
+}
+
const MARGIN_FRACTION = 0.02;
const MAX_BORDER_RADIUS = 24;
const WEBCAM_LAYOUT_PRESET_MAP: Record = {
@@ -65,7 +81,6 @@ const WEBCAM_LAYOUT_PRESET_MAP: Record {
+ it("stores samples captured during an active session", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+ buf.startSession(1);
+ for (let i = 0; i < 3; i++) buf.push(sample(i));
+ buf.endSession();
+
+ const batch = buf.takeNextBatch();
+ expect(batch?.recordingId).toBe(1);
+ expect(batch?.samples).toHaveLength(3);
+ expect(batch?.samples[0]?.timeMs).toBe(0);
+ });
+
+ it("trims active samples past maxActiveSamples (ring behaviour)", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 2 });
+ buf.startSession(1);
+ buf.push(sample(1));
+ buf.push(sample(2));
+ buf.push(sample(3));
+ buf.endSession();
+
+ const batch = buf.takeNextBatch();
+ expect(batch?.samples).toEqual([sample(2), sample(3)]);
+ });
+
+ it("preserves earlier pending batches when a new session starts before store", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+ // Recording 1
+ buf.startSession(1);
+ buf.push(sample(101));
+ buf.push(sample(102));
+ buf.endSession();
+
+ // Recording 2 starts before recording 1's batch has been consumed
+ buf.startSession(2);
+ buf.push(sample(201));
+ buf.endSession();
+
+ const batch1 = buf.takeNextBatch();
+ const batch2 = buf.takeNextBatch();
+ expect(batch1?.recordingId).toBe(1);
+ expect(batch1?.samples.map((s) => s.timeMs)).toEqual([101, 102]);
+ expect(batch2?.recordingId).toBe(2);
+ expect(batch2?.samples.map((s) => s.timeMs)).toEqual([201]);
+ });
+
+ it("returns null when nothing is pending", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+ expect(buf.takeNextBatch()).toBeNull();
+ });
+
+ it("drops empty sessions instead of queuing empty batches", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+ buf.startSession(1);
+ buf.endSession();
+ expect(buf.pendingCount).toBe(0);
+ expect(buf.takeNextBatch()).toBeNull();
+ });
+
+ it("caps the pending queue at maxPendingBatches to bound memory", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10, maxPendingBatches: 3 });
+
+ for (let round = 1; round <= 5; round++) {
+ buf.startSession(round);
+ buf.push(sample(round));
+ buf.endSession();
+ }
+
+ expect(buf.pendingCount).toBe(3);
+ // Oldest two batches (rounds 1 and 2) should have been dropped
+ expect(buf.takeNextBatch()?.recordingId).toBe(3);
+ expect(buf.takeNextBatch()?.recordingId).toBe(4);
+ expect(buf.takeNextBatch()?.recordingId).toBe(5);
+ });
+
+ it("starting a new session clears in-progress samples but keeps pending batches", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+ buf.startSession(1);
+ buf.push(sample(1));
+ buf.endSession();
+
+ buf.startSession(2);
+ buf.push(sample(99));
+ // Simulate another startSession before endSession (e.g. rapid restart)
+ buf.startSession(3);
+ expect(buf.activeCount).toBe(0);
+ expect(buf.pendingCount).toBe(1);
+
+ const batch = buf.takeNextBatch();
+ expect(batch?.recordingId).toBe(1);
+ expect(batch?.samples.map((s) => s.timeMs)).toEqual([1]);
+ });
+
+ it("discardBatch(id) drops only the batch produced by that recording id", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+ buf.startSession(1);
+ buf.push(sample(1));
+ buf.endSession();
+
+ buf.startSession(2);
+ buf.push(sample(2));
+ buf.endSession();
+
+ expect(buf.pendingCount).toBe(2);
+ expect(buf.discardBatch(1)).toBe(true);
+ expect(buf.pendingCount).toBe(1);
+ expect(buf.takeNextBatch()?.recordingId).toBe(2);
+ });
+
+ it("discardBatch(id) targets the correct batch even when a later recording sits in front of it", () => {
+ // Regression test for the rapid Stop → Record → Discard sequence:
+ // recording A's finalize callback does async work (fixWebmDuration),
+ // recording B finishes in the meantime, then A's callback resolves
+ // with discard intent. The discard must drop A — not B, which
+ // happens to be the *latest* pending batch by the time discard runs.
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+ buf.startSession(1);
+ buf.push(sample(11));
+ buf.endSession();
+
+ buf.startSession(2);
+ buf.push(sample(22));
+ buf.endSession();
+
+ expect(buf.pendingCount).toBe(2);
+ expect(buf.discardBatch(1)).toBe(true);
+
+ const remaining = buf.takeNextBatch();
+ expect(remaining?.recordingId).toBe(2);
+ expect(remaining?.samples.map((s) => s.timeMs)).toEqual([22]);
+ expect(buf.takeNextBatch()).toBeNull();
+ });
+
+ it("discardBatch(id) is a no-op (returns false) when the id is unknown or already drained", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+ expect(buf.discardBatch(42)).toBe(false);
+
+ buf.startSession(1);
+ buf.push(sample(1));
+ buf.endSession();
+ buf.takeNextBatch();
+ expect(buf.discardBatch(1)).toBe(false);
+ expect(buf.pendingCount).toBe(0);
+ });
+
+ it("prependBatch() re-inserts a batch at the front of the queue", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+
+ buf.startSession(1);
+ buf.push(sample(1));
+ buf.endSession();
+
+ const batch = buf.takeNextBatch();
+ expect(batch).not.toBeNull();
+ expect(buf.pendingCount).toBe(0);
+
+ if (batch) buf.prependBatch(batch);
+ expect(buf.pendingCount).toBe(1);
+ const next = buf.takeNextBatch();
+ expect(next?.recordingId).toBe(1);
+ expect(next?.samples.map((s) => s.timeMs)).toEqual([1]);
+ });
+
+ it("prependBatch() ignores empty batches", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+ buf.prependBatch({ recordingId: 1, samples: [] });
+ expect(buf.pendingCount).toBe(0);
+ });
+
+ it("endSession() returns the number of dropped batches and warns when the cap is exceeded", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10, maxPendingBatches: 2 });
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+
+ for (let round = 1; round <= 2; round++) {
+ buf.startSession(round);
+ buf.push(sample(round));
+ expect(buf.endSession()).toBe(0);
+ }
+ expect(warn).not.toHaveBeenCalled();
+
+ buf.startSession(3);
+ buf.push(sample(3));
+ const dropped = buf.endSession();
+ expect(dropped).toBe(1);
+ expect(warn).toHaveBeenCalledTimes(1);
+ expect(warn.mock.calls[0]?.[0]).toMatch(/dropped 1 pending batch/);
+ expect(buf.pendingCount).toBe(2);
+
+ warn.mockRestore();
+ });
+
+ it("prependBatch() defensively trims and warns when it would exceed the cap", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10, maxPendingBatches: 2 });
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+
+ // Fill the queue to the cap without dropping anything.
+ for (let round = 1; round <= 2; round++) {
+ buf.startSession(round);
+ buf.push(sample(round));
+ buf.endSession();
+ }
+ expect(buf.pendingCount).toBe(2);
+ expect(warn).not.toHaveBeenCalled();
+
+ // Simulate a misuse where a retry prepends without first draining:
+ // queue would grow to 3, so the oldest-trailing entry must be evicted.
+ buf.prependBatch({ recordingId: 99, samples: [sample(99)] });
+ expect(buf.pendingCount).toBe(2);
+ expect(warn).toHaveBeenCalledTimes(1);
+ expect(warn.mock.calls[0]?.[0]).toMatch(/prependBatch trimmed 1 trailing batch/);
+
+ // Front is the prepended batch; the preserved trailing batch is round 1.
+ expect(buf.takeNextBatch()?.recordingId).toBe(99);
+ expect(buf.takeNextBatch()?.recordingId).toBe(1);
+ expect(buf.pendingCount).toBe(0);
+
+ warn.mockRestore();
+ });
+
+ it("sanitizes non-finite or non-positive option values to safe defaults", () => {
+ // Infinity / NaN / negative would otherwise turn the trim loops
+ // into infinite loops. The buffer must fall back to defaults.
+ const buf = createCursorTelemetryBuffer({
+ maxActiveSamples: Number.POSITIVE_INFINITY,
+ maxPendingBatches: Number.NaN,
+ });
+
+ buf.startSession(1);
+ buf.push(sample(1));
+ expect(() => buf.endSession()).not.toThrow();
+ expect(buf.pendingCount).toBe(1);
+
+ const buf2 = createCursorTelemetryBuffer({
+ maxActiveSamples: -5,
+ maxPendingBatches: 0,
+ });
+ buf2.startSession(2);
+ buf2.push(sample(2));
+ expect(() => buf2.endSession()).not.toThrow();
+ expect(buf2.pendingCount).toBe(1);
+ });
+
+ it("reset() clears both active and pending state", () => {
+ const buf = createCursorTelemetryBuffer({ maxActiveSamples: 10 });
+ buf.startSession(1);
+ buf.push(sample(1));
+ buf.endSession();
+ buf.startSession(2);
+ buf.push(sample(2));
+
+ buf.reset();
+
+ expect(buf.activeCount).toBe(0);
+ expect(buf.pendingCount).toBe(0);
+ expect(buf.takeNextBatch()).toBeNull();
+ });
+});
diff --git a/src/lib/cursorTelemetryBuffer.ts b/src/lib/cursorTelemetryBuffer.ts
new file mode 100644
index 0000000..0c7e0e1
--- /dev/null
+++ b/src/lib/cursorTelemetryBuffer.ts
@@ -0,0 +1,213 @@
+/**
+ * A single cursor telemetry sample captured during a recording session.
+ *
+ * Coordinates (`cx`, `cy`) are clamped ratios in the `[0, 1]` range,
+ * normalised against the captured surface's width and height by the
+ * main-process `sampleCursorPoint()` before being pushed. `timeMs` is the
+ * offset (in milliseconds) from the recording's start.
+ */
+export interface CursorTelemetryPoint {
+ timeMs: number;
+ cx: number;
+ cy: number;
+}
+
+/**
+ * A completed batch of cursor samples, tagged with the recording id that
+ * produced them. The id is supplied at `startSession()` time and travels
+ * with the batch through the pending queue, retries, and discards.
+ */
+export interface CursorTelemetryBatch {
+ recordingId: number;
+ samples: CursorTelemetryPoint[];
+}
+
+/**
+ * Per-session cursor telemetry buffer with bounded memory.
+ *
+ * Flow: `startSession(recordingId)` → `push(point)` N times → `endSession()`
+ * enqueues the collected samples as a completed batch tagged with that
+ * `recordingId`. The main process later drains batches in FIFO order via
+ * `takeNextBatch()` to persist them to disk, and can `prependBatch()` on
+ * write failure to retry without losing order. A discard request keys on
+ * the recording id so an asynchronous "discard recording A" decision that
+ * arrives after recording B has already enqueued its batch still drops
+ * the right one.
+ *
+ * Memory is bounded by `maxActiveSamples` (ring buffer on the in-progress
+ * batch) and `maxPendingBatches` (FIFO cap across completed batches).
+ */
+export interface CursorTelemetryBuffer {
+ /**
+ * Begin a new recording session under the given `recordingId`. Clears
+ * any in-progress active samples (without touching already-completed
+ * pending batches). Safe to call repeatedly — e.g. a rapid Stop →
+ * Record sequence — and the most recent id wins.
+ */
+ startSession(recordingId: number): void;
+
+ /**
+ * Append a telemetry sample to the current active session. When the
+ * active buffer exceeds `maxActiveSamples`, the oldest sample is
+ * dropped (ring behaviour).
+ */
+ push(point: CursorTelemetryPoint): void;
+
+ /**
+ * Finalize the active session, moving its samples into the pending
+ * queue as a single batch tagged with the current recording id. Empty
+ * sessions are dropped (no empty batch is enqueued).
+ *
+ * If the pending queue would exceed `maxPendingBatches`, the oldest
+ * batches are evicted to bound memory. A `console.warn` is emitted
+ * whenever at least one batch is dropped so that pathological rapid-
+ * restart scenarios are observable.
+ *
+ * @returns the number of pending batches dropped by this call (0 under
+ * normal operation).
+ */
+ endSession(): number;
+
+ /**
+ * Remove and return the oldest pending batch, or `null` if the queue
+ * is empty.
+ */
+ takeNextBatch(): CursorTelemetryBatch | null;
+
+ /**
+ * Re-insert a batch at the front of the queue, preserving FIFO order
+ * on retry paths (e.g. when persisting the batch failed and the
+ * caller wants the next `takeNextBatch()` to yield it again).
+ *
+ * Empty batches are ignored. The pending cap is enforced defensively
+ * — if prepending would push the queue past `maxPendingBatches`, the
+ * oldest entries are evicted and a `console.warn` is emitted. In
+ * normal retry usage this trim is a no-op because the caller has just
+ * removed the batch via `takeNextBatch()`.
+ */
+ prependBatch(batch: CursorTelemetryBatch): void;
+
+ /**
+ * Drop the pending batch produced by the given `recordingId`. Used
+ * when a recording is discarded after its `endSession()` has run but
+ * before it has been persisted. Returns `true` if a batch was
+ * removed, `false` otherwise (no matching id, or the batch was
+ * already drained).
+ *
+ * Keying on the recording id (rather than "the latest pending batch")
+ * avoids a real bug: when finalizing a recording does asynchronous
+ * work like `fixWebmDuration`, a quick Stop → Record → Discard
+ * sequence can interleave such that the latest pending batch belongs
+ * to a *later* recording than the one being discarded.
+ */
+ discardBatch(recordingId: number): boolean;
+
+ /**
+ * Clear both the active and pending state. Intended for tests and
+ * full teardown paths.
+ */
+ reset(): void;
+
+ readonly activeCount: number;
+ readonly pendingCount: number;
+}
+
+export interface CursorTelemetryBufferOptions {
+ maxActiveSamples: number;
+ maxPendingBatches?: number;
+}
+
+const DEFAULT_MAX_PENDING_BATCHES = 8;
+const DEFAULT_MAX_ACTIVE_SAMPLES = 10_000;
+
+/** Coerce a numeric option into a safe, finite, positive integer. */
+function sanitizeLimit(value: number | undefined, fallback: number): number {
+ if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+ const floored = Math.floor(value);
+ return floored >= 1 ? floored : fallback;
+}
+
+/**
+ * Create a cursor telemetry buffer.
+ *
+ * Numeric options are sanitized: non-finite, negative, or zero values fall
+ * back to safe defaults so a bad caller cannot disable the memory bounds
+ * (which would turn the trim loops into infinite loops).
+ *
+ * @see CursorTelemetryBuffer for the full lifecycle contract.
+ */
+export function createCursorTelemetryBuffer(
+ options: CursorTelemetryBufferOptions,
+): CursorTelemetryBuffer {
+ const maxActive = sanitizeLimit(options.maxActiveSamples, DEFAULT_MAX_ACTIVE_SAMPLES);
+ const maxPending = sanitizeLimit(options.maxPendingBatches, DEFAULT_MAX_PENDING_BATCHES);
+
+ let active: CursorTelemetryPoint[] = [];
+ let activeRecordingId: number | null = null;
+ let pending: CursorTelemetryBatch[] = [];
+
+ return {
+ startSession(recordingId) {
+ active = [];
+ activeRecordingId = recordingId;
+ },
+ push(point) {
+ active.push(point);
+ if (active.length > maxActive) {
+ active.shift();
+ }
+ },
+ endSession() {
+ let dropped = 0;
+ if (active.length > 0 && activeRecordingId !== null) {
+ pending.push({ recordingId: activeRecordingId, samples: active });
+ while (pending.length > maxPending) {
+ pending.shift();
+ dropped++;
+ }
+ }
+ active = [];
+ activeRecordingId = null;
+ if (dropped > 0) {
+ console.warn(
+ `[cursorTelemetryBuffer] dropped ${dropped} pending batch(es) to stay within maxPendingBatches=${maxPending}`,
+ );
+ }
+ return dropped;
+ },
+ takeNextBatch() {
+ return pending.shift() ?? null;
+ },
+ prependBatch(batch) {
+ if (batch.samples.length === 0) return;
+ pending.unshift(batch);
+ let dropped = 0;
+ while (pending.length > maxPending) {
+ pending.pop();
+ dropped++;
+ }
+ if (dropped > 0) {
+ console.warn(
+ `[cursorTelemetryBuffer] prependBatch trimmed ${dropped} trailing batch(es) to stay within maxPendingBatches=${maxPending}`,
+ );
+ }
+ },
+ discardBatch(recordingId) {
+ const idx = pending.findIndex((b) => b.recordingId === recordingId);
+ if (idx === -1) return false;
+ pending.splice(idx, 1);
+ return true;
+ },
+ reset() {
+ active = [];
+ activeRecordingId = null;
+ pending = [];
+ },
+ get activeCount() {
+ return active.length;
+ },
+ get pendingCount() {
+ return pending.length;
+ },
+ };
+}
diff --git a/src/lib/exporter/annotationRenderer.ts b/src/lib/exporter/annotationRenderer.ts
index 7420c80..c0d5657 100644
--- a/src/lib/exporter/annotationRenderer.ts
+++ b/src/lib/exporter/annotationRenderer.ts
@@ -1,4 +1,47 @@
-import type { AnnotationRegion, ArrowDirection } from "@/components/video-editor/types";
+import { type AnnotationRegion, type ArrowDirection } from "@/components/video-editor/types";
+import {
+ applyMosaicToImageData,
+ getBlurOverlayColor,
+ getNormalizedBlurIntensity,
+ getNormalizedMosaicBlockSize,
+ normalizeBlurType,
+} from "@/lib/blurEffects";
+
+let blurScratchCanvas: HTMLCanvasElement | null = null;
+let blurScratchCtx: CanvasRenderingContext2D | null = null;
+
+// Matches a single code point whose script is Han (including non-BMP
+// Extension A-F), Hiragana, Katakana (including halfwidth forms), or
+// Hangul. Used to split CJK text at character boundaries during wrap,
+// since CJK scripts have no word-separating whitespace. Unicode script
+// property escapes require ES2018+; tsconfig target is ES2020.
+const CJK_CHAR = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+
+function tokenizeForWrap(line: string): string[] {
+ // Split Latin text on whitespace (preserving the whitespace as its own token,
+ // matching the original behavior), and split CJK runs into individual
+ // characters so each one becomes a breakable unit. This mirrors the editor's
+ // CSS `word-break: break-word` handling for CJK content.
+ const tokens: string[] = [];
+ let buffer = "";
+ const chars = Array.from(line);
+ const flushBuffer = () => {
+ if (buffer) {
+ tokens.push(...buffer.split(/(\s+)/).filter((s) => s.length > 0));
+ buffer = "";
+ }
+ };
+ for (const ch of chars) {
+ if (CJK_CHAR.test(ch)) {
+ flushBuffer();
+ tokens.push(ch);
+ } else {
+ buffer += ch;
+ }
+ }
+ flushBuffer();
+ return tokens;
+}
// SVG path data for each arrow direction
const ARROW_PATHS: Record = {
@@ -96,6 +139,101 @@ function renderArrow(
ctx.restore();
}
+function drawBlurPath(
+ ctx: CanvasRenderingContext2D,
+ annotation: AnnotationRegion,
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+) {
+ const shape = annotation.blurData?.shape || "rectangle";
+ if (shape === "rectangle") {
+ ctx.beginPath();
+ ctx.rect(x, y, width, height);
+ return;
+ }
+
+ if (shape === "oval") {
+ ctx.beginPath();
+ ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
+ return;
+ }
+
+ const points = annotation.blurData?.freehandPoints;
+ if (shape === "freehand" && points && points.length >= 3) {
+ ctx.beginPath();
+ ctx.moveTo(x + (points[0].x / 100) * width, y + (points[0].y / 100) * height);
+ for (let i = 1; i < points.length; i++) {
+ ctx.lineTo(x + (points[i].x / 100) * width, y + (points[i].y / 100) * height);
+ }
+ ctx.closePath();
+ return;
+ }
+
+ ctx.beginPath();
+ ctx.rect(x, y, width, height);
+}
+
+function renderBlur(
+ ctx: CanvasRenderingContext2D,
+ annotation: AnnotationRegion,
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+ scaleFactor: number,
+) {
+ const canvas = ctx.canvas;
+ const blurType = normalizeBlurType(annotation.blurData?.type);
+
+ const blurRadius = Math.max(
+ 1,
+ Math.round(getNormalizedBlurIntensity(annotation.blurData) * scaleFactor),
+ );
+ const samplePadding =
+ blurType === "mosaic"
+ ? Math.max(0, Math.ceil(getNormalizedMosaicBlockSize(annotation.blurData, scaleFactor)))
+ : Math.max(2, Math.ceil(blurRadius * 2));
+ const sx = Math.max(0, Math.floor(x) - samplePadding);
+ const sy = Math.max(0, Math.floor(y) - samplePadding);
+ const ex = Math.min(canvas.width, Math.ceil(x + width) + samplePadding);
+ const ey = Math.min(canvas.height, Math.ceil(y + height) + samplePadding);
+ const sw = Math.max(0, ex - sx);
+ const sh = Math.max(0, ey - sy);
+ if (sw <= 0 || sh <= 0) return;
+
+ if (!blurScratchCanvas || !blurScratchCtx) {
+ blurScratchCanvas = document.createElement("canvas");
+ blurScratchCtx = blurScratchCanvas.getContext("2d");
+ }
+ if (!blurScratchCanvas || !blurScratchCtx) return;
+
+ blurScratchCanvas.width = sw;
+ blurScratchCanvas.height = sh;
+ blurScratchCtx.clearRect(0, 0, sw, sh);
+ blurScratchCtx.drawImage(canvas, sx, sy, sw, sh, 0, 0, sw, sh);
+
+ if (blurType === "mosaic") {
+ const imageData = blurScratchCtx.getImageData(0, 0, sw, sh);
+ applyMosaicToImageData(
+ imageData,
+ getNormalizedMosaicBlockSize(annotation.blurData, scaleFactor),
+ );
+ blurScratchCtx.putImageData(imageData, 0, 0);
+ }
+
+ ctx.save();
+ drawBlurPath(ctx, annotation, x, y, width, height);
+ ctx.clip();
+ ctx.filter = blurType === "mosaic" ? "none" : `blur(${blurRadius}px)`;
+ ctx.drawImage(blurScratchCanvas, sx, sy);
+ ctx.filter = "none";
+ ctx.fillStyle = getBlurOverlayColor(annotation.blurData);
+ ctx.fillRect(sx, sy, sw, sh);
+ ctx.restore();
+}
+
function renderText(
ctx: CanvasRenderingContext2D,
annotation: AnnotationRegion,
@@ -144,13 +282,13 @@ function renderText(
lines.push("");
continue;
}
- const words = rawLine.split(/(\s+)/);
+ const tokens = tokenizeForWrap(rawLine);
let current = "";
- for (const word of words) {
- const test = current + word;
+ for (const token of tokens) {
+ const test = current + token;
if (current && ctx.measureText(test).width > availableWidth) {
lines.push(current);
- current = word.trimStart();
+ current = token.trimStart();
} else {
current = test;
}
@@ -268,7 +406,7 @@ export async function renderAnnotations(
): Promise {
// Filter active annotations at current time
const activeAnnotations = annotations.filter(
- (ann) => currentTimeMs >= ann.startMs && currentTimeMs <= ann.endMs,
+ (ann) => currentTimeMs >= ann.startMs && currentTimeMs < ann.endMs,
);
// Sort by z-index (lower first, so higher z-index draws on top)
@@ -304,6 +442,10 @@ export async function renderAnnotations(
);
}
break;
+
+ case "blur":
+ renderBlur(ctx, annotation, x, y, width, height, scaleFactor);
+ break;
}
}
}
diff --git a/src/lib/exporter/audioEncoder.ts b/src/lib/exporter/audioEncoder.ts
index 490eed2..2391d08 100644
--- a/src/lib/exporter/audioEncoder.ts
+++ b/src/lib/exporter/audioEncoder.ts
@@ -5,6 +5,7 @@ import type { VideoMuxer } from "./muxer";
const AUDIO_BITRATE = 128_000;
const DECODE_BACKPRESSURE_LIMIT = 20;
const MIN_SPEED_REGION_DELTA_MS = 0.0001;
+const SEEK_TIMEOUT_MS = 5_000;
export class AudioProcessor {
private cancelled = false;
@@ -18,9 +19,9 @@ export class AudioProcessor {
demuxer: WebDemuxer,
muxer: VideoMuxer,
videoUrl: string,
- trimRegions?: TrimRegion[],
- speedRegions?: SpeedRegion[],
- readEndSec?: number,
+ trimRegions: TrimRegion[] | undefined,
+ speedRegions: SpeedRegion[] | undefined,
+ validatedDurationSec: number,
): Promise {
const sortedTrims = trimRegions ? [...trimRegions].sort((a, b) => a.startMs - b.startMs) : [];
const sortedSpeedRegions = speedRegions
@@ -35,14 +36,19 @@ export class AudioProcessor {
videoUrl,
sortedTrims,
sortedSpeedRegions,
+ validatedDurationSec,
);
- if (!this.cancelled) {
+ if (!this.cancelled && renderedAudioBlob.size > 0) {
await this.muxRenderedAudioBlob(renderedAudioBlob, muxer);
return;
}
+ return;
}
// No speed edits: keep the original demux/decode/encode path with trim timestamp remap.
+ // The +0.5s buffer mirrors streamingDecoder.decodeAll's read window so the trim-only
+ // and speed-aware paths agree on how far to read past the validated duration boundary.
+ const readEndSec = validatedDurationSec + 0.5;
await this.processTrimOnlyAudio(demuxer, muxer, sortedTrims, readEndSec);
}
@@ -55,7 +61,7 @@ export class AudioProcessor {
): Promise {
let audioConfig: AudioDecoderConfig;
try {
- audioConfig = (await demuxer.getDecoderConfig("audio")) as AudioDecoderConfig;
+ audioConfig = await demuxer.getDecoderConfig("audio");
} catch {
console.warn("[AudioProcessor] No audio track found, skipping");
return;
@@ -80,11 +86,10 @@ export class AudioProcessor {
typeof readEndSec === "number" && Number.isFinite(readEndSec)
? Math.max(0, readEndSec)
: undefined;
- const audioStream = (
+ const audioStream =
safeReadEndSec !== undefined
? demuxer.read("audio", 0, safeReadEndSec)
- : demuxer.read("audio")
- ) as ReadableStream;
+ : demuxer.read("audio");
const reader = audioStream.getReader();
try {
@@ -187,6 +192,7 @@ export class AudioProcessor {
videoUrl: string,
trimRegions: TrimRegion[],
speedRegions: SpeedRegion[],
+ validatedDurationSec: number,
): Promise {
const media = document.createElement("audio");
media.src = videoUrl;
@@ -211,15 +217,44 @@ export class AudioProcessor {
const destinationNode = audioContext.createMediaStreamDestination();
sourceNode.connect(destinationNode);
- const { recorder, recordedBlobPromise } = this.startAudioRecording(destinationNode.stream);
let rafId: number | null = null;
+ let recorder: MediaRecorder | null = null;
+ let recordedBlobPromise: Promise | null = null;
try {
if (audioContext.state === "suspended") {
await audioContext.resume();
}
- await this.seekTo(media, 0);
+ // Skip past any initial trim region(s) before recording starts to avoid
+ // capturing trimmed audio during the first rAF frames of playback.
+ // Loops to handle back-to-back or overlapping trims at t=0.
+ const effectiveEnd = validatedDurationSec;
+ let startPosition = 0;
+ for (let i = 0; i <= trimRegions.length; i++) {
+ const activeTrim = this.findActiveTrimRegion(startPosition * 1000, trimRegions);
+ if (!activeTrim) break;
+ startPosition = activeTrim.endMs / 1000;
+ if (startPosition >= effectiveEnd) break;
+ }
+
+ if (startPosition >= effectiveEnd) {
+ // All content is trimmed — return silent blob
+ return new Blob([], { type: "audio/webm" });
+ }
+
+ await this.seekTo(media, startPosition);
+
+ // Set initial playback rate for the starting position
+ const initialSpeedRegion = this.findActiveSpeedRegion(startPosition * 1000, speedRegions);
+ if (initialSpeedRegion) {
+ media.playbackRate = initialSpeedRegion.speed;
+ }
+
+ // Start recording only AFTER seeking past trims
+ const recording = this.startAudioRecording(destinationNode.stream);
+ recorder = recording.recorder;
+ recordedBlobPromise = recording.recordedBlobPromise;
await media.play();
await new Promise((resolve, reject) => {
@@ -249,24 +284,66 @@ export class AudioProcessor {
return;
}
+ // Stop playback at validated duration — browser's media.duration
+ // may be inflated from bad container metadata.
+ if (media.currentTime >= validatedDurationSec) {
+ media.pause();
+ cleanup();
+ resolve();
+ return;
+ }
+
const currentTimeMs = media.currentTime * 1000;
const activeTrimRegion = this.findActiveTrimRegion(currentTimeMs, trimRegions);
if (activeTrimRegion && !media.paused && !media.ended) {
const skipToTime = activeTrimRegion.endMs / 1000;
- if (skipToTime >= media.duration) {
+ if (skipToTime >= media.duration || skipToTime >= validatedDurationSec) {
media.pause();
cleanup();
resolve();
return;
}
+ // Pause recording during trim seek to prevent capturing
+ // silence/noise as the audio element seeks.
+ media.pause();
+ if (recorder?.state === "recording") recorder.pause();
+ const onSeeked = () => {
+ clearTimeout(seekTimer);
+ if (this.cancelled) {
+ cleanup();
+ resolve();
+ return;
+ }
+ if (recorder?.state === "paused") recorder.resume();
+ media
+ .play()
+ .then(() => {
+ if (!this.cancelled) rafId = requestAnimationFrame(tick);
+ })
+ .catch((err) => {
+ cleanup();
+ reject(
+ new Error(
+ `Failed to resume playback after trim seek: ${err instanceof Error ? err.message : String(err)}`,
+ ),
+ );
+ });
+ };
+ const seekTimer = window.setTimeout(() => {
+ media.removeEventListener("seeked", onSeeked);
+ cleanup();
+ reject(new Error("Audio seek timed out while skipping trim region"));
+ }, SEEK_TIMEOUT_MS);
+ media.addEventListener("seeked", onSeeked, { once: true });
media.currentTime = skipToTime;
- } else {
- const activeSpeedRegion = this.findActiveSpeedRegion(currentTimeMs, speedRegions);
- const playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
- if (Math.abs(media.playbackRate - playbackRate) > 0.0001) {
- media.playbackRate = playbackRate;
- }
+ return;
+ }
+
+ const activeSpeedRegion = this.findActiveSpeedRegion(currentTimeMs, speedRegions);
+ const playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+ if (Math.abs(media.playbackRate - playbackRate) > 0.0001) {
+ media.playbackRate = playbackRate;
}
if (!media.paused && !media.ended) {
@@ -286,7 +363,7 @@ export class AudioProcessor {
cancelAnimationFrame(rafId);
}
media.pause();
- if (recorder.state !== "inactive") {
+ if (recorder && recorder.state !== "inactive") {
recorder.stop();
}
destinationNode.stream.getTracks().forEach((track) => track.stop());
@@ -297,6 +374,12 @@ export class AudioProcessor {
media.load();
}
+ if (!recordedBlobPromise) {
+ // Invariant: either an early return above fires, or startAudioRecording ran and
+ // populated recordedBlobPromise before the playback Promise resolved. Reaching
+ // here means that contract was broken — fail loud instead of returning silence.
+ throw new Error("Audio recorder finished without assigning recordedBlobPromise");
+ }
const recordedBlob = await recordedBlobPromise;
if (this.cancelled) {
throw new Error("Export cancelled");
@@ -314,8 +397,8 @@ export class AudioProcessor {
try {
await demuxer.load(file);
- const audioConfig = (await demuxer.getDecoderConfig("audio")) as AudioDecoderConfig;
- const reader = (demuxer.read("audio") as ReadableStream).getReader();
+ const audioConfig = await demuxer.getDecoderConfig("audio");
+ const reader = demuxer.read("audio").getReader();
let isFirstChunk = true;
try {
@@ -459,7 +542,10 @@ export class AudioProcessor {
}
private cloneWithTimestamp(src: AudioData, newTimestamp: number): AudioData {
- const isPlanar = src.format?.includes("planar") ?? false;
+ if (!src.format) {
+ throw new Error("AudioData format is required for cloning");
+ }
+ const isPlanar = src.format.includes("planar");
const numPlanes = isPlanar ? src.numberOfChannels : 1;
let totalSize = 0;
@@ -476,7 +562,7 @@ export class AudioProcessor {
}
return new AudioData({
- format: src.format!,
+ format: src.format,
sampleRate: src.sampleRate,
numberOfFrames: src.numberOfFrames,
numberOfChannels: src.numberOfChannels,
diff --git a/src/lib/exporter/frameRenderer.ts b/src/lib/exporter/frameRenderer.ts
index 80d2f6d..0a151b0 100644
--- a/src/lib/exporter/frameRenderer.ts
+++ b/src/lib/exporter/frameRenderer.ts
@@ -13,6 +13,7 @@ import type {
CropRegion,
SpeedRegion,
WebcamLayoutPreset,
+ WebcamSizePreset,
ZoomDepth,
ZoomRegion,
} from "@/components/video-editor/types";
@@ -27,8 +28,14 @@ import {
} from "@/components/video-editor/videoPlayback/constants";
import {
adaptiveSmoothFactor,
+ interpolateCursorAt,
smoothCursorFocus,
} from "@/components/video-editor/videoPlayback/cursorFollowUtils";
+import {
+ type CursorHighlightConfig,
+ clickEmphasisAlpha,
+ drawCursorHighlightCanvas,
+} from "@/components/video-editor/videoPlayback/cursorHighlight";
import { clampFocusToStage as clampFocusToStageUtil } from "@/components/video-editor/videoPlayback/focusUtils";
import { findDominantRegion } from "@/components/video-editor/videoPlayback/zoomRegionUtils";
import {
@@ -44,6 +51,7 @@ import {
type Size,
type StyledRenderRect,
} from "@/lib/compositeLayout";
+import { BackgroundLoadError, classifyWallpaper, resolveImageWallpaperUrl } from "@/lib/wallpaper";
import { drawCanvasClipPath } from "@/lib/webcamMaskShapes";
import { renderAnnotations } from "./annotationRenderer";
import {
@@ -70,12 +78,16 @@ interface FrameRenderConfig {
webcamSize?: Size | null;
webcamLayoutPreset?: WebcamLayoutPreset;
webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+ webcamSizePreset?: WebcamSizePreset;
webcamPosition?: { cx: number; cy: number } | null;
annotationRegions?: AnnotationRegion[];
speedRegions?: SpeedRegion[];
previewWidth?: number;
previewHeight?: number;
cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+ cursorHighlight?: CursorHighlightConfig;
+ cursorClickTimestamps?: number[];
+ platform: string;
}
interface AnimationState {
@@ -112,6 +124,8 @@ export class FrameRenderer {
private shadowCtx: CanvasRenderingContext2D | null = null;
private compositeCanvas: HTMLCanvasElement | null = null;
private compositeCtx: CanvasRenderingContext2D | null = null;
+ private rasterCanvas: HTMLCanvasElement | null = null;
+ private rasterCtx: CanvasRenderingContext2D | null = null;
private config: FrameRenderConfig;
private animationState: AnimationState;
private layoutCache: LayoutCache | null = null;
@@ -120,9 +134,11 @@ export class FrameRenderer {
private smoothedAutoFocus: { cx: number; cy: number } | null = null;
private prevAnimationTimeMs: number | null = null;
private prevTargetProgress = 0;
+ private isLinux = false;
constructor(config: FrameRenderConfig) {
this.config = config;
+ this.isLinux = config.platform === "linux";
this.animationState = {
scale: 1,
focusX: DEFAULT_FOCUS.cx,
@@ -183,14 +199,24 @@ export class FrameRenderer {
this.compositeCanvas = document.createElement("canvas");
this.compositeCanvas.width = this.config.width;
this.compositeCanvas.height = this.config.height;
+
+ // On Linux, getImageData() is called frequently causing frequent CPU readback
this.compositeCtx = this.compositeCanvas.getContext("2d", {
- willReadFrequently: false,
+ willReadFrequently: this.isLinux,
});
if (!this.compositeCtx) {
throw new Error("Failed to get 2D context for composite canvas");
}
+ this.rasterCanvas = document.createElement("canvas");
+ this.rasterCanvas.width = this.config.width;
+ this.rasterCanvas.height = this.config.height;
+ this.rasterCtx = this.rasterCanvas.getContext("2d");
+ if (!this.rasterCtx) {
+ throw new Error("Failed to get 2D context for raster canvas");
+ }
+
// Setup shadow canvas if needed
if (this.config.showShadow) {
this.shadowCanvas = document.createElement("canvas");
@@ -214,123 +240,93 @@ export class FrameRenderer {
private async setupBackground(): Promise {
const wallpaper = this.config.wallpaper;
- // Create background canvas for separate rendering (not affected by zoom)
const bgCanvas = document.createElement("canvas");
bgCanvas.width = this.config.width;
bgCanvas.height = this.config.height;
const bgCtx = bgCanvas.getContext("2d")!;
- try {
- // Render background based on type
- if (
- wallpaper.startsWith("file://") ||
- wallpaper.startsWith("data:") ||
- wallpaper.startsWith("/") ||
- wallpaper.startsWith("http")
- ) {
- // Image background
- const img = new Image();
- // Don't set crossOrigin for same-origin images to avoid CORS taint
- // Only set it for cross-origin URLs
- let imageUrl: string;
- if (wallpaper.startsWith("http")) {
- imageUrl = wallpaper;
- if (!imageUrl.startsWith(window.location.origin)) {
- img.crossOrigin = "anonymous";
- }
- } else if (wallpaper.startsWith("file://") || wallpaper.startsWith("data:")) {
- imageUrl = wallpaper;
- } else {
- imageUrl = window.location.origin + wallpaper;
- }
+ const classified = classifyWallpaper(wallpaper);
+ if (classified.kind === "color") {
+ bgCtx.fillStyle = classified.value;
+ bgCtx.fillRect(0, 0, this.config.width, this.config.height);
+ } else if (classified.kind === "gradient") {
+ const parsedGradient = parseCssGradient(classified.value);
+ if (!parsedGradient) {
+ throw new BackgroundLoadError(classified.value);
+ }
+ const gradient =
+ parsedGradient.type === "linear"
+ ? (() => {
+ const points = getLinearGradientPoints(
+ resolveLinearGradientAngle(parsedGradient.descriptor),
+ this.config.width,
+ this.config.height,
+ );
+ return bgCtx.createLinearGradient(points.x0, points.y0, points.x1, points.y1);
+ })()
+ : (() => {
+ const shape = getRadialGradientShape(
+ parsedGradient.descriptor,
+ this.config.width,
+ this.config.height,
+ );
+ return bgCtx.createRadialGradient(
+ shape.cx,
+ shape.cy,
+ 0,
+ shape.cx,
+ shape.cy,
+ shape.radius,
+ );
+ })();
+
+ parsedGradient.stops.forEach((stop) => {
+ gradient.addColorStop(stop.offset, stop.color);
+ });
+
+ bgCtx.fillStyle = gradient;
+ bgCtx.fillRect(0, 0, this.config.width, this.config.height);
+ } else {
+ const imageUrl = resolveImageWallpaperUrl(classified.path);
+ const img = new Image();
+ if (imageUrl.startsWith("http") && !imageUrl.startsWith(window.location.origin)) {
+ img.crossOrigin = "anonymous";
+ }
+
+ try {
await new Promise((resolve, reject) => {
img.onload = () => resolve();
- img.onerror = (err) => {
- console.error("[FrameRenderer] Failed to load background image:", imageUrl, err);
- reject(new Error(`Failed to load background image: ${imageUrl}`));
- };
+ img.onerror = (err) => reject(err);
img.src = imageUrl;
});
-
- // Draw the image using cover and center positioning
- const imgAspect = img.width / img.height;
- const canvasAspect = this.config.width / this.config.height;
-
- let drawWidth, drawHeight, drawX, drawY;
-
- if (imgAspect > canvasAspect) {
- drawHeight = this.config.height;
- drawWidth = drawHeight * imgAspect;
- drawX = (this.config.width - drawWidth) / 2;
- drawY = 0;
- } else {
- drawWidth = this.config.width;
- drawHeight = drawWidth / imgAspect;
- drawX = 0;
- drawY = (this.config.height - drawHeight) / 2;
- }
-
- bgCtx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
- } else if (wallpaper.startsWith("#")) {
- bgCtx.fillStyle = wallpaper;
- bgCtx.fillRect(0, 0, this.config.width, this.config.height);
- } else if (
- wallpaper.startsWith("linear-gradient") ||
- wallpaper.startsWith("radial-gradient")
- ) {
- const parsedGradient = parseCssGradient(wallpaper);
- if (parsedGradient) {
- const gradient =
- parsedGradient.type === "linear"
- ? (() => {
- const points = getLinearGradientPoints(
- resolveLinearGradientAngle(parsedGradient.descriptor),
- this.config.width,
- this.config.height,
- );
-
- return bgCtx.createLinearGradient(points.x0, points.y0, points.x1, points.y1);
- })()
- : (() => {
- const shape = getRadialGradientShape(
- parsedGradient.descriptor,
- this.config.width,
- this.config.height,
- );
-
- return bgCtx.createRadialGradient(
- shape.cx,
- shape.cy,
- 0,
- shape.cx,
- shape.cy,
- shape.radius,
- );
- })();
-
- parsedGradient.stops.forEach((stop) => {
- gradient.addColorStop(stop.offset, stop.color);
- });
-
- bgCtx.fillStyle = gradient;
- bgCtx.fillRect(0, 0, this.config.width, this.config.height);
- } else {
- console.warn("[FrameRenderer] Could not parse gradient, using black fallback");
- bgCtx.fillStyle = "#000000";
- bgCtx.fillRect(0, 0, this.config.width, this.config.height);
- }
- } else {
- bgCtx.fillStyle = wallpaper;
- bgCtx.fillRect(0, 0, this.config.width, this.config.height);
+ } catch (err) {
+ throw new BackgroundLoadError(imageUrl, err);
}
- } catch (error) {
- console.error("[FrameRenderer] Error setting up background, using fallback:", error);
- bgCtx.fillStyle = "#000000";
- bgCtx.fillRect(0, 0, this.config.width, this.config.height);
+
+ const imgAspect = img.width / img.height;
+ const canvasAspect = this.config.width / this.config.height;
+
+ let drawWidth: number;
+ let drawHeight: number;
+ let drawX: number;
+ let drawY: number;
+
+ if (imgAspect > canvasAspect) {
+ drawHeight = this.config.height;
+ drawWidth = drawHeight * imgAspect;
+ drawX = (this.config.width - drawWidth) / 2;
+ drawY = 0;
+ } else {
+ drawWidth = this.config.width;
+ drawHeight = drawWidth / imgAspect;
+ drawX = 0;
+ drawY = (this.config.height - drawHeight) / 2;
+ }
+
+ bgCtx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
}
- // Store the background canvas for compositing
this.backgroundSprite = bgCanvas;
}
@@ -399,6 +395,46 @@ export class FrameRenderer {
// Composite with shadows to final output canvas
this.compositeWithShadows(webcamFrame);
+ // Cursor highlight overlay (rendered above video, below annotations)
+ if (
+ this.config.cursorHighlight?.enabled &&
+ this.config.cursorTelemetry &&
+ this.config.cursorTelemetry.length > 0 &&
+ this.compositeCtx
+ ) {
+ const emphasisAlpha = clickEmphasisAlpha(
+ timeMs,
+ this.config.cursorClickTimestamps,
+ this.config.cursorHighlight,
+ );
+ const cursorPoint =
+ emphasisAlpha > 0 ? interpolateCursorAt(this.config.cursorTelemetry, timeMs) : null;
+ if (cursorPoint) {
+ const cx = cursorPoint.cx + this.config.cursorHighlight.offsetXNorm;
+ const cy = cursorPoint.cy + this.config.cursorHighlight.offsetYNorm;
+ const stageX =
+ layoutCache.baseOffset.x + cx * this.config.videoWidth * layoutCache.baseScale;
+ const stageY =
+ layoutCache.baseOffset.y + cy * this.config.videoHeight * layoutCache.baseScale;
+ const appliedScale = this.animationState.appliedScale;
+ const canvasX = stageX * appliedScale + this.animationState.x;
+ const canvasY = stageY * appliedScale + this.animationState.y;
+ const previewW = this.config.previewWidth ?? this.config.width;
+ const previewH = this.config.previewHeight ?? this.config.height;
+ const cursorScale = (this.config.width / previewW + this.config.height / previewH) / 2;
+ drawCursorHighlightCanvas(
+ this.compositeCtx,
+ canvasX,
+ canvasY,
+ {
+ ...this.config.cursorHighlight,
+ opacity: this.config.cursorHighlight.opacity * emphasisAlpha,
+ },
+ appliedScale * cursorScale,
+ );
+ }
+ }
+
// Render annotations on top if present
if (
this.config.annotationRegions &&
@@ -406,8 +442,8 @@ export class FrameRenderer {
this.compositeCtx
) {
// Calculate scale factor based on export vs preview dimensions
- const previewWidth = this.config.previewWidth || 1920;
- const previewHeight = this.config.previewHeight || 1080;
+ const previewWidth = this.config.previewWidth ?? this.config.width;
+ const previewHeight = this.config.previewHeight ?? this.config.height;
const scaleX = this.config.width / previewWidth;
const scaleY = this.config.height / previewHeight;
const scaleFactor = (scaleX + scaleY) / 2;
@@ -453,6 +489,7 @@ export class FrameRenderer {
screenSize: { width: croppedVideoWidth, height: croppedVideoHeight },
webcamSize: webcamFrame ? this.config.webcamSize : null,
layoutPreset: this.config.webcamLayoutPreset,
+ webcamSizePreset: this.config.webcamSizePreset,
webcamPosition: this.config.webcamPosition,
webcamMaskShape: this.config.webcamMaskShape,
});
@@ -491,10 +528,15 @@ export class FrameRenderer {
this.videoContainer.y = screenRect.y;
// scale border radius by export/preview canvas ratio
- const previewWidth = this.config.previewWidth || 1920;
- const previewHeight = this.config.previewHeight || 1080;
+ const previewWidth = this.config.previewWidth ?? this.config.width;
+ const previewHeight = this.config.previewHeight ?? this.config.height;
const canvasScaleFactor = Math.min(width / previewWidth, height / previewHeight);
- const scaledBorderRadius = compositeLayout.screenCover ? 0 : borderRadius * canvasScaleFactor;
+ const scaledBorderRadius =
+ compositeLayout.screenBorderRadius != null
+ ? compositeLayout.screenBorderRadius
+ : compositeLayout.screenCover
+ ? 0
+ : borderRadius * canvasScaleFactor;
this.maskGraphics.clear();
this.maskGraphics.roundRect(0, 0, screenRect.width, screenRect.height, scaledBorderRadius);
@@ -522,16 +564,10 @@ export class FrameRenderer {
private updateAnimationState(timeMs: number): number {
if (!this.cameraContainer || !this.layoutCache) return 0;
- const bmEx = this.layoutCache.maskRect;
- const ssEx = this.layoutCache.stageSize;
- const viewportRatio =
- bmEx.width > 0 && bmEx.height > 0
- ? { widthRatio: ssEx.width / bmEx.width, heightRatio: ssEx.height / bmEx.height }
- : undefined;
const { region, strength, blendedScale, transition } = findDominantRegion(
this.config.zoomRegions,
timeMs,
- { connectZooms: true, cursorTelemetry: this.config.cursorTelemetry, viewportRatio },
+ { connectZooms: true, cursorTelemetry: this.config.cursorTelemetry },
);
const defaultFocus = DEFAULT_FOCUS;
@@ -675,10 +711,49 @@ export class FrameRenderer {
);
}
+ // On Linux/Wayland the implicit GPU→2D texture-sharing path
+ // used by drawImage(webglCanvas) can fail silently (EGL/Ozone),
+ // producing green/empty frames. Explicit gl.readPixels always
+ // copies from GPU to CPU memory, bypassing that path.
+ private readbackVideoCanvas(): HTMLCanvasElement {
+ const glCanvas = this.app!.canvas as HTMLCanvasElement;
+ const gl =
+ (glCanvas.getContext("webgl2") as WebGL2RenderingContext | null) ??
+ (glCanvas.getContext("webgl") as WebGLRenderingContext | null);
+
+ if (!gl || !this.rasterCanvas || !this.rasterCtx) {
+ return glCanvas;
+ }
+
+ const w = glCanvas.width;
+ const h = glCanvas.height;
+ const buf = new Uint8Array(w * h * 4);
+ gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, buf);
+
+ // readPixels returns rows bottom-to-top; flip vertically
+ const rowSize = w * 4;
+ const temp = new Uint8Array(rowSize);
+ for (let top = 0, bot = h - 1; top < bot; top++, bot--) {
+ const tOff = top * rowSize;
+ const bOff = bot * rowSize;
+ temp.set(buf.subarray(tOff, tOff + rowSize));
+ buf.copyWithin(tOff, bOff, bOff + rowSize);
+ buf.set(temp, bOff);
+ }
+
+ const imageData = new ImageData(new Uint8ClampedArray(buf.buffer), w, h);
+ this.rasterCtx.putImageData(imageData, 0, 0);
+
+ return this.rasterCanvas;
+ }
+
private compositeWithShadows(webcamFrame?: VideoFrame | null): void {
if (!this.compositeCanvas || !this.compositeCtx || !this.app) return;
- const videoCanvas = this.app.canvas as HTMLCanvasElement;
+ const videoCanvas = this.isLinux
+ ? this.readbackVideoCanvas()
+ : (this.app.canvas as HTMLCanvasElement);
+
const ctx = this.compositeCtx;
const w = this.compositeCanvas.width;
const h = this.compositeCanvas.height;
@@ -735,6 +810,22 @@ export class FrameRenderer {
if (webcamFrame && webcamRect) {
const preset = getWebcamLayoutPresetDefinition(this.config.webcamLayoutPreset);
const shape = webcamRect.maskShape ?? this.config.webcamMaskShape ?? "rectangle";
+ const sourceWidth =
+ ("displayWidth" in webcamFrame && webcamFrame.displayWidth > 0
+ ? webcamFrame.displayWidth
+ : webcamFrame.codedWidth) || webcamRect.width;
+ const sourceHeight =
+ ("displayHeight" in webcamFrame && webcamFrame.displayHeight > 0
+ ? webcamFrame.displayHeight
+ : webcamFrame.codedHeight) || webcamRect.height;
+ const sourceAspect = sourceWidth / sourceHeight;
+ const targetAspect = webcamRect.width / webcamRect.height;
+ const sourceCropWidth =
+ sourceAspect > targetAspect ? Math.round(sourceHeight * targetAspect) : sourceWidth;
+ const sourceCropHeight =
+ sourceAspect > targetAspect ? sourceHeight : Math.round(sourceWidth / targetAspect);
+ const sourceCropX = Math.max(0, Math.round((sourceWidth - sourceCropWidth) / 2));
+ const sourceCropY = Math.max(0, Math.round((sourceHeight - sourceCropHeight) / 2));
ctx.save();
drawCanvasClipPath(
ctx,
@@ -756,6 +847,10 @@ export class FrameRenderer {
ctx.clip();
ctx.drawImage(
webcamFrame as unknown as CanvasImageSource,
+ sourceCropX,
+ sourceCropY,
+ sourceCropWidth,
+ sourceCropHeight,
webcamRect.x,
webcamRect.y,
webcamRect.width,
@@ -795,5 +890,7 @@ export class FrameRenderer {
this.shadowCtx = null;
this.compositeCanvas = null;
this.compositeCtx = null;
+ this.rasterCanvas = null;
+ this.rasterCtx = null;
}
}
diff --git a/src/lib/exporter/gifExporter.browser.test.ts b/src/lib/exporter/gifExporter.browser.test.ts
new file mode 100644
index 0000000..1d96076
--- /dev/null
+++ b/src/lib/exporter/gifExporter.browser.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { BackgroundLoadError } from "../wallpaper";
+import { GifExporter } from "./gifExporter";
+import type { ExportProgress } from "./types";
+
+describe("GifExporter (real browser)", () => {
+ it("exports a valid GIF blob from a real video", async () => {
+ const progressEvents: ExportProgress[] = [];
+
+ const exporter = new GifExporter({
+ videoUrl: sampleVideoUrl,
+ width: 320,
+ height: 180,
+ frameRate: 15,
+ loop: true,
+ sizePreset: "medium",
+ wallpaper: "#1a1a2e",
+ zoomRegions: [],
+ showShadow: false,
+ shadowIntensity: 0,
+ showBlur: false,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ onProgress: (p) => progressEvents.push(p),
+ });
+
+ const result = await exporter.export();
+
+ expect(result.success, result.error).toBe(true);
+ expect(result.blob).toBeInstanceOf(Blob);
+
+ const buf = await result.blob!.arrayBuffer();
+ const header = new TextDecoder().decode(new Uint8Array(buf, 0, 6));
+ expect(header).toMatch(/^GIF8[79]a/);
+
+ expect(result.blob!.size).toBeGreaterThan(1024);
+
+ expect(progressEvents.length).toBeGreaterThan(0);
+
+ const finalizing = progressEvents.filter((p) => p.phase === "finalizing");
+ expect(finalizing.length).toBeGreaterThan(0);
+ expect(finalizing.at(-1)!.percentage).toBe(100);
+ });
+
+ it("exports successfully with an image wallpaper (served by Vite dev server)", async () => {
+ const exporter = new GifExporter({
+ videoUrl: sampleVideoUrl,
+ width: 320,
+ height: 180,
+ frameRate: 15,
+ loop: true,
+ sizePreset: "medium",
+ wallpaper: "/wallpapers/wallpaper1.jpg",
+ zoomRegions: [],
+ showShadow: false,
+ shadowIntensity: 0,
+ showBlur: false,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ });
+
+ const result = await exporter.export();
+ expect(result.success, result.error).toBe(true);
+ expect(result.blob!.size).toBeGreaterThan(1024);
+ });
+
+ it("throws BackgroundLoadError when wallpaper fails to load (no silent black fallback)", async () => {
+ const exporter = new GifExporter({
+ videoUrl: sampleVideoUrl,
+ width: 320,
+ height: 180,
+ frameRate: 15,
+ loop: true,
+ sizePreset: "medium",
+ wallpaper: "/wallpapers/does-not-exist.jpg",
+ zoomRegions: [],
+ showShadow: false,
+ shadowIntensity: 0,
+ showBlur: false,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ });
+
+ const rejection = exporter.export();
+ await expect(rejection).rejects.toBeInstanceOf(BackgroundLoadError);
+ await expect(rejection).rejects.toMatchObject({
+ url: expect.stringContaining("does-not-exist"),
+ });
+ });
+});
diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
index d059264..0d7a432 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -5,8 +5,11 @@ import type {
SpeedRegion,
TrimRegion,
WebcamLayoutPreset,
+ WebcamSizePreset,
ZoomRegion,
} from "@/components/video-editor/types";
+import { BackgroundLoadError } from "@/lib/wallpaper";
+import { getPlatform } from "@/utils/platformUtils";
import { AsyncVideoFrameQueue } from "./asyncVideoFrameQueue";
import { FrameRenderer } from "./frameRenderer";
import { StreamingVideoDecoder } from "./streamingDecoder";
@@ -42,11 +45,14 @@ interface GifExporterConfig {
cropRegion: CropRegion;
webcamLayoutPreset?: WebcamLayoutPreset;
webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+ webcamSizePreset?: WebcamSizePreset;
webcamPosition?: { cx: number; cy: number } | null;
annotationRegions?: AnnotationRegion[];
previewWidth?: number;
previewHeight?: number;
cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+ cursorHighlight?: import("@/components/video-editor/videoPlayback/cursorHighlight").CursorHighlightConfig;
+ cursorClickTimestamps?: number[];
onProgress?: (progress: ExportProgress) => void;
}
@@ -113,7 +119,13 @@ export class GifExporter {
async export(): Promise {
let webcamFrameQueue: AsyncVideoFrameQueue | null = null;
+
+ const warnings: string[] = [];
+ const onWarning = (message: string) => warnings.push(message);
+
try {
+ const platform = await getPlatform();
+
this.cleanup();
this.cancelled = false;
@@ -144,12 +156,16 @@ export class GifExporter {
webcamSize: webcamInfo ? { width: webcamInfo.width, height: webcamInfo.height } : null,
webcamLayoutPreset: this.config.webcamLayoutPreset,
webcamMaskShape: this.config.webcamMaskShape,
+ webcamSizePreset: this.config.webcamSizePreset,
webcamPosition: this.config.webcamPosition,
annotationRegions: this.config.annotationRegions,
speedRegions: this.config.speedRegions,
previewWidth: this.config.previewWidth,
previewHeight: this.config.previewHeight,
cursorTelemetry: this.config.cursorTelemetry,
+ cursorClickTimestamps: this.config.cursorClickTimestamps,
+ cursorHighlight: this.config.cursorHighlight,
+ platform,
});
await this.renderer.initialize();
@@ -171,11 +187,11 @@ export class GifExporter {
});
// Calculate effective duration and frame count (excluding trim regions)
- const effectiveDuration = this.streamingDecoder.getEffectiveDuration(
+ const { effectiveDuration, totalFrames } = this.streamingDecoder.getExportMetrics(
+ this.config.frameRate,
this.config.trimRegions,
this.config.speedRegions,
);
- const totalFrames = Math.ceil(effectiveDuration * this.config.frameRate);
// Calculate frame delay in milliseconds (gif.js uses ms)
const frameDelay = Math.round(1000 / this.config.frameRate);
@@ -211,6 +227,7 @@ export class GifExporter {
}
queue.enqueue(webcamFrame);
},
+ onWarning,
)
.catch((error) => {
webcamDecodeError = error instanceof Error ? error : new Error(String(error));
@@ -270,6 +287,7 @@ export class GifExporter {
webcamFrame?.close();
}
},
+ onWarning,
);
if (this.cancelled) {
@@ -316,8 +334,11 @@ export class GifExporter {
this.gif!.render();
});
- return { success: true, blob };
+ return { success: true, blob, warnings: warnings.length > 0 ? warnings : undefined };
} catch (error) {
+ if (error instanceof BackgroundLoadError) {
+ throw error;
+ }
console.error("GIF Export error:", error);
return {
success: false,
diff --git a/src/lib/exporter/streamingDecoder.test.ts b/src/lib/exporter/streamingDecoder.test.ts
index 1969c84..55b9123 100644
--- a/src/lib/exporter/streamingDecoder.test.ts
+++ b/src/lib/exporter/streamingDecoder.test.ts
@@ -1,5 +1,44 @@
import { describe, expect, it } from "vitest";
-import { shouldFailDecodeEndedEarly } from "./streamingDecoder";
+import { shouldFailDecodeEndedEarly, validateDuration } from "./streamingDecoder";
+
+describe("validateDuration", () => {
+ it("returns scanned duration when container reports Infinity", () => {
+ expect(validateDuration(Infinity, 15.3)).toBe(15.3);
+ });
+
+ it("returns scanned duration when container reports 0", () => {
+ expect(validateDuration(0, 15.3)).toBe(15.3);
+ });
+
+ it("returns scanned duration when container reports NaN", () => {
+ expect(validateDuration(NaN, 15.3)).toBe(15.3);
+ });
+
+ it("returns scanned duration when container is inflated beyond threshold", () => {
+ expect(validateDuration(42, 15.3)).toBe(15.3);
+ });
+
+ it("returns container duration when values are close", () => {
+ expect(validateDuration(15.5, 15.3)).toBe(15.5);
+ });
+
+ it("returns container duration when scanned is slightly higher", () => {
+ // container < scanned (scanned overshoot from last frame duration)
+ expect(validateDuration(15.0, 15.3)).toBe(15.0);
+ });
+
+ it("returns scanned duration when container under-reports beyond threshold", () => {
+ expect(validateDuration(10, 15.3)).toBe(15.3);
+ });
+
+ it("returns container duration when scanned is zero (corrupted/empty file)", () => {
+ expect(validateDuration(10, 0)).toBe(10);
+ });
+
+ it("returns 0 when both container is NaN and scanned is zero", () => {
+ expect(validateDuration(NaN, 0)).toBe(0);
+ });
+});
describe("shouldFailDecodeEndedEarly", () => {
it("does not fail once every segment has been satisfied", () => {
diff --git a/src/lib/exporter/streamingDecoder.ts b/src/lib/exporter/streamingDecoder.ts
index ccb510b..e8093df 100644
--- a/src/lib/exporter/streamingDecoder.ts
+++ b/src/lib/exporter/streamingDecoder.ts
@@ -2,6 +2,52 @@ import { WebDemuxer } from "web-demuxer";
import type { SpeedRegion, TrimRegion } from "@/components/video-editor/types";
const SOURCE_LOAD_TIMEOUT_MS = 60_000;
+const EPSILON_SEC = 0.001;
+/**
+ * Build a full WebCodecs-compatible AV1 codec string from the AV1CodecConfigurationRecord.
+ * web-demuxer may return a bare "av01" when the WASM-side parser fails to read
+ * the extradata (e.g. raw OBU sequence header from WebM instead of ISOBMFF av1C box).
+ * This function parses the record if present, otherwise returns a safe default.
+ *
+ * @see https://aomediacodec.github.io/av1-isobmff/#av1codecconfigurationbox-section
+ */
+function buildAV1CodecString(description?: BufferSource): string {
+ const fallback = "av01.0.01M.08";
+
+ if (!description) return fallback;
+
+ const bytes =
+ description instanceof ArrayBuffer
+ ? new Uint8Array(description)
+ : new Uint8Array(description.buffer, description.byteOffset, description.byteLength);
+
+ // AV1CodecConfigurationRecord layout (4+ bytes):
+ // Byte 0: marker (1) | version (7)
+ // Byte 1: seq_profile (3) | seq_level_idx_0 (5)
+ // Byte 2: seq_tier_0 (1) | high_bitdepth (1) | twelve_bit (1) | ...
+ // The spec says version should be 1, but Chrome/Electron's MediaRecorder
+ // may write version 127 (0xFF first byte). We accept any version as long
+ // as the marker bit is set and the record is long enough.
+ if (bytes.length < 4) return fallback;
+ if (!(bytes[0] & 0x80)) return fallback; // marker bit must be 1
+
+ // Byte 1: seq_profile (3) | seq_level_idx_0 (5)
+ const profile = (bytes[1] >> 5) & 0x07;
+ const level = bytes[1] & 0x1f;
+
+ // Byte 2: seq_tier_0 (1) | high_bitdepth (1) | twelve_bit (1) | monochrome (1) | ...
+ const tier = (bytes[2] >> 7) & 0x01;
+ const highBitdepth = (bytes[2] >> 6) & 0x01;
+ const twelveBit = (bytes[2] >> 5) & 0x01;
+ let bitdepth = 8;
+ if (highBitdepth) bitdepth = twelveBit ? 12 : 10;
+
+ const tierChar = tier ? "H" : "M";
+ const levelStr = level.toString().padStart(2, "0");
+ const bitdepthStr = bitdepth.toString().padStart(2, "0");
+
+ return `av01.${profile}.${levelStr}${tierChar}.${bitdepthStr}`;
+}
export interface DecodedVideoInfo {
width: number;
@@ -22,8 +68,39 @@ type EarlyDecodeEndCheck = {
};
const EARLY_DECODE_END_THRESHOLD_SEC = 1;
-const METADATA_TAIL_TOLERANCE_SEC = 1.5;
+const METADATA_TAIL_TOLERANCE_SEC = 2;
const STREAM_DURATION_MATCH_TOLERANCE_SEC = 0.25;
+const DURATION_DIVERGENCE_THRESHOLD_SEC = 1.5;
+// Fallback upper bound for the packet scan when no reliable duration hint is
+// available. Explicit end is required (some containers are truncated without
+// one), but the hint-derived bound would cap the scan prematurely when
+// container/stream duration are missing or corrupt.
+const SCAN_UNBOUNDED_FALLBACK_SEC = 24 * 60 * 60;
+
+/**
+ * Validate container duration against actual packet timestamps.
+ *
+ * Chrome/Electron's MediaRecorder writes WebM containers with unreliable
+ * Duration fields (often Infinity, 0, or inflated) — especially on Linux.
+ * This function picks the most trustworthy duration value.
+ *
+ * @param containerDuration Duration from the container-level metadata
+ * @param scannedDuration Duration derived from actual packet timestamps (ground truth)
+ */
+export function validateDuration(containerDuration: number, scannedDuration: number): number {
+ if (scannedDuration <= 0) {
+ // Zero scanned duration means corrupted/empty file — fall back to container
+ // (downstream shouldFailDecodeEndedEarly will catch truly empty files)
+ return Number.isFinite(containerDuration) ? Math.max(containerDuration, 0) : 0;
+ }
+ if (!Number.isFinite(containerDuration) || containerDuration <= 0) {
+ return scannedDuration;
+ }
+ if (Math.abs(containerDuration - scannedDuration) > DURATION_DIVERGENCE_THRESHOLD_SEC) {
+ return scannedDuration;
+ }
+ return containerDuration;
+}
export function shouldFailDecodeEndedEarly({
cancelled,
@@ -52,11 +129,8 @@ export function shouldFailDecodeEndedEarly({
const decodedNearStreamEnd =
Math.abs(lastDecodedFrameSec - streamDurationSec) <= STREAM_DURATION_MATCH_TOLERANCE_SEC;
- if (
- decodedNearStreamEnd &&
- metadataTailSec > 0 &&
- metadataTailSec <= METADATA_TAIL_TOLERANCE_SEC
- ) {
+ const maxTailSec = Math.max(METADATA_TAIL_TOLERANCE_SEC, requiredEndSec * 0.01);
+ if (decodedNearStreamEnd && metadataTailSec > 0 && metadataTailSec <= maxTailSec) {
return false;
}
@@ -155,10 +229,43 @@ export class StreamingVideoDecoder {
const audioStream = mediaInfo.streams.find((s) => s.codec_type_string === "audio");
+ // Scan video packets to find the true content boundary.
+ // MediaRecorder (especially on Linux) writes unreliable container durations.
+ // Packet timestamps are ground truth — no decode needed, just timestamp reads.
+ // Pass explicit range because some containers are truncated without one.
+ // Sanitize because mediaInfo.duration can be NaN/Infinity (Chromium Linux bug),
+ // which would propagate into demuxer.read() as an invalid endpoint.
+ const containerDurationSec = Number.isFinite(mediaInfo.duration) ? mediaInfo.duration : 0;
+ const streamDurationSec =
+ typeof videoStream?.duration === "number" && Number.isFinite(videoStream.duration)
+ ? videoStream.duration
+ : 0;
+ const hintedDurationSec = Math.max(containerDurationSec, streamDurationSec, 0);
+ const scanEndSec =
+ hintedDurationSec > 0 ? hintedDurationSec + 0.5 : SCAN_UNBOUNDED_FALLBACK_SEC;
+ let maxPacketEndUs = 0;
+ const scanReader = this.demuxer.read("video", 0, scanEndSec).getReader();
+ try {
+ while (true) {
+ const { done, value } = await scanReader.read();
+ if (done || !value) break;
+ const endUs = value.timestamp + (value.duration ?? 0);
+ if (endUs > maxPacketEndUs) maxPacketEndUs = endUs;
+ }
+ } finally {
+ try {
+ await scanReader.cancel();
+ } catch {
+ /* already closed */
+ }
+ }
+ const scannedDuration = maxPacketEndUs / 1_000_000;
+ const validatedDuration = validateDuration(mediaInfo.duration, scannedDuration);
+
this.metadata = {
width: videoStream?.width || 1920,
height: videoStream?.height || 1080,
- duration: mediaInfo.duration,
+ duration: validatedDuration,
streamDuration:
typeof videoStream?.duration === "number" && Number.isFinite(videoStream.duration)
? videoStream.duration
@@ -171,29 +278,72 @@ export class StreamingVideoDecoder {
return this.metadata;
}
-
+ /**
+ * Decodes all video frames from the loaded source and invokes a callback for each.
+ * Handles trimming and speed adjustments, and resamples to the target frame rate.
+ * On Windows, early decode termination is tolerated to work around driver quirks.
+ * @param targetFrameRate - Desired output frame rate.
+ * @param trimRegions - Array of time regions to keep (others discarded).
+ * @param speedRegions - Array of speed adjustments for specific time ranges.
+ * @param onFrame - Async callback receiving each decoded VideoFrame.
+ */
async decodeAll(
targetFrameRate: number,
trimRegions: TrimRegion[] | undefined,
speedRegions: SpeedRegion[] | undefined,
onFrame: OnFrameCallback,
+ onWarning?: (message: string) => void,
): Promise {
if (!this.demuxer || !this.metadata) {
throw new Error("Must call loadMetadata() before decodeAll()");
}
const decoderConfig = await this.demuxer.getDecoderConfig("video");
- const codec = this.metadata.codec.toLowerCase();
- const shouldPreferSoftwareDecode = codec.includes("av01") || codec.includes("av1");
+
+ console.log("[StreamingVideoDecoder] decoderConfig.codec:", decoderConfig.codec);
+ console.log("[StreamingVideoDecoder] decoderConfig.description:", decoderConfig.description);
+
+ // web-demuxer may return bare four-character code strings ("av01", "vp08",
+ // "vp09", "avc1") that WebCodecs rejects. Normalize them to the short or
+ // full parametrized forms that VideoDecoder accepts.
+ if (/^av01$/i.test(decoderConfig.codec)) {
+ decoderConfig.codec = buildAV1CodecString(
+ decoderConfig.description as BufferSource | undefined,
+ );
+ }
+
+ if (/^vp08$/i.test(decoderConfig.codec)) {
+ decoderConfig.codec = "vp8";
+ }
+ if (/^vp09$/i.test(decoderConfig.codec)) {
+ decoderConfig.codec = "vp9";
+ }
+
+ if (/^avc1$/i.test(decoderConfig.codec)) {
+ decoderConfig.codec = "avc1.640033";
+ }
+ if (/^h264$/i.test(decoderConfig.codec)) {
+ decoderConfig.codec = "avc1.640033";
+ }
+
+ const codec = decoderConfig.codec.toLowerCase();
+ const shouldPreferSoftwareDecode =
+ codec.includes("av01") ||
+ codec.includes("av1") ||
+ codec.includes("vp09") ||
+ codec.includes("vp9");
const segments = this.splitBySpeed(
this.computeSegments(this.metadata.duration, trimRegions),
speedRegions,
);
+ const requiredEndSec = segments[segments.length - 1]?.endSec ?? 0;
+
const segmentOutputFrameCounts = segments.map((segment) =>
- Math.ceil(((segment.endSec - segment.startSec) / segment.speed) * targetFrameRate),
+ Math.ceil(
+ ((segment.endSec - segment.startSec - EPSILON_SEC) / segment.speed) * targetFrameRate,
+ ),
);
const frameDurationUs = 1_000_000 / targetFrameRate;
- const epsilonSec = 0.001;
// Async frame queue — decoder pushes, consumer pulls
const pendingFrames: VideoFrame[] = [];
@@ -212,6 +362,10 @@ export class StreamingVideoDecoder {
}
},
error: (e: DOMException) => {
+ console.warn(
+ `[StreamingVideoDecoder] decoder error for codec "${decoderConfig.codec}":`,
+ e.message,
+ );
decodeError = new Error(`VideoDecoder error: ${e.message}`);
if (frameResolve) {
const resolve = frameResolve;
@@ -228,13 +382,28 @@ export class StreamingVideoDecoder {
: decoderConfig;
try {
+ const support = await VideoDecoder.isConfigSupported(preferredDecoderConfig);
+ console.log(
+ `[StreamingVideoDecoder] isConfigSupported for "${preferredDecoderConfig.codec}":`,
+ support.supported,
+ );
+ if (!support.supported) {
+ throw new Error(`Unsupported codec: ${preferredDecoderConfig.codec}`);
+ }
this.decoder.configure(preferredDecoderConfig);
} catch (error) {
- if (!shouldPreferSoftwareDecode) {
+ if (shouldPreferSoftwareDecode) {
+ this.decoder.configure(decoderConfig);
+ } else if (/^avc1/i.test(codec)) {
+ const fallback = { ...decoderConfig, codec: "avc1.640033" };
+ console.warn(
+ `[StreamingVideoDecoder] codec "${codec}" unsupported, ` +
+ `falling back to "${fallback.codec}"`,
+ );
+ this.decoder.configure(fallback);
+ } else {
throw error;
}
- // Fall back to default decoder config if software preference isn't supported.
- this.decoder.configure(decoderConfig);
}
const getNextFrame = (): Promise => {
@@ -248,7 +417,7 @@ export class StreamingVideoDecoder {
// One forward stream through the whole file.
// Pass explicit range because some containers are truncated when no end is provided.
- const readEndSec = Math.max(this.metadata.duration, this.metadata.streamDuration ?? 0) + 0.5;
+ const readEndSec = this.metadata.duration + 0.5;
const reader = this.demuxer.read("video", 0, readEndSec).getReader();
// Feed chunks to decoder in background with backpressure
@@ -304,7 +473,7 @@ export class StreamingVideoDecoder {
const sourceTimeSec =
segment.startSec + (segmentFrameIndex / targetFrameRate) * segment.speed;
- if (sourceTimeSec >= segment.endSec - epsilonSec) return false;
+ if (sourceTimeSec >= segment.endSec - EPSILON_SEC) return false;
const clone = new VideoFrame(heldFrame, { timestamp: heldFrame.timestamp });
await onFrame(clone, exportFrameIndex * frameDurationUs, sourceTimeSec * 1000);
@@ -323,7 +492,7 @@ export class StreamingVideoDecoder {
// Finalize completed segments before handling this frame.
while (
segmentIdx < segments.length &&
- frameTimeSec >= segments[segmentIdx].endSec - epsilonSec
+ frameTimeSec >= segments[segmentIdx].endSec - EPSILON_SEC
) {
const segment = segments[segmentIdx];
while (!this.cancelled && (await emitHeldFrameForTarget(segment))) {
@@ -335,7 +504,7 @@ export class StreamingVideoDecoder {
if (
heldFrame &&
segmentIdx < segments.length &&
- heldFrameSec < segments[segmentIdx].startSec - epsilonSec
+ heldFrameSec < segments[segmentIdx].startSec - EPSILON_SEC
) {
heldFrame.close();
heldFrame = null;
@@ -350,7 +519,7 @@ export class StreamingVideoDecoder {
const currentSegment = segments[segmentIdx];
// Before current segment (trimmed region or pre-roll).
- if (frameTimeSec < currentSegment.startSec - epsilonSec) {
+ if (frameTimeSec < currentSegment.startSec - EPSILON_SEC) {
frame.close();
continue;
}
@@ -371,7 +540,7 @@ export class StreamingVideoDecoder {
const sourceTimeSec =
currentSegment.startSec + (segmentFrameIndex / targetFrameRate) * currentSegment.speed;
- if (sourceTimeSec >= currentSegment.endSec - epsilonSec) {
+ if (sourceTimeSec >= currentSegment.endSec - EPSILON_SEC) {
break;
}
if (sourceTimeSec > handoffBoundarySec) {
@@ -393,7 +562,7 @@ export class StreamingVideoDecoder {
if (heldFrame && segmentIdx < segments.length) {
while (!this.cancelled && segmentIdx < segments.length) {
const segment = segments[segmentIdx];
- if (heldFrameSec < segment.startSec - epsilonSec) {
+ if (heldFrameSec < segment.startSec - EPSILON_SEC) {
break;
}
@@ -405,7 +574,7 @@ export class StreamingVideoDecoder {
segmentFrameIndex = 0;
if (
segmentIdx < segments.length &&
- heldFrameSec < segments[segmentIdx].startSec - epsilonSec
+ heldFrameSec < segments[segmentIdx].startSec - EPSILON_SEC
) {
break;
}
@@ -435,7 +604,6 @@ export class StreamingVideoDecoder {
}
this.decoder = null;
- const requiredEndSec = segments.length > 0 ? segments[segments.length - 1].endSec : 0;
if (
shouldFailDecodeEndedEarly({
cancelled: this.cancelled,
@@ -446,9 +614,9 @@ export class StreamingVideoDecoder {
) {
const decodedAtLabel =
lastDecodedFrameSec === null ? "no decoded frame" : `${lastDecodedFrameSec.toFixed(3)}s`;
- throw new Error(
- `Video decode ended early at ${decodedAtLabel} (needed ${requiredEndSec.toFixed(3)}s).`,
- );
+ const message = `Decode ended early at ${decodedAtLabel} (needed ${requiredEndSec.toFixed(3)}s) – export may be slightly shorter than expected.`;
+ console.warn(`[StreamingVideoDecoder] ${message}`);
+ onWarning?.(message);
}
}
@@ -480,11 +648,24 @@ export class StreamingVideoDecoder {
return segments;
}
- getEffectiveDuration(trimRegions?: TrimRegion[], speedRegions?: SpeedRegion[]): number {
+ getExportMetrics(
+ targetFrameRate: number,
+ trimRegions?: TrimRegion[],
+ speedRegions?: SpeedRegion[],
+ ): { effectiveDuration: number; totalFrames: number } {
if (!this.metadata) throw new Error("Must call loadMetadata() first");
const trimSegments = this.computeSegments(this.metadata.duration, trimRegions);
- const speedSegments = this.splitBySpeed(trimSegments, speedRegions);
- return speedSegments.reduce((sum, seg) => sum + (seg.endSec - seg.startSec) / seg.speed, 0);
+ const segments = this.splitBySpeed(trimSegments, speedRegions);
+ return {
+ effectiveDuration: segments.reduce(
+ (sum, seg) => sum + (seg.endSec - seg.startSec) / seg.speed,
+ 0,
+ ),
+ totalFrames: segments.reduce((sum, seg) => {
+ const segDur = seg.endSec - seg.startSec - EPSILON_SEC;
+ return sum + Math.max(0, Math.ceil((segDur / seg.speed) * targetFrameRate));
+ }, 0),
+ };
}
private splitBySpeed(
diff --git a/src/lib/exporter/types.ts b/src/lib/exporter/types.ts
index b6e08e8..3873341 100644
--- a/src/lib/exporter/types.ts
+++ b/src/lib/exporter/types.ts
@@ -19,6 +19,7 @@ export interface ExportResult {
success: boolean;
blob?: Blob;
error?: string;
+ warnings?: string[];
}
export interface VideoFrameData {
diff --git a/src/lib/exporter/videoExporter.browser.test.ts b/src/lib/exporter/videoExporter.browser.test.ts
new file mode 100644
index 0000000..cca896f
--- /dev/null
+++ b/src/lib/exporter/videoExporter.browser.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { BackgroundLoadError } from "../wallpaper";
+import type { ExportProgress } from "./types";
+import { VideoExporter } from "./videoExporter";
+
+describe("VideoExporter (real browser)", () => {
+ it("exports a valid MP4 blob from a real video", async () => {
+ const progressEvents: ExportProgress[] = [];
+
+ const exporter = new VideoExporter({
+ videoUrl: sampleVideoUrl,
+ width: 320,
+ height: 180,
+ frameRate: 15,
+ bitrate: 1_000_000,
+ wallpaper: "#1a1a2e",
+ zoomRegions: [],
+ showShadow: false,
+ shadowIntensity: 0,
+ showBlur: false,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ onProgress: (p) => progressEvents.push(p),
+ });
+
+ const result = await exporter.export();
+
+ expect(result.success, result.error).toBe(true);
+ expect(result.blob).toBeInstanceOf(Blob);
+
+ const buf = await result.blob!.arrayBuffer();
+ const bytes = new Uint8Array(buf);
+ const ftyp = new TextDecoder().decode(bytes.slice(4, 8));
+ expect(ftyp).toBe("ftyp");
+
+ expect(result.blob!.size).toBeGreaterThan(1024);
+
+ expect(progressEvents.length).toBeGreaterThan(0);
+
+ const finalizing = progressEvents.filter((p) => p.phase === "finalizing");
+ expect(finalizing.length).toBeGreaterThan(0);
+ expect(finalizing.at(-1)!.percentage).toBe(100);
+ });
+
+ it("exports successfully with an image wallpaper (served by Vite dev server)", async () => {
+ const exporter = new VideoExporter({
+ videoUrl: sampleVideoUrl,
+ width: 320,
+ height: 180,
+ frameRate: 15,
+ bitrate: 1_000_000,
+ wallpaper: "/wallpapers/wallpaper1.jpg",
+ zoomRegions: [],
+ showShadow: false,
+ shadowIntensity: 0,
+ showBlur: false,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ });
+
+ const result = await exporter.export();
+ expect(result.success, result.error).toBe(true);
+ expect(result.blob!.size).toBeGreaterThan(1024);
+ });
+
+ it("throws BackgroundLoadError when wallpaper fails to load (no silent black fallback)", async () => {
+ const exporter = new VideoExporter({
+ videoUrl: sampleVideoUrl,
+ width: 320,
+ height: 180,
+ frameRate: 15,
+ bitrate: 1_000_000,
+ wallpaper: "/wallpapers/does-not-exist.jpg",
+ zoomRegions: [],
+ showShadow: false,
+ shadowIntensity: 0,
+ showBlur: false,
+ cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+ });
+
+ const rejection = exporter.export();
+ await expect(rejection).rejects.toBeInstanceOf(BackgroundLoadError);
+ await expect(rejection).rejects.toMatchObject({
+ url: expect.stringContaining("does-not-exist"),
+ });
+ });
+});
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
index 761186f..e064ba7 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -4,8 +4,11 @@ import type {
SpeedRegion,
TrimRegion,
WebcamLayoutPreset,
+ WebcamSizePreset,
ZoomRegion,
} from "@/components/video-editor/types";
+import { BackgroundLoadError } from "@/lib/wallpaper";
+import { getPlatform } from "@/utils/platformUtils";
import { AsyncVideoFrameQueue } from "./asyncVideoFrameQueue";
import { AudioProcessor } from "./audioEncoder";
import { FrameRenderer } from "./frameRenderer";
@@ -33,11 +36,14 @@ interface VideoExporterConfig extends ExportConfig {
cropRegion: CropRegion;
webcamLayoutPreset?: WebcamLayoutPreset;
webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+ webcamSizePreset?: WebcamSizePreset;
webcamPosition?: { cx: number; cy: number } | null;
annotationRegions?: AnnotationRegion[];
previewWidth?: number;
previewHeight?: number;
cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+ cursorHighlight?: import("@/components/video-editor/videoPlayback/cursorHighlight").CursorHighlightConfig;
+ cursorClickTimestamps?: number[];
onProgress?: (progress: ExportProgress) => void;
}
@@ -79,6 +85,10 @@ export class VideoExporter {
return { success: false, error: "Export cancelled" };
}
+ if (normalizedError instanceof BackgroundLoadError) {
+ throw normalizedError;
+ }
+
if (encoderPreferences.length > 1) {
console.warn(
`[VideoExporter] ${encoderPreference} export attempt failed:`,
@@ -104,12 +114,16 @@ export class VideoExporter {
let webcamDecodeError: Error | null = null;
let webcamDecodePromise: Promise | null = null;
let webcamDecoder: StreamingVideoDecoder | null = null;
+ const warnings: string[] = [];
+ const onWarning = (message: string) => warnings.push(message);
this.cleanup();
this.cancelled = false;
this.fatalEncoderError = null;
try {
+ const platform = await getPlatform();
+
const streamingDecoder = new StreamingVideoDecoder();
this.streamingDecoder = streamingDecoder;
const videoInfo = await streamingDecoder.loadMetadata(this.config.videoUrl);
@@ -137,12 +151,16 @@ export class VideoExporter {
webcamSize: webcamInfo ? { width: webcamInfo.width, height: webcamInfo.height } : null,
webcamLayoutPreset: this.config.webcamLayoutPreset,
webcamMaskShape: this.config.webcamMaskShape,
+ webcamSizePreset: this.config.webcamSizePreset,
webcamPosition: this.config.webcamPosition,
annotationRegions: this.config.annotationRegions,
speedRegions: this.config.speedRegions,
previewWidth: this.config.previewWidth,
previewHeight: this.config.previewHeight,
cursorTelemetry: this.config.cursorTelemetry,
+ cursorClickTimestamps: this.config.cursorClickTimestamps,
+ cursorHighlight: this.config.cursorHighlight,
+ platform,
});
this.renderer = renderer;
await renderer.initialize();
@@ -154,17 +172,11 @@ export class VideoExporter {
this.muxer = muxer;
await muxer.initialize();
- const effectiveDuration = streamingDecoder.getEffectiveDuration(
+ const { totalFrames } = streamingDecoder.getExportMetrics(
+ this.config.frameRate,
this.config.trimRegions,
this.config.speedRegions,
);
- const totalFrames = Math.ceil(effectiveDuration * this.config.frameRate);
- const readEndSec = Math.max(videoInfo.duration, videoInfo.streamDuration ?? 0) + 0.5;
-
- console.log("[VideoExporter] Original duration:", videoInfo.duration, "s");
- console.log("[VideoExporter] Effective duration:", effectiveDuration, "s");
- console.log("[VideoExporter] Total frames to export:", totalFrames);
- console.log("[VideoExporter] Using streaming decode (web-demuxer + VideoDecoder)");
const frameDuration = 1_000_000 / this.config.frameRate;
let frameIndex = 0;
@@ -193,6 +205,7 @@ export class VideoExporter {
}
queue.enqueue(webcamFrame);
},
+ onWarning,
)
.catch((error) => {
webcamDecodeError = error instanceof Error ? error : new Error(String(error));
@@ -234,25 +247,29 @@ export class VideoExporter {
const canvas = renderer.getCanvas();
- // Read raw pixels from the canvas instead of passing
- // the canvas directly to VideoFrame. On some Linux
- // systems the GPU shared-image path (EGL/Ozone) fails
- // silently, producing empty frames.
- const canvasCtx = canvas.getContext("2d")!;
- const imageData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height);
- const exportFrame = new VideoFrame(imageData.data.buffer, {
- format: "RGBA",
- codedWidth: canvas.width,
- codedHeight: canvas.height,
- timestamp,
- duration: frameDuration,
- colorSpace: {
- primaries: "bt709",
- transfer: "iec61966-2-1",
- matrix: "rgb",
- fullRange: true,
- },
- });
+ let exportFrame: VideoFrame;
+
+ // On some Linux systems the GPU shared-image path (EGL/Ozone) fails
+ // silently, producing empty frames, so we force a CPU readback instead.
+ if (platform === "linux") {
+ const canvasCtx = canvas.getContext("2d")!;
+ const imageData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height);
+ exportFrame = new VideoFrame(imageData.data.buffer, {
+ format: "RGBA",
+ codedWidth: canvas.width,
+ codedHeight: canvas.height,
+ timestamp,
+ duration: frameDuration,
+ colorSpace: {
+ primaries: "bt709",
+ transfer: "iec61966-2-1",
+ matrix: "rgb",
+ fullRange: true,
+ },
+ });
+ } else {
+ exportFrame = new VideoFrame(canvas, { timestamp, duration: frameDuration });
+ }
while (
this.encoder &&
@@ -293,6 +310,7 @@ export class VideoExporter {
webcamFrame?.close();
}
},
+ onWarning,
);
if (this.cancelled) {
@@ -343,13 +361,13 @@ export class VideoExporter {
this.config.videoUrl,
this.config.trimRegions,
this.config.speedRegions,
- readEndSec,
+ videoInfo.duration,
);
}
}
const blob = await muxer.finalize();
- return { success: true, blob };
+ return { success: true, blob, warnings: warnings.length > 0 ? warnings : undefined };
} finally {
stopWebcamDecode = true;
webcamFrameQueue?.destroy();
@@ -419,7 +437,7 @@ export class VideoExporter {
})();
this.muxingPromises.push(muxingPromise);
- this.encodeQueue--;
+ this.encodeQueue = Math.max(0, this.encodeQueue - 1);
},
error: (error) => {
console.error("[VideoExporter] Encoder error:", error);
diff --git a/src/lib/frameStep.ts b/src/lib/frameStep.ts
new file mode 100644
index 0000000..dc42d78
--- /dev/null
+++ b/src/lib/frameStep.ts
@@ -0,0 +1,15 @@
+/** Duration of a single frame in seconds at 60 FPS (~16.67ms). */
+export const FRAME_DURATION_SEC = 1 / 60;
+
+/**
+ * Compute the new playhead time after stepping one frame forward or backward.
+ * The result is clamped to the range [0, duration].
+ */
+export function computeFrameStepTime(
+ currentTime: number,
+ duration: number,
+ direction: "forward" | "backward",
+): number {
+ const delta = direction === "forward" ? FRAME_DURATION_SEC : -FRAME_DURATION_SEC;
+ return Math.min(duration, Math.max(0, currentTime + delta));
+}
diff --git a/src/lib/requestCameraAccess.ts b/src/lib/requestCameraAccess.ts
index 2494224..cfcd4d1 100644
--- a/src/lib/requestCameraAccess.ts
+++ b/src/lib/requestCameraAccess.ts
@@ -17,9 +17,7 @@ export async function requestCameraAccess(): Promise {
if (window.electronAPI?.requestCameraAccess) {
try {
const electronResult = await window.electronAPI.requestCameraAccess();
- if (!electronResult.success || !electronResult.granted) {
- return electronResult;
- }
+ return electronResult;
} catch (error) {
return {
success: false,
diff --git a/src/lib/shortcuts.ts b/src/lib/shortcuts.ts
index 69af499..96592a4 100644
--- a/src/lib/shortcuts.ts
+++ b/src/lib/shortcuts.ts
@@ -3,6 +3,7 @@ export const SHORTCUT_ACTIONS = [
"addTrim",
"addSpeed",
"addAnnotation",
+ "addBlur",
"addKeyframe",
"deleteSelected",
"playPause",
@@ -21,14 +22,16 @@ export interface ShortcutBinding {
export type ShortcutsConfig = Record;
export interface FixedShortcut {
+ i18nKey: string;
label: string;
display: string;
bindings: ShortcutBinding[];
}
export const FIXED_SHORTCUTS: FixedShortcut[] = [
- { label: "Undo", display: "Ctrl + Z", bindings: [{ key: "z", ctrl: true }] },
+ { i18nKey: "undo", label: "Undo", display: "Ctrl + Z", bindings: [{ key: "z", ctrl: true }] },
{
+ i18nKey: "redo",
label: "Redo",
display: "Ctrl + Shift + Z / Ctrl + Y",
bindings: [
@@ -36,19 +39,38 @@ export const FIXED_SHORTCUTS: FixedShortcut[] = [
{ key: "y", ctrl: true },
],
},
- { label: "Cycle Annotations Forward", display: "Tab", bindings: [{ key: "tab" }] },
{
+ i18nKey: "cycleAnnotationsForward",
+ label: "Cycle Annotations Forward",
+ display: "Tab",
+ bindings: [{ key: "tab" }],
+ },
+ {
+ i18nKey: "cycleAnnotationsBackward",
label: "Cycle Annotations Backward",
display: "Shift + Tab",
bindings: [{ key: "tab", shift: true }],
},
{
+ i18nKey: "deleteSelectedAlt",
label: "Delete Selected (alt)",
display: "Del / ⌫",
bindings: [{ key: "delete" }, { key: "backspace" }],
},
- { label: "Pan Timeline", display: "Shift + Ctrl + Scroll", bindings: [] },
- { label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
+ {
+ i18nKey: "panTimeline",
+ label: "Pan Timeline",
+ display: "Shift + Ctrl + Scroll",
+ bindings: [],
+ },
+ { i18nKey: "zoomTimeline", label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
+ { i18nKey: "frameBack", label: "Frame Back", display: "←", bindings: [{ key: "arrowleft" }] },
+ {
+ i18nKey: "frameForward",
+ label: "Frame Forward",
+ display: "→",
+ bindings: [{ key: "arrowright" }],
+ },
];
export type ShortcutConflict =
@@ -87,6 +109,7 @@ export const DEFAULT_SHORTCUTS: ShortcutsConfig = {
addTrim: { key: "t" },
addSpeed: { key: "s" },
addAnnotation: { key: "a" },
+ addBlur: { key: "b" },
addKeyframe: { key: "f" },
deleteSelected: { key: "d", ctrl: true },
playPause: { key: " " },
@@ -97,6 +120,7 @@ export const SHORTCUT_LABELS: Record = {
addTrim: "Add Trim",
addSpeed: "Add Speed",
addAnnotation: "Add Annotation",
+ addBlur: "Add Blur",
addKeyframe: "Add Keyframe",
deleteSelected: "Delete Selected",
playPause: "Play / Pause",
@@ -104,9 +128,10 @@ export const SHORTCUT_LABELS: Record = {
export function matchesShortcut(
e: KeyboardEvent,
- binding: ShortcutBinding,
+ binding: ShortcutBinding | undefined,
isMacPlatform: boolean,
): boolean {
+ if (!binding) return false;
if (e.key.toLowerCase() !== binding.key.toLowerCase()) return false;
const primaryMod = isMacPlatform ? e.metaKey : e.ctrlKey;
diff --git a/src/lib/userPreferences.ts b/src/lib/userPreferences.ts
new file mode 100644
index 0000000..e060788
--- /dev/null
+++ b/src/lib/userPreferences.ts
@@ -0,0 +1,94 @@
+import type { ExportFormat, ExportQuality } from "@/lib/exporter";
+import type { AspectRatio } from "@/utils/aspectRatioUtils";
+
+const PREFS_KEY = "openscreen_user_preferences";
+
+const VALID_ASPECT_RATIOS: readonly string[] = [
+ "16:9",
+ "9:16",
+ "1:1",
+ "4:3",
+ "4:5",
+ "16:10",
+ "10:16",
+ "native",
+];
+
+export interface UserPreferences {
+ /** Default padding % */
+ padding: number;
+ /** Default aspect ratio */
+ aspectRatio: AspectRatio;
+ /** Default export quality */
+ exportQuality: ExportQuality;
+ /** Default export format */
+ exportFormat: ExportFormat;
+}
+
+const DEFAULT_PREFS: UserPreferences = {
+ padding: 50,
+ aspectRatio: "16:9",
+ exportQuality: "good",
+ exportFormat: "mp4",
+};
+
+function safeJsonParse(text: string | null): Record | null {
+ if (!text) return null;
+ try {
+ return JSON.parse(text);
+ } catch {
+ return null;
+ }
+}
+
+/**
+ * Load persisted user preferences from localStorage.
+ * Returns defaults for any missing or invalid fields.
+ */
+export function loadUserPreferences(): UserPreferences {
+ let raw: Record | null = null;
+ try {
+ raw = safeJsonParse(localStorage.getItem(PREFS_KEY));
+ } catch {
+ return { ...DEFAULT_PREFS };
+ }
+ if (!raw || typeof raw !== "object") return { ...DEFAULT_PREFS };
+
+ return {
+ padding:
+ typeof raw.padding === "number" &&
+ Number.isFinite(raw.padding) &&
+ raw.padding >= 0 &&
+ raw.padding <= 100
+ ? raw.padding
+ : DEFAULT_PREFS.padding,
+ aspectRatio:
+ typeof raw.aspectRatio === "string" && VALID_ASPECT_RATIOS.includes(raw.aspectRatio)
+ ? (raw.aspectRatio as AspectRatio)
+ : DEFAULT_PREFS.aspectRatio,
+ exportQuality:
+ raw.exportQuality === "medium" ||
+ raw.exportQuality === "good" ||
+ raw.exportQuality === "source"
+ ? (raw.exportQuality as ExportQuality)
+ : DEFAULT_PREFS.exportQuality,
+ exportFormat:
+ raw.exportFormat === "gif" || raw.exportFormat === "mp4"
+ ? (raw.exportFormat as ExportFormat)
+ : DEFAULT_PREFS.exportFormat,
+ };
+}
+
+/**
+ * Persist user preferences to localStorage.
+ * Only the explicitly provided fields are updated.
+ */
+export function saveUserPreferences(partial: Partial): void {
+ const current = loadUserPreferences();
+ const merged = { ...current, ...partial };
+ try {
+ localStorage.setItem(PREFS_KEY, JSON.stringify(merged));
+ } catch {
+ // localStorage may be unavailable (e.g. private browsing quota exceeded)
+ }
+}
diff --git a/src/lib/wallpaper.test.ts b/src/lib/wallpaper.test.ts
new file mode 100644
index 0000000..02596aa
--- /dev/null
+++ b/src/lib/wallpaper.test.ts
@@ -0,0 +1,276 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AssetBaseUnavailableError, UnsafeAssetPathError } from "./assetPath";
+import {
+ BackgroundLoadError,
+ classifyWallpaper,
+ DEFAULT_WALLPAPER,
+ resolveImageWallpaperUrl,
+ UnsafeImagePrefixError,
+ WALLPAPER_COUNT,
+ WALLPAPER_PATHS,
+} from "./wallpaper";
+
+describe("WALLPAPER_PATHS", () => {
+ it("contains WALLPAPER_COUNT entries", () => {
+ expect(WALLPAPER_PATHS).toHaveLength(WALLPAPER_COUNT);
+ });
+
+ it("DEFAULT_WALLPAPER is WALLPAPER_PATHS[0]", () => {
+ expect(DEFAULT_WALLPAPER).toBe(WALLPAPER_PATHS[0]);
+ });
+});
+
+describe("classifyWallpaper", () => {
+ it("hex color", () => {
+ expect(classifyWallpaper("#1a1a2e")).toEqual({ kind: "color", value: "#1a1a2e" });
+ });
+
+ it("rgb() color", () => {
+ expect(classifyWallpaper("rgb(1, 2, 3)")).toEqual({ kind: "color", value: "rgb(1, 2, 3)" });
+ });
+
+ it("rgba() color", () => {
+ expect(classifyWallpaper("rgba(1, 2, 3, 0.5)")).toEqual({
+ kind: "color",
+ value: "rgba(1, 2, 3, 0.5)",
+ });
+ });
+
+ it("hsl() color", () => {
+ expect(classifyWallpaper("hsl(180, 50%, 50%)")).toEqual({
+ kind: "color",
+ value: "hsl(180, 50%, 50%)",
+ });
+ });
+
+ it("oklch() color", () => {
+ expect(classifyWallpaper("oklch(50% 0.1 180)")).toEqual({
+ kind: "color",
+ value: "oklch(50% 0.1 180)",
+ });
+ });
+
+ it("linear gradient", () => {
+ const v = "linear-gradient(90deg, red, blue)";
+ expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+ });
+
+ it("radial gradient", () => {
+ const v = "radial-gradient(circle, red, blue)";
+ expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+ });
+
+ it("conic gradient", () => {
+ const v = "conic-gradient(red, blue)";
+ expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+ });
+
+ it("repeating-linear gradient", () => {
+ const v = "repeating-linear-gradient(45deg, red 0 10px, blue 10px 20px)";
+ expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+ });
+
+ it("repeating-radial gradient", () => {
+ const v = "repeating-radial-gradient(circle, red, blue 20px)";
+ expect(classifyWallpaper(v)).toEqual({ kind: "gradient", value: v });
+ });
+
+ it("leading-slash image path", () => {
+ expect(classifyWallpaper("/wallpapers/wallpaper1.jpg")).toEqual({
+ kind: "image",
+ path: "/wallpapers/wallpaper1.jpg",
+ });
+ });
+
+ it("http URL as image", () => {
+ expect(classifyWallpaper("https://example.com/bg.jpg")).toEqual({
+ kind: "image",
+ path: "https://example.com/bg.jpg",
+ });
+ });
+
+ it("file:// URL as image", () => {
+ expect(classifyWallpaper("file:///tmp/bg.jpg")).toEqual({
+ kind: "image",
+ path: "file:///tmp/bg.jpg",
+ });
+ });
+
+ it("data URI as image", () => {
+ expect(classifyWallpaper("data:image/png;base64,AAA")).toEqual({
+ kind: "image",
+ path: "data:image/png;base64,AAA",
+ });
+ });
+
+ it("named color falls back to color", () => {
+ expect(classifyWallpaper("red")).toEqual({ kind: "color", value: "red" });
+ });
+
+ it("empty string falls back to black", () => {
+ expect(classifyWallpaper("")).toEqual({ kind: "color", value: "#000000" });
+ });
+
+ it("trims whitespace", () => {
+ expect(classifyWallpaper(" #abcdef ")).toEqual({ kind: "color", value: "#abcdef" });
+ });
+
+ it("DEFAULT_WALLPAPER classifies as image", () => {
+ expect(classifyWallpaper(DEFAULT_WALLPAPER)).toEqual({
+ kind: "image",
+ path: DEFAULT_WALLPAPER,
+ });
+ });
+});
+
+describe("resolveImageWallpaperUrl", () => {
+ beforeEach(() => {
+ vi.stubGlobal("window", {
+ ...globalThis.window,
+ location: { protocol: "http:" },
+ electronAPI: undefined,
+ });
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ it("passes through http URL", () => {
+ expect(resolveImageWallpaperUrl("http://example.com/bg.jpg")).toBe("http://example.com/bg.jpg");
+ });
+
+ it("passes through https URL", () => {
+ expect(resolveImageWallpaperUrl("https://example.com/bg.jpg")).toBe(
+ "https://example.com/bg.jpg",
+ );
+ });
+
+ it("passes through file:// URL", () => {
+ expect(resolveImageWallpaperUrl("file:///tmp/bg.jpg")).toBe("file:///tmp/bg.jpg");
+ });
+
+ it("passes through data URI", () => {
+ const uri = "data:image/png;base64,AAAA";
+ expect(resolveImageWallpaperUrl(uri)).toBe(uri);
+ });
+
+ it("resolves leading-slash wallpaper path via http fallback", () => {
+ expect(resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg")).toBe(
+ "/wallpapers/wallpaper1.jpg",
+ );
+ });
+
+ it("resolves bare relative wallpaper path", () => {
+ expect(resolveImageWallpaperUrl("wallpapers/wallpaper1.jpg")).toBe(
+ "/wallpapers/wallpaper1.jpg",
+ );
+ });
+
+ it("encodes special characters in path segments", () => {
+ expect(resolveImageWallpaperUrl("/wallpapers/my image.jpg")).toBe("/wallpapers/my%20image.jpg");
+ });
+
+ it("rejects image paths outside /wallpapers/ with UnsafeImagePrefixError as cause", () => {
+ try {
+ resolveImageWallpaperUrl("/etc/passwd");
+ expect.fail("should have thrown");
+ } catch (err) {
+ if (!(err instanceof BackgroundLoadError)) throw err;
+ expect(err.cause).toBeInstanceOf(UnsafeImagePrefixError);
+ }
+ });
+
+ it("wraps traversal attempts in BackgroundLoadError (preserves UnsafeAssetPathError as cause)", () => {
+ try {
+ resolveImageWallpaperUrl("/wallpapers/../etc/passwd");
+ expect.fail("should have thrown");
+ } catch (err) {
+ if (!(err instanceof BackgroundLoadError)) throw err;
+ expect(err.cause).toBeInstanceOf(UnsafeAssetPathError);
+ }
+ });
+
+ it("wraps percent-encoded traversal in BackgroundLoadError", () => {
+ try {
+ resolveImageWallpaperUrl("/wallpapers/%2e%2e/app.asar");
+ expect.fail("should have thrown");
+ } catch (err) {
+ if (!(err instanceof BackgroundLoadError)) throw err;
+ expect(err.cause).toBeInstanceOf(UnsafeAssetPathError);
+ }
+ });
+
+ it("resolves via electronAPI.assetBaseUrl when not http", () => {
+ vi.stubGlobal("window", {
+ ...globalThis.window,
+ location: { protocol: "file:" },
+ electronAPI: { assetBaseUrl: "file:///opt/app/public/" },
+ });
+ expect(resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg")).toBe(
+ "file:///opt/app/public/wallpapers/wallpaper1.jpg",
+ );
+ });
+
+ it("appends trailing slash to assetBaseUrl if missing", () => {
+ vi.stubGlobal("window", {
+ ...globalThis.window,
+ location: { protocol: "file:" },
+ electronAPI: { assetBaseUrl: "file:///opt/app/public" },
+ });
+ expect(resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg")).toBe(
+ "file:///opt/app/public/wallpapers/wallpaper1.jpg",
+ );
+ });
+
+ it("wraps AssetBaseUnavailableError in BackgroundLoadError when assetBaseUrl is empty", () => {
+ vi.stubGlobal("window", {
+ ...globalThis.window,
+ location: { protocol: "file:" },
+ electronAPI: { assetBaseUrl: "" },
+ });
+ try {
+ resolveImageWallpaperUrl("/wallpapers/wallpaper1.jpg");
+ expect.fail("should have thrown");
+ } catch (err) {
+ if (!(err instanceof BackgroundLoadError)) throw err;
+ expect(err.cause).toBeInstanceOf(AssetBaseUnavailableError);
+ }
+ });
+});
+
+describe("BackgroundLoadError", () => {
+ it("carries the failing URL and is instanceof Error", () => {
+ const err = new BackgroundLoadError("/home/user/secret/wallpaper.jpg");
+ expect(err).toBeInstanceOf(Error);
+ expect(err).toBeInstanceOf(BackgroundLoadError);
+ expect(err.url).toBe("/home/user/secret/wallpaper.jpg");
+ expect(err.name).toBe("BackgroundLoadError");
+ });
+
+ it("displayUrl hides parent directories to avoid leaking PII", () => {
+ const err = new BackgroundLoadError("file:///home/enrique/projects/openscreen/wallpaper1.jpg");
+ expect(err.displayUrl).toBe("wallpaper1.jpg");
+ });
+
+ it("displayUrl abbreviates data URIs", () => {
+ const err = new BackgroundLoadError("data:image/png;base64,AAA");
+ expect(err.displayUrl).toBe("data:…");
+ });
+
+ it("displayUrl returns sentinel for empty-basename URLs", () => {
+ const err = new BackgroundLoadError("file:///");
+ expect(err.displayUrl).toBe("(unknown)");
+ });
+
+ it("displayUrl returns sentinel for unparseable bare slash", () => {
+ const err = new BackgroundLoadError("/");
+ expect(err.displayUrl).toBe("(unknown)");
+ });
+
+ it("preserves cause when provided", () => {
+ const cause = new Error("inner");
+ const err = new BackgroundLoadError("file:///missing.jpg", cause);
+ expect(err.cause).toBe(cause);
+ });
+});
diff --git a/src/lib/wallpaper.ts b/src/lib/wallpaper.ts
new file mode 100644
index 0000000..6974a04
--- /dev/null
+++ b/src/lib/wallpaper.ts
@@ -0,0 +1,96 @@
+import { getAssetPath } from "@/lib/assetPath";
+
+export const WALLPAPER_COUNT = 18;
+
+export const WALLPAPER_PATHS: readonly string[] = Array.from(
+ { length: WALLPAPER_COUNT },
+ (_, i) => `/wallpapers/wallpaper${i + 1}.jpg`,
+);
+
+export const DEFAULT_WALLPAPER = WALLPAPER_PATHS[0];
+
+export type WallpaperClassification =
+ | { kind: "color"; value: string }
+ | { kind: "gradient"; value: string }
+ | { kind: "image"; path: string };
+
+const GRADIENT_RE = /^(repeating-)?(linear|radial|conic)-gradient\(/;
+const COLOR_FUNC_RE = /^(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch|color)\(/;
+const IMAGE_URL_RE = /^(\/|https?:\/\/|file:\/\/|data:)/;
+
+export function classifyWallpaper(value: string): WallpaperClassification {
+ const trimmed = value.trim();
+ if (trimmed === "") {
+ return { kind: "color", value: "#000000" };
+ }
+ if (trimmed.startsWith("#") || COLOR_FUNC_RE.test(trimmed)) {
+ return { kind: "color", value: trimmed };
+ }
+ if (GRADIENT_RE.test(trimmed)) {
+ return { kind: "gradient", value: trimmed };
+ }
+ if (IMAGE_URL_RE.test(trimmed)) {
+ return { kind: "image", path: trimmed };
+ }
+ return { kind: "color", value: trimmed };
+}
+
+const ALLOWED_IMAGE_PREFIX = "/wallpapers/";
+
+export class UnsafeImagePrefixError extends Error {
+ constructor(prefix: string) {
+ super(`Image wallpaper path must live under ${prefix}`);
+ this.name = "UnsafeImagePrefixError";
+ }
+}
+
+export function resolveImageWallpaperUrl(imagePath: string): string {
+ if (
+ imagePath.startsWith("http://") ||
+ imagePath.startsWith("https://") ||
+ imagePath.startsWith("file://") ||
+ imagePath.startsWith("data:")
+ ) {
+ return imagePath;
+ }
+ const withLeadingSlash = imagePath.startsWith("/") ? imagePath : `/${imagePath}`;
+ if (!withLeadingSlash.startsWith(ALLOWED_IMAGE_PREFIX)) {
+ throw new BackgroundLoadError(imagePath, new UnsafeImagePrefixError(ALLOWED_IMAGE_PREFIX));
+ }
+ try {
+ return getAssetPath(withLeadingSlash.slice(1));
+ } catch (cause) {
+ if (cause instanceof BackgroundLoadError) throw cause;
+ throw new BackgroundLoadError(imagePath, cause);
+ }
+}
+
+export class BackgroundLoadError extends Error {
+ readonly url: string;
+ readonly cause?: unknown;
+
+ constructor(url: string, cause?: unknown) {
+ super(`Failed to load background image: ${displayBasename(url)}`);
+ this.name = "BackgroundLoadError";
+ this.url = url;
+ this.cause = cause;
+ }
+
+ get displayUrl(): string {
+ return displayBasename(this.url);
+ }
+}
+
+function displayBasename(url: string): string {
+ if (url.startsWith("data:")) {
+ return "data:…";
+ }
+ try {
+ const parsed = new URL(url);
+ const last = parsed.pathname.split("/").filter(Boolean).pop();
+ return last ? decodeURIComponent(last) : "(unknown)";
+ } catch {
+ const last = url.split("/").filter(Boolean).pop();
+ return last ?? "(unknown)";
+ }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 670e2b6..365bdc7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,6 +4,17 @@ import App from "./App.tsx";
import { I18nProvider } from "./contexts/I18nContext";
import "./index.css";
+const windowType = new URLSearchParams(window.location.search).get("windowType") || "";
+if (
+ windowType === "hud-overlay" ||
+ windowType === "source-selector" ||
+ windowType === "countdown-overlay"
+) {
+ document.body.style.background = "transparent";
+ document.documentElement.style.background = "transparent";
+ document.getElementById("root")?.style.setProperty("background", "transparent");
+}
+
ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/utils/platformUtils.ts b/src/utils/platformUtils.ts
index 37d5a6d..2fb57e1 100644
--- a/src/utils/platformUtils.ts
+++ b/src/utils/platformUtils.ts
@@ -3,7 +3,7 @@ let cachedPlatform: string | null = null;
/**
* Gets the current platform from Electron
*/
-const getPlatform = async (): Promise => {
+export const getPlatform = async (): Promise => {
if (cachedPlatform) return cachedPlatform;
try {
@@ -14,9 +14,14 @@ const getPlatform = async (): Promise => {
console.warn("Failed to get platform from Electron, falling back to navigator:", error);
// Fallback for development/testing
let fallbackPlatform = "win32";
- if (typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform)) {
- fallbackPlatform = "darwin";
+ if (typeof navigator !== "undefined") {
+ if (/Mac|iPhone|iPad|iPod/.test(navigator.platform)) {
+ fallbackPlatform = "darwin";
+ } else if (/Linux/.test(navigator.platform)) {
+ fallbackPlatform = "linux";
+ }
}
+
cachedPlatform = fallbackPlatform;
return fallbackPlatform;
}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 4e668f3..b7a0735 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,124 +1,2 @@
/// ;
- switchToEditor: () => Promise;
- openSourceSelector: () => Promise;
- selectSource: (source: ProcessedDesktopSource) => Promise;
- getSelectedSource: () => Promise;
- requestCameraAccess: () => Promise<{
- success: boolean;
- granted: boolean;
- status: string;
- error?: string;
- }>;
- storeRecordedVideo: (
- videoData: ArrayBuffer,
- fileName: string,
- ) => Promise<{
- success: boolean;
- path?: string;
- session?: import("./lib/recordingSession").RecordingSession;
- message?: string;
- error?: string;
- }>;
- storeRecordedSession: (
- payload: import("./lib/recordingSession").StoreRecordedSessionInput,
- ) => Promise<{
- success: boolean;
- path?: string;
- session?: import("./lib/recordingSession").RecordingSession;
- message?: string;
- error?: string;
- }>;
- getRecordedVideoPath: () => Promise<{
- success: boolean;
- path?: string;
- message?: string;
- error?: string;
- }>;
- getAssetBasePath: () => Promise;
- setRecordingState: (recording: boolean) => Promise;
- getCursorTelemetry: (videoPath?: string) => Promise<{
- success: boolean;
- samples: CursorTelemetryPoint[];
- message?: string;
- error?: string;
- }>;
- onStopRecordingFromTray: (callback: () => void) => () => void;
- openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>;
- saveExportedVideo: (
- videoData: ArrayBuffer,
- fileName: string,
- ) => Promise<{
- success: boolean;
- path?: string;
- message?: string;
- canceled?: boolean;
- }>;
- openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
- setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
- setCurrentRecordingSession: (
- session: import("./lib/recordingSession").RecordingSession | null,
- ) => Promise<{
- success: boolean;
- session?: import("./lib/recordingSession").RecordingSession;
- }>;
- getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
- getCurrentRecordingSession: () => Promise<{
- success: boolean;
- session?: import("./lib/recordingSession").RecordingSession;
- }>;
- clearCurrentVideoPath: () => Promise<{ success: boolean }>;
- saveProjectFile: (
- projectData: unknown,
- suggestedName?: string,
- existingProjectPath?: string,
- ) => Promise<{
- success: boolean;
- path?: string;
- message?: string;
- canceled?: boolean;
- error?: string;
- }>;
- loadProjectFile: () => Promise<{
- success: boolean;
- path?: string;
- project?: unknown;
- message?: string;
- canceled?: boolean;
- error?: string;
- }>;
- loadCurrentProjectFile: () => Promise<{
- success: boolean;
- path?: string;
- project?: unknown;
- message?: string;
- canceled?: boolean;
- error?: string;
- }>;
- onMenuLoadProject: (callback: () => void) => () => void;
- onMenuSaveProject: (callback: () => void) => () => void;
- onMenuSaveProjectAs: (callback: () => void) => () => void;
- setMicrophoneExpanded: (expanded: boolean) => void;
- setHasUnsavedChanges: (hasChanges: boolean) => void;
- onRequestSaveBeforeClose: (callback: () => Promise | boolean) => () => void;
- setLocale: (locale: string) => Promise;
- };
-}
diff --git a/tests/e2e/gif-export.spec.ts b/tests/e2e/gif-export.spec.ts
index a851546..d1fa3f7 100644
--- a/tests/e2e/gif-export.spec.ts
+++ b/tests/e2e/gif-export.spec.ts
@@ -11,12 +11,15 @@ const TEST_VIDEO = path.join(__dirname, "../fixtures/sample.webm");
test("exports a GIF from a loaded video", async () => {
const outputPath = path.join(os.tmpdir(), `test-gif-export-${Date.now()}.gif`);
+ let testVideoInRecordings = "";
const app = await electron.launch({
args: [
MAIN_JS,
// Required in CI sandbox environments (GitHub Actions, Docker, etc.)
"--no-sandbox",
+ // Force software WebGL in headless CI to avoid GPU framebuffer errors.
+ "--enable-unsafe-swiftshader",
],
env: {
...process.env,
@@ -58,14 +61,25 @@ test("exports a GIF from a loaded video", async () => {
);
});
- await hudWindow.evaluate((videoPath: string) => {
- window.electronAPI.setCurrentVideoPath(videoPath);
- try {
+ // Copy the test fixture into the app's recordings directory so it passes
+ // the path security check in set-current-video-path.
+ const userDataDir = await app.evaluate(({ app: electronApp }) => {
+ return electronApp.getPath("userData");
+ });
+ const recordingsDir = path.join(userDataDir, "recordings");
+ testVideoInRecordings = path.join(recordingsDir, "test-sample.webm");
+ fs.mkdirSync(recordingsDir, { recursive: true });
+ fs.copyFileSync(TEST_VIDEO, testVideoInRecordings);
+
+ try {
+ await hudWindow.evaluate((videoPath: string) => {
+ window.electronAPI.setCurrentVideoPath(videoPath);
window.electronAPI.switchToEditor();
- } catch {
- // Expected: HUD window closes during this call, killing the context.
- }
- }, TEST_VIDEO);
+ }, testVideoInRecordings);
+ } catch {
+ // Expected: switchToEditor() closes the HUD window, terminating
+ // the Playwright page context before evaluate() can resolve.
+ }
// ── 3. Switch to the editor window. This closes the HUD and opens
// a new BrowserWindow with ?windowType=editor.
@@ -116,5 +130,8 @@ test("exports a GIF from a loaded video", async () => {
if (fs.existsSync(outputPath)) {
fs.unlinkSync(outputPath);
}
+ if (testVideoInRecordings && fs.existsSync(testVideoInRecordings)) {
+ fs.unlinkSync(testVideoInRecordings);
+ }
}
});
diff --git a/tests/fixtures/sample-inflated-duration.webm b/tests/fixtures/sample-inflated-duration.webm
new file mode 100644
index 0000000..a90d19e
Binary files /dev/null and b/tests/fixtures/sample-inflated-duration.webm differ
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 1caabef..3be14b6 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -7,5 +7,10 @@
"allowSyntheticDefaultImports": true,
"strict": true
},
- "include": ["vite.config.ts"]
+ "include": [
+ "vite.config.ts",
+ "electron-builder.json5",
+ "playwright.config.ts",
+ "vitest.config.ts"
+ ]
}
diff --git a/vite.config.ts b/vite.config.ts
index 9a44766..55b5596 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -9,25 +9,15 @@ export default defineConfig({
react(),
electron({
main: {
- // Shortcut of `build.lib.entry`.
entry: "electron/main.ts",
vite: {
build: {},
},
},
preload: {
- // Shortcut of `build.rollupOptions.input`.
- // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
input: path.join(__dirname, "electron/preload.ts"),
},
- // Ployfill the Electron and Node.js API for Renderer process.
- // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
- // See https://github.com/electron-vite/vite-plugin-electron-renderer
- renderer:
- process.env.NODE_ENV === "test"
- ? // https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808
- undefined
- : {},
+ renderer: process.env.NODE_ENV === "test" ? undefined : {},
}),
],
resolve: {
@@ -47,10 +37,16 @@ export default defineConfig({
},
rollupOptions: {
output: {
- manualChunks: {
- pixi: ["pixi.js"],
- "react-vendor": ["react", "react-dom"],
- "video-processing": ["mediabunny", "mp4box", "@fix-webm-duration/fix"],
+ manualChunks(id) {
+ if (id.includes("pixi.js") || id.includes("pixi-filters") || id.includes("@pixi/"))
+ return "pixi";
+ if (id.includes("react-dom") || id.includes("/react/")) return "react-vendor";
+ if (
+ id.includes("mediabunny") ||
+ id.includes("mp4box") ||
+ id.includes("fix-webm-duration")
+ )
+ return "video-processing";
},
},
},
diff --git a/vitest.browser.config.ts b/vitest.browser.config.ts
new file mode 100644
index 0000000..ba5cc42
--- /dev/null
+++ b/vitest.browser.config.ts
@@ -0,0 +1,28 @@
+import path from "node:path";
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+ test: {
+ include: ["src/**/*.browser.test.{ts,tsx}"],
+ browser: {
+ enabled: true,
+ provider: playwright({
+ launch: {
+ // Software WebGL so Pixi.js works in headless CI without a GPU.
+ args: ["--enable-unsafe-swiftshader", "--use-gl=swiftshader"],
+ },
+ }),
+ headless: true,
+ instances: [{ browser: "chromium" }],
+ },
+ testTimeout: 120_000,
+ hookTimeout: 30_000,
+ },
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "src"),
+ },
+ },
+ assetsInclude: ["**/*.webm"],
+});
+
+
+ 
- 
+