charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-06-17 20:50:27 +08:00
parent 090182247f
commit 933e12d7fb
6 changed files with 192 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
View File

@@ -60,7 +60,9 @@ const sampleTimelineElements = [
x: 50,
y: 600,
fontSize: 24,
fontWeight: 'bold', // ADD THIS LINE
fontWeight: 'bold',
fontFamily: 'Montserrat',
fontStyle: 'normal',
fill: 'white',
stroke: 'black',
strokeWidth: 1,
@@ -76,7 +78,9 @@ const sampleTimelineElements = [
x: 50,
y: 650,
fontSize: 20,
fontWeight: 'bold', // ADD THIS LINE
fontWeight: 'bold',
fontFamily: 'Montserrat',
fontStyle: 'normal',
fill: 'yellow',
stroke: 'red',
strokeWidth: 2,

4
resources/js/modules/editor/partials/canvas/video-editor.jsx
View File

@@ -70,7 +70,7 @@ const VideoEditor = ({ width, height }) => {
});
};
// NEW: Handle element transformations (position, scale, rotation)
// Handle element transformations (position, scale, rotation) and text properties
const handleElementUpdate = useCallback(
(elementId, updates) => {
setTimelineElements((prev) =>
@@ -553,7 +553,7 @@ const VideoEditor = ({ width, height }) => {
handleSeek={handleSeek}
copyFFmpegCommand={copyFFmpegCommand}
exportVideo={exportVideo}
onElementUpdate={handleElementUpdate} // NEW: Pass the update handler
onElementUpdate={handleElementUpdate}
layerRef={layerRef}
/>
</div>

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

@@ -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...');

20
resources/js/modules/editor/partials/canvas/video-preview.jsx
View File

@@ -71,6 +71,22 @@ const VideoPreview = ({
return null;
};
// Helper function to get font style for text elements
const getTextFontStyle = (element) => {
const isBold = element.fontWeight === 'bold' || element.fontWeight === 700;
const isItalic = element.fontStyle === 'italic';
if (isBold && isItalic) {
return 'bold italic';
} else if (isBold) {
return 'bold';
} else if (isItalic) {
return 'italic';
} else {
return 'normal';
}
};
// Check if element uses center-offset positioning
const usesCenterPositioning = (elementType) => {
return elementType === 'video' || elementType === 'image';
@@ -445,8 +461,8 @@ const VideoPreview = ({
x={element.x}
y={element.y}
fontSize={element.fontSize}
fontStyle={element.fontWeight === 'bold' || element.fontWeight === 700 ? 'bold' : 'normal'} // ADD THIS LINE
fontFamily="Arial"
fontStyle={getTextFontStyle(element)}
fontFamily={element.fontFamily || 'Arial'}
fill={element.fill}
stroke={element.stroke}
strokeWidth={element.strokeWidth}