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-18 14:08:56 +08:00
parent 60236af762
commit f1dcbfe57f
3 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,7 +78,7 @@ const VideoEditor = ({ width, height, onOpenTextSidebar }) => {
currentCaption: currentCaption || 'Default caption text',
};
const generatedTimeline = generateTimelineFromTemplate(SINGLE_CAPTION_TEMPLATE, mediaStoreData);
const generatedTimeline = generateTimelineFromTemplate(dimensions, SINGLE_CAPTION_TEMPLATE, mediaStoreData);
if (generatedTimeline.length > 0) {
cleanupVideos(videoElements);

8
resources/js/modules/editor/templates/single_caption_meme_background.json
View File

@@ -19,8 +19,8 @@
"duration": 6,
"x": 0,
"y": 0,
"asset_width": 720,
"asset_height": 720,
"media_width": 720,
"media_height": 720,
"width": 720,
"height": 1280,
"rotation": 0
@@ -38,8 +38,8 @@
"duration": 6,
"x": 0,
"y": 0,
"asset_width": 720,
"asset_height": 1280,
"media_width": 720,
"media_height": 1280,
"width": 720,
"height": 1280,
"rotation": 0

32
resources/js/modules/editor/utils/timeline-template-processor.js
View File

@@ -1,6 +1,6 @@
// utils/timeline-template-processor.js
export const generateTimelineFromTemplate = (template, mediaStoreData) => {
export const generateTimelineFromTemplate = (dimensions, template, mediaStoreData) => {
const { selectedMeme, selectedBackground, currentCaption } = mediaStoreData;
// If no selections, return empty timeline
@@ -28,6 +28,32 @@ export const generateTimelineFromTemplate = (template, mediaStoreData) => {
if (selectedBackground) {
processedElement.source = selectedBackground.media_url;
processedElement.name = selectedBackground.prompt || 'Background';
processedElement.media_width = selectedBackground.media_width;
processedElement.media_height = selectedBackground.media_height;
const canvasWidth = dimensions.width;
const canvasHeight = dimensions.height;
// Calculate scale factors to fit media within canvas while maintaining aspect ratio
const scaleX = canvasWidth / selectedBackground.media_width;
const scaleY = canvasHeight / selectedBackground.media_height;
// Use the larger scale factor to ensure the media fills the entire canvas
const scale = Math.max(scaleX, scaleY);
// Calculate final dimensions
const scaledWidth = selectedBackground.media_width * scale;
const scaledHeight = selectedBackground.media_height * scale;
// Center the scaled media within the canvas
const offsetX = (canvasWidth - scaledWidth) / 2;
const offsetY = (canvasHeight - scaledHeight) / 2;
// Set the processed element properties
processedElement.width = scaledWidth;
processedElement.height = scaledHeight;
processedElement.x = offsetX;
processedElement.y = offsetY;
} else {
return null; // Skip if no background selected
}
@@ -39,6 +65,10 @@ export const generateTimelineFromTemplate = (template, mediaStoreData) => {
processedElement.source_mov = selectedMeme.mov_url;
processedElement.poster = selectedMeme.webp_url;
processedElement.name = selectedMeme.name;
processedElement.media_width = selectedMeme.media_width;
processedElement.media_height = selectedMeme.media_height;
processedElement.width = selectedMeme.media_width;
processedElement.height = selectedMeme.media_height;
} else {
return null; // Skip if no meme selected
}