Socialflow/task.md

Task: Socialflow - Facebook Reels avec Musique et Texte

Context

Ajout d'une fonctionnalité complète de création de Reels Facebook permettant de capturer une vidéo, ajouter une musique libre de droits (FreeSound API), superposer du texte style TikTok, et publier via l'API Graph Facebook. Le traitement vidéo sera effectué via une API FFmpeg Docker locale.

Current Focus

Phase: EXECUTION - Fix 504 Gateway Timeout on Remotion Render (Async Polling).

Master Plan

Party Mode & Outro (Nouvelle fonctionnalité)

• Créer l'Implementation Plan basé sur la réflexion du Party Mode
• [/] server/routes/reels.ts : Passer storeName à FFmpeg (le nom de la page).
• [/] ffmpeg-service/main.py : Ajouter le scale du logo et drawtext du storeName centrés.
• [/] Appliquer ces filtres avec un fondu d'entrée correspondant à la durée du fondu de sortie global.

Phase 0: Clarifications ✅

• Confirmer source de musique → FreeSound API (ex-Jamendo)
• Confirmer URL et format API FFmpeg Docker → /process-reel, base64, X-API-Key
• Style texte → TikTok (animation mot par mot)

Phase 1: Backend Services ✅

• server/services/ffmpeg.ts - Intégration API FFmpeg Docker
• server/services/freesound.ts - Service recherche musique FreeSound
• server/services/facebook.ts - Méthodes publishReel() et publishReelFromBuffer()

Phase 2: Database & Routes ✅

• shared/schema.ts - Ajout type "reel" à postTypeEnum
• server/routes/reels.ts - Routes API complètes
• [NEW] server/cron.ts - Setup Daily Token Check
• [NEW] ffmpeg-service/ - Dedicated Python microservice for video processing
  • main.py (FastAPI, FFmpeg logic)
  • Dockerfile & requirements.txt
  • Fix font_path NameError in main.py
• [CFG] docker-compose.yml - Add ffmpeg-api service & Link to App
• server/routes.ts - Enregistrement du reelsRouter de la configuration

Phase 3: Frontend ✅

• client/src/pages/new-reel.tsx - Page création Reel (workflow 4 étapes)
• client/src/App.tsx - Route /reel
• client/src/components/sidebar.tsx - Lien navigation "Nouveau Reel"
• client/src/pages/settings.tsx - Configuration FFmpeg API

Phase 4: Configuration & UI ⏳

• Configurer FreeSound API (env vars)
• Configurer FFmpeg API URL et clé (interface Settings)
• Ajouter la voix off (TTS) gratuite via Edge-TTS
  • FFmpeg Service: Installer edge-tts et implémenter le mixage audio
  • Backend: Supporter les options TTS (enable, voice)
  • Améliorer le TTS (Genre, Sync, Cleanup)
  • FFmpeg: Nettoyer le texte (No hashtags/emojis) avant TTS
  • FFmpeg: Générer fichier VTT pour synchro sous-titres
  • FFmpeg: Enlever le son original quand TTS activé
  • Frontend: Sélecteur de voix (Homme/Femme) - Switched Male default to Henri
• [/] Ajouter la valeur 'reel' à l'enum post_type en base de données
• Amélioration UI Musique (Pagination, Preview Audio)
• Improve Camera Capture Quality (User Request)
  • Create CameraRecorder component with 4K/1080p/720p quality selector
  • Integrate CameraRecorder into new-reel.tsx
  • Add quality settings panel in camera UI

Phase 5: Reels Enhancements ⚡

• Enable Text Overlay by Default in new-reel.tsx
• Expand French Voice Options
  • Research available French voices (Edge-TTS)
  • Update frontend selection list
  • Update backend validation if needed
• Add Voice Test Button (Preview TTS)

Phase 6: Workflow Initialization 🚫

• [~] Run /bmad-bmgd-workflows-workflow-init (Annulé: Application, pas un Jeu)

Phase 7: Amélioration Qualité Vidéo & Stabilisation ✅

• Amélioration Capture Caméra (camera-recorder.tsx)
  • Augmenter bitrate selon résolution (720p: 12Mbps, 1080p: 25Mbps, 4K: 50Mbps)
  • Ajouter contrainte framerate 30fps
  • Ajouter toggle "Stabilisation serveur" dans réglages
• Stabilisation FFmpeg vidstab (ffmpeg-service/main.py)
  • Installer vidstab dans le Dockerfile (via static build)
  • Ajouter paramètre stabilize au modèle ReelRequest
  • Implémenter stabilisation 2 passes (detect + transform)
  • Améliorer qualité sortie (CRF 18)
• Backend API (ffmpeg.ts)
  • Passer le paramètre stabilize à l'API FFmpeg

Phase 8: Monitoring & UX ✅

• Monitoring Performance (ffmpeg-service/main.py)
  • Mesurer et logger les temps de traitement par étape (Download, Stabilize, TTS, Encode)
  • Retourner les métriques dans la réponse API
