lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-09-26 15:55:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix webcam preview styling defaults

Browse Source
This commit is contained in:
webadderall
2026-03-20 20:08:47 +11:00
parent 7431a2efc4
commit ea4f47ada3
4 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/SettingsPanel.tsx
+2 -2
View File
@@ -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}
<SliderControl label={tSettings("effects.webcamMargin", "Margin")} value={webcam?.margin ?? DEFAULT_WEBCAM_MARGIN} defaultValue={DEFAULT_WEBCAM_MARGIN} min={0} max={96} step={1} onChange={(v) => updateWebcam({ margin: v })} formatValue={(v) => `${Math.round(v)}px`} parseInput={(text) => parseFloat(text.replace(/px$/, ""))} />
<SliderControl label={tSettings("effects.webcamRoundness")} value={webcam?.cornerRadius ?? DEFAULT_WEBCAM_CORNER_RADIUS} defaultValue={DEFAULT_WEBCAM_CORNER_RADIUS} min={0} max={80} step={1} onChange={(v) => updateWebcam({ cornerRadius: v })} formatValue={(v) => `${Math.round(v)}px`} parseInput={(text) => parseFloat(text.replace(/px$/, ""))} />
<SliderControl label={tSettings("effects.webcamRoundness")} value={webcam?.cornerRadius ?? DEFAULT_WEBCAM_CORNER_RADIUS} defaultValue={DEFAULT_WEBCAM_CORNER_RADIUS} min={0} max={160} step={1} onChange={(v) => updateWebcam({ cornerRadius: v })} formatValue={(v) => `${Math.round(v)}px`} parseInput={(text) => parseFloat(text.replace(/px$/, ""))} />
<SliderControl label={tSettings("effects.webcamShadow")} value={webcam?.shadow ?? DEFAULT_WEBCAM_SHADOW} defaultValue={DEFAULT_WEBCAM_SHADOW} min={0} max={1} step={0.01} onChange={(v) => updateWebcam({ shadow: v })} formatValue={(v) => `${Math.round(v * 100)}%`} parseInput={(text) => parseFloat(text.replace(/%$/, "")) / 100} />
<div className="rounded-lg bg-white/[0.03] px-2.5 py-2">
<div className="flex items-center justify-between gap-2">
src/components/video-editor/VideoPlayback.tsx
+33 -19
View File
@@ -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<VideoPlaybackRef, VideoPlaybackProps>(
const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
const webcamBubbleRef = useRef<HTMLDivElement | null>(null);
const webcamBubbleInnerRef = useRef<HTMLDivElement | null>(null);
const currentTimeRef = useRef(0);
const zoomRegionsRef = useRef<ZoomRegion[]>([]);
const selectedZoomIdRef = useRef<string | null>(null);
@@ -268,8 +273,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
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<VideoPlaybackRef, VideoPlaybackProps>(
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<VideoPlaybackRef, VideoPlaybackProps>(
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<VideoPlaybackRef, VideoPlaybackProps>(
{webcam && webcamVideoPath ? (
<div
ref={webcamBubbleRef}
className="absolute overflow-hidden bg-black/80"
className="absolute"
style={{
display: webcam.enabled ? "block" : "none",
pointerEvents: "none",
}}
>
<video
ref={webcamVideoRef}
src={webcamVideoPath}
className="h-full w-full object-cover"
muted
playsInline
preload="auto"
style={{ transform: webcam.mirror ? "scaleX(-1)" : undefined }}
/>
<div
ref={webcamBubbleInnerRef}
className="h-full w-full overflow-hidden bg-black/80"
>
<video
ref={webcamVideoRef}
src={webcamVideoPath}
className="h-full w-full object-cover"
muted
playsInline
preload="auto"
style={{ transform: webcam.mirror ? "scaleX(-1)" : undefined }}
/>
</div>
</div>
) : null}
{(() => {
src/components/video-editor/projectPersistence.ts
+1 -1
View File
@@ -451,7 +451,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): 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,
src/components/video-editor/types.ts
+4 -4
View File
@@ -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;