Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-22 22:48:09 +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
+276 -178
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/calendar-view.tsx
+165 -161
View File
@@ -18,7 +18,7 @@ export default function CalendarView() {
const [editDialogOpen, setEditDialogOpen] = useState(false); const [editDialogOpen, setEditDialogOpen] = useState(false);
const [selectedPost, setSelectedPost] = useState<any>(null); const [selectedPost, setSelectedPost] = useState<any>(null);
const [previewModalOpen, setPreviewModalOpen] = 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 { toast } = useToast();
const isDesktop = useMediaQuery("(min-width: 768px)"); const isDesktop = useMediaQuery("(min-width: 768px)");
@@ -79,6 +79,8 @@ export default function CalendarView() {
postText: postWithMedia.post.content || '', postText: postWithMedia.post.content || '',
mediaIds: mediaIds, mediaIds: mediaIds,
allMedia: allMedia, allMedia: allMedia,
generationStatus: postWithMedia.post.generationStatus,
generationProgress: postWithMedia.post.generationProgress,
}); });
setPreviewModalOpen(true); setPreviewModalOpen(true);
@@ -114,8 +116,8 @@ export default function CalendarView() {
// Compare using local date components to avoid timezone issues // Compare using local date components to avoid timezone issues
return postDate.getFullYear() === date.getFullYear() && return postDate.getFullYear() === date.getFullYear() &&
postDate.getMonth() === date.getMonth() && postDate.getMonth() === date.getMonth() &&
postDate.getDate() === date.getDate(); postDate.getDate() === date.getDate();
}); });
}; };
@@ -219,192 +221,192 @@ export default function CalendarView() {
</div> </div>
<div className="grid grid-cols-7 gap-2"> <div className="grid grid-cols-7 gap-2">
{days.map((day, index) => ( {days.map((day, index) => (
<div <div
key={index} key={index}
className={` className={`
bg-card border border-border/50 rounded-xl p-4 min-h-[140px] transition-all hover:shadow-md 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" : ""} ${isToday(day.date) ? "ring-2 ring-primary shadow-lg" : ""}
${!day.isCurrentMonth ? "opacity-40" : ""} ${!day.isCurrentMonth ? "opacity-40" : ""}
`} `}
data-testid={`calendar-day-${index}`} data-testid={`calendar-day-${index}`}
> >
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span <span
className={` className={`
text-sm font-semibold text-sm font-semibold
${!day.isCurrentMonth ? "text-muted-foreground" : "text-foreground"} ${!day.isCurrentMonth ? "text-muted-foreground" : "text-foreground"}
${isToday(day.date) ? "text-primary" : ""} ${isToday(day.date) ? "text-primary" : ""}
`} `}
> >
{day.date.getDate()} {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
</span> </span>
)} {isToday(day.date) && (
</div> <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; if (!day.isCurrentMonth) return null;
const postsForDay = getPostsForDate(day.date); const postsForDay = getPostsForDate(day.date);
if (postsForDay.length === 0) return null; if (postsForDay.length === 0) return null;
return ( return (
<div className="space-y-2"> <div className="space-y-2">
{postsForDay.slice(0, 2).map((post: any, idx) => { {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 time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : '';
const isPending = !post.publishedAt; const isPending = !post.publishedAt;
const isPublished = !!post.publishedAt; const isPublished = !!post.publishedAt;
const pageName = post.page?.pageName || 'Page inconnue'; const pageName = post.page?.pageName || 'Page inconnue';
const platform = post.page?.platform || 'facebook'; const platform = post.page?.platform || 'facebook';
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook; const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return ( return (
<div <div
key={idx} key={idx}
className={` className={`
px-3 py-2 rounded-lg text-xs transition-all font-medium shadow-sm group relative 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' : ''} ${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' : ''} ${isPublished ? 'bg-green-500/20 text-green-600 hover:bg-green-500/30' : ''}
`} `}
data-testid={`calendar-post-${post.id}`} data-testid={`calendar-post-${post.id}`}
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold"> <div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)} {getPostTypeIcon(post.postType)}
<span>{time}</span> <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>
<div className="flex items-center gap-1 truncate opacity-90"> <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<PlatformIcon className="w-3 h-3 flex-shrink-0" /> <button
<span className="truncate">{pageName}</span> 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> </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>
</div> );
); })}
})} {postsForDay.length > 2 && (
{postsForDay.length > 2 && ( <Popover>
<Popover> <PopoverTrigger asChild>
<PopoverTrigger asChild> <button
<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"
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"
data-testid="button-show-more-posts" >
> <MoreHorizontal className="w-3 h-3" />
<MoreHorizontal className="w-3 h-3" /> +{postsForDay.length - 2} autre(s)
+{postsForDay.length - 2} autre(s) </button>
</button> </PopoverTrigger>
</PopoverTrigger> <PopoverContent className="w-80 p-3" align="start">
<PopoverContent className="w-80 p-3" align="start"> <div className="space-y-2">
<div className="space-y-2"> <h4 className="font-semibold text-sm mb-3">
<h4 className="font-semibold text-sm mb-3"> Tous les posts du {day.date.getDate()} {monthNames[day.date.getMonth()]}
Tous les posts du {day.date.getDate()} {monthNames[day.date.getMonth()]} </h4>
</h4> {postsForDay.slice(2).map((post: any, idx) => {
{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 time = post.scheduledAt ? new Date(post.scheduledAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }) : ''; const isPending = !post.publishedAt;
const isPending = !post.publishedAt; const isPublished = !!post.publishedAt;
const isPublished = !!post.publishedAt; const pageName = post.page?.pageName || 'Page inconnue';
const pageName = post.page?.pageName || 'Page inconnue'; const platform = post.page?.platform || 'facebook';
const platform = post.page?.platform || 'facebook'; const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
const PlatformIcon = platform === 'instagram' ? SiInstagram : SiFacebook;
return ( return (
<div <div
key={idx} key={idx}
className={` className={`
px-3 py-2 rounded-lg text-xs transition-all font-medium shadow-sm group relative 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' : ''} ${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' : ''} ${isPublished ? 'bg-green-500/20 text-green-600 hover:bg-green-500/30' : ''}
`} `}
data-testid={`popover-post-${post.id}`} data-testid={`popover-post-${post.id}`}
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-1 font-semibold"> <div className="flex items-center gap-1 font-semibold">
{getPostTypeIcon(post.postType)} {getPostTypeIcon(post.postType)}
<span>{time}</span> <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>
<div className="flex items-center gap-1 truncate opacity-90"> <div className="flex gap-1">
<PlatformIcon className="w-3 h-3 flex-shrink-0" /> <button
<span className="truncate">{pageName}</span> 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>
<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> );
); })}
})} </div>
</div> </PopoverContent>
</PopoverContent> </Popover>
</Popover> )}
)} </div>
</div> );
); })()}
})()} </div>
</div> ))}
))} </div>
</div>
<div className="mt-8 flex items-center justify-center gap-8 flex-wrap"> <div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -438,9 +440,11 @@ export default function CalendarView() {
postText={previewData.postText} postText={previewData.postText}
selectedMedia={previewData.mediaIds} selectedMedia={previewData.mediaIds}
mediaList={previewData.allMedia} mediaList={previewData.allMedia}
onPublish={() => {}} onPublish={() => { }}
isPublishing={false} isPublishing={false}
readOnly={true} readOnly={true}
generationStatus={previewData.generationStatus}
generationProgress={previewData.generationProgress}
/> />
</div> </div>
); );
client/src/components/preview-modal.tsx
+68 -11
View File
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; 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 type { Media } from '@shared/schema';
import { removeHashtags } from '@shared/emoji'; import { removeHashtags } from '@shared/emoji';
import { EmojiText } from '@/components/emoji-text'; import { EmojiText } from '@/components/emoji-text';
@@ -16,6 +16,8 @@ interface PreviewModalProps {
onPublish: () => void; onPublish: () => void;
isPublishing: boolean; isPublishing: boolean;
readOnly?: boolean; readOnly?: boolean;
generationStatus?: string;
generationProgress?: number;
} }
type PreviewFormat = 'facebook-feed' | 'facebook-story' | 'instagram-feed' | 'instagram-story'; type PreviewFormat = 'facebook-feed' | 'facebook-story' | 'instagram-feed' | 'instagram-story';
@@ -28,7 +30,9 @@ export function PreviewModal({
mediaList, mediaList,
onPublish, onPublish,
isPublishing, isPublishing,
readOnly = false readOnly = false,
generationStatus,
generationProgress
}: PreviewModalProps) { }: PreviewModalProps) {
const [previewFormat, setPreviewFormat] = useState<PreviewFormat>('facebook-feed'); const [previewFormat, setPreviewFormat] = useState<PreviewFormat>('facebook-feed');
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0); const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
@@ -110,6 +114,25 @@ export function PreviewModal({
</div> </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 */} {/* Media Carousel */}
{orderedMedia.length > 0 && ( {orderedMedia.length > 0 && (
<div className="relative bg-black"> <div className="relative bg-black">
@@ -135,9 +158,8 @@ export function PreviewModal({
<button <button
key={idx} key={idx}
onClick={() => goToPhoto(idx)} onClick={() => goToPhoto(idx)}
className={`w-2 h-2 rounded-full transition-colors ${ className={`w-2 h-2 rounded-full transition-colors ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50' }`}
}`}
data-testid={`button-photo-indicator-${idx}`} data-testid={`button-photo-indicator-${idx}`}
/> />
))} ))}
@@ -168,6 +190,23 @@ export function PreviewModal({
</div> </div>
</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 */} {/* Media Carousel */}
{orderedMedia.length > 0 && ( {orderedMedia.length > 0 && (
<div className="relative bg-black aspect-square"> <div className="relative bg-black aspect-square">
@@ -193,9 +232,8 @@ export function PreviewModal({
<button <button
key={idx} key={idx}
onClick={() => goToPhoto(idx)} onClick={() => goToPhoto(idx)}
className={`h-1 flex-1 transition-colors rounded ${ className={`h-1 flex-1 transition-colors rounded ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50' }`}
}`}
style={{ width: '40px' }} style={{ width: '40px' }}
data-testid={`button-photo-indicator-${idx}`} data-testid={`button-photo-indicator-${idx}`}
/> />
@@ -375,6 +413,26 @@ export function PreviewModal({
</div> </div>
</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 */} {/* Media */}
{orderedMedia.length > 0 && ( {orderedMedia.length > 0 && (
<div className="relative w-full h-full"> <div className="relative w-full h-full">
@@ -386,9 +444,8 @@ export function PreviewModal({
<button <button
key={idx} key={idx}
onClick={() => goToPhoto(idx)} onClick={() => goToPhoto(idx)}
className={`h-1 flex-1 transition-colors rounded-full ${ className={`h-1 flex-1 transition-colors rounded-full ${idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50'
idx === currentPhotoIndex ? 'bg-white' : 'bg-white/50' }`}
}`}
data-testid={`button-photo-indicator-${idx}`} data-testid={`button-photo-indicator-${idx}`}
/> />
))} ))}
client/src/pages/history.tsx
+5 -1
View File
@@ -20,7 +20,7 @@ type ScheduledPostWithRelations = ScheduledPost & {
export default function History() { export default function History() {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
const [previewModalOpen, setPreviewModalOpen] = 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 { toast } = useToast();
const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({ const { data: scheduledPosts = [], isLoading } = useQuery<ScheduledPostWithRelations[]>({
@@ -52,6 +52,8 @@ export default function History() {
postText: postWithMedia.post.content || '', postText: postWithMedia.post.content || '',
mediaIds: mediaIds, mediaIds: mediaIds,
allMedia: allMedia, allMedia: allMedia,
generationStatus: postWithMedia.post.generationStatus,
generationProgress: postWithMedia.post.generationProgress,
}); });
setPreviewModalOpen(true); setPreviewModalOpen(true);
@@ -241,6 +243,8 @@ export default function History() {
onPublish={() => { }} onPublish={() => { }}
isPublishing={false} isPublishing={false}
readOnly={true} readOnly={true}
generationStatus={previewData.generationStatus}
generationProgress={previewData.generationProgress}
/> />
</main> </main>
</div> </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: else:
raise HTTPException(status_code=400, detail="No video source provided") 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) # 2. Download Music (if present)
has_music = False has_music = False
if request.music_url: 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]") 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" 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 # End of video chain
v_chain += "[vout]" v_chain += "[vout]"
fc_parts.append(v_chain) fc_parts.append(v_chain)
@@ -835,15 +862,20 @@ async def process_reel(request: ReelRequest, x_api_key: str = Header(None)):
# Mix # Mix
if inputs_for_mix > 0: if inputs_for_mix > 0:
fc_parts.append( 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 audio_mapped = True
else: else:
# No external audio added # No external audio added
if has_original_audio: if has_original_audio:
# Just pass through original audio # Add audio fade out to original audio
# We can map 0:a directly, no filter needed for audio fc_parts.append(
audio_mapped = False f"[0:a]afade=t=out:st={fade_start}:d={fade_duration}[aout]"
)
audio_mapped = True
else: else:
# No audio at all # No audio at all
audio_mapped = False audio_mapped = False
@@ -859,7 +891,8 @@ async def process_reel(request: ReelRequest, x_api_key: str = Header(None)):
elif has_original_audio: elif has_original_audio:
cmd.extend(["-map", "0:a"]) # Map original audio directly 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 # Quality settings
cmd.extend( cmd.extend(