• Feedback UI (new-reel.tsx)
  • Ajouter un composant de progression "fake" intelligent pendant la création
  • Afficher les étapes (Upload, Audio, Stabilisation, Encodage)
  • Estimer le temps restant selon les options activées (Stabilisation = +30s)

Phase 9: Maintenance & Bug Fixes 🛠️

• Fix API 500 (server/routes/reels.ts) : Variable stabilize manquante corrigée.
• Fix iOS Upload (client/src/pages/new-reel.tsx) : Ajout support .mov et augmentation limite taille (500MB).
• Support Gros Fichiers (4GB) : Passage à DiskStorage et streaming Cloudinary.
• Phase 10: Optimisation 1080p & Qualité Maximale ✅
  • FFmpeg: Forcer scaling 1080x1920 (Vertical HD)
  • FFmpeg: Augmenter CRF à 17 et preset à slow
  • FFmpeg: Augmenter taille police par défaut à 64
  • FFmpeg: Positionner texte plus bas (proportionnel 1080p)
  • FFmpeg: Profil H.264 High, 30fps et bitrate 10Mbps
  • Frontend: Ajouter toggle Stabilisation et Qualité
  • Fix: Synchronisation parfaite Texte/Voix (TTS dynamique)
  • Fix: Stabilisation optimisée (Zoom adaptatif + Single Pass)
  • Amélioration: Stabilisation Aggressive (Smoothing 30, Shakiness 10)
  • Fix: Emojis supportés dans le texte (mais ignorés par TTS)
• Phase 11: Clarification UX Mobile ✅
  • Modifier l'alerte iOS pour prévenir que les réglages se font après
  • Ajouter une flèche ou une animation pour attirer l'œil sur le Switch de stabilisation
  • S'assurer que le bouton "Suivant" est bien visible sous le Switch
  • Renommer toggle stabilisation pour clarté (Anti-tremblements)
  • Déplacer le toggle en bas de page (UX)
• Phase 12: Optimisation Safari (Bypass Compression) ✅
  • Ajouter l'attribut multiple à l'input file pour forcer l'envoi du fichier original (Bypass Safari downscaling)
  • Mettre à jour les MIME types pour inclure video/quicktime (iPhone natif)
  • Documenter que la stabilisation native dépend des réglages iOS de l'utilisateur
  • Fix Build Failure : Correction syntaxe useDropzone et JSX dans new-reel.tsx.
  • Fix Mobile Overlay : Force drawText: true sur le client mobile.
  • Fix Font Issue : Ajout de fontconfig, fc-cache, et utilisation de police générique "Sans".
  • Refactor FFmpeg : Passage à un pipeline filter_complex unifié pour éviter les conflits et garantir l'overlay.
  • Fix Indentation : Correction de l'erreur de syntaxe Python introduite.
• Phase 13: Polissage Final Texte & Emojis ✅
  • Filtrer les hashtags de l'affichage vidéo (clean_text_for_display)
  • Revenir à DejaVu Sans pour garantir l'affichage -> Solution Finale: Auto-download Noto Color Emoji + Config Sans generic.
  • Vérifier la logique de stabilisation (Toggle fonctionnel)
  • Update: Suppression totale des emojis de l'affichage (demande utilisateur)
  • Update: Augmentation de la taille de police (50 -> 65)
  • Fix F-String Syntax : Correction de l'erreur f-string expression part cannot include a backslash.
  • Final Robust Fix : Switch complet vers le filtre subtitles et format .srt pour contourner l'absence de drawtext dans l'environnement.
  • Style Adjustment : Réduction de la taille du texte à 30 pour un rendu plus élégant.

Phase 14: Synchronisation Parfaite Texte/Voix ⏳

• Récupérer les Word Boundaries via edge_tts
• Générer le fichier .ass avec des timestamps précis
• Rebuild Docker et valider la synchronisation sur un Reel de test

Phase 15: Améliorations UX & Fixes (Mobile TTS, Clean Text, Delete Reel) 🚀

• Mobile UX: Activer TTS par défaut sur mobile (new-reel.tsx)
• Fix Text Rendering: Nettoyer le texte (BOM removal) dans ffmpeg-service/main.py pour éviter le carré blanc
• Feature: Suppression de Reels
  • Backend: Route DELETE /api/reels/:id
  • Storage: Méthode deleteReel
  • Frontend: Bouton suppression avec confirmation sur les cartes de Reels

Phase 16: Queue Management & Dashboard ⏳

• Backend: Implement Queue Logic (Single Worker Pattern)
  • Helper processNextJob()
  • Modify POST /api/reels to queue if busy
  • Trigger next job on completion/failure
• Frontend: Queue Visualization
  • Create QueueStatus widget
  • Display "En attente (Position X)" in progress component

Phase 17: Mobile Dashboard Simplification 📱

• Mobile Dashboard: Redesign pages/mobile/dashboard.tsx
  • Keep OngoingReels widget
  • Create Main Action Grid (New Post, Reel, Calendar, Analytics)
  • Create Secondary Menu List
  • Remove StatsCards and RecentPublications from main view

Phase 18: Mobile Hub Polish ✨

