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 7e556b8..4fb4193 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -42,20 +42,86 @@ import { cn } from "@/lib/utils";
import { type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
import { getTestId } from "@/utils/getTestId";
import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
+import { BlurSettingsPanel } from "./BlurSettingsPanel";
import { CropControl } from "./CropControl";
import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
import type {
AnnotationRegion,
AnnotationType,
+ BlurData,
CropRegion,
FigureData,
PlaybackSpeed,
WebcamLayoutPreset,
WebcamMaskShape,
+ WebcamSizePreset,
ZoomDepth,
ZoomFocusMode,
} from "./types";
-import { SPEED_OPTIONS } from "./types";
+import { DEFAULT_WEBCAM_SIZE_PRESET, MAX_PLAYBACK_SPEED, SPEED_OPTIONS } from "./types";
+
+function CustomSpeedInput({
+ value,
+ onChange,
+ onError,
+}: {
+ value: number;
+ onChange: (val: number) => void;
+ onError: () => void;
+}) {
+ const isPreset = SPEED_OPTIONS.some((o) => o.speed === value);
+ const [draft, setDraft] = useState(isPreset ? "" : String(Math.round(value)));
+ const [isFocused, setIsFocused] = useState(false);
+
+ const prevValue = useRef(value);
+ if (!isFocused && prevValue.current !== value) {
+ prevValue.current = value;
+ setDraft(isPreset ? "" : String(Math.round(value)));
+ }
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent
) => {
+ const digits = e.target.value.replace(/\D/g, "");
+ if (digits === "") {
+ setDraft("");
+ return;
+ }
+ const num = Number(digits);
+ if (num > MAX_PLAYBACK_SPEED) {
+ onError();
+ return;
+ }
+ setDraft(digits);
+ if (num >= 1) onChange(num);
+ },
+ [onChange, onError],
+ );
+
+ const handleBlur = useCallback(() => {
+ setIsFocused(false);
+ if (!draft || Number(draft) < 1) {
+ setDraft(isPreset ? "" : String(Math.round(value)));
+ }
+ }, [draft, isPreset, value]);
+
+ return (
+
+ setIsFocused(true)}
+ onChange={handleChange}
+ onBlur={handleBlur}
+ onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
+ className="w-12 bg-white/5 border border-white/10 rounded-md px-1 py-0.5 text-[11px] font-semibold text-[#d97706] text-center focus:outline-none focus:border-[#d97706]/40"
+ />
+ ×
+
+ );
+}
const WALLPAPER_COUNT = 18;
const WALLPAPER_RELATIVE = Array.from(
@@ -132,7 +198,11 @@ interface SettingsPanelProps {
onGifSizePresetChange?: (preset: GifSizePreset) => void;
gifOutputDimensions?: { width: number; height: number };
onExport?: () => void;
- unsavedExport?: { arrayBuffer: ArrayBuffer; fileName: string; format: string } | null;
+ unsavedExport?: {
+ arrayBuffer: ArrayBuffer;
+ fileName: string;
+ format: string;
+ } | null;
onSaveUnsavedExport?: () => void;
selectedAnnotationId?: string | null;
annotationRegions?: AnnotationRegion[];
@@ -140,7 +210,13 @@ interface SettingsPanelProps {
onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
onAnnotationStyleChange?: (id: string, style: Partial) => void;
onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
+ onAnnotationDuplicate?: (id: string) => void;
onAnnotationDelete?: (id: string) => void;
+ selectedBlurId?: string | null;
+ blurRegions?: AnnotationRegion[];
+ onBlurDataChange?: (id: string, blurData: BlurData) => void;
+ onBlurDataCommit?: () => void;
+ onBlurDelete?: (id: string) => void;
selectedSpeedId?: string | null;
selectedSpeedValue?: PlaybackSpeed | null;
onSpeedChange?: (speed: PlaybackSpeed) => void;
@@ -150,6 +226,12 @@ interface SettingsPanelProps {
onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
webcamMaskShape?: import("./types").WebcamMaskShape;
onWebcamMaskShapeChange?: (shape: import("./types").WebcamMaskShape) => void;
+ selectedZoomInDuration?: number;
+ selectedZoomOutDuration?: number;
+ onZoomDurationChange?: (zoomIn: number, zoomOut: number) => void;
+ webcamSizePreset?: WebcamSizePreset;
+ onWebcamSizePresetChange?: (size: WebcamSizePreset) => void;
+ onWebcamSizePresetCommit?: () => void;
}
export default SettingsPanel;
@@ -163,6 +245,13 @@ const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
{ depth: 6, label: "5×" },
];
+const ZOOM_SPEED_OPTIONS = [
+ { label: "Instant", zoomIn: 0, zoomOut: 0 },
+ { label: "Fast", zoomIn: 500, zoomOut: 350 },
+ { label: "Smooth", zoomIn: 1522, zoomOut: 1015 },
+ { label: "Lazy", zoomIn: 3000, zoomOut: 2000 },
+];
+
export function SettingsPanel({
selected,
onWallpaperChange,
@@ -213,7 +302,13 @@ export function SettingsPanel({
onAnnotationTypeChange,
onAnnotationStyleChange,
onAnnotationFigureDataChange,
+ onAnnotationDuplicate,
onAnnotationDelete,
+ selectedBlurId,
+ blurRegions = [],
+ onBlurDataChange,
+ onBlurDataCommit,
+ onBlurDelete,
selectedSpeedId,
selectedSpeedValue,
onSpeedChange,
@@ -223,6 +318,12 @@ export function SettingsPanel({
onWebcamLayoutPresetChange,
webcamMaskShape = "rectangle",
onWebcamMaskShapeChange,
+ selectedZoomInDuration,
+ selectedZoomOutDuration,
+ onZoomDurationChange,
+ webcamSizePreset = DEFAULT_WEBCAM_SIZE_PRESET,
+ onWebcamSizePresetChange,
+ onWebcamSizePresetCommit,
}: SettingsPanelProps) {
const t = useScopedT("settings");
const [wallpaperPaths, setWallpaperPaths] = useState([]);
@@ -268,6 +369,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;
@@ -446,6 +548,9 @@ export function SettingsPanel({
const selectedAnnotation = selectedAnnotationId
? annotationRegions.find((a) => a.id === selectedAnnotationId)
: null;
+ const selectedBlur = selectedBlurId
+ ? blurRegions.find((region) => region.id === selectedBlurId)
+ : null;
// If an annotation is selected, show annotation settings instead
if (
@@ -466,11 +571,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 (
@@ -547,6 +666,39 @@ export function SettingsPanel({
)}
)}
+
+ {zoomEnabled && (
+
+
+ {t("zoom.speed.title") || "Zoom Speed"}
+
+
+ {ZOOM_SPEED_OPTIONS.map((opt) => {
+ const isActive =
+ selectedZoomInDuration !== undefined &&
+ selectedZoomOutDuration !== undefined &&
+ Math.round(selectedZoomInDuration) === Math.round(opt.zoomIn) &&
+ Math.round(selectedZoomOutDuration) === Math.round(opt.zoomOut);
+ return (
+
+ );
+ })}
+
+
+ )}
{zoomEnabled && (
-
+
{SPEED_OPTIONS.map((option) => {
const isActive = selectedSpeedValue === option.speed;
return (
@@ -609,6 +761,29 @@ export function SettingsPanel({
);
})}
+
+
+
+ {t("speed.customPlaybackSpeed")}
+
+ {selectedSpeedId ? (
+
onSpeedChange?.(val)}
+ onError={() => toast.error(t("speed.maxSpeedError"))}
+ />
+ ) : (
+
+ )}
+
+
{!selectedSpeedId && (
{t("speed.selectRegion")}
)}
@@ -656,15 +831,17 @@ export function SettingsPanel({
- {WEBCAM_LAYOUT_PRESETS.filter(
- (preset) =>
- preset.value === "picture-in-picture" ||
- isPortraitAspectRatio(aspectRatio),
- ).map((preset) => (
+ {WEBCAM_LAYOUT_PRESETS.filter((preset) => {
+ if (preset.value === "picture-in-picture") return true;
+ if (preset.value === "vertical-stack") return isPortraitCanvas;
+ return !isPortraitCanvas;
+ }).map((preset) => (
{preset.value === "picture-in-picture"
? t("layout.pictureInPicture")
- : t("layout.verticalStack")}
+ : preset.value === "vertical-stack"
+ ? t("layout.verticalStack")
+ : t("layout.dualFrame")}
))}
@@ -751,6 +928,27 @@ export function SettingsPanel({
)}
+ {webcamLayoutPreset === "picture-in-picture" && (
+
+ )}
)}
@@ -879,7 +1077,7 @@ export function SettingsPanel({
- 
+