diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx index 6ae4d04..89603d7 100644 --- a/src/components/video-editor/SettingsPanel.tsx +++ b/src/components/video-editor/SettingsPanel.tsx @@ -7,7 +7,7 @@ export default function SettingsPanel({ selected, onWallpaperChange }: { selecte return (
-
Choose Background
+
Choose Background
{WALLPAPER_PATHS.map((path, idx) => (
(({ }, ref) => { const videoRef = useRef(null); const canvasRef = useRef(null); + const drawFrameRef = useRef<(() => void) | null>(null); useImperativeHandle(ref, () => ({ video: videoRef.current, @@ -45,9 +46,30 @@ const VideoPlayback = forwardRef(({ const ctx = canvas.getContext('2d'); if (ctx) { ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Apply rounded rectangle clipping path with consistent radius + const radius = Math.min(canvas.width, canvas.height) * 0.02; + ctx.save(); + ctx.beginPath(); + ctx.moveTo(radius, 0); + ctx.lineTo(canvas.width - radius, 0); + ctx.quadraticCurveTo(canvas.width, 0, canvas.width, radius); + ctx.lineTo(canvas.width, canvas.height - radius); + ctx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height); + ctx.lineTo(radius, canvas.height); + ctx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius); + ctx.lineTo(0, radius); + ctx.quadraticCurveTo(0, 0, radius, 0); + ctx.closePath(); + ctx.clip(); + ctx.drawImage(video, 0, 0, canvas.width, canvas.height); + ctx.restore(); } } + + // Store drawFrame in a ref so handleLoadedMetadata can use it + drawFrameRef.current = drawFrame; function drawFrameLoop() { if (!video || !canvas || video.paused || video.ended) return; drawFrame(); @@ -76,19 +98,11 @@ const VideoPlayback = forwardRef(({ onDurationChange(e.currentTarget.duration); // Draw first frame const video = videoRef.current; - const canvas = canvasRef.current; - if (video && canvas) { + if (video) { video.currentTime = 0; const drawFirstFrame = () => { - if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) { - canvas.width = video.videoWidth; - canvas.height = video.videoHeight; - } - const ctx = canvas.getContext('2d'); - if (ctx) { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - } + // Use the shared drawFrame function from the ref + drawFrameRef.current?.(); video.removeEventListener('seeked', drawFirstFrame); }; video.addEventListener('seeked', drawFirstFrame); @@ -100,7 +114,7 @@ const VideoPlayback = forwardRef(({ return (
(({