Update

resources/js/modules/editor/partials/canvas/video-editor.jsx

@@ -72,8 +72,87 @@ const VideoEditor = ({ width, height }) => {
             showConsoleLogs && console.log('Loaded sample timeline');
 
             setupVideos();
+            setupImages(); // Add image setup
         });
     };
+
+    // ✅ NEW: Setup function for image elements
+    const setupImages = () => {
+        showConsoleLogs && console.log('setupImages');
+
+        const elements = timelineElementsRef.current;
+
+        if (elements.length === 0) {
+            console.log('No timeline elements to setup images for');
+            return;
+        }
+
+        const imageElementsData = elements.filter((el) => el.type === 'image');
+        console.log('Found', imageElementsData.length, 'image elements');
+
+        imageElementsData.forEach((element) => {
+            console.log('Creating image element for:', element.id);
+
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.src = element.source;
+
+            img.onload = () => {
+                console.log('Image loaded for:', element.id);
+
+                const maxWidth = dimensions.width;
+                const maxHeight = dimensions.height;
+                const imgWidth = img.naturalWidth;
+                const imgHeight = img.naturalHeight;
+
+                let scaledWidth = imgWidth;
+                let scaledHeight = imgHeight;
+
+                // Scale down if image is larger than canvas
+                if (imgWidth > maxWidth || imgHeight > maxHeight) {
+                    const scaleX = maxWidth / imgWidth;
+                    const scaleY = maxHeight / imgHeight;
+                    const scale = Math.min(scaleX, scaleY);
+
+                    scaledWidth = imgWidth * scale;
+                    scaledHeight = imgHeight * scale;
+                }
+
+                // Use provided position or center the image
+                const centeredX = element.x || (maxWidth - scaledWidth) / 2;
+                const centeredY = element.y || (maxHeight - scaledHeight) / 2;
+
+                setTimelineElements((prev) =>
+                    prev.map((el) => {
+                        if (el.id === element.id && el.type === 'image') {
+                            return {
+                                ...el,
+                                x: centeredX,
+                                y: centeredY,
+                                width: element.width || scaledWidth,
+                                height: element.height || scaledHeight,
+                                imageElement: img,
+                                isImageReady: true,
+                            };
+                        }
+                        return el;
+                    }),
+                );
+
+                setLoadedVideos((prev) => {
+                    const newSet = new Set(prev);
+                    newSet.add(element.id);
+                    console.log('Image loaded:', element.id, 'Total loaded:', newSet.size);
+                    return newSet;
+                });
+            };
+
+            img.onerror = (e) => {
+                console.error(`Error loading image ${element.id}:`, e);
+            };
+        });
+    };
+
     // ✅ FIX 3: Auto-update status when videos load
     useEffect(() => {
         setupVideoStatus();
@@ -232,11 +311,12 @@ const VideoEditor = ({ width, height }) => {
     };
 
     const setupVideoStatus = () => {
-        const videoCount = timelineElements.filter((el) => el.type === 'video').length;
-        if (loadedVideos.size === videoCount && videoCount > 0) {
+        // Update to count both videos and images
+        const mediaCount = timelineElements.filter((el) => el.type === 'video' || el.type === 'image').length;
+        if (loadedVideos.size === mediaCount && mediaCount > 0) {
             setStatus('Ready to play');
-        } else if (videoCount > 0) {
-            setStatus(`Loading videos... (${loadedVideos.size}/${videoCount})`);
+        } else if (mediaCount > 0) {
+            setStatus(`Loading media... (${loadedVideos.size}/${mediaCount})`);
         } else {
             setStatus('Ready to play');
         }