From 471e7e1cd456b8cfad699480a56d180d23ca1cb7 Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Mon, 16 Jun 2025 13:52:41 +0800
Subject: [PATCH] Revert "Update"

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

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