From 1282400372286723eab007de6e9a066690118800 Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Mon, 16 Jun 2025 13:48:44 +0800
Subject: [PATCH] Update

---
 .../editor/partials/canvas/video-editor.jsx   | 64 ++++++++++++-------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/resources/js/modules/editor/partials/canvas/video-editor.jsx b/resources/js/modules/editor/partials/canvas/video-editor.jsx
index 4f58596..6f6aefb 100644
--- a/resources/js/modules/editor/partials/canvas/video-editor.jsx
+++ b/resources/js/modules/editor/partials/canvas/video-editor.jsx
@@ -197,35 +197,51 @@ const VideoEditor = ({ width, height }) => {
             posterImg.onload = () => {
                 console.log('Poster loaded for:', element.id);
 
-                const maxWidth = dimensions.width;
-                const maxHeight = dimensions.height;
-                const posterWidth = posterImg.naturalWidth;
-                const posterHeight = posterImg.naturalHeight;
+                const canvasWidth = dimensions.width;
+                const canvasHeight = dimensions.height;
+                const imageWidth = posterImg.naturalWidth;
+                const imageHeight = posterImg.naturalHeight;
 
-                let scaledWidth = posterWidth;
-                let scaledHeight = posterHeight;
+                // Calculate aspect ratios
+                const canvasAspect = canvasWidth / canvasHeight;
+                const imageAspect = imageWidth / imageHeight;
 
-                if (posterWidth > maxWidth || posterHeight > maxHeight) {
-                    const scaleX = maxWidth / posterWidth;
-                    const scaleY = maxHeight / posterHeight;
-                    const scale = Math.min(scaleX, scaleY);
+                let scaledWidth, scaledHeight, centeredX, centeredY;
 
-                    scaledWidth = posterWidth * scale;
-                    scaledHeight = posterHeight * scale;
-                }
-
-                // ✅ UPDATED: Different positioning for background vs meme
-                let centeredX, centeredY;
                 if (element.id.startsWith('bg_')) {
-                    // Background should fill the canvas
-                    centeredX = 0;
-                    centeredY = 0;
-                    scaledWidth = maxWidth;
-                    scaledHeight = maxHeight;
+                    // Background: Cover behavior - fill entire canvas, crop if needed
+                    if (imageAspect > canvasAspect) {
+                        // Image is wider than canvas - fit height, crop width
+                        scaledHeight = canvasHeight;
+                        scaledWidth = scaledHeight * imageAspect;
+                        centeredX = (canvasWidth - scaledWidth) / 2; // Center horizontally
+                        centeredY = 0;
+                    } else {
+                        // Image is taller than canvas - fit width, crop height
+                        scaledWidth = canvasWidth;
+                        scaledHeight = scaledWidth / imageAspect;
+                        centeredX = 0;
+                        centeredY = (canvasHeight - scaledHeight) / 2; // Center vertically
+                    }
                 } else {
-                    // Meme should be centered
-                    centeredX = (maxWidth - scaledWidth) / 2;
-                    centeredY = (maxHeight - scaledHeight) / 2;
+                    // Meme overlay: Cover behavior but with some padding/sizing
+                    const memeMaxWidth = canvasWidth; // 80% of canvas width
+                    const memeMaxHeight = canvasHeight; // 80% of canvas height
+                    const memeAspect = memeMaxWidth / memeMaxHeight;
+
+                    if (imageAspect > memeAspect) {
+                        // Image is wider - fit height, crop width
+                        scaledHeight = memeMaxHeight;
+                        scaledWidth = scaledHeight * imageAspect;
+                    } else {
+                        // Image is taller - fit width, crop height
+                        scaledWidth = memeMaxWidth;
+                        scaledHeight = scaledWidth / imageAspect;
+                    }
+
+                    // Center the meme on canvas
+                    centeredX = (canvasWidth - scaledWidth) / 2;
+                    centeredY = (canvasHeight - scaledHeight) / 2;
                 }
 
                 setTimelineElements((prev) =>