Update
This commit is contained in:
@@ -2,6 +2,22 @@ import { FFmpeg } from '@ffmpeg/ffmpeg';
|
||||
import { fetchFile, toBlobURL } from '@ffmpeg/util';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
|
||||
// Font configuration mapping
|
||||
const FONT_CONFIG = {
|
||||
Montserrat: {
|
||||
normal: '/fonts/Montserrat/static/Montserrat-Regular.ttf',
|
||||
bold: '/fonts/Montserrat/static/Montserrat-Bold.ttf',
|
||||
italic: '/fonts/Montserrat/static/Montserrat-Italic.ttf',
|
||||
boldItalic: '/fonts/Montserrat/static/Montserrat-BoldItalic.ttf',
|
||||
},
|
||||
Arial: {
|
||||
normal: '/arial.ttf',
|
||||
bold: '/arial.ttf',
|
||||
italic: '/arial.ttf',
|
||||
boldItalic: '/arial.ttf',
|
||||
},
|
||||
};
|
||||
|
||||
const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
const [showConsoleLogs] = useState(false);
|
||||
|
||||
@@ -9,6 +25,25 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
const [exportProgress, setExportProgress] = useState(0);
|
||||
const [exportStatus, setExportStatus] = useState('');
|
||||
|
||||
// Helper function to get font file path based on font family and style
|
||||
const getFontFilePath = (fontFamily, fontWeight, fontStyle) => {
|
||||
const family = fontFamily || 'Arial';
|
||||
const config = FONT_CONFIG[family] || FONT_CONFIG.Arial;
|
||||
|
||||
const isBold = fontWeight === 'bold' || fontWeight === 700;
|
||||
const isItalic = fontStyle === 'italic';
|
||||
|
||||
if (isBold && isItalic) {
|
||||
return config.boldItalic;
|
||||
} else if (isBold) {
|
||||
return config.bold;
|
||||
} else if (isItalic) {
|
||||
return config.italic;
|
||||
} else {
|
||||
return config.normal;
|
||||
}
|
||||
};
|
||||
|
||||
const generateFFmpegCommand = useCallback(
|
||||
(is_string = true, useLocalFiles = false) => {
|
||||
showConsoleLogs && console.log('🎬 STARTING FFmpeg generation');
|
||||
@@ -19,6 +54,7 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
|
||||
showConsoleLogs && console.log('Videos found:', videos.length);
|
||||
showConsoleLogs && console.log('Images found:', images.length);
|
||||
showConsoleLogs && console.log('Texts found:', texts.length);
|
||||
|
||||
if (videos.length === 0 && images.length === 0) {
|
||||
if (is_string) {
|
||||
@@ -98,16 +134,20 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
|
||||
showConsoleLogs && console.log('🎵 Audio args:', audioArgs);
|
||||
|
||||
// Process text elements with centering
|
||||
// Process text elements with proper font support
|
||||
texts.forEach((t, i) => {
|
||||
const escapedText = t.text.replace(/'/g, is_string ? "\\'" : "'").replace(/:/g, '\\:');
|
||||
|
||||
// Get the appropriate font file path
|
||||
const fontFilePath = getFontFilePath(t.fontFamily, t.fontWeight, t.fontStyle);
|
||||
const fontFileName = fontFilePath.split('/').pop();
|
||||
|
||||
// Center the text: x position is the center point, y is adjusted for baseline
|
||||
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=/arial.ttf:text='${escapedText}':x=${centerX}:y=${centerY}:fontsize=${t.fontSize}:fontcolor=${t.fill}:borderw=${t.strokeWidth}:bordercolor=${
|
||||
`[${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}]`,
|
||||
);
|
||||
@@ -137,7 +177,6 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
|
||||
if (is_string) {
|
||||
let inputStrings = [];
|
||||
let inputIdx = 0;
|
||||
|
||||
videos.forEach((v, i) => {
|
||||
inputStrings.push(`-i "${useLocalFiles ? `input_video_${i}.webm` : v.source_webm}"`);
|
||||
@@ -209,12 +248,49 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
wasmURL: wasmBlobURL,
|
||||
});
|
||||
showConsoleLogs && console.log('FFmpeg loaded!');
|
||||
setExportProgress(20);
|
||||
setExportProgress(10);
|
||||
|
||||
setExportStatus('Loading font...');
|
||||
await ffmpeg.writeFile('arial.ttf', await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/arial.ttf'));
|
||||
showConsoleLogs && console.log('Font loaded!');
|
||||
setExportProgress(30);
|
||||
setExportStatus('Loading fonts...');
|
||||
|
||||
// Load all required fonts
|
||||
const fontsToLoad = new Set();
|
||||
|
||||
// Add Arial font (fallback)
|
||||
fontsToLoad.add('arial.ttf');
|
||||
|
||||
// Add fonts used by text elements
|
||||
timelineElements
|
||||
.filter((el) => el.type === 'text')
|
||||
.forEach((text) => {
|
||||
const fontFilePath = getFontFilePath(text.fontFamily, text.fontWeight, text.fontStyle);
|
||||
const fontFileName = fontFilePath.split('/').pop();
|
||||
fontsToLoad.add(fontFileName);
|
||||
});
|
||||
|
||||
// Load each unique font
|
||||
let fontProgress = 0;
|
||||
for (const fontFile of fontsToLoad) {
|
||||
try {
|
||||
if (fontFile === 'arial.ttf') {
|
||||
await ffmpeg.writeFile(
|
||||
'arial.ttf',
|
||||
await fetchFile('https://raw.githubusercontent.com/ffmpegwasm/testdata/master/arial.ttf'),
|
||||
);
|
||||
} else {
|
||||
// Load Montserrat fonts from local filesystem
|
||||
const fontPath = `/fonts/Montserrat/static/${fontFile}`;
|
||||
await ffmpeg.writeFile(fontFile, await fetchFile(fontPath));
|
||||
}
|
||||
fontProgress++;
|
||||
setExportProgress(10 + Math.round((fontProgress / fontsToLoad.size) * 10));
|
||||
} catch (error) {
|
||||
console.warn(`Failed to load font ${fontFile}, falling back to arial.ttf:`, error);
|
||||
// If font loading fails, we'll use arial.ttf as fallback
|
||||
}
|
||||
}
|
||||
|
||||
showConsoleLogs && console.log('Fonts loaded!');
|
||||
setExportProgress(20);
|
||||
|
||||
setExportStatus('Downloading media...');
|
||||
const videos = timelineElements.filter((el) => el.type === 'video');
|
||||
@@ -227,14 +303,14 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration }) => {
|
||||
for (let i = 0; i < videos.length; i++) {
|
||||
await ffmpeg.writeFile(`input_video_${i}.webm`, await fetchFile(videos[i].source_webm));
|
||||
mediaProgress++;
|
||||
setExportProgress(30 + Math.round((mediaProgress / totalMedia) * 30));
|
||||
setExportProgress(20 + Math.round((mediaProgress / totalMedia) * 40));
|
||||
}
|
||||
|
||||
// Download images
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
await ffmpeg.writeFile(`input_image_${i}.jpg`, await fetchFile(images[i].source));
|
||||
mediaProgress++;
|
||||
setExportProgress(30 + Math.round((mediaProgress / totalMedia) * 30));
|
||||
setExportProgress(20 + Math.round((mediaProgress / totalMedia) * 40));
|
||||
}
|
||||
|
||||
setExportStatus('Processing video...');
|
||||
|
||||
Reference in New Issue
Block a user