• Entry Point: Verify no forced redirects to /new.
• Hub Design: Refactor DashboardMobile with Card components and consistent styling.

Phase 19: Internal MP3 Management & Logo Overlay 🎵🖼️

• Database & Routing
  • Add AudioTrack table to schema (id, title, url, createdAt)
  • Create API routes for managing audio tracks (Upload, List, Delete)
• Admin UI
  • Create an "Assets" or "Resources" admin page
  • Implement MP3 upload functionality
  • Display list of uploaded audio tracks with delete option
• Reel Creation UI
  • Replace FreeSound search with a selector/list of internal MP3s
  • Maintain audio preview functionality
• FFmpeg Integration
  • Pass the appropriate audio_url (local/hosted MP3) and logo_url (from existing settings/image editor) to the FFmpeg service
  • Update ffmpeg-service/main.py to download/read the logo image
  • Implement overlay filter in the video processing pipeline to scale (max width 150px) and position the logo in the bottom right corner (e.g., W-w-20:H-h-20)

Phase 13: Activation Agent BMad ✅

• Activer l'agent bmad-master.md
• Charger la configuration _bmad/core/config.yaml
• Afficher le menu de l'agent en français
• Ré-activation de l'agent bmad-master.md (11 Fev 2026)

Phase 20: Activation BMad Master Agent (Mars 2026) ✅

• Charger la configuration et le persona
• Saluer l'utilisateur en français et afficher le menu
• Attendre la sélection de l'utilisateur
• Utilisateur a choisi [PM] : Lancer le mode Party.
• [/] Discussion en cours...

Phase 21: Correction Synchronisation Texte/Audio Reel ⏳

• Diagnostiquer : L'audio TTS a été décalé de 2s (adelay=2s:all=1 dans FFmpeg), mais le timing des mots dans .ass n'a pas été ajusté proportionnellement.
• Modifier ffmpeg-service/main.py pour passer le délai au générateur ASS.
• Mettre à jour generate_ass_from_word_boundaries pour inclure le délai de 2s dans start et end.
• Valider que les tags Dialogue dans le .ass commencent à T+2.0s.

Phase 22: Dépannage Error 401 à l'Upload (ANNULÉ) ❌

• Analyser les logs (401 Unauthorized sur /api/media/upload)
• Annuler new-post.tsx
• Annuler new-reel.tsx
• Vérifier la stabilité du sessionStore

Phase 23: Flexibilité des Publications (Stories sans texte) ✅

• Analyser la validation dans new-post.tsx

• Permettre la publication sans texte si un média est présent

• Vérifier l'impact sur le backend (Schéma DB OK pour chaîne vide)

• Activation du mode Party et salutation de l'utilisateur. En attente du sujet de discussion.

• Définition des spécifications pour la gestion interne des MP3 et l'incrustation du logo de l'Éditeur d'image. Fin du Mode Party.

• Analyze ffmpeg-service/main.py for text encoding issues

• Analyze server/routes.ts and server/storage.ts for deletion logic

• Create implementation_plan.md

• Implement text cleaning in ffmpeg-service/main.py

• Add DELETE /api/reels/:id route in server/routes/reels.ts

• Add delete button to RecentPublications component

• Enable TTS by default on mobile in new-reel.tsx

• Verify changes

• 22 Jan 2026 - Analyse complète et PRD créé

• 22 Jan 2026 - Spécifications confirmées

• 22 Jan 2026 - Backend complet : ffmpeg.ts, freesound.ts, facebook.ts

• 22 Jan 2026 - Frontend créé : new-reel.tsx

• 22 Jan 2026 - Settings FFmpeg ajoutés

• 22 Jan 2026 - Migration Jamendo -> FreeSound effectuée sur demande utilisateur

• 22 Jan 2026 - Correction preview audio et ajout pagination "10 nouvelles musiques"

Phase 24: Remotion Video Generator Tab ✅

• Créer l'implementation_plan.md pour validation.
• Installer les dépendances frontend et backend de Remotion.
• Créer le composant Remotion (Composition pour 3-4 images).
• Créer la route backend /api/remotion/render pour compiler et générer la vidéo.
• Ajouter l'interface utilisateur frontend avec le <Player /> et le système d'upload.
• Mettre à jour Dockerfile avec Chromium si nécessaire.

Phase 25: Fix Remotion Render Error 🛠️

• Diagnostiquer l'erreur Target closed (Chrome tab crash).
• Ajouter les arguments --disable-dev-shm-usage, --no-sandbox aux options de Chromium.
• Limiter la concurrence concurrency: 1 dans renderMedia pour économiser la mémoire en Docker.

Phase 26: Fix 504 Gateway Timeout (Async Remotion Render) 🚀

• Backend: Modifier POST /api/remotion/render pour retourner un jobId immédiatement.
• Backend: Créer la route GET /api/remotion/render/status/:jobId pour suivre l'état (in-memory map).
• Frontend: Modifier remotion-video.tsx pour faire du polling sur le jobId après la soumission.
• Frontend: Appliquer la même modification de polling à mobile/remotion-video.tsx.