From ea4f47ada3d4c3ad2f8e3a2aed6e5fdbf482e6df Mon Sep 17 00:00:00 2001 From: webadderall <131426131+webadderall@users.noreply.github.com> Date: Fri, 20 Mar 2026 20:08:35 +1100 Subject: [PATCH] Fix webcam preview styling defaults --- src/components/video-editor/SettingsPanel.tsx | 4 +- src/components/video-editor/VideoPlayback.tsx | 52 ++++++++++++------- .../video-editor/projectPersistence.ts | 2 +- src/components/video-editor/types.ts | 8 +-- 4 files changed, 40 insertions(+), 26 deletions(-) diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx index a5dc4ff1..b61edfe4 100644 --- a/src/components/video-editor/SettingsPanel.tsx +++ b/src/components/video-editor/SettingsPanel.tsx @@ -217,7 +217,7 @@ export function SettingsPanel({ onCursorSizeChange, cursorSmoothing = 2, onCursorSmoothingChange, - cursorMotionBlur = 0.35, + cursorMotionBlur = DEFAULT_CURSOR_MOTION_BLUR, onCursorMotionBlurChange, cursorClickBounce = 1, onCursorClickBounceChange, @@ -994,7 +994,7 @@ export function SettingsPanel({ ) : null} updateWebcam({ margin: v })} formatValue={(v) => `${Math.round(v)}px`} parseInput={(text) => parseFloat(text.replace(/px$/, ""))} /> - updateWebcam({ cornerRadius: v })} formatValue={(v) => `${Math.round(v)}px`} parseInput={(text) => parseFloat(text.replace(/px$/, ""))} /> + updateWebcam({ cornerRadius: v })} formatValue={(v) => `${Math.round(v)}px`} parseInput={(text) => parseFloat(text.replace(/px$/, ""))} /> updateWebcam({ shadow: v })} formatValue={(v) => `${Math.round(v * 100)}%`} parseInput={(text) => parseFloat(text.replace(/%$/, "")) / 100} />
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx index d82d5f23..3489be5e 100644 --- a/src/components/video-editor/VideoPlayback.tsx +++ b/src/components/video-editor/VideoPlayback.tsx @@ -70,6 +70,10 @@ import { DEFAULT_CURSOR_SIZE, DEFAULT_CURSOR_SMOOTHING, DEFAULT_CURSOR_SWAY, + DEFAULT_WEBCAM_CORNER_RADIUS, + DEFAULT_WEBCAM_REACT_TO_ZOOM, + DEFAULT_WEBCAM_SHADOW, + DEFAULT_WEBCAM_SIZE, } from "./types"; import { getWebcamOverlayPosition, getWebcamOverlaySizePx } from "./webcamOverlay"; import { getSquircleSvgPath } from "@/lib/geometry/squircle"; @@ -214,6 +218,7 @@ const VideoPlayback = forwardRef( const focusIndicatorRef = useRef(null); const webcamVideoRef = useRef(null); const webcamBubbleRef = useRef(null); + const webcamBubbleInnerRef = useRef(null); const currentTimeRef = useRef(0); const zoomRegionsRef = useRef([]); const selectedZoomIdRef = useRef(null); @@ -268,8 +273,9 @@ const VideoPlayback = forwardRef( const applyWebcamBubbleLayout = useCallback((zoomScale: number) => { const bubble = webcamBubbleRef.current; + const bubbleInner = webcamBubbleInnerRef.current; const overlay = overlayRef.current; - if (!bubble || !overlay || !webcam?.enabled || !webcamVideoPath) { + if (!bubble || !bubbleInner || !overlay || !webcam?.enabled || !webcamVideoPath) { if (bubble) { bubble.style.display = "none"; } @@ -280,10 +286,10 @@ const VideoPlayback = forwardRef( const scaledSize = getWebcamOverlaySizePx({ containerWidth: overlay.clientWidth, containerHeight: overlay.clientHeight, - sizePercent: webcam.size ?? 50, + sizePercent: webcam.size ?? DEFAULT_WEBCAM_SIZE, margin, zoomScale, - reactToZoom: webcam.reactToZoom ?? true, + reactToZoom: webcam.reactToZoom ?? DEFAULT_WEBCAM_REACT_TO_ZOOM, }); const { x, y } = getWebcamOverlayPosition({ containerWidth: overlay.clientWidth, @@ -306,14 +312,17 @@ const VideoPlayback = forwardRef( y: 0, width: scaledSize, height: scaledSize, - radius: webcam.cornerRadius ?? 18, + radius: webcam.cornerRadius ?? DEFAULT_WEBCAM_CORNER_RADIUS, }); - bubble.style.borderRadius = "0px"; - bubble.style.clipPath = `path('${squirclePath}')`; - bubble.style.setProperty("-webkit-clip-path", `path('${squirclePath}')`); - bubble.style.boxShadow = `0 ${Math.round(scaledSize * 0.06)}px ${Math.round( + bubble.style.filter = `drop-shadow(0 ${Math.round(scaledSize * 0.06)}px ${Math.round( scaledSize * 0.22, - )}px rgba(0, 0, 0, ${webcam.shadow ?? 0.35})`; + )}px rgba(0, 0, 0, ${webcam.shadow ?? DEFAULT_WEBCAM_SHADOW}))`; + bubble.style.borderRadius = "0px"; + bubble.style.boxShadow = "none"; + + bubbleInner.style.borderRadius = "0px"; + bubbleInner.style.clipPath = `path('${squirclePath}')`; + bubbleInner.style.setProperty("-webkit-clip-path", `path('${squirclePath}')`); }, [webcam, webcamVideoPath]); const clampFocusToStage = useCallback( @@ -1394,21 +1403,26 @@ const VideoPlayback = forwardRef( {webcam && webcamVideoPath ? (
-
) : null} {(() => { diff --git a/src/components/video-editor/projectPersistence.ts b/src/components/video-editor/projectPersistence.ts index e28a5915..0b42b53d 100644 --- a/src/components/video-editor/projectPersistence.ts +++ b/src/components/video-editor/projectPersistence.ts @@ -451,7 +451,7 @@ export function normalizeProjectEditor(editor: Partial): Pro ? legacyZoomScaleEffect > 0 : DEFAULT_WEBCAM_REACT_TO_ZOOM, cornerRadius: isFiniteNumber(webcam.cornerRadius) - ? clamp(webcam.cornerRadius, 0, 80) + ? clamp(webcam.cornerRadius, 0, 160) : DEFAULT_WEBCAM_CORNER_RADIUS, shadow: isFiniteNumber(webcam.shadow) ? clamp(webcam.shadow, 0, 1) : DEFAULT_WEBCAM_SHADOW, margin: isFiniteNumber(webcam.margin) ? clamp(webcam.margin, 0, 96) : DEFAULT_WEBCAM_MARGIN, diff --git a/src/components/video-editor/types.ts b/src/components/video-editor/types.ts index 626109fd..1b5da4a7 100644 --- a/src/components/video-editor/types.ts +++ b/src/components/video-editor/types.ts @@ -72,15 +72,15 @@ export interface WebcamOverlaySettings { export const DEFAULT_CURSOR_SIZE = 3.0; export const DEFAULT_CURSOR_SMOOTHING = 0.67; -export const DEFAULT_CURSOR_MOTION_BLUR = 0.35; +export const DEFAULT_CURSOR_MOTION_BLUR = 0.5; export const DEFAULT_CURSOR_CLICK_BOUNCE = 2.5; export const DEFAULT_CURSOR_CLICK_BOUNCE_DURATION = 350; export const DEFAULT_CURSOR_SWAY = 0.25; export const DEFAULT_ZOOM_MOTION_BLUR = 0.35; -export const DEFAULT_WEBCAM_SIZE = 35; +export const DEFAULT_WEBCAM_SIZE = 40; export const DEFAULT_WEBCAM_REACT_TO_ZOOM = true; -export const DEFAULT_WEBCAM_CORNER_RADIUS = 18; -export const DEFAULT_WEBCAM_SHADOW = 0.35; +export const DEFAULT_WEBCAM_CORNER_RADIUS = 82; +export const DEFAULT_WEBCAM_SHADOW = 0.67; export const DEFAULT_WEBCAM_MARGIN = 24; export const DEFAULT_WEBCAM_POSITION_PRESET: WebcamPositionPreset = "bottom-right"; export const DEFAULT_WEBCAM_POSITION_X = 1;