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 (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+ {blurColorOptions.map((option) => {
+ const activeColor = blurRegion.blurData?.color ?? DEFAULT_BLUR_DATA.color;
+ const isActive = activeColor === option.value;
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+ {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/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index c9bfb6c..82e106c 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -13,7 +13,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,
@@ -33,20 +33,22 @@ 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,
@@ -121,11 +123,6 @@ function CustomSpeedInput({
);
}
-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%)",
@@ -208,7 +205,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;
@@ -284,7 +287,13 @@ export function SettingsPanel({
onAnnotationTypeChange,
onAnnotationStyleChange,
onAnnotationFigureDataChange,
+ onAnnotationDuplicate,
onAnnotationDelete,
+ selectedBlurId,
+ blurRegions = [],
+ onBlurDataChange,
+ onBlurDataCommit,
+ onBlurDelete,
selectedSpeedId,
selectedSpeedValue,
onSpeedChange,
@@ -299,24 +308,12 @@ export function SettingsPanel({
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",
@@ -342,6 +339,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;
@@ -498,7 +496,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]);
}
};
@@ -520,6 +518,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 (
@@ -540,11 +541,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 (
@@ -753,15 +768,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")}
))}
@@ -1066,26 +1083,12 @@ export function SettingsPanel({
);
})}
- {(wallpaperPaths.length > 0
- ? wallpaperPaths
- : WALLPAPER_RELATIVE.map((p) => `/${p}`)
- ).map((path) => {
- const isSelected = (() => {
- if (!selected) return false;
- if (selected === path) return true;
- try {
- const clean = (s: string) =>
- s.replace(/^file:\/\//, "").replace(/^\//, "");
- if (clean(selected).endsWith(clean(path))) return true;
- if (clean(path).endsWith(clean(selected))) return true;
- } catch {
- // Best-effort comparison; fallback to strict match.
- }
- return false;
- })();
+ {WALLPAPER_PATHS.map((canonicalPath, i) => {
+ const previewUrl = wallpaperPreviewUrls[i] ?? canonicalPath;
+ const isSelected = selected === canonicalPath;
return (
onWallpaperChange(path)}
+ onClick={() => onWallpaperChange(canonicalPath)}
role="button"
/>
);
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 88c3aae..7adc558 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -14,8 +14,8 @@ import {
import { useI18n, useScopedT } from "@/contexts/I18nContext";
import { useShortcuts } from "@/contexts/ShortcutsContext";
import { INITIAL_EDITOR_STATE, useEditorHistory } from "@/hooks/useEditorHistory";
-import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
-import { getLocaleName } from "@/i18n/loader";
+import { type Locale } from "@/i18n/config";
+import { getAvailableLocales, getLocaleName } from "@/i18n/loader";
import {
calculateOutputDimensions,
type ExportFormat,
@@ -32,6 +32,7 @@ import { computeFrameStepTime } from "@/lib/frameStep";
import type { ProjectMedia } from "@/lib/recordingSession";
import { matchesShortcut } from "@/lib/shortcuts";
import { loadUserPreferences, saveUserPreferences } from "@/lib/userPreferences";
+import { BackgroundLoadError } from "@/lib/wallpaper";
import {
getAspectRatioValue,
getNativeAspectRatioValue,
@@ -54,11 +55,13 @@ import { SettingsPanel } from "./SettingsPanel";
import TimelineEditor from "./timeline/TimelineEditor";
import {
type AnnotationRegion,
+ type BlurData,
type CursorTelemetryPoint,
clampFocusToDepth,
DEFAULT_ANNOTATION_POSITION,
DEFAULT_ANNOTATION_SIZE,
DEFAULT_ANNOTATION_STYLE,
+ DEFAULT_BLUR_DATA,
DEFAULT_FIGURE_DATA,
DEFAULT_PLAYBACK_SPEED,
DEFAULT_ZOOM_DEPTH,
@@ -122,6 +125,7 @@ export default function VideoEditor() {
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);
@@ -149,14 +153,24 @@ export default function VideoEditor() {
const nextSpeedIdRef = useRef(1);
const { shortcuts, isMac } = useShortcuts();
+ 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) {
@@ -229,6 +243,7 @@ export default function VideoEditor() {
setSelectedTrimId(null);
setSelectedSpeedId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
nextZoomIdRef.current = deriveNextId(
"zoom",
@@ -307,7 +322,6 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
- webcamSizePreset,
webcamPosition,
exportQuality,
exportFormat,
@@ -347,7 +361,10 @@ export default function VideoEditor() {
setLastSavedSnapshot(
createProjectSnapshot(
webcamSourcePath
- ? { screenVideoPath: sourcePath, webcamVideoPath: webcamSourcePath }
+ ? {
+ screenVideoPath: sourcePath,
+ webcamVideoPath: webcamSourcePath,
+ }
: { screenVideoPath: sourcePath },
INITIAL_EDITOR_STATE,
),
@@ -484,7 +501,6 @@ export default function VideoEditor() {
aspectRatio,
webcamLayoutPreset,
webcamMaskShape,
- webcamSizePreset,
webcamPosition,
exportQuality,
exportFormat,
@@ -493,6 +509,7 @@ export default function VideoEditor() {
gifSizePreset,
videoPath,
t,
+ webcamSizePreset,
],
);
@@ -533,18 +550,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);
@@ -626,7 +643,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) => {
@@ -634,6 +655,7 @@ export default function VideoEditor() {
if (id) {
setSelectedZoomId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
}
}, []);
@@ -642,6 +664,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);
}
}, []);
@@ -659,6 +692,7 @@ export default function VideoEditor() {
setSelectedZoomId(id);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -677,6 +711,7 @@ export default function VideoEditor() {
setSelectedZoomId(id);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -693,6 +728,7 @@ export default function VideoEditor() {
setSelectedTrimId(id);
setSelectedZoomId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -803,6 +839,7 @@ export default function VideoEditor() {
setSelectedZoomId(null);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
}
}, []);
@@ -822,6 +859,7 @@ export default function VideoEditor() {
setSelectedZoomId(null);
setSelectedTrimId(null);
setSelectedAnnotationId(null);
+ setSelectedBlurId(null);
},
[pushState],
);
@@ -888,6 +926,35 @@ export default function VideoEditor() {
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],
);
@@ -909,6 +976,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) => ({
@@ -917,8 +1011,11 @@ export default function VideoEditor() {
if (selectedAnnotationId === id) {
setSelectedAnnotationId(null);
}
+ if (selectedBlurId === id) {
+ setSelectedBlurId(null);
+ }
},
- [selectedAnnotationId, pushState],
+ [selectedAnnotationId, selectedBlurId, pushState],
);
const handleAnnotationContentChange = useCallback(
@@ -953,12 +1050,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(
@@ -983,6 +1094,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) => ({
@@ -1096,11 +1252,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)) {
@@ -1126,17 +1285,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 () => {
@@ -1240,6 +1404,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) {
@@ -1374,6 +1544,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) {
@@ -1397,9 +1573,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;
@@ -1432,6 +1614,7 @@ export default function VideoEditor() {
exportQuality,
handleExportSaved,
cursorTelemetry,
+ t,
],
);
@@ -1510,7 +1693,7 @@ export default function VideoEditor() {
if (loading) {
return (
-
Loading video...
+
{t("loadingVideo")}
@@ -1579,7 +1762,7 @@ export default function VideoEditor() {
className="bg-transparent text-[11px] font-medium outline-none cursor-pointer appearance-none pr-1"
style={{ color: "inherit" }}
>
- {SUPPORTED_LOCALES.map((loc) => (
+ {availableLocales.map((loc) => (
@@ -1675,11 +1858,18 @@ 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}
/>
@@ -1732,18 +1922,25 @@ export default function VideoEditor() {
onSpeedDelete={handleSpeedDelete}
selectedSpeedId={selectedSpeedId}
onSelectSpeed={handleSelectSpeed}
- annotationRegions={annotationRegions}
+ annotationRegions={annotationOnlyRegions}
onAnnotationAdded={handleAnnotationAdded}
onAnnotationSpanChange={handleAnnotationSpanChange}
onAnnotationDelete={handleAnnotationDelete}
selectedAnnotationId={selectedAnnotationId}
onSelectAnnotation={handleSelectAnnotation}
+ blurRegions={blurRegions}
+ onBlurAdded={handleBlurAdded}
+ onBlurSpanChange={handleAnnotationSpanChange}
+ onBlurDelete={handleAnnotationDelete}
+ selectedBlurId={selectedBlurId}
+ onSelectBlur={handleSelectBlur}
aspectRatio={aspectRatio}
onAspectRatioChange={(ar) =>
pushState({
aspectRatio: ar,
webcamLayoutPreset:
- !isPortraitAspectRatio(ar) && webcamLayoutPreset === "vertical-stack"
+ (isPortraitAspectRatio(ar) && webcamLayoutPreset === "dual-frame") ||
+ (!isPortraitAspectRatio(ar) && webcamLayoutPreset === "vertical-stack")
? "picture-in-picture"
: webcamLayoutPreset,
})
@@ -1796,7 +1993,7 @@ export default function VideoEditor() {
onWebcamLayoutPresetChange={(preset) =>
pushState({
webcamLayoutPreset: preset,
- webcamPosition: preset === "vertical-stack" ? null : webcamPosition,
+ webcamPosition: preset === "picture-in-picture" ? webcamPosition : null,
})
}
webcamMaskShape={webcamMaskShape}
@@ -1830,12 +2027,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 08c1c25..35e0077 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -18,7 +18,6 @@ import {
useRef,
useState,
} from "react";
-import { getAssetPath } from "@/lib/assetPath";
import {
getWebcamLayoutCssBoxShadow,
type Size,
@@ -26,6 +25,7 @@ import {
type WebcamLayoutPreset,
type WebcamSizePreset,
} from "@/lib/compositeLayout";
+import { classifyWallpaper, DEFAULT_WALLPAPER, resolveImageWallpaperUrl } from "@/lib/wallpaper";
import { getCssClipPath } from "@/lib/webcamMaskShapes";
import {
type AspectRatio,
@@ -35,6 +35,7 @@ import {
import { AnnotationOverlay } from "./AnnotationOverlay";
import {
type AnnotationRegion,
+ type BlurData,
type SpeedRegion,
type TrimRegion,
ZOOM_DEPTH_SCALES,
@@ -101,6 +102,13 @@ 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[];
}
@@ -152,6 +160,13 @@ const VideoPlayback = forwardRef(
onSelectAnnotation,
onAnnotationPositionChange,
onAnnotationSizeChange,
+ blurRegions = [],
+ selectedBlurId,
+ onSelectBlur,
+ onBlurPositionChange,
+ onBlurSizeChange,
+ onBlurDataChange,
+ onBlurDataCommit,
cursorTelemetry = [],
},
ref,
@@ -166,7 +181,10 @@ 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);
@@ -330,6 +348,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;
@@ -346,7 +369,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;
@@ -519,84 +545,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;
@@ -623,7 +589,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";
@@ -632,7 +599,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;
@@ -759,7 +753,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;
@@ -807,7 +800,7 @@ const VideoPlayback = forwardRef(
videoContainer.mask = null;
maskGraphicsRef.current = null;
if (blurFilterRef.current) {
- videoContainer.filters = [];
+ videoContainer.filters = null;
blurFilterRef.current.destroy();
blurFilterRef.current = null;
}
@@ -864,23 +857,14 @@ 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,
},
);
@@ -1031,6 +1015,23 @@ const VideoPlayback = forwardRef(
motionIntensity,
motionVector,
);
+
+ 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);
@@ -1068,7 +1069,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],
@@ -1136,58 +1147,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) {
@@ -1287,9 +1246,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 fdf5f66..8a17b9e 100644
--- a/src/components/video-editor/projectPersistence.test.ts
+++ b/src/components/video-editor/projectPersistence.test.ts
@@ -44,6 +44,7 @@ describe("projectPersistence media compatibility", () => {
aspectRatio: "16:9",
webcamLayoutPreset: "picture-in-picture",
webcamMaskShape: "circle",
+ webcamPosition: null,
exportQuality: "good",
exportFormat: "mp4",
gifFrameRate: 15,
@@ -66,6 +67,99 @@ 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", () => {
@@ -103,3 +197,62 @@ it("detects unsaved changes from differing snapshots", () => {
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 45513d4..7259c1e 100644
--- a/src/components/video-editor/projectPersistence.ts
+++ b/src/components/video-editor/projectPersistence.ts
@@ -1,7 +1,9 @@
+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,
@@ -9,6 +11,10 @@ import {
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,
@@ -17,7 +23,11 @@ import {
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,
@@ -28,12 +38,23 @@ import {
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;
@@ -72,6 +93,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));
}
@@ -179,6 +220,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
@@ -254,12 +315,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,
@@ -306,6 +377,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,
};
})
: [];
@@ -329,7 +436,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)
@@ -351,13 +461,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" ||
@@ -369,16 +474,7 @@ export function normalizeProjectEditor(editor: Partial): Pro
typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
? Math.max(10, Math.min(50, editor.webcamSizePreset))
: DEFAULT_WEBCAM_SIZE_PRESET,
- 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,
+ webcamPosition: normalizedWebcamPosition,
exportQuality:
editor.exportQuality === "medium" || editor.exportQuality === "source"
? editor.exportQuality
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 && (
+
+ )}
) : isTrim ? (
<>
- 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({
>
+
diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts
index e8e649f..046f428 100644
--- a/src/components/video-editor/types.ts
+++ b/src/components/video-editor/types.ts
@@ -47,7 +47,7 @@ export interface TrimRegion {
endMs: number;
}
-export type AnnotationType = "text" | "image" | "figure";
+export type AnnotationType = "text" | "image" | "figure" | "blur";
export type ArrowDirection =
| "up"
@@ -65,6 +65,27 @@ export interface FigureData {
strokeWidth: number;
}
+export type BlurShape = "rectangle" | "oval" | "freehand";
+export type BlurType = "blur" | "mosaic";
+export type BlurColor = "white" | "black";
+
+export const MIN_BLUR_INTENSITY = 2;
+export const MAX_BLUR_INTENSITY = 40;
+export const DEFAULT_BLUR_INTENSITY = 12;
+export const MIN_BLUR_BLOCK_SIZE = 4;
+export const MAX_BLUR_BLOCK_SIZE = 48;
+export const DEFAULT_BLUR_BLOCK_SIZE = 12;
+
+export interface BlurData {
+ type: BlurType;
+ shape: BlurShape;
+ color: BlurColor;
+ intensity: number;
+ blockSize: number;
+ // Points are normalized (0-100) within the annotation bounds.
+ freehandPoints?: Array<{ x: number; y: number }>;
+}
+
export interface AnnotationPosition {
x: number;
y: number;
@@ -99,6 +120,7 @@ export interface AnnotationRegion {
style: AnnotationTextStyle;
zIndex: number;
figureData?: FigureData;
+ blurData?: BlurData;
}
export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {
@@ -128,6 +150,27 @@ export const DEFAULT_FIGURE_DATA: FigureData = {
strokeWidth: 4,
};
+export const DEFAULT_BLUR_FREEHAND_POINTS: Array<{ x: number; y: number }> = [
+ { x: 10, y: 30 },
+ { x: 25, y: 10 },
+ { x: 55, y: 8 },
+ { x: 82, y: 20 },
+ { x: 90, y: 45 },
+ { x: 78, y: 72 },
+ { x: 52, y: 90 },
+ { x: 22, y: 84 },
+ { x: 8, y: 58 },
+];
+
+export const DEFAULT_BLUR_DATA: BlurData = {
+ type: "blur",
+ shape: "rectangle",
+ color: "white",
+ intensity: DEFAULT_BLUR_INTENSITY,
+ blockSize: DEFAULT_BLUR_BLOCK_SIZE,
+ freehandPoints: DEFAULT_BLUR_FREEHAND_POINTS,
+};
+
export interface CropRegion {
x: number;
y: number;
diff --git a/src/components/video-editor/videoPlayback/layoutUtils.ts b/src/components/video-editor/videoPlayback/layoutUtils.ts
index 5059ccb..4b713cf 100644
--- a/src/components/video-editor/videoPlayback/layoutUtils.ts
+++ b/src/components/video-editor/videoPlayback/layoutUtils.ts
@@ -140,7 +140,7 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
screenRect.y,
screenRect.width,
screenRect.height,
- compositeLayout.screenCover ? 0 : borderRadius,
+ compositeLayout.screenBorderRadius ?? (compositeLayout.screenCover ? 0 : borderRadius),
);
maskGraphics.fill({ color: 0xffffff });
diff --git a/src/components/video-editor/videoPlayback/zoomTransform.ts b/src/components/video-editor/videoPlayback/zoomTransform.ts
index 61ced66..800949f 100644
--- a/src/components/video-editor/videoPlayback/zoomTransform.ts
+++ b/src/components/video-editor/videoPlayback/zoomTransform.ts
@@ -90,8 +90,10 @@ export function computeZoomTransform({
}
const progress = Math.min(1, Math.max(0, zoomProgress));
- const focusStagePxX = baseMask.x + focusX * baseMask.width;
- const focusStagePxY = baseMask.y + focusY * baseMask.height;
+ // Focus coordinates are stage-normalized (0-1 of full canvas),
+ // so map directly to stage pixels, not through baseMask.
+ const focusStagePxX = focusX * stageSize.width;
+ const focusStagePxY = focusY * stageSize.height;
const stageCenterX = stageSize.width / 2;
const stageCenterY = stageSize.height / 2;
const scale = 1 + (zoomScale - 1) * progress;
@@ -128,8 +130,8 @@ export function computeFocusFromTransform({
const focusStagePxY = (stageCenterY - y) / zoomScale;
return {
- cx: (focusStagePxX - baseMask.x) / baseMask.width,
- cy: (focusStagePxY - baseMask.y) / baseMask.height,
+ cx: focusStagePxX / stageSize.width,
+ cy: focusStagePxY / stageSize.height,
};
}
diff --git a/src/contexts/I18nContext.tsx b/src/contexts/I18nContext.tsx
index 0b75212..1056749 100644
--- a/src/contexts/I18nContext.tsx
+++ b/src/contexts/I18nContext.tsx
@@ -5,16 +5,11 @@ import {
useContext,
useEffect,
useMemo,
+ useRef,
useState,
} from "react";
-import {
- DEFAULT_LOCALE,
- type I18nNamespace,
- LOCALE_STORAGE_KEY,
- type Locale,
- SUPPORTED_LOCALES,
-} from "@/i18n/config";
-import { translate } from "@/i18n/loader";
+import { DEFAULT_LOCALE, type I18nNamespace, LOCALE_STORAGE_KEY, type Locale } from "@/i18n/config";
+import { getAvailableLocales, translate } from "@/i18n/loader";
type TranslateVars = Record;
@@ -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 cc19222..bd410da 100644
--- a/src/hooks/useEditorHistory.ts
+++ b/src/hooks/useEditorHistory.ts
@@ -17,6 +17,7 @@ import {
DEFAULT_WEBCAM_POSITION,
DEFAULT_WEBCAM_SIZE_PRESET,
} from "@/components/video-editor/types";
+import { DEFAULT_WALLPAPER } from "@/lib/wallpaper";
import type { AspectRatio } from "@/utils/aspectRatioUtils";
// Undoable state — selection IDs are intentionally excluded (undoing a
@@ -46,7 +47,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,
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 2b07e24..dc9758f 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -110,6 +110,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
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 =
@@ -118,11 +122,15 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}, []);
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",
];
@@ -158,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.
@@ -194,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,
@@ -225,6 +308,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
try {
const screenBlob = await activeScreenRecorder.recordedBlobPromise;
if (discardRecordingId.current === activeRecordingId) {
+ window.electronAPI?.discardCursorTelemetry(activeRecordingId);
return;
}
if (screenBlob.size === 0) {
@@ -334,7 +418,10 @@ 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;
@@ -365,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) {
@@ -373,6 +570,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
return;
}
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
let screenMediaStream: MediaStream;
const videoConstraints = {
@@ -413,6 +615,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
}
screenStream.current = screenMediaStream;
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
if (microphoneEnabled) {
try {
microphoneStream.current = await navigator.mediaDevices.getUserMedia({
@@ -437,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();
@@ -505,6 +715,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
);
}
+ if (!isCountdownRunActive(countdownRunToken)) {
+ teardownMedia();
+ return;
+ }
+
let {
width = DEFAULT_WIDTH,
height = DEFAULT_HEIGHT,
@@ -524,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,
@@ -553,7 +773,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
setRecording(true);
setPaused(false);
setElapsedSeconds(0);
- window.electronAPI?.setRecordingState(true);
+ window.electronAPI?.setRecordingState(true, recordingId.current);
const activeScreenRecorder = screenRecorder.current;
const activeWebcamRecorder = webcamRecorder.current;
@@ -635,7 +855,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
};
const toggleRecording = () => {
- recording ? stopRecording.current() : startRecording();
+ if (recording) {
+ stopRecording.current();
+ return;
+ }
+
+ if (countdownActive) {
+ cancelCountdown();
+ return;
+ }
+
+ void startRecordCountdown();
};
const restartRecording = async () => {
@@ -649,7 +879,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
restarting.current = true;
discardRecordingId.current = activeRecordingId;
- allowAutoFinalize.current = false;
const stopPromises = [
new Promise((resolve) => {
@@ -700,13 +929,22 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
const cancelRecording = () => {
const activeScreenRecorder = screenRecorder.current;
- if (!activeScreenRecorder || activeScreenRecorder.recorder.state !== "recording") return;
+ if (
+ activeScreenRecorder?.recorder.state === "recording" ||
+ activeScreenRecorder?.recorder.state === "paused"
+ ) {
+ const activeRecordingId = recordingId.current;
+ discardRecordingId.current = activeRecordingId;
+ allowAutoFinalize.current = false;
- const activeRecordingId = recordingId.current;
- discardRecordingId.current = activeRecordingId;
- allowAutoFinalize.current = false;
+ stopRecording.current();
+ return;
+ }
- stopRecording.current();
+ if (countdownActive) {
+ cancelCountdown();
+ return;
+ }
};
return {
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 636d727..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", , "fr", "tr"] 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/editor.json b/src/i18n/locales/en/editor.json
index ea2ceaa..13e2e13 100644
--- a/src/i18n/locales/en/editor.json
+++ b/src/i18n/locales/en/editor.json
@@ -5,6 +5,7 @@
"cancel": "Cancel",
"confirm": "Confirm"
},
+ "loadingVideo": "Loading video...",
"errors": {
"noVideoLoaded": "No video loaded",
"videoNotReady": "Video not ready",
@@ -14,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}}"
@@ -36,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 cf111c4..e959a54 100644
--- a/src/i18n/locales/en/launch.json
+++ b/src/i18n/locales/en/launch.json
@@ -33,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 a64a332..9b85c2b 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -26,6 +26,7 @@
"selectPreset": "Select preset",
"pictureInPicture": "Picture in Picture",
"verticalStack": "Vertical Stack",
+ "dualFrame": "Dual Frame",
"webcamShape": "Camera Shape",
"webcamSize": "Webcam Size"
},
@@ -103,6 +104,7 @@
"typeText": "Text",
"typeImage": "Image",
"typeArrow": "Arrow",
+ "typeBlur": "Blur",
"textContent": "Text Content",
"textPlaceholder": "Enter your text...",
"fontStyle": "Font Style",
@@ -121,6 +123,18 @@
"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 790302c..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"
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/editor.json b/src/i18n/locales/es/editor.json
index 99adc78..c71368a 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,8 @@
"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."
}
}
diff --git a/src/i18n/locales/es/launch.json b/src/i18n/locales/es/launch.json
index f47bc81..68919aa 100644
--- a/src/i18n/locales/es/launch.json
+++ b/src/i18n/locales/es/launch.json
@@ -33,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 aecdf69..423b158 100644
--- a/src/i18n/locales/es/settings.json
+++ b/src/i18n/locales/es/settings.json
@@ -26,6 +26,7 @@
"selectPreset": "Seleccionar predefinido",
"pictureInPicture": "Imagen en imagen",
"verticalStack": "Apilado vertical",
+ "dualFrame": "Marco dual",
"webcamShape": "Forma de cámara",
"webcamSize": "Tamaño de cámara"
},
@@ -103,6 +104,7 @@
"typeText": "Texto",
"typeImage": "Imagen",
"typeArrow": "Flecha",
+ "typeBlur": "Desenfoque",
"textContent": "Contenido de texto",
"textPlaceholder": "Escribe tu texto...",
"fontStyle": "Estilo de fuente",
@@ -121,6 +123,18 @@
"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 a03420e..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"
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
index 7eb7f83..5d09214 100644
--- a/src/i18n/locales/fr/common.json
+++ b/src/i18n/locales/fr/common.json
@@ -9,6 +9,7 @@
"open": "Ouvrir",
"upload": "Téléverser",
"export": "Exporter",
+ "showInFolder": "Afficher dans le dossier",
"file": "Fichier",
"edit": "Éditer",
"view": "Affichage",
diff --git a/src/i18n/locales/fr/dialogs.json b/src/i18n/locales/fr/dialogs.json
index b4056a5..dbaae38 100644
--- a/src/i18n/locales/fr/dialogs.json
+++ b/src/i18n/locales/fr/dialogs.json
@@ -27,10 +27,11 @@
"triggerLabel": "Comment fonctionne la coupe",
"title": "Comment fonctionne la coupe",
"description": "Comprendre comment supprimer les parties indésirables de votre vidéo.",
- "explanation": "L'outil Coupe fonctionne en définissant les segments que vous souhaitez",
- "explanationRemove": "supprimer",
- "explanationCovered": "couvert",
- "explanationEnd": "par un segment de coupe rouge sera coupé lors de l'export.",
+ "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é",
@@ -39,7 +40,8 @@
"part3": "Partie 3",
"finalVideo": "Vidéo finale",
"step1Title": "1. Ajouter une coupe",
- "step1Description": "Appuyez sur T ou cliquez sur l'icône ciseaux pour marquer une section à supprimer.",
+ "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."
},
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
index 779bcd7..ae48fdf 100644
--- a/src/i18n/locales/fr/editor.json
+++ b/src/i18n/locales/fr/editor.json
@@ -1,4 +1,10 @@
{
+ "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",
@@ -8,6 +14,7 @@
"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}}"
@@ -30,6 +37,8 @@
"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."
}
}
diff --git a/src/i18n/locales/fr/launch.json b/src/i18n/locales/fr/launch.json
index f4bfb27..55521cb 100644
--- a/src/i18n/locales/fr/launch.json
+++ b/src/i18n/locales/fr/launch.json
@@ -33,5 +33,11 @@
"recording": {
"selectSource": "Veuillez sélectionner une source à enregistrer"
},
- "language": "Langue"
+ "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
index 48ce7e3..66df1ba 100644
--- a/src/i18n/locales/fr/settings.json
+++ b/src/i18n/locales/fr/settings.json
@@ -8,12 +8,21 @@
"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"
+ "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"
@@ -24,7 +33,9 @@
"selectPreset": "Choisir un préréglage",
"pictureInPicture": "Incrustation d'image",
"verticalStack": "Empilement vertical",
- "webcamShape": "Forme de la caméra"
+ "dualFrame": "Double cadre",
+ "webcamShape": "Forme de la caméra",
+ "webcamSize": "Taille de la caméra"
},
"effects": {
"title": "Effets vidéo",
@@ -100,6 +111,7 @@
"typeText": "Texte",
"typeImage": "Image",
"typeArrow": "Flèche",
+ "typeBlur": "Flou",
"textContent": "Contenu du texte",
"textPlaceholder": "Saisissez votre texte...",
"fontStyle": "Style de police",
@@ -118,6 +130,18 @@
"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.",
diff --git a/src/i18n/locales/fr/shortcuts.json b/src/i18n/locales/fr/shortcuts.json
index 5c6e494..a0ce83f 100644
--- a/src/i18n/locales/fr/shortcuts.json
+++ b/src/i18n/locales/fr/shortcuts.json
@@ -18,6 +18,7 @@
"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"
diff --git a/src/i18n/locales/fr/timeline.json b/src/i18n/locales/fr/timeline.json
index abee16c..b4c6e16 100644
--- a/src/i18n/locales/fr/timeline.json
+++ b/src/i18n/locales/fr/timeline.json
@@ -4,23 +4,28 @@
"suggestZooms": "Suggérer des zooms depuis le curseur",
"addTrim": "Ajouter une coupe (T)",
"addAnnotation": "Ajouter une annotation (A)",
- "addSpeed": "Ajouter une vitesse (S)"
+ "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"
+ "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"
+ "emptyText": "Texte vide",
+ "blurItem": "Flou {{index}}"
},
"emptyState": {
"noVideo": "Aucune vidéo chargée",
@@ -28,20 +33,20 @@
},
"errors": {
"cannotPlaceZoom": "Impossible de placer le zoom ici",
- "zoomExistsAtLocation": "Un zoom existe déjà à cet emplacement ou l'espace disponible est insuffisant.",
+ "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'abord un screencast pour générer des suggestions basées sur le curseur.",
+ "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'enregistrement ne contient pas suffisamment de données de mouvement du curseur.",
+ "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'espace disponible est insuffisant.",
+ "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'espace disponible est insuffisant."
+ "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",
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..1501230
--- /dev/null
+++ b/src/i18n/locales/ja-JP/editor.json
@@ -0,0 +1,42 @@
+{
+ "newRecording": {
+ "title": "レコーダーに戻る",
+ "description": "現在の作業内容が保存されました。",
+ "cancel": "キャンセル",
+ "confirm": "確認"
+ },
+ "loadingVideo": "ビデオを読み込み中...",
+ "errors": {
+ "noVideoLoaded": "ビデオが読み込まれていません",
+ "videoNotReady": "ビデオが準備できていません",
+ "unableToDetermineSourcePath": "ソースビデオのパスを特定できません",
+ "failedToSaveGif": "GIFの保存に失敗しました",
+ "gifExportFailed": "GIFのエクスポートに失敗しました",
+ "failedToSaveVideo": "ビデオの保存に失敗しました",
+ "exportFailed": "エクスポートに失敗しました",
+ "exportFailedWithError": "エクスポートに失敗しました: {{error}}",
+ "failedToSaveExport": "エクスポートの保存に失敗しました",
+ "failedToSaveExportedVideo": "エクスポートしたビデオの保存に失敗しました",
+ "failedToRevealInFolder": "フォルダの表示に失敗しました: {{error}}"
+ },
+ "export": {
+ "canceled": "エクスポートがキャンセルされました",
+ "exportedSuccessfully": "{{format}}を正常にエクスポートしました"
+ },
+ "project": {
+ "saveCanceled": "プロジェクトの保存がキャンセルされました",
+ "failedToSave": "プロジェクトの保存に失敗しました",
+ "savedTo": "プロジェクトを保存しました: {{path}}",
+ "failedToLoad": "プロジェクトの読み込みに失敗しました",
+ "invalidFormat": "無効なプロジェクトファイル形式です",
+ "loadedFrom": "プロジェクトを読み込みました: {{path}}"
+ },
+ "recording": {
+ "failedCameraAccess": "カメラのアクセス要求に失敗しました。",
+ "cameraBlocked": "カメラのアクセスがブロックされています。システム設定で有効にして、ウェブカメラを使用してください。",
+ "systemAudioUnavailable": "システムオーディオが利用できません。システムオーディオなしで録画します。",
+ "microphoneDenied": "マイクのアクセスが拒否されました。オーディオなしで録画を続行します。",
+ "cameraDenied": "カメラのアクセスが拒否されました。ウェブカメラなしで録画を続行します。",
+ "permissionDenied": "録画の権限が拒否されました。画面録画を許可してください。"
+ }
+}
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..9cad3ef
--- /dev/null
+++ b/src/i18n/locales/ja-JP/settings.json
@@ -0,0 +1,183 @@
+{
+ "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}}"
+ },
+ "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": "色",
+ "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..466e656
--- /dev/null
+++ b/src/i18n/locales/ko-KR/editor.json
@@ -0,0 +1,43 @@
+{
+ "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": "녹화 권한이 거부되었습니다. 화면 녹화를 허용해 주세요."
+ }
+}
diff --git a/src/i18n/locales/ko-KR/launch.json b/src/i18n/locales/ko-KR/launch.json
new file mode 100644
index 0000000..1cc695e
--- /dev/null
+++ b/src/i18n/locales/ko-KR/launch.json
@@ -0,0 +1,37 @@
+{
+ "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": "언어"
+}
diff --git a/src/i18n/locales/ko-KR/settings.json b/src/i18n/locales/ko-KR/settings.json
new file mode 100644
index 0000000..cd9f734
--- /dev/null
+++ b/src/i18n/locales/ko-KR/settings.json
@@ -0,0 +1,162 @@
+{
+ "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": "웹캠 크기"
+ },
+ "effects": {
+ "title": "비디오 효과",
+ "blurBg": "배경 흐림",
+ "motionBlur": "모션 블러",
+ "off": "끄기",
+ "shadow": "그림자",
+ "roundness": "모서리 둥글기",
+ "padding": "여백"
+ },
+ "background": {
+ "title": "배경",
+ "image": "이미지",
+ "color": "색상",
+ "gradient": "그라디언트",
+ "uploadCustom": "직접 업로드",
+ "gradientLabel": "그라디언트 {{index}}"
+ },
+ "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": "색상",
+ "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": "이미지 업로드에 실패했습니다"
+ },
+ "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..1760d8f
--- /dev/null
+++ b/src/i18n/locales/ko-KR/shortcuts.json
@@ -0,0 +1,36 @@
+{
+ "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": "재생 / 일시정지"
+ },
+ "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..7009e68
--- /dev/null
+++ b/src/i18n/locales/ko-KR/timeline.json
@@ -0,0 +1,52 @@
+{
+ "buttons": {
+ "addZoom": "줌 추가 (Z)",
+ "suggestZooms": "커서 기반 줌 제안",
+ "addTrim": "트림 추가 (T)",
+ "addAnnotation": "주석 추가 (A)",
+ "addSpeed": "속도 추가 (S)"
+ },
+ "hints": {
+ "pressZoom": "Z를 눌러 줌 추가",
+ "pressTrim": "T를 눌러 트림 추가",
+ "pressAnnotation": "A를 눌러 주석 추가",
+ "pressSpeed": "S를 눌러 속도 추가"
+ },
+ "labels": {
+ "pan": "이동",
+ "zoom": "줌",
+ "trim": "트림",
+ "speed": "속도",
+ "zoomItem": "줌 {{index}}",
+ "trimItem": "트림 {{index}}",
+ "speedItem": "속도 {{index}}",
+ "annotationItem": "주석",
+ "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/tr/common.json b/src/i18n/locales/tr/common.json
index 3ec132c..13d006b 100644
--- a/src/i18n/locales/tr/common.json
+++ b/src/i18n/locales/tr/common.json
@@ -9,6 +9,7 @@
"open": "Aç",
"upload": "Yükle",
"export": "Dışa Aktar",
+ "showInFolder": "Klasörde Göster",
"file": "Dosya",
"edit": "Düzenle",
"view": "Görünüm",
diff --git a/src/i18n/locales/tr/dialogs.json b/src/i18n/locales/tr/dialogs.json
index 5661e45..9fab50d 100644
--- a/src/i18n/locales/tr/dialogs.json
+++ b/src/i18n/locales/tr/dialogs.json
@@ -27,10 +27,11 @@
"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.",
- "explanation": "Kırpma aracı, kaldırmak istediğiniz bölümleri tanımlayarak çalışır.",
- "explanationRemove": "kaldırmak",
- "explanationCovered": "kaplanan",
- "explanationEnd": "kırmızı kırpma bölgesi ile işaretlenen kısımlar dışa aktarımda kesilecektir.",
+ "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",
@@ -39,7 +40,8 @@
"part3": "Bölüm 3",
"finalVideo": "Son Video",
"step1Title": "1. Kırpma Ekle",
- "step1Description": "Kaldırılacak bölümü işaretlemek için T tuşuna basın veya makas simgesine tıklayın.",
+ "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."
},
diff --git a/src/i18n/locales/tr/editor.json b/src/i18n/locales/tr/editor.json
index dfa4cb1..c34d64b 100644
--- a/src/i18n/locales/tr/editor.json
+++ b/src/i18n/locales/tr/editor.json
@@ -8,6 +8,7 @@
"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}}"
diff --git a/src/i18n/locales/tr/settings.json b/src/i18n/locales/tr/settings.json
index 3cf33b1..7bc60e4 100644
--- a/src/i18n/locales/tr/settings.json
+++ b/src/i18n/locales/tr/settings.json
@@ -100,6 +100,7 @@
"typeText": "Metin",
"typeImage": "Görüntü",
"typeArrow": "Ok",
+ "typeBlur": "Bulanık",
"textContent": "Metin İçeriği",
"textPlaceholder": "Metninizi girin...",
"fontStyle": "Yazı Tipi Stili",
@@ -118,6 +119,11 @@
"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.",
diff --git a/src/i18n/locales/tr/shortcuts.json b/src/i18n/locales/tr/shortcuts.json
index 8eb7931..69b28ed 100644
--- a/src/i18n/locales/tr/shortcuts.json
+++ b/src/i18n/locales/tr/shortcuts.json
@@ -18,6 +18,7 @@
"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"
diff --git a/src/i18n/locales/tr/timeline.json b/src/i18n/locales/tr/timeline.json
index b39a5d1..2632f7a 100644
--- a/src/i18n/locales/tr/timeline.json
+++ b/src/i18n/locales/tr/timeline.json
@@ -4,23 +4,28 @@
"suggestZooms": "İmleçten Yakınlaştırma Öner",
"addTrim": "Kırpma Ekle (T)",
"addAnnotation": "Açıklama Ekle (A)",
- "addSpeed": "Hız Ekle (S)"
+ "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"
+ "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"
+ "emptyText": "Boş metin",
+ "blurItem": "Bulanık {{index}}"
},
"emptyState": {
"noVideo": "Video Yüklenmedi",
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/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 6b63df1..a5c2a9d 100644
--- a/src/i18n/locales/zh-CN/launch.json
+++ b/src/i18n/locales/zh-CN/launch.json
@@ -33,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 72b4b48..5cffcb5 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -26,6 +26,7 @@
"selectPreset": "选择预设",
"pictureInPicture": "画中画",
"verticalStack": "垂直堆叠",
+ "dualFrame": "双画框",
"webcamShape": "摄像头形状",
"webcamSize": "摄像头大小"
},
@@ -103,6 +104,7 @@
"typeText": "文本",
"typeImage": "图片",
"typeArrow": "箭头",
+ "typeBlur": "模糊",
"textContent": "文本内容",
"textPlaceholder": "输入您的文本...",
"fontStyle": "字体样式",
@@ -121,6 +123,11 @@
"arrowDirection": "箭头方向",
"strokeWidth": "描边宽度：{{width}}px",
"arrowColor": "箭头颜色",
+ "blurShape": "模糊形状",
+ "blurIntensity": "模糊强度",
+ "blurShapeRectangle": "矩形",
+ "blurShapeOval": "椭圆",
+ "blurShapeFreehand": "自由手绘",
"deleteAnnotation": "删除标注",
"shortcutsAndTips": "快捷键与提示",
"tipMovePlayhead": "将播放头移动到重叠的标注区域并选择一个项目。",
diff --git a/src/i18n/locales/zh-CN/shortcuts.json b/src/i18n/locales/zh-CN/shortcuts.json
index e2faa2f..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": "播放 / 暂停"
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..5d948a3
--- /dev/null
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -0,0 +1,43 @@
+{
+ "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": "錄影權限被拒絕。請允許螢幕錄製。"
+ }
+}
diff --git a/src/i18n/locales/zh-TW/launch.json b/src/i18n/locales/zh-TW/launch.json
new file mode 100644
index 0000000..e8b723f
--- /dev/null
+++ b/src/i18n/locales/zh-TW/launch.json
@@ -0,0 +1,37 @@
+{
+ "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": "語言"
+}
diff --git a/src/i18n/locales/zh-TW/settings.json b/src/i18n/locales/zh-TW/settings.json
new file mode 100644
index 0000000..6344a99
--- /dev/null
+++ b/src/i18n/locales/zh-TW/settings.json
@@ -0,0 +1,176 @@
+{
+ "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}}"
+ },
+ "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": "顏色",
+ "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": "上傳圖片失敗"
+ },
+ "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/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 90883b1..596eb75 100644
--- a/src/lib/compositeLayout.test.ts
+++ b/src/lib/compositeLayout.test.ts
@@ -169,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 48583a3..e6db733 100644
--- a/src/lib/compositeLayout.ts
+++ b/src/lib/compositeLayout.ts
@@ -15,7 +15,7 @@ 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;
@@ -44,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;
}
@@ -54,6 +62,7 @@ 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;
}
@@ -101,6 +110,22 @@ 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 44102b4..ad65a08 100644
--- a/src/lib/exporter/frameRenderer.ts
+++ b/src/lib/exporter/frameRenderer.ts
@@ -45,6 +45,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 {
@@ -78,6 +79,7 @@ interface FrameRenderConfig {
previewWidth?: number;
previewHeight?: number;
cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
+ platform: string;
}
interface AnimationState {
@@ -124,9 +126,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,
@@ -187,8 +191,10 @@ 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) {
@@ -226,123 +232,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;
}
@@ -418,8 +394,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;
@@ -504,10 +480,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);
@@ -535,16 +516,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;
@@ -727,7 +702,10 @@ export class FrameRenderer {
private compositeWithShadows(webcamFrame?: VideoFrame | null): void {
if (!this.compositeCanvas || !this.compositeCtx || !this.app) return;
- const videoCanvas = this.readbackVideoCanvas();
+ 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;
@@ -784,6 +762,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,
@@ -805,6 +799,10 @@ export class FrameRenderer {
ctx.clip();
ctx.drawImage(
webcamFrame as unknown as CanvasImageSource,
+ sourceCropX,
+ sourceCropY,
+ sourceCropWidth,
+ sourceCropHeight,
webcamRect.x,
webcamRect.y,
webcamRect.width,
diff --git a/src/lib/exporter/gifExporter.browser.test.ts b/src/lib/exporter/gifExporter.browser.test.ts
index db9b144..1d96076 100644
--- a/src/lib/exporter/gifExporter.browser.test.ts
+++ b/src/lib/exporter/gifExporter.browser.test.ts
@@ -1,5 +1,6 @@
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";
@@ -40,4 +41,48 @@ describe("GifExporter (real browser)", () => {
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 747e34e..f41b58d 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -8,6 +8,8 @@ import type {
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";
@@ -115,7 +117,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;
@@ -153,6 +161,7 @@ export class GifExporter {
previewWidth: this.config.previewWidth,
previewHeight: this.config.previewHeight,
cursorTelemetry: this.config.cursorTelemetry,
+ platform,
});
await this.renderer.initialize();
@@ -174,11 +183,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);
@@ -214,6 +223,7 @@ export class GifExporter {
}
queue.enqueue(webcamFrame);
},
+ onWarning,
)
.catch((error) => {
webcamDecodeError = error instanceof Error ? error : new Error(String(error));
@@ -273,6 +283,7 @@ export class GifExporter {
webcamFrame?.close();
}
},
+ onWarning,
);
if (this.cancelled) {
@@ -319,8 +330,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 ee67576..e8093df 100644
--- a/src/lib/exporter/streamingDecoder.ts
+++ b/src/lib/exporter/streamingDecoder.ts
@@ -2,7 +2,7 @@ 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
@@ -68,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,
@@ -98,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;
}
@@ -201,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
@@ -217,12 +278,21 @@ 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()");
@@ -230,26 +300,50 @@ export class StreamingVideoDecoder {
const decoderConfig = await this.demuxer.getDecoderConfig("video");
- // web-demuxer may return a bare "av01" for AV1 in WebM containers when the
- // extradata isn't in the expected ISOBMFF format. WebCodecs requires the
- // full parametrized form (e.g. "av01.0.05M.08").
+ 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");
+ 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[] = [];
@@ -268,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;
@@ -284,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 => {
@@ -304,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
@@ -360,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);
@@ -379,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))) {
@@ -391,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;
@@ -406,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;
}
@@ -427,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) {
@@ -449,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;
}
@@ -461,7 +574,7 @@ export class StreamingVideoDecoder {
segmentFrameIndex = 0;
if (
segmentIdx < segments.length &&
- heldFrameSec < segments[segmentIdx].startSec - epsilonSec
+ heldFrameSec < segments[segmentIdx].startSec - EPSILON_SEC
) {
break;
}
@@ -491,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,
@@ -502,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);
}
}
@@ -536,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
index ec2b0f6..cca896f 100644
--- a/src/lib/exporter/videoExporter.browser.test.ts
+++ b/src/lib/exporter/videoExporter.browser.test.ts
@@ -1,5 +1,6 @@
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";
@@ -40,4 +41,46 @@ describe("VideoExporter (real browser)", () => {
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 d0affd1..d44bf40 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -7,6 +7,8 @@ import type {
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";
@@ -81,6 +83,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:`,
@@ -106,12 +112,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);
@@ -146,6 +156,7 @@ export class VideoExporter {
previewWidth: this.config.previewWidth,
previewHeight: this.config.previewHeight,
cursorTelemetry: this.config.cursorTelemetry,
+ platform,
});
this.renderer = renderer;
await renderer.initialize();
@@ -157,17 +168,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;
@@ -196,6 +201,7 @@ export class VideoExporter {
}
queue.enqueue(webcamFrame);
},
+ onWarning,
)
.catch((error) => {
webcamDecodeError = error instanceof Error ? error : new Error(String(error));
@@ -237,25 +243,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 &&
@@ -296,6 +306,7 @@ export class VideoExporter {
webcamFrame?.close();
}
},
+ onWarning,
);
if (this.cancelled) {
@@ -346,13 +357,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();
@@ -422,7 +433,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/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 00b96b6..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",
@@ -108,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: " " },
@@ -118,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",
@@ -125,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/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 d76ee15..b7a0735 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,126 +1,2 @@
///
///
-
-interface ProcessedDesktopSource {
- id: string;
- name: string;
- display_id: string;
- thumbnail: string | null;
- appIcon: string | null;
-}
-
-interface CursorTelemetryPoint {
- timeMs: number;
- cx: number;
- cy: number;
-}
-
-interface Window {
- electronAPI: {
- getSources: (opts: Electron.SourcesOptions) => Promise;
- switchToEditor: () => Promise;
- switchToHud: () => Promise;
- startNewRecording: () => Promise<{ success: boolean; error?: string }>;
- 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/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";
},
},
},
- 
+