From f2cdd0a71c02a4317cae255daca3526f0294e112 Mon Sep 17 00:00:00 2001 From: Michael SCHAL Date: Thu, 22 Jan 2026 12:53:36 +0100 Subject: [PATCH] feat: implement new reel creation page with video, music, text, and publishing workflow. --- client/src/pages/new-reel.tsx | 69 +++++++++++++++++++++++------------ task.md | 34 +++++++++-------- 2 files changed, 63 insertions(+), 40 deletions(-) diff --git a/client/src/pages/new-reel.tsx b/client/src/pages/new-reel.tsx index 02e31c7..e5f4aed 100644 --- a/client/src/pages/new-reel.tsx +++ b/client/src/pages/new-reel.tsx @@ -4,7 +4,7 @@ import { useLocation } from "wouter"; import { Send, Sparkles, Video, Music, Type, Calendar, Upload, Camera, Play, Pause, Volume2, VolumeX, - ChevronRight, Loader2, Check + ChevronRight, Loader2, Check, RefreshCw } from "lucide-react"; import { useDropzone } from "react-dropzone"; import Sidebar from "@/components/sidebar"; @@ -73,34 +73,31 @@ export default function NewReel() { const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12); + // État pour stocker les musiques chargées manuellement + const [loadedTracks, setLoadedTracks] = useState([]); + // Recherche de musiques par durée - const { data: musicData, isLoading: musicLoading } = useQuery<{ tracks: MusicTrack[] }>({ - queryKey: ['/api/music/search', selectedVideo?.id], + const { data: musicData, isLoading: musicLoading, refetch: refetchMusic } = useQuery<{ tracks: MusicTrack[] }>({ + queryKey: ['/api/music/search', selectedVideo?.id, musicOffset], queryFn: async () => { // Estimer la durée vidéo (on prend une marge de ±10 secondes) const minDuration = 10; const maxDuration = 120; // On prend toutes les musiques courtes const response = await fetch( - `/api/music/search?minDuration=${minDuration}&maxDuration=${maxDuration}&limit=10` + `/api/music/search?minDuration=${minDuration}&maxDuration=${maxDuration}&limit=10&offset=${musicOffset}` ); - return response.json(); + const data = await response.json(); + setLoadedTracks(data.tracks || []); + return data; }, enabled: currentStep === 'music' && !!selectedVideo, }); - // Mutation pour voir plus de musiques - const loadMoreMusicMutation = useMutation({ - mutationFn: async (offset: number) => { - const response = await fetch( - `/api/music/more?minDuration=10&maxDuration=120&limit=10&offset=${offset}` - ); - return response.json(); - }, - onSuccess: (data) => { - setMusicOffset(prev => prev + 10); - // Vous pourriez ajouter les nouveaux tracks à une liste - }, - }); + // Charger 10 nouvelles musiques + const handleLoadNewMusic = () => { + setMusicOffset(prev => prev + 10); + refetchMusic(); + }; // Upload vidéo const uploadMutation = useMutation({ @@ -230,15 +227,26 @@ export default function NewReel() { setIsPlaying(null); }; - const togglePlayPreview = (track: MusicTrack) => { + const togglePlayPreview = async (track: MusicTrack) => { if (isPlaying === track.id) { audioRef.current?.pause(); setIsPlaying(null); } else { if (audioRef.current) { + console.log('🎵 Playing preview:', track.previewUrl); audioRef.current.src = track.previewUrl; - audioRef.current.play(); - setIsPlaying(track.id); + try { + await audioRef.current.play(); + setIsPlaying(track.id); + } catch (error) { + console.error('❌ Audio play error:', error); + toast({ + title: "Erreur de lecture", + description: "Impossible de lire la prévisualisation audio. Vérifiez votre connexion.", + variant: "destructive", + }); + setIsPlaying(null); + } } } }; @@ -493,15 +501,15 @@ export default function NewReel() { Aucune musique disponible

- Configurez un Client ID Jamendo dans les Paramètres + Service FreeSound non configuré ou aucun résultat trouvé

- Obtenir un Client ID Jamendo → + Obtenir des credentials FreeSound → )} @@ -539,6 +547,19 @@ export default function NewReel() { )} ))} + + {/* Bouton pour charger 10 nouvelles musiques */} + {musicData?.tracks && musicData.tracks.length > 0 && ( + + )} {selectedTrack && ( diff --git a/task.md b/task.md index d65c433..940c699 100644 --- a/task.md +++ b/task.md @@ -2,50 +2,52 @@ ## 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 (Jamendo 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. +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: COMPLETED** - Implémentation terminée, prêt pour configuration et tests. +**Phase: VERIFICATION** - Implémentation terminée, améliorations UI (preview audio, pagination musique). ## Master Plan ### Phase 0: Clarifications ✅ -- [x] Confirmer source de musique → Jamendo API +- [x] Confirmer source de musique → FreeSound API (ex-Jamendo) - [x] Confirmer URL et format API FFmpeg Docker → `/process-reel`, base64, X-API-Key - [x] Style texte → TikTok (animation mot par mot) ### Phase 1: Backend Services ✅ - [x] `server/services/ffmpeg.ts` - Intégration API FFmpeg Docker -- [x] `server/services/jamendo.ts` - Service recherche musique Jamendo +- [x] `server/services/freesound.ts` - Service recherche musique FreeSound - [x] `server/services/facebook.ts` - Méthodes `publishReel()` et `publishReelFromBuffer()` ### Phase 2: Database & Routes ✅ - [x] `shared/schema.ts` - Ajout type "reel" à postTypeEnum - [x] `server/routes/reels.ts` - Routes API complètes -- [x] `server/routes.ts` - Enregistrement du reelsRouter +- [x] `server/routes.ts` - Enregistrement du reelsRouter de la configuration ### Phase 3: Frontend ✅ - [x] `client/src/pages/new-reel.tsx` - Page création Reel (workflow 4 étapes) - [x] `client/src/App.tsx` - Route `/reel` - [x] `client/src/components/sidebar.tsx` - Lien navigation "Nouveau Reel" +- [x] `client/src/pages/settings.tsx` - Configuration FFmpeg API -### Phase 4: Configuration Requise ⏳ +### Phase 4: Configuration & UI ⏳ -- [ ] Configurer Jamendo Client ID (variable d'environnement) -- [ ] Configurer FFmpeg API URL et clé (variable d'environnement) -- [ ] Ajouter la valeur 'reel' à l'enum post_type en base de données +- [x] Configurer FreeSound API (env vars) +- [x] Configurer FFmpeg API URL et clé (interface Settings) +- [/] Ajouter la valeur 'reel' à l'enum post_type en base de données +- [x] Amélioration UI Musique (Pagination, Preview Audio) ## Progress Log -- **22 Jan 2026** - Analyse complète de l'application Socialflow effectuée -- **22 Jan 2026** - PRD créé avec architecture proposée -- **22 Jan 2026** - Spécifications confirmées : Jamendo API, FFmpeg Docker, style TikTok -- **22 Jan 2026** - Backend complet : ffmpeg.ts, jamendo.ts, facebook.ts (publishReel) -- **22 Jan 2026** - Routes API créées dans server/routes/reels.ts -- **22 Jan 2026** - Frontend créé : new-reel.tsx avec workflow 4 étapes -- **22 Jan 2026** - Navigation mise à jour : route et lien sidebar +- **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"