diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 8b289e3f5..99fcf62d3 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -626,6 +626,7 @@ interface SettingsPanelProps {
onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
onAnnotationBlurIntensityChange?: (id: string, intensity: number) => void;
onAnnotationBlurColorChange?: (id: string, color: string) => void;
+ onAnnotationSpotlightOpacityChange?: (id: string, opacity: number) => void;
onAnnotationDelete?: (id: string) => void;
autoCaptions?: CaptionCue[];
autoCaptionSettings?: AutoCaptionSettings;
@@ -1074,6 +1075,7 @@ export function SettingsPanel({
onAnnotationFigureDataChange,
onAnnotationBlurIntensityChange,
onAnnotationBlurColorChange,
+ onAnnotationSpotlightOpacityChange,
onAnnotationDelete,
autoCaptions = [],
autoCaptionSettings = DEFAULT_AUTO_CAPTION_SETTINGS,
@@ -2058,6 +2060,12 @@ export function SettingsPanel({
? (color) => onAnnotationBlurColorChange(selectedAnnotation.id, color)
: undefined
}
+ onSpotlightOpacityChange={
+ onAnnotationSpotlightOpacityChange
+ ? (opacity) =>
+ onAnnotationSpotlightOpacityChange(selectedAnnotation.id, opacity)
+ : undefined
+ }
onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
/>
);
diff --git a/src/components/video-editor/SpotlightMaskOverlay.tsx b/src/components/video-editor/SpotlightMaskOverlay.tsx
new file mode 100644
index 000000000..a04173420
--- /dev/null
+++ b/src/components/video-editor/SpotlightMaskOverlay.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+import {
+ getActiveSpotlights,
+ getSpotlightDimAlpha,
+ paintSpotlightMask,
+ SPOTLIGHT_CORNER_RADIUS,
+} from "@/lib/spotlight/spotlightMask";
+import { type AnnotationRegion, BASE_PREVIEW_WIDTH } from "./types";
+
+const MAX_CANVAS_EDGE = 4096;
+
+interface SpotlightMaskOverlayProps {
+ annotations: AnnotationRegion[];
+ timeMs: number;
+ /** Size of the video (recording) rect in unscaled preview pixels. */
+ width: number;
+ height: number;
+ /** Rounded corner radius of the video in unscaled preview pixels. */
+ videoCornerRadius: number;
+ /** Current scene zoom, used to keep the mask edges sharp while zoomed in. */
+ sceneScale: number;
+}
+
+/** Dims the preview video outside every active spotlight annotation. */
+export function SpotlightMaskOverlay({
+ annotations,
+ timeMs,
+ width,
+ height,
+ videoCornerRadius,
+ sceneScale,
+}: SpotlightMaskOverlayProps) {
+ const canvasRef = useRef
(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const ctx = canvas?.getContext("2d");
+ if (!canvas || !ctx || width <= 0 || height <= 0) return;
+
+ const pixelRatio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+ const resolution = Math.min(
+ pixelRatio * Math.max(1, sceneScale),
+ MAX_CANVAS_EDGE / Math.max(width, height),
+ );
+ const pixelWidth = Math.max(1, Math.round(width * resolution));
+ const pixelHeight = Math.max(1, Math.round(height * resolution));
+ if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+ canvas.width = pixelWidth;
+ canvas.height = pixelHeight;
+ }
+
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ const spotlights = getActiveSpotlights(annotations, timeMs);
+ if (spotlights.length === 0) return;
+
+ ctx.setTransform(resolution, 0, 0, resolution, 0, 0);
+ paintSpotlightMask(ctx, {
+ area: { x: 0, y: 0, width, height },
+ areaRadius: videoCornerRadius,
+ holes: spotlights.map((spotlight) => ({
+ x: (spotlight.position.x / 100) * width,
+ y: (spotlight.position.y / 100) * height,
+ width: (spotlight.size.width / 100) * width,
+ height: (spotlight.size.height / 100) * height,
+ })),
+ holeRadius: SPOTLIGHT_CORNER_RADIUS * (width / BASE_PREVIEW_WIDTH),
+ alpha: getSpotlightDimAlpha(spotlights, timeMs),
+ });
+ }, [annotations, timeMs, width, height, videoCornerRadius, sceneScale]);
+
+ return (
+
+ );
+}
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 842343dc3..a116d3559 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -42,6 +42,7 @@ import {
getCaptionTextMaxWidth,
getCaptionWordVisualState,
} from "./captionStyle";
+import { SpotlightMaskOverlay } from "./SpotlightMaskOverlay";
import {
type AnnotationRegion,
type AutoCaptionSettings,
@@ -103,7 +104,10 @@ import {
preloadCursorAssets,
} from "./videoPlayback/cursorRenderer";
import { clampFocusToStage as clampFocusToStageUtil } from "./videoPlayback/focusUtils";
-import { layoutVideoContent as layoutVideoContentUtil } from "./videoPlayback/layoutUtils";
+import {
+ layoutVideoContent as layoutVideoContentUtil,
+ scalePreviewBorderRadius,
+} from "./videoPlayback/layoutUtils";
import { clamp01 } from "./videoPlayback/mathUtils";
import {
createSpringState,
@@ -2720,46 +2724,72 @@ const VideoPlayback = forwardRef(
}
};
- return sorted.map((annotation) => (
- ,
+ ...sorted.map((annotation) => (
+
- onAnnotationPositionChange?.(id, position)
- }
- onSizeChange={(id, size) =>
- onAnnotationSizeChange?.(id, size)
- }
- onClick={handleAnnotationClick}
- zIndex={annotation.zIndex}
- isSelectedBoost={annotation.id === selectedAnnotationId}
- />
- ));
+ 600
+ }
+ recordingRect={{
+ x: 0,
+ y: 0,
+ width:
+ annotationRecordingRect.width ||
+ overlayRef.current?.clientWidth ||
+ 800,
+ height:
+ annotationRecordingRect.height ||
+ overlayRef.current?.clientHeight ||
+ 600,
+ }}
+ sceneTransform={{ scale: 1, x: 0, y: 0 }}
+ interactionScale={annotationSceneTransform.scale}
+ onPositionChange={(id, position) =>
+ onAnnotationPositionChange?.(id, position)
+ }
+ onSizeChange={(id, size) =>
+ onAnnotationSizeChange?.(id, size)
+ }
+ onClick={handleAnnotationClick}
+ zIndex={annotation.zIndex}
+ isSelectedBoost={
+ annotation.id === selectedAnnotationId
+ }
+ />
+ )),
+ ];
})()}