huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Merge branch 'main' into detect-system-lang

Browse Source
This commit is contained in:
Sid
2026-04-15 23:02:34 -07:00
committed by GitHub
parent d1c9555464 8aa85413f9
commit ff52e55fa1
41 changed files with 2292 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/AnnotationOverlay.tsx
+187 -8
View File
@@ -1,15 +1,27 @@
import { type CSSProperties, type PointerEvent, useRef, useState } from "react";
import { type CSSProperties, type PointerEvent, useEffect, useRef, useState } from "react";
import { Rnd } from "react-rnd";
import {
getBlurOverlayColor,
getMosaicGridOverlayColor,
getNormalizedMosaicBlockSize,
} from "@/lib/blurEffects";
import { cn } from "@/lib/utils";
import { getArrowComponent } from "./ArrowSvgs";
import {
type AnnotationRegion,
type BlurData,
DEFAULT_BLUR_BLOCK_SIZE,
DEFAULT_BLUR_DATA,
DEFAULT_BLUR_INTENSITY,
} from "./types";
const FREEHAND_POINT_THRESHOLD = 1;
type PreviewCanvasSource = {
width: number;
height: number;
clientWidth?: number;
clientHeight?: number;
};
function buildBlurPolygonClipPath(points: Array<{ x: number; y: number }>) {
if (points.length < 3) return undefined;
@@ -36,6 +48,8 @@ interface AnnotationOverlayProps {
onClick: (id: string) => void;
zIndex: number;
isSelectedBoost: boolean; // Boost z-index when selected for easy editing
previewSourceCanvas?: PreviewCanvasSource | null;
previewFrameVersion?: number;
}
export function AnnotationOverlay({
@@ -50,11 +64,13 @@ export function AnnotationOverlay({
onClick,
zIndex,
isSelectedBoost,
previewSourceCanvas,
previewFrameVersion,
}: AnnotationOverlayProps) {
const x = (annotation.position.x / 100) * containerWidth;
const y = (annotation.position.y / 100) * containerHeight;
const width = (annotation.size.width / 100) * containerWidth;
const height = (annotation.size.height / 100) * containerHeight;
const committedX = (annotation.position.x / 100) * containerWidth;
const committedY = (annotation.position.y / 100) * containerHeight;
const committedWidth = (annotation.size.width / 100) * containerWidth;
const committedHeight = (annotation.size.height / 100) * containerHeight;
const blurShape = annotation.type === "blur" ? (annotation.blurData?.shape ?? "rectangle") : null;
const isSelectedFreehandBlur = isSelected && blurShape === "freehand";
const isDraggingRef = useRef(false);
@@ -65,6 +81,108 @@ export function AnnotationOverlay({
[],
);
const [livePointerPoint, setLivePointerPoint] = useState<{ x: number; y: number } | null>(null);
const mosaicCanvasRef = useRef<HTMLCanvasElement | null>(null);
const blurType = annotation.type === "blur" ? (annotation.blurData?.type ?? "blur") : "blur";
const blurOverlayColor =
annotation.type === "blur" ? getBlurOverlayColor(annotation.blurData) : "";
const mosaicGridOverlayColor =
annotation.type === "blur" ? getMosaicGridOverlayColor(annotation.blurData) : "";
const [liveRect, setLiveRect] = useState({
x: committedX,
y: committedY,
width: committedWidth,
height: committedHeight,
});
useEffect(() => {
setLiveRect({
x: committedX,
y: committedY,
width: committedWidth,
height: committedHeight,
});
}, [committedHeight, committedWidth, committedX, committedY]);
const { x, y, width, height } = liveRect;
useEffect(() => {
if (annotation.type !== "blur" || blurType !== "mosaic") {
return;
}
void previewFrameVersion;
const canvas = mosaicCanvasRef.current;
const sourceCanvas = previewSourceCanvas;
if (!canvas || !sourceCanvas) {
return;
}
const sourceWidth = sourceCanvas.width;
const sourceHeight = sourceCanvas.height;
const sourceClientWidth = sourceCanvas.clientWidth || containerWidth || sourceWidth;
const sourceClientHeight = sourceCanvas.clientHeight || containerHeight || sourceHeight;
if (
sourceWidth <= 0 ||
sourceHeight <= 0 ||
sourceClientWidth <= 0 ||
sourceClientHeight <= 0
) {
return;
}
const drawWidth = Math.max(1, Math.round(width));
const drawHeight = Math.max(1, Math.round(height));
if (drawWidth <= 0 || drawHeight <= 0) {
return;
}
canvas.width = drawWidth;
canvas.height = drawHeight;
const context = canvas.getContext("2d", { willReadFrequently: true });
if (!context) {
return;
}
const scaleX = sourceWidth / sourceClientWidth;
const scaleY = sourceHeight / sourceClientHeight;
const sourceX = Math.max(0, Math.floor(x * scaleX));
const sourceY = Math.max(0, Math.floor(y * scaleY));
const sourceSampleWidth = Math.max(1, Math.ceil(drawWidth * scaleX));
const sourceSampleHeight = Math.max(1, Math.ceil(drawHeight * scaleY));
const clampedSampleWidth = Math.max(1, Math.min(sourceSampleWidth, sourceWidth - sourceX));
const clampedSampleHeight = Math.max(1, Math.min(sourceSampleHeight, sourceHeight - sourceY));
const blockSize = getNormalizedMosaicBlockSize(annotation.blurData);
const downscaledWidth = Math.max(1, Math.round(drawWidth / blockSize));
const downscaledHeight = Math.max(1, Math.round(drawHeight / blockSize));
canvas.width = downscaledWidth;
canvas.height = downscaledHeight;
context.clearRect(0, 0, downscaledWidth, downscaledHeight);
context.imageSmoothingEnabled = true;
context.drawImage(
sourceCanvas as CanvasImageSource,
sourceX,
sourceY,
clampedSampleWidth,
clampedSampleHeight,
0,
0,
downscaledWidth,
downscaledHeight,
);
}, [
annotation,
blurType,
containerHeight,
containerWidth,
height,
previewFrameVersion,
previewSourceCanvas,
width,
x,
y,
]);
const renderArrow = () => {
const direction = annotation.figureData?.arrowDirection || "right";
@@ -240,6 +358,10 @@ export function AnnotationOverlay({
1,
Math.round(annotation.blurData?.intensity ?? DEFAULT_BLUR_INTENSITY),
);
const blockSize = Math.max(
1,
Math.round(annotation.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE),
);
const activeFreehandPoints =
shape === "freehand"
? isFreehandDrawing
@@ -292,12 +414,43 @@ export function AnnotationOverlay({
className="absolute inset-0"
style={{
...shapeMaskStyle,
backdropFilter: `blur(${blurIntensity}px)`,
WebkitBackdropFilter: `blur(${blurIntensity}px)`,
backgroundColor: "rgba(255, 255, 255, 0.02)",
backdropFilter: blurType === "mosaic" ? "none" : `blur(${blurIntensity}px)`,
WebkitBackdropFilter: blurType === "mosaic" ? "none" : `blur(${blurIntensity}px)`,
backgroundColor: blurOverlayColor,
opacity: shouldShowFreehandBlurFill ? 1 : 0,
}}
/>
{blurType === "mosaic" && shouldShowFreehandBlurFill && (
<canvas
ref={mosaicCanvasRef}
className="absolute inset-0 w-full h-full"
style={{
...shapeMaskStyle,
imageRendering: "pixelated",
}}
/>
)}
{blurType === "mosaic" && shouldShowFreehandBlurFill && (
<div
className="absolute inset-0 pointer-events-none"
style={{
...shapeMaskStyle,
backgroundColor: blurOverlayColor,
}}
/>
)}
{blurType === "mosaic" && (
<div
className="absolute inset-0 pointer-events-none"
style={{
...shapeMaskStyle,
backgroundImage: `linear-gradient(${mosaicGridOverlayColor} 1px, transparent 1px), linear-gradient(90deg, ${mosaicGridOverlayColor} 1px, transparent 1px)`,
backgroundSize: `${blockSize}px ${blockSize}px`,
mixBlendMode: "screen",
opacity: 0.35,
}}
/>
)}
{isSelected && shape !== "freehand" && (
<div
className="absolute inset-0 pointer-events-none border-2 border-[#34B27B]/80"
@@ -354,7 +507,19 @@ export function AnnotationOverlay({
onDragStart={() => {
isDraggingRef.current = true;
}}
onDrag={(_e, d) => {
setLiveRect((prev) => ({
...prev,
x: d.x,
y: d.y,
}));
}}
onDragStop={(_e, d) => {
setLiveRect((prev) => ({
...prev,
x: d.x,
y: d.y,
}));
const xPercent = (d.x / containerWidth) * 100;
const yPercent = (d.y / containerHeight) * 100;
onPositionChange(annotation.id, { x: xPercent, y: yPercent });
@@ -364,7 +529,21 @@ export function AnnotationOverlay({
isDraggingRef.current = false;
}, 100);
}}
onResize={(_e, _direction, ref, _delta, position) => {
setLiveRect({
x: position.x,
y: position.y,
width: ref.offsetWidth,
height: ref.offsetHeight,
});
}}
onResizeStop={(_e, _direction, ref, _delta, position) => {
setLiveRect({
x: position.x,
y: position.y,
width: ref.offsetWidth,
height: ref.offsetHeight,
});
const xPercent = (position.x / containerWidth) * 100;
const yPercent = (position.y / containerHeight) * 100;
const widthPercent = (ref.offsetWidth / containerWidth) * 100;
src/components/video-editor/BlurSettingsPanel.tsx
+111 -6
View File
@@ -1,14 +1,26 @@
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";
@@ -31,6 +43,10 @@ export function BlurSettingsPanel({
{ value: "rectangle", labelKey: "blurShapeRectangle" },
{ value: "oval", labelKey: "blurShapeOval" },
];
const blurColorOptions: Array<{ value: BlurColor; labelKey: string }> = [
{ value: "white", labelKey: "blurColorWhite" },
{ value: "black", labelKey: "blurColorBlack" },
];
return (
<div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl p-4 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
@@ -91,27 +107,116 @@ export function BlurSettingsPanel({
})}
</div>
<div className="mt-4">
<label className="text-xs font-medium text-slate-300 mb-2 block">
{t("annotation.blurType")}
</label>
<Select
value={blurRegion.blurData?.type ?? DEFAULT_BLUR_DATA.type}
onValueChange={(value) => {
const nextBlurData: BlurData = {
...DEFAULT_BLUR_DATA,
...blurRegion.blurData,
type: value === "mosaic" ? "mosaic" : "blur",
};
onBlurDataChange(nextBlurData);
requestAnimationFrame(() => {
onBlurDataCommit?.();
});
}}
>
<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200">
<SelectItem value="blur">{t("annotation.blurTypeBlur")}</SelectItem>
<SelectItem value="mosaic">{t("annotation.blurTypeMosaic")}</SelectItem>
</SelectContent>
</Select>
</div>
<div className="mt-4">
<label className="text-xs font-medium text-slate-300 mb-2 block">
{t("annotation.blurColor")}
</label>
<div className="grid grid-cols-2 gap-2">
{blurColorOptions.map((option) => {
const activeColor = blurRegion.blurData?.color ?? DEFAULT_BLUR_DATA.color;
const isActive = activeColor === option.value;
return (
<button
key={option.value}
onClick={() => {
const nextBlurData: BlurData = {
...DEFAULT_BLUR_DATA,
...blurRegion.blurData,
color: option.value,
};
onBlurDataChange(nextBlurData);
requestAnimationFrame(() => {
onBlurDataCommit?.();
});
}}
className={cn(
"h-10 rounded-lg border flex items-center gap-2 px-3 transition-all",
isActive
? "bg-[#34B27B] border-[#34B27B]"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
)}
>
<div
className="w-4 h-4 rounded-full border border-white/20"
style={{
backgroundColor: getBlurOverlayColor({
...DEFAULT_BLUR_DATA,
...blurRegion.blurData,
color: option.value,
}),
}}
/>
<span className="text-xs text-slate-200">
{t(`annotation.${option.labelKey}`)}
</span>
</button>
);
})}
</div>
</div>
<div className="mt-4 p-3 rounded-lg bg-white/5 border border-white/10">
<div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium text-slate-300">
{t("annotation.blurIntensity")}
{blurRegion.blurData?.type === "mosaic"
? t("annotation.mosaicBlockSize")
: t("annotation.blurIntensity")}
</span>
<span className="text-[10px] text-slate-400 font-mono">
{Math.round(blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity)}px
{Math.round(
blurRegion.blurData?.type === "mosaic"
? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
: (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
)}
px
</span>
</div>
<Slider
value={[blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity]}
value={[
blurRegion.blurData?.type === "mosaic"
? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
: (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
]}
onValueChange={(values) => {
onBlurDataChange({
...DEFAULT_BLUR_DATA,
...blurRegion.blurData,
intensity: values[0],
...(blurRegion.blurData?.type === "mosaic"
? { blockSize: values[0] }
: { intensity: values[0] }),
});
}}
onValueCommit={() => onBlurDataCommit?.()}
min={MIN_BLUR_INTENSITY}
max={MAX_BLUR_INTENSITY}
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"
/>
src/components/video-editor/SettingsPanel.tsx
+47 -1
View File
@@ -225,6 +225,9 @@ 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;
@@ -241,6 +244,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,
@@ -306,6 +316,9 @@ export function SettingsPanel({
onWebcamLayoutPresetChange,
webcamMaskShape = "rectangle",
onWebcamMaskShapeChange,
selectedZoomInDuration,
selectedZoomOutDuration,
onZoomDurationChange,
webcamSizePreset = DEFAULT_WEBCAM_SIZE_PRESET,
onWebcamSizePresetChange,
onWebcamSizePresetCommit,
@@ -648,6 +661,39 @@ export function SettingsPanel({
)}
</div>
)}
{zoomEnabled && (
<div className="mt-3">
<span className="text-sm font-medium text-slate-200 mb-2 block">
{t("zoom.speed.title") || "Zoom Speed"}
</span>
<div className="grid grid-cols-4 gap-1.5">
{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 (
<Button
key={opt.label}
type="button"
onClick={() => onZoomDurationChange?.(opt.zoomIn, opt.zoomOut)}
className={cn(
"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
"duration-200 ease-out cursor-pointer",
isActive
? "border-[#34B27B] bg-[#34B27B] text-white shadow-[#34B27B]/20"
: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
)}
>
<span className="text-[10px] font-semibold">{opt.label}</span>
</Button>
);
})}
</div>
</div>
)}
{zoomEnabled && (
<Button
onClick={handleDeleteClick}
@@ -1026,7 +1072,7 @@ export function SettingsPanel({
</AccordionTrigger>
<AccordionContent className="pb-3">
<Tabs defaultValue="image" className="w-full">
<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 rounded-lg">
<TabsTrigger
value="image"
className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
src/components/video-editor/VideoEditor.tsx
+30
View File
@@ -74,6 +74,7 @@ import {
type ZoomRegion,
} from "./types";
import VideoPlayback, { VideoPlaybackRef } from "./VideoPlayback";
import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./videoPlayback/constants";
export default function VideoEditor() {
const {
@@ -956,6 +957,19 @@ export default function VideoEditor() {
[pushState],
);
const handleZoomDurationChange = useCallback(
(id: string, zoomIn: number, zoomOut: number) => {
pushState((prev) => ({
zoomRegions: prev.zoomRegions.map((region) =>
region.id === id
? { ...region, zoomInDurationMs: zoomIn, zoomOutDurationMs: zoomOut }
: region,
),
}));
},
[pushState],
);
const handleAnnotationSpanChange = useCallback(
(id: string, span: Span) => {
pushState((prev) => ({
@@ -1853,6 +1867,7 @@ export default function VideoEditor() {
onZoomAdded={handleZoomAdded}
onZoomSuggested={handleZoomSuggested}
onZoomSpanChange={handleZoomSpanChange}
onZoomDurationChange={handleZoomDurationChange}
onZoomDelete={handleZoomDelete}
selectedZoomId={selectedZoomId}
onSelectZoom={handleSelectZoom}
@@ -1994,6 +2009,21 @@ export default function VideoEditor() {
onSpeedDelete={handleSpeedDelete}
unsavedExport={unsavedExport}
onSaveUnsavedExport={handleSaveUnsavedExport}
selectedZoomInDuration={
selectedZoomId
? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomInDurationMs ??
Math.round(ZOOM_IN_TRANSITION_WINDOW_MS))
: undefined
}
selectedZoomOutDuration={
selectedZoomId
? (zoomRegions.find((z) => z.id === selectedZoomId)?.zoomOutDurationMs ??
Math.round(TRANSITION_WINDOW_MS))
: undefined
}
onZoomDurationChange={(zoomIn, zoomOut) =>
selectedZoomId && handleZoomDurationChange(selectedZoomId, zoomIn, zoomOut)
}
/>
</div>
</div>
src/components/video-editor/VideoPlayback.tsx
+14 -3
View File
@@ -1348,7 +1348,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
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;
});
const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
@@ -1358,7 +1358,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
if (blurRegion.id === selectedBlurId) return true;
const timeMs = Math.round(currentTime * 1000);
return timeMs >= blurRegion.startMs && timeMs <= blurRegion.endMs;
return timeMs >= blurRegion.startMs && timeMs < blurRegion.endMs;
});
const sorted = [
@@ -1371,6 +1371,15 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
region: blurRegion,
})),
].sort((a, b) => a.region.zIndex - b.region.zIndex);
const previewSnapshotCanvas = (() => {
const app = appRef.current;
if (!app?.renderer?.extract) return null;
try {
return app.renderer.extract.canvas(app.stage);
} catch {
return null;
}
})();
// Handle click-through cycling: when clicking same annotation, cycle to next
const handleAnnotationClick = (clickedId: string) => {
@@ -1404,7 +1413,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
<AnnotationOverlay
key={
item.kind === "blur"
? `${item.region.id}-${overlaySize.width}-${overlaySize.height}-${item.region.blurData?.shape ?? "rectangle"}-${(item.region.blurData?.freehandPoints ?? []).map((p) => `${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
? `${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}
@@ -1438,6 +1447,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
? item.region.id === selectedBlurId
: item.region.id === selectedAnnotationId
}
previewSourceCanvas={previewSnapshotCanvas}
previewFrameVersion={Math.round(currentTime * 1000)}
/>
));
})()}
src/components/video-editor/projectPersistence.test.ts
+69
View File
@@ -68,6 +68,75 @@ describe("projectPersistence media compatibility", () => {
).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",
src/components/video-editor/projectPersistence.ts
+11
View File
@@ -1,3 +1,4 @@
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";
@@ -9,6 +10,7 @@ import {
DEFAULT_ANNOTATION_POSITION,
DEFAULT_ANNOTATION_SIZE,
DEFAULT_ANNOTATION_STYLE,
DEFAULT_BLUR_BLOCK_SIZE,
DEFAULT_BLUR_DATA,
DEFAULT_BLUR_FREEHAND_POINTS,
DEFAULT_BLUR_INTENSITY,
@@ -20,8 +22,10 @@ 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,
@@ -305,6 +309,8 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
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,
@@ -365,10 +371,15 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
? {
...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(
src/components/video-editor/timeline/Item.tsx
+115 -1
View File
@@ -1,8 +1,13 @@
import type { Span } from "dnd-timeline";
import { useItem } from "dnd-timeline";
import { useItem, useTimelineContext } from "dnd-timeline";
import { Gauge, MessageSquare, Scissors, ZoomIn } from "lucide-react";
import { useMemo } from "react";
import { cn } from "@/lib/utils";
import {
DEFAULT_ZOOM_IN_MS,
DEFAULT_ZOOM_OUT_MS,
getDurations,
} from "../videoPlayback/zoomRegionUtils";
import glassStyles from "./ItemGlass.module.css";
interface ItemProps {
@@ -13,7 +18,10 @@ interface ItemProps {
isSelected?: boolean;
onSelect?: () => void;
zoomDepth?: number;
zoomInDurationMs?: number;
zoomOutDurationMs?: number;
speedValue?: number;
onZoomDurationChange?: (id: string, zoomIn: number, zoomOut: number) => void;
variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
}
@@ -44,10 +52,14 @@ export default function Item({
isSelected = false,
onSelect,
zoomDepth = 1,
zoomInDurationMs,
zoomOutDurationMs,
speedValue,
variant = "zoom",
children,
onZoomDurationChange,
}: ItemProps) {
const { pixelsToValue } = useTimelineContext();
const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
id,
span,
@@ -79,6 +91,16 @@ export default function Item({
const MIN_ITEM_PX = 6;
const safeItemStyle = { ...itemStyle, minWidth: MIN_ITEM_PX };
const { zoomIn, zoomOut } = useMemo(() => {
if (!isZoom) return { zoomIn: 0, zoomOut: 0 };
return getDurations({
startMs: span.start,
endMs: span.end,
zoomInDurationMs,
zoomOutDurationMs,
});
}, [isZoom, span.start, span.end, zoomInDurationMs, zoomOutDurationMs]);
return (
<div
ref={setNodeRef}
@@ -101,6 +123,98 @@ export default function Item({
onSelect?.();
}}
>
{isZoom && (
<>
{/* Transition In Marker */}
<div
className="absolute top-0 bottom-0 left-0 bg-white/10 border-r border-white/20 pointer-events-none"
style={{
width: `${(zoomIn / (span.end - span.start)) * 100}%`,
}}
/>
{/* Draggable handle for Transition In */}
<div
className="absolute top-0 bottom-0 w-2 cursor-col-resize z-20 group-hover:bg-white/5 transition-colors"
style={{
left: `${(zoomIn / (span.end - span.start)) * 100}%`,
transform: "translateX(-50%)",
}}
onPointerDown={(e) => {
e.stopPropagation();
e.preventDefault();
const target = e.currentTarget;
target.setPointerCapture(e.pointerId);
const startX = e.clientX;
const initialZoomIn = zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
const initialZoomOut = zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
const onPointerMove = (moveEvent: PointerEvent) => {
const deltaPx = moveEvent.clientX - startX;
const deltaMs = pixelsToValue(deltaPx);
const newDuration = Math.max(
0,
Math.min(initialZoomIn + deltaMs, span.end - span.start - initialZoomOut),
);
onZoomDurationChange?.(id, newDuration, initialZoomOut);
};
const onPointerUp = () => {
target.releasePointerCapture(e.pointerId);
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
};
window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
}}
/>
{/* Transition Out Marker */}
<div
className="absolute top-0 bottom-0 right-0 bg-white/10 border-l border-white/20 pointer-events-none"
style={{
width: `${(zoomOut / (span.end - span.start)) * 100}%`,
}}
/>
{/* Draggable handle for Transition Out */}
<div
className="absolute top-0 bottom-0 w-2 cursor-col-resize z-20 group-hover:bg-white/5 transition-colors"
style={{
right: `${(zoomOut / (span.end - span.start)) * 100}%`,
transform: "translateX(50%)",
}}
onPointerDown={(e) => {
e.stopPropagation();
e.preventDefault();
const target = e.currentTarget;
target.setPointerCapture(e.pointerId);
const startX = e.clientX;
const initialZoomIn = zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
const initialZoomOut = zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
const onPointerMove = (moveEvent: PointerEvent) => {
const deltaPx = startX - moveEvent.clientX; // Inverted because right-anchored
const deltaMs = pixelsToValue(deltaPx);
const newDuration = Math.max(
0,
Math.min(initialZoomOut + deltaMs, span.end - span.start - initialZoomIn),
);
onZoomDurationChange?.(id, initialZoomIn, newDuration);
};
const onPointerUp = () => {
target.releasePointerCapture(e.pointerId);
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
};
window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
}}
/>
</>
)}
<div
className={cn(glassStyles.zoomEndCap, glassStyles.left)}
style={{
src/components/video-editor/timeline/TimelineEditor.tsx
+12
View File
@@ -59,6 +59,7 @@ interface TimelineEditorProps {
onZoomAdded: (span: Span) => void;
onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
onZoomSpanChange: (id: string, span: Span) => void;
onZoomDurationChange: (id: string, zoomIn: number, zoomOut: number) => void;
onZoomDelete: (id: string) => void;
selectedZoomId: string | null;
onSelectZoom: (id: string | null) => void;
@@ -103,6 +104,8 @@ interface TimelineRenderItem {
label: string;
zoomDepth?: number;
speedValue?: number;
zoomInDurationMs?: number;
zoomOutDurationMs?: number;
variant: "zoom" | "trim" | "annotation" | "speed" | "blur";
}
@@ -539,6 +542,7 @@ function Timeline({
selectedAnnotationId,
selectedBlurId,
selectedSpeedId,
onZoomDurationChange,
keyframes = [],
}: {
items: TimelineRenderItem[];
@@ -556,6 +560,7 @@ function Timeline({
selectedAnnotationId?: string | null;
selectedBlurId?: string | null;
selectedSpeedId?: string | null;
onZoomDurationChange: (id: string, zoomIn: number, zoomOut: number) => void;
keyframes?: { id: string; time: number }[];
}) {
const t = useScopedT("timeline");
@@ -682,6 +687,9 @@ function Timeline({
isSelected={item.id === selectedZoomId}
onSelect={() => onSelectZoom?.(item.id)}
zoomDepth={item.zoomDepth}
zoomInDurationMs={item.zoomInDurationMs}
zoomOutDurationMs={item.zoomOutDurationMs}
onZoomDurationChange={onZoomDurationChange}
variant="zoom"
>
{item.label}
@@ -770,6 +778,7 @@ export default function TimelineEditor({
onZoomAdded,
onZoomSuggested,
onZoomSpanChange,
onZoomDurationChange,
onZoomDelete,
selectedZoomId,
onSelectZoom,
@@ -1338,6 +1347,8 @@ export default function TimelineEditor({
span: { start: region.startMs, end: region.endMs },
label: t("labels.zoomItem", { index: String(index + 1) }),
zoomDepth: region.depth,
zoomInDurationMs: region.zoomInDurationMs,
zoomOutDurationMs: region.zoomOutDurationMs,
variant: "zoom",
}));
@@ -1594,6 +1605,7 @@ export default function TimelineEditor({
selectedAnnotationId={selectedAnnotationId}
selectedBlurId={selectedBlurId}
selectedSpeedId={selectedSpeedId}
onZoomDurationChange={onZoomDurationChange}
keyframes={keyframes}
/>
</TimelineWrapper>
src/components/video-editor/types.ts
+13
View File
@@ -33,6 +33,8 @@ export interface ZoomRegion {
depth: ZoomDepth;
focus: ZoomFocus;
focusMode?: ZoomFocusMode;
zoomInDurationMs?: number;
zoomOutDurationMs?: number;
}
export interface CursorTelemetryPoint {
@@ -66,14 +68,22 @@ export interface FigureData {
}
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 }>;
}
@@ -155,8 +165,11 @@ export const DEFAULT_BLUR_FREEHAND_POINTS: Array<{ x: number; y: number }> = [
];
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,
};
src/components/video-editor/videoPlayback/zoomRegionUtils.ts
+34 -12
View File
@@ -7,7 +7,6 @@ import { clamp01, cubicBezier, easeOutScreenStudio } from "./mathUtils";
const CHAINED_ZOOM_PAN_GAP_MS = 1500;
const CONNECTED_ZOOM_PAN_DURATION_MS = 1000;
const ZOOM_IN_OVERLAP_MS = 500;
type DominantRegionOptions = {
connectZooms?: boolean;
@@ -38,26 +37,49 @@ function easeConnectedPan(value: number) {
return cubicBezier(0.1, 0.0, 0.2, 1.0, value);
}
export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
const zoomInEnd = region.startMs + ZOOM_IN_OVERLAP_MS;
const leadInStart = zoomInEnd - ZOOM_IN_TRANSITION_WINDOW_MS;
const leadOutEnd = region.endMs + TRANSITION_WINDOW_MS;
export const DEFAULT_ZOOM_OUT_MS = TRANSITION_WINDOW_MS;
export const DEFAULT_ZOOM_IN_MS = ZOOM_IN_TRANSITION_WINDOW_MS;
if (timeMs < leadInStart || timeMs > leadOutEnd) {
export function getDurations(region: {
startMs: number;
endMs: number;
zoomInDurationMs?: number;
zoomOutDurationMs?: number;
}) {
let zoomIn = region.zoomInDurationMs ?? DEFAULT_ZOOM_IN_MS;
let zoomOut = region.zoomOutDurationMs ?? DEFAULT_ZOOM_OUT_MS;
const duration = region.endMs - region.startMs;
if (zoomIn + zoomOut > duration) {
const scale = duration / (zoomIn + zoomOut);
zoomIn *= scale;
zoomOut *= scale;
}
return { zoomIn, zoomOut };
}
export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
const { zoomIn, zoomOut } = getDurations(region);
if (timeMs < region.startMs || timeMs > region.endMs) {
return 0;
}
if (timeMs < zoomInEnd) {
const progress = (timeMs - leadInStart) / ZOOM_IN_TRANSITION_WINDOW_MS;
// Zooming in
if (timeMs < region.startMs + zoomIn) {
const progress = Math.max(0, Math.min(1, (timeMs - region.startMs) / zoomIn));
return easeOutScreenStudio(progress);
}
if (timeMs <= region.endMs) {
return 1;
// Zooming out
if (timeMs > region.endMs - zoomOut) {
const progress = Math.max(0, Math.min(1, (region.endMs - timeMs) / zoomOut));
return easeOutScreenStudio(progress);
}
const progress = clamp01((timeMs - region.endMs) / TRANSITION_WINDOW_MS);
return 1 - easeOutScreenStudio(progress);
// Full zoom
return 1;
}
function getLinearFocus(start: ZoomFocus, end: ZoomFocus, amount: number): ZoomFocus {