Update

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

@@ -44,6 +44,25 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
         }
     };
 
+    // Helper function to convert color format for FFmpeg
+    const formatColorForFFmpeg = (color) => {
+        // Handle hex colors (e.g., #ffffff or #fff)
+        if (color && color.startsWith('#')) {
+            // Remove the # and ensure it's 6 characters
+            let hex = color.slice(1);
+            if (hex.length === 3) {
+                // Convert short hex to full hex (e.g., fff -> ffffff)
+                hex = hex
+                    .split('')
+                    .map((char) => char + char)
+                    .join('');
+            }
+            return `0x${hex}`;
+        }
+        // Handle named colors or other formats - fallback to original
+        return color || '0xffffff';
+    };
+
     const generateFFmpegCommand = useCallback(
         (is_string = true, useLocalFiles = false) => {
             showConsoleLogs && console.log('🎬 STARTING FFmpeg generation');
@@ -134,7 +153,7 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
 
             showConsoleLogs && console.log('🎵 Audio args:', audioArgs);
 
-            // Process text elements with proper font support
+            // Process text elements with proper font support and color handling
             texts.forEach((t, i) => {
                 const escapedText = t.text.replace(/'/g, is_string ? "\\'" : "'").replace(/:/g, '\\:');
 
@@ -146,11 +165,22 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
                 const centerX = Math.round(t.x);
                 const centerY = Math.round(t.y + t.fontSize * 0.3); // Adjust for text baseline
 
-                filters.push(
-                    `[${videoLayer}]drawtext=fontfile=/${fontFileName}:text='${escapedText}':x=${centerX}:y=${centerY}:fontsize=${t.fontSize}:fontcolor=${t.fill}:borderw=${t.strokeWidth}:bordercolor=${
-                        t.stroke
-                    }:text_align=center:enable='between(t,${t.startTime},${t.startTime + t.duration})'[t${i}]`,
-                );
+                // Format colors for FFmpeg
+                const fontColor = formatColorForFFmpeg(t.fill);
+                const borderColor = formatColorForFFmpeg(t.stroke);
+                const borderWidth = Math.max(0, t.strokeWidth || 0); // Ensure non-negative
+
+                // Build drawtext filter with proper border handling
+                let drawTextFilter = `[${videoLayer}]drawtext=fontfile=/${fontFileName}:text='${escapedText}':x=${centerX}:y=${centerY}:fontsize=${t.fontSize}:fontcolor=${fontColor}`;
+
+                // Only add border if strokeWidth > 0
+                if (borderWidth > 0) {
+                    drawTextFilter += `:borderw=${borderWidth}:bordercolor=${borderColor}`;
+                }
+
+                drawTextFilter += `:text_align=center:enable='between(t,${t.startTime},${t.startTime + t.duration})'[t${i}]`;
+
+                filters.push(drawTextFilter);
                 videoLayer = `t${i}`;
             });