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

client/src/components/calendar-view.tsx

@@ -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)");
 
@@ -79,6 +79,8 @@ export default function CalendarView() {
         postText: postWithMedia.post.content || '',
         mediaIds: mediaIds,
         allMedia: allMedia,
+        generationStatus: postWithMedia.post.generationStatus,
+        generationProgress: postWithMedia.post.generationProgress,
       });
 
       setPreviewModalOpen(true);
@@ -441,6 +443,8 @@ export default function CalendarView() {
         onPublish={() => { }}
         isPublishing={false}
         readOnly={true}
+        generationStatus={previewData.generationStatus}
+        generationProgress={previewData.generationProgress}
       />
     </div>
   );

client/src/components/preview-modal.tsx

@@ -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);
@@ -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,8 +158,7 @@ export function PreviewModal({
                   <button
                     key={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}`}
                   />
@@ -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,8 +232,7 @@ export function PreviewModal({
                   <button
                     key={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' }}
                     data-testid={`button-photo-indicator-${idx}`}
@@ -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,8 +444,7 @@ export function PreviewModal({
                     <button
                       key={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}`}
                     />

client/src/pages/history.tsx

@@ -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

@@ -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
+                # 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:
                 # 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(