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 (