Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-11 17:26:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement FastAPI service for video processing with TTS, synchronized subtitles, and stabilization.

Browse Source
This commit is contained in:
Michael committed 2026-03-03 12:08:28 +01:00
1 parent 4e189e7797
commit b4e48a1f0e
4 files changed
+314 -216
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/calendar-view.tsx
+182 -178
View File
@@ -18,7 +18,7 @@ export default function CalendarView() {
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [selectedPost, setSelectedPost] = useState<any>(null);
const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[]; generationStatus?: string; generationProgress?: number }>({ postText: '', mediaIds: [], allMedia: [] });
const { toast } = useToast();
const isDesktop = useMediaQuery("(min-width: 768px)");
@@ -28,7 +28,7 @@ export default function CalendarView() {
});
const deletePostMutation = useMutation({
mutationFn: (postId: string) =>
mutationFn: (postId: string) =>
apiRequest('DELETE', `/api/scheduled-posts/${postId}`, {}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['/api/scheduled-posts'] });
@@ -61,26 +61,28 @@ export default function CalendarView() {
const handlePreviewPost = async (scheduledPost: any, e?: React.MouseEvent) => {
if (e) e.stopPropagation();
try {
const response = await fetch(`/api/posts/${scheduledPost.postId}`, {
credentials: "include",
});
if (!response.ok) {
throw new Error("Failed to fetch post");
}
const postWithMedia = await response.json();
const mediaIds = postWithMedia.media?.map((m: Media) => m.id) || [];
const allMedia = postWithMedia.media || [];
setPreviewData({
postText: postWithMedia.post.content || '',
mediaIds: mediaIds,
allMedia: allMedia,
generationStatus: postWithMedia.post.generationStatus,
generationProgress: postWithMedia.post.generationProgress,
});
setPreviewModalOpen(true);
} catch (error) {
toast({
@@ -111,11 +113,11 @@ export default function CalendarView() {
return (scheduledPosts || []).filter(post => {
if (!post.scheduledAt) return false;
const postDate = new Date(post.scheduledAt);
// Compare using local date components to avoid timezone issues
return postDate.getFullYear() === date.getFullYear() &&
postDate.getMonth() === date.getMonth() &&
postDate.getDate() === date.getDate();
postDate.getMonth() === date.getMonth() &&
postDate.getDate() === date.getDate();
});
};
@@ -181,9 +183,9 @@ export default function CalendarView() {
</div>
</div>
<div className="flex items-center gap-3">
<Button
variant="outline"
size="sm"
<Button
variant="outline"
size="sm"
onClick={goToPreviousMonth}
className="rounded-xl"
data-testid="button-prev-month"
@@ -194,9 +196,9 @@ export default function CalendarView() {
<span className="text-sm font-semibold text-foreground min-w-[140px] text-center px-4 py-2 bg-muted/30 rounded-xl">
{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
</span>
<Button
variant="outline"
size="sm"
<Button
variant="outline"
size="sm"
onClick={goToNextMonth}
className="rounded-xl"
data-testid="button-next-month"
@@ -219,192 +221,192 @@ export default function CalendarView() {
</div>
<div className="grid grid-cols-7 gap-2">
{days.map((day, index) => (
<div
key={index}
className={`
{days.map((day, index) => (
<div
key={index}
className={`
bg-card border border-border/50 rounded-xl p-4 min-h-[140px] transition-all hover:shadow-md
${isToday(day.date) ? "ring-2 ring-primary shadow-lg" : ""}
${!day.isCurrentMonth ? "opacity-40" : ""}
`}
data-testid={`calendar-day-${index}`}
>
<div className="flex items-center justify-between mb-3">
<span
className={`
data-testid={`calendar-day-${index}`}
>
<div className="flex items-center justify-between mb-3">
<span
className={`
text-sm font-semibold
${!day.isCurrentMonth ? "text-muted-foreground" : "text-foreground"}
${isToday(day.date) ? "text-primary" : ""}
`}
>
{day.date.getDate()}
</span>
{isToday(day.date) && (
<span className="text-[10px] bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded-full font-semibold">
Aujourd'hui
>
{day.date.getDate()}
</span>
)}
</div>
{(() => {
if (!day.isCurrentMonth) return null;
const postsForDay = getPostsForDate(day.date);
if (postsForDay.length === 0) return null;
return (
<div className="space-y-2">
{postsForDay.slice(0, 2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
{isToday(day.date) && (
<span className="text-[10px] bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded-full font-semibold">
Aujourd'hui
</span>
)}
</div>
{(() => {
if (!day.isCurrentMonth) return null;
const postsForDay = getPostsForDate(day.date);
if (postsForDay.length === 0) return null;
return (
<div className="space-y-2">
{postsForDay.slice(0, 2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
px-3 py-2 rounded-lg text-xs transition-all font-medium shadow-sm group relative
${isPending ? 'bg-blue-500/20 text-blue-600 hover:bg-blue-500/30' : ''}
${isPublished ? 'bg-green-500/20 text-green-600 hover:bg-green-500/30' : ''}
`}
data-testid={`calendar-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
data-testid={`calendar-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
</div>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
</div>
);
})}
{postsForDay.length > 2 && (
<Popover>
<PopoverTrigger asChild>
<button
className="w-full text-left text-[11px] text-primary hover:text-primary/80 pl-2 font-medium transition-colors flex items-center gap-1"
data-testid="button-show-more-posts"
>
<MoreHorizontal className="w-3 h-3" />
+{postsForDay.length - 2} autre(s)
</button>
</PopoverTrigger>
<PopoverContent className="w-80 p-3" align="start">
<div className="space-y-2">
<h4 className="font-semibold text-sm mb-3">
Tous les posts du {day.date.getDate()} {monthNames[day.date.getMonth()]}
</h4>
{postsForDay.slice(2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
);
})}
{postsForDay.length > 2 && (
<Popover>
<PopoverTrigger asChild>
<button
className="w-full text-left text-[11px] text-primary hover:text-primary/80 pl-2 font-medium transition-colors flex items-center gap-1"
data-testid="button-show-more-posts"
>
<MoreHorizontal className="w-3 h-3" />
+{postsForDay.length - 2} autre(s)
</button>
</PopoverTrigger>
<PopoverContent className="w-80 p-3" align="start">
<div className="space-y-2">
<h4 className="font-semibold text-sm mb-3">
Tous les posts du {day.date.getDate()} {monthNames[day.date.getMonth()]}
</h4>
{postsForDay.slice(2).map((post: any, idx) => {
const time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return (
<div
key={idx}
className={`
px-3 py-2 rounded-lg text-xs transition-all font-medium shadow-sm group relative
${isPending ? 'bg-blue-500/20 text-blue-600 hover:bg-blue-500/30' : ''}
${isPublished ? 'bg-green-500/20 text-green-600 hover:bg-green-500/30' : ''}
`}
data-testid={`popover-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
data-testid={`popover-post-${post.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)}
<span>{time}</span>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
</div>
</div>
<div className="flex items-center gap-1 truncate opacity-90">
<PlatformIcon className="w-3 h-3 flex-shrink-0" />
<span className="truncate">{pageName}</span>
<div className="flex gap-1">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-popover-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-popover-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-popover-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
<div className="flex gap-1">
<button
onClick={(e) => handlePreviewPost(post, e)}
className={`p-1 rounded ${isPending ? 'hover:bg-blue-500/20' : 'hover:bg-green-500/20'}`}
data-testid={`button-preview-popover-post-${post.id}`}
title="Prévisualiser"
>
<Eye className={`w-3 h-3 ${isPending ? 'text-blue-500' : 'text-green-500'}`} />
</button>
{isPending && (
<>
<button
onClick={(e) => handleEditPost(post, e)}
className="p-1 hover:bg-blue-500/20 rounded"
data-testid={`button-edit-popover-post-${post.id}`}
title="Modifier"
>
<Edit className="w-3 h-3 text-blue-500" />
</button>
<button
onClick={(e) => handleDeletePost(post.id, e)}
className="p-1 hover:bg-red-500/20 rounded"
data-testid={`button-delete-popover-post-${post.id}`}
title="Supprimer"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</>
)}
</div>
</div>
</div>
);
})}
</div>
</PopoverContent>
</Popover>
)}
</div>
);
})()}
</div>
))}
</div>
);
})}
</div>
</PopoverContent>
</Popover>
)}
</div>
);
})()}
</div>
))}
</div>
<div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
<div className="flex items-center gap-3">
@@ -438,9 +440,11 @@ export default function CalendarView() {
postText={previewData.postText}
selectedMedia={previewData.mediaIds}
mediaList={previewData.allMedia}
onPublish={() => {}}
onPublish={() => { }}
isPublishing={false}
readOnly={true}
generationStatus={previewData.generationStatus}
generationProgress={previewData.generationProgress}
/>
</div>
);
client/src/components/preview-modal.tsx
+89 -32
View File
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { ChevronLeft, ChevronRight, Send, Facebook, Instagram, Heart, MessageCircle, Share2, Bookmark } from 'lucide-react';
import { ChevronLeft, ChevronRight, Send, Facebook, Instagram, Heart, MessageCircle, Share2, Bookmark, Loader2, Video } from 'lucide-react';
import type { Media } from '@shared/schema';
import { removeHashtags } from '@shared/emoji';
import { EmojiText } from '@/components/emoji-text';
@@ -16,6 +16,8 @@ interface PreviewModalProps {
onPublish: () => void;
isPublishing: boolean;
readOnly?: boolean;
generationStatus?: string;
generationProgress?: number;
}
type PreviewFormat = 'facebook-feed' | 'facebook-story' | 'instagram-feed' | 'instagram-story';
@@ -28,7 +30,9 @@ export function PreviewModal({
mediaList,
onPublish,
isPublishing,
readOnly = false
readOnly = false,
generationStatus,
generationProgress
}: PreviewModalProps) {
const [previewFormat, setPreviewFormat] = useState<PreviewFormat>('facebook-feed');
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
@@ -68,7 +72,7 @@ export function PreviewModal({
const renderMedia = (media: Media, className: string = "w-full h-auto") => {
const url = getMediaUrl(media);
if (media.type === 'video') {
return (
<video
@@ -80,7 +84,7 @@ export function PreviewModal({
/>
);
}
return (
<img
src={url}
@@ -110,6 +114,25 @@ export function PreviewModal({
</div>
)}
{/* Is Generating Status Overlay */}
{orderedMedia.length === 0 && (generationStatus === 'processing' || generationStatus === 'pending') && (
<div className="relative bg-black aspect-video flex flex-col items-center justify-center text-white">
<Loader2 className="w-10 h-10 animate-spin text-primary mb-4" />
<h3 className="text-lg font-semibold">Génération vidéo en cours...</h3>
<p className="text-sm text-gray-300 mt-2 text-center px-4">
FFmpeg assemble votre vidéo. <br /> Elle s'affichera ici une fois terminée.
</p>
{generationProgress !== undefined && (
<div className="w-64 h-2 bg-gray-800 rounded-full mt-4 overflow-hidden">
<div
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${generationProgress}%` }}
/>
</div>
)}
</div>
)}
{/* Media Carousel */}
{orderedMedia.length > 0 && (
<div className="relative bg-black">
@@ -135,9 +158,8 @@ export function PreviewModal({
<button
key={idx}
onClick={() => goToPhoto(idx)}
className={`w-2 h-2 rounded-full transition-colors ${
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
className={`w-2 h-2 rounded-full transition-colors ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
data-testid={`button-photo-indicator-${idx}`}
/>
))}
@@ -168,6 +190,23 @@ export function PreviewModal({
</div>
</div>
{/* Is Generating Status Overlay */}
{orderedMedia.length === 0 && (generationStatus === 'processing' || generationStatus === 'pending') && (
<div className="relative bg-black aspect-square flex flex-col items-center justify-center text-white">
<Loader2 className="w-10 h-10 animate-spin text-primary mb-4" />
<h3 className="text-lg font-semibold">Génération en cours...</h3>
<p className="text-sm text-gray-300 mt-2">Veuillez patienter.</p>
{generationProgress !== undefined && (
<div className="w-48 h-2 bg-gray-800 rounded-full mt-4 overflow-hidden">
<div
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${generationProgress}%` }}
/>
</div>
)}
</div>
)}
{/* Media Carousel */}
{orderedMedia.length > 0 && (
<div className="relative bg-black aspect-square">
@@ -193,9 +232,8 @@ export function PreviewModal({
<button
key={idx}
onClick={() => goToPhoto(idx)}
className={`h-1 flex-1 transition-colors rounded ${
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
className={`h-1 flex-1 transition-colors rounded ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
style={{ width: '40px' }}
data-testid={`button-photo-indicator-${idx}`}
/>
@@ -239,12 +277,12 @@ export function PreviewModal({
for (const word of words) {
const testLine = currentLine ? `${currentLine} ${word}` : word;
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && currentLine) {
// Current line would exceed width, push it and start new line
lines.push(currentLine);
currentLine = word;
// Check if the word itself is too long for a single line
const wordMetrics = ctx.measureText(word);
if (wordMetrics.width > maxWidth) {
@@ -266,7 +304,7 @@ export function PreviewModal({
currentLine = testLine;
}
}
if (currentLine) {
lines.push(currentLine);
}
@@ -280,12 +318,12 @@ export function PreviewModal({
const breakLongWord = (ctx: CanvasRenderingContext2D, word: string, maxWidth: number): string[] => {
const chunks: string[] = [];
let currentChunk = '';
for (let i = 0; i < word.length; i++) {
const char = word[i];
const testChunk = currentChunk + char;
const metrics = ctx.measureText(testChunk);
if (metrics.width > maxWidth && currentChunk) {
chunks.push(currentChunk);
currentChunk = char;
@@ -293,11 +331,11 @@ export function PreviewModal({
currentChunk = testChunk;
}
}
if (currentChunk) {
chunks.push(currentChunk);
}
return chunks.length > 0 ? chunks : [word];
};
@@ -305,31 +343,31 @@ export function PreviewModal({
const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 72;
const LINE_HEIGHT_MULTIPLIER = 1.2;
let fontSize = MAX_FONT_SIZE;
let lines: string[] = [];
let totalTextHeight = 0;
while (fontSize >= MIN_FONT_SIZE) {
lines = wrapText(text, containerWidth, fontSize);
const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
totalTextHeight = lines.length * lineHeight;
if (totalTextHeight <= containerHeight) {
break;
}
fontSize -= 2;
}
let isTruncated = false;
if (fontSize < MIN_FONT_SIZE) {
fontSize = MIN_FONT_SIZE;
lines = wrapText(text, containerWidth, fontSize);
const lineHeight = fontSize * LINE_HEIGHT_MULTIPLIER;
totalTextHeight = lines.length * lineHeight;
const maxLines = Math.floor(containerHeight / lineHeight);
if (lines.length > maxLines) {
lines = lines.slice(0, maxLines);
@@ -348,12 +386,12 @@ export function PreviewModal({
const STORY_HEIGHT = 640;
const TEXT_BOX_HEIGHT_RATIO = 0.25;
const PADDING = 16;
const textBoxHeight = STORY_HEIGHT * TEXT_BOX_HEIGHT_RATIO;
const maxTextWidth = STORY_WIDTH - (PADDING * 2);
const maxTextHeight = textBoxHeight - (PADDING * 2);
const { fontSize, lines } = postText
const { fontSize, lines } = postText
? calculateAdaptiveFontSize(postText, maxTextWidth, maxTextHeight)
: { fontSize: 24, lines: [] };
@@ -375,6 +413,26 @@ export function PreviewModal({
</div>
</div>
{/* Is Generating Status Overlay */}
{orderedMedia.length === 0 && (generationStatus === 'processing' || generationStatus === 'pending') && (
<div className="relative w-full h-full flex flex-col items-center justify-center text-white bg-black">
<Loader2 className="w-12 h-12 animate-spin text-primary mb-6" />
<h3 className="text-2xl font-semibold px-8 text-center drop-shadow-md">Création de votre Reel...</h3>
<p className="text-base text-gray-300 mt-4 text-center px-10 drop-shadow-md">
Montage vidéo en cours via FFmpeg. Le résultat apparaîtra ici lorsqu'il sera prêt (environ 1-2 min).
</p>
{generationProgress !== undefined && (
<div className="w-64 h-3 bg-gray-800 rounded-full mt-8 overflow-hidden shadow-inner">
<div
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${generationProgress}%` }}
/>
</div>
)}
<div className="mt-2 text-primary font-medium">{generationProgress || 0}%</div>
</div>
)}
{/* Media */}
{orderedMedia.length > 0 && (
<div className="relative w-full h-full">
@@ -386,9 +444,8 @@ export function PreviewModal({
<button
key={idx}
onClick={() => goToPhoto(idx)}
className={`h-1 flex-1 transition-colors rounded-full ${
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
className={`h-1 flex-1 transition-colors rounded-full ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
}`}
data-testid={`button-photo-indicator-${idx}`}
/>
))}
@@ -409,17 +466,17 @@ export function PreviewModal({
</button>
</>
)}
{/* Text overlay box - matching exact server rendering */}
{postText && (
<div
<div
className="absolute bottom-0 left-0 right-0 flex items-center justify-center z-10"
style={{ height: `${TEXT_BOX_HEIGHT_RATIO * 100}%` }}
>
<div className="absolute inset-0 bg-black/60" />
<div
<div
className="relative text-white text-center font-bold leading-tight"
style={{
style={{
fontSize: `${fontSize}px`,
padding: `${PADDING}px`,
lineHeight: '1.2'
client/src/pages/history.tsx
+5 -1
View File
@@ -20,7 +20,7 @@ type ScheduledPostWithRelations = ScheduledPost & {
export default function History() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[] }>({ postText: '', mediaIds: [], allMedia: [] });
const [previewData, setPreviewData] = useState<{ postText: string; mediaIds: string[]; allMedia: Media[]; generationStatus?: string; generationProgress?: number }>({ postText: '', mediaIds: [], allMedia: [] });
const { toast } = useToast();
const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
@@ -52,6 +52,8 @@ export default function History() {
postText: postWithMedia.post.content || '',
mediaIds: mediaIds,
allMedia: allMedia,
generationStatus: postWithMedia.post.generationStatus,
generationProgress: postWithMedia.post.generationProgress,
});
setPreviewModalOpen(true);
@@ -241,6 +243,8 @@ export default function History() {
onPublish={() => { }}
isPublishing={false}
readOnly={true}
generationStatus={previewData.generationStatus}
generationProgress={previewData.generationProgress}
/>
</main>
</div>
ffmpeg-service/main.py
+38 -5
View File
@@ -572,6 +572,30 @@ async def process_reel(request: ReelRequest, x_api_key: str = Header(None)):
else:
raise HTTPException(status_code=400, detail="No video source provided")
# --- Get Video Duration for Fade Out ---
try:
video_dur_cmd = [
"ffprobe",
"-v",
"error",
"-show_entries",
"format=duration",
"-of",
"default=noprint_wrappers=1:nokey=1",
str(input_video_path),
]
dur_proc = subprocess.run(video_dur_cmd, stdout=subprocess.PIPE, text=True)
video_duration = float(dur_proc.stdout.strip() or 0)
except Exception as e:
print(f"⚠️ Could not measure original video duration: {e}")
video_duration = 30.0 # Fallback
fade_duration = 2.0
fade_start = max(0, video_duration - fade_duration)
print(
f"🎬 Video Duration: {video_duration:.2f}s | Fade Out Start: {fade_start:.2f}s"
)
# 2. Download Music (if present)
has_music = False
if request.music_url:
@@ -798,6 +822,9 @@ async def process_reel(request: ReelRequest, x_api_key: str = Header(None)):
fc_parts.append(f"[{watermark_idx}:v]scale=200:-1[wm]")
v_chain += "[v_pre_wm];[v_pre_wm][wm]overlay=W-w-20:H-h-20"
# Add Video Fade Out
v_chain += f",fade=t=out:st={fade_start}:d={fade_duration}"
# End of video chain
v_chain += "[vout]"
fc_parts.append(v_chain)
@@ -835,15 +862,20 @@ async def process_reel(request: ReelRequest, x_api_key: str = Header(None)):
# Mix
if inputs_for_mix > 0:
fc_parts.append(
f"{audio_mix_str}amix=inputs={inputs_for_mix}:duration=first:dropout_transition=2:normalize=0[aout]"
f"{audio_mix_str}amix=inputs={inputs_for_mix}:duration=first:dropout_transition=2:normalize=0[amixout]"
)
fc_parts.append(
f"[amixout]afade=t=out:st={fade_start}:d={fade_duration}[aout]"
)
audio_mapped = True
else:
# No external audio added
if has_original_audio:
# Just pass through original audio
# We can map 0:a directly, no filter needed for audio
audio_mapped = False
# Add audio fade out to original audio
fc_parts.append(
f"[0:a]afade=t=out:st={fade_start}:d={fade_duration}[aout]"
)
audio_mapped = True
else:
# No audio at all
audio_mapped = False
@@ -859,7 +891,8 @@ async def process_reel(request: ReelRequest, x_api_key: str = Header(None)):
elif has_original_audio:
cmd.extend(["-map", "0:a"]) # Map original audio directly
cmd.extend(["-shortest"])
# Cut EXACTLY at video length (better than -shortest which can cause issues with amix)
cmd.extend(["-t", str(video_duration)])
# Quality settings
cmd.extend(