mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-22 06:28:10 +02:00
Merge branch 'main' of https://github.com/R0m1k3/Socialflow
This commit is contained in:
Michael committed
commit
f6376cb470
917 files changed
+28420
-93723
No files matched your search
@@ -0,0 +1,283 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import Sidebar from "@/components/sidebar";
|
||||
import TopBar from "@/components/topbar";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Trash2, Music, Upload, Loader2, Play, Pause } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
|
||||
interface AudioTrack {
|
||||
id: number;
|
||||
userId: number;
|
||||
title: string;
|
||||
url: string;
|
||||
duration: number | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function AudioAdmin() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [playingTrackId, setPlayingTrackId] = useState<number | null>(null);
|
||||
const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(null);
|
||||
|
||||
const { toast } = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: tracks = [], isLoading } = useQuery<AudioTrack[]>({
|
||||
queryKey: ["/api/audio-tracks"],
|
||||
});
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async (files: File[]) => {
|
||||
const formData = new FormData();
|
||||
for (const file of files) {
|
||||
formData.append("files", file);
|
||||
}
|
||||
|
||||
const res = await fetch("/api/audio-tracks", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const error = await res.json();
|
||||
throw new Error(error.error || "Erreur lors de l'upload");
|
||||
}
|
||||
|
||||
return res.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/audio-tracks"] });
|
||||
const successCount = data.results?.filter((r: any) => r.success).length ?? 0;
|
||||
const failCount = data.results?.filter((r: any) => !r.success).length ?? 0;
|
||||
toast({
|
||||
title: "Upload terminé",
|
||||
description: failCount > 0
|
||||
? `${successCount} fichier(s) ajouté(s), ${failCount} échec(s)`
|
||||
: `${successCount} fichier(s) ajouté(s) à la bibliothèque`,
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
onSettled: () => {
|
||||
setIsUploading(false);
|
||||
}
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
const res = await fetch(`/api/audio-tracks/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Erreur lors de la suppression");
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/audio-tracks"] });
|
||||
toast({
|
||||
title: "Succès",
|
||||
description: "La piste audio a été supprimée",
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Erreur",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
if (files.length === 0) return;
|
||||
|
||||
const invalidFiles = files.filter(f => !f.type.startsWith("audio/"));
|
||||
if (invalidFiles.length > 0) {
|
||||
toast({
|
||||
title: "Format invalide",
|
||||
description: "Certains fichiers ne sont pas des fichiers audio (MP3, WAV, etc.)",
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
uploadMutation.mutate(files);
|
||||
|
||||
// Reset input
|
||||
if (e.target) {
|
||||
e.target.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const togglePlay = (track: AudioTrack) => {
|
||||
if (playingTrackId === track.id) {
|
||||
audioElement?.pause();
|
||||
setPlayingTrackId(null);
|
||||
} else {
|
||||
if (audioElement) {
|
||||
audioElement.pause();
|
||||
}
|
||||
|
||||
const newAudio = new Audio(track.url);
|
||||
newAudio.play();
|
||||
|
||||
newAudio.onended = () => {
|
||||
setPlayingTrackId(null);
|
||||
};
|
||||
|
||||
setAudioElement(newAudio);
|
||||
setPlayingTrackId(track.id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={`
|
||||
fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
|
||||
${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
||||
`}>
|
||||
<Sidebar onLinkClick={() => setSidebarOpen(false)} />
|
||||
</div>
|
||||
|
||||
<main className="flex-1 overflow-y-auto w-full">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
|
||||
<div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-8">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold flex items-center gap-3">
|
||||
<Music className="w-8 h-8 text-primary" />
|
||||
Bibliothèque Audio
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Gérez les musiques disponibles pour la création de Reels
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
id="audio-upload"
|
||||
className="hidden"
|
||||
accept="audio/*"
|
||||
multiple
|
||||
onChange={handleFileUpload}
|
||||
disabled={isUploading}
|
||||
/>
|
||||
<label htmlFor="audio-upload">
|
||||
<Button
|
||||
asChild
|
||||
disabled={isUploading}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<span>
|
||||
{isUploading ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{isUploading ? "Upload en cours..." : "Ajouter un fichier audio"}
|
||||
</span>
|
||||
</Button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="border-border/50 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Musiques ({tracks.length})</CardTitle>
|
||||
<CardDescription>
|
||||
Ces pistes pourront être sélectionnées par les utilisateurs lors de la création d'un nouveau Reel.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center p-8">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : tracks.length === 0 ? (
|
||||
<div className="text-center p-12 border-2 border-dashed border-border rounded-xl">
|
||||
<Music className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
|
||||
<h3 className="text-lg font-medium mb-1">Aucune musique</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Vous n'avez pas encore ajouté de piste audio. Les musiques ajoutées ici seront utilisables pour les Reels.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{tracks.map((track) => (
|
||||
<div
|
||||
key={track.id}
|
||||
className="bg-card border border-border/50 rounded-xl p-4 flex flex-col gap-4 hover:border-primary/30 transition-colors shadow-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="p-3 bg-primary/10 rounded-lg shrink-0">
|
||||
<Music className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-semibold text-sm truncate" title={track.title}>{track.title}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{format(new Date(track.createdAt), "dd MMM yyyy", { locale: fr })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-2 border-t border-border/50">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={playingTrackId === track.id ? "text-primary bg-primary/10" : ""}
|
||||
onClick={() => togglePlay(track)}
|
||||
>
|
||||
{playingTrackId === track.id ? (
|
||||
<><Pause className="w-4 h-4 mr-2" /> Pause</>
|
||||
) : (
|
||||
<><Play className="w-4 h-4 mr-2" /> Écouter</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
onClick={() => {
|
||||
if (confirm("Voulez-vous vraiment supprimer cette musique ?")) {
|
||||
deleteMutation.mutate(track.id);
|
||||
}
|
||||
}}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
import AudioAdmin from "../audio-admin";
|
||||
export default AudioAdmin;
|
||||
@@ -1,42 +1,115 @@
|
||||
import Sidebar from "@/components/sidebar";
|
||||
import TopBar from "@/components/topbar";
|
||||
import StatsCards from "@/components/stats-cards";
|
||||
import OngoingReels from "@/components/ongoing-reels";
|
||||
import RecentPublications from "@/components/recent-publications";
|
||||
import ManagedPages from "@/components/managed-pages";
|
||||
import { useState } from "react";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import {
|
||||
PlusCircle,
|
||||
Video,
|
||||
Calendar,
|
||||
BarChart3,
|
||||
Images,
|
||||
Wand2,
|
||||
Clock,
|
||||
Settings,
|
||||
Users,
|
||||
ChevronRight,
|
||||
Sparkles
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function DashboardMobile() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [, setLocation] = useLocation();
|
||||
|
||||
const mainActions = [
|
||||
{ icon: PlusCircle, label: "Nv. Post", href: "/new", color: "text-blue-500", bg: "bg-blue-500/10", border: "border-blue-500/20", description: "Créer une publication" },
|
||||
{ icon: Video, label: "Nv. Reel", href: "/reel", color: "text-purple-500", bg: "bg-purple-500/10", border: "border-purple-500/20", description: "Générer une vidéo IA" },
|
||||
{ icon: Calendar, label: "Calendrier", href: "/calendar", color: "text-amber-500", bg: "bg-amber-500/10", border: "border-amber-500/20", description: "Voir le planning" },
|
||||
{ icon: BarChart3, label: "Analytics", href: "/analytics", color: "text-emerald-500", bg: "bg-emerald-500/10", border: "border-emerald-500/20", description: "Statistiques" },
|
||||
];
|
||||
|
||||
const secondaryMenu = [
|
||||
{ icon: Images, label: "Médiathèque", href: "/media" },
|
||||
{ icon: Wand2, label: "Éditeur d'images", href: "/image-editor" },
|
||||
{ icon: Clock, label: "Historique", href: "/history" },
|
||||
{ icon: Users, label: "Pages connectées", href: "/pages" },
|
||||
{ icon: Settings, label: "Paramètres", href: "/settings" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={`
|
||||
fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
|
||||
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`}>
|
||||
<Sidebar onLinkClick={() => setSidebarOpen(false)} />
|
||||
</div>
|
||||
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
<TopBar onMenuClick={() => { }} hideMenuButton={true} />
|
||||
|
||||
{/* MOBILE: Reduced padding, single column layout with better spacing */}
|
||||
<div className="p-4 space-y-6">
|
||||
<StatsCards />
|
||||
<div className="p-4 space-y-6 pb-20">
|
||||
|
||||
{/* Header Section */}
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-lg">
|
||||
<Sparkles className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
Social Flow
|
||||
</h1>
|
||||
<p className="text-xs text-muted-foreground">Tableau de bord</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 1. Status Section */}
|
||||
<OngoingReels compact />
|
||||
|
||||
<RecentPublications />
|
||||
{/* 2. Main Action Grid */}
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<CardTitle className="text-base font-semibold">Actions Rapides</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{mainActions.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`
|
||||
flex flex-col items-center justify-center p-4 rounded-xl border cursor-pointer transition-all active:scale-95 hover:opacity-80
|
||||
${item.bg} ${item.border}
|
||||
`}>
|
||||
<div className={`p-2 rounded-full bg-background/80 shadow-sm mb-2`}>
|
||||
<Icon className={`w-6 h-6 ${item.color}`} />
|
||||
</div>
|
||||
<span className="font-semibold text-sm text-foreground">{item.label}</span>
|
||||
<span className="text-[10px] text-muted-foreground mt-1 text-center">{item.description}</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ManagedPages />
|
||||
{/* 3. Secondary Menu List */}
|
||||
<Card className="rounded-2xl border-border/50 shadow-lg overflow-hidden">
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<CardTitle className="text-base font-semibold">Menu</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y divide-border/50">
|
||||
{secondaryMenu.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className="flex items-center gap-4 p-4 hover:bg-muted/50 transition-colors cursor-pointer active:bg-muted">
|
||||
<div className="p-2 rounded-lg bg-muted text-foreground">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="flex-1 font-medium text-sm">{item.label}</span>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,6 @@ export default function MobileNewReel() {
|
||||
|
||||
// État audio preview
|
||||
const [isPlaying, setIsPlaying] = useState<string | null>(null);
|
||||
const [musicOffset, setMusicOffset] = useState(0);
|
||||
const [stabilize, setStabilize] = useState(true); // Activé par défaut pour les Reels
|
||||
|
||||
|
||||
@@ -75,27 +74,24 @@ export default function MobileNewReel() {
|
||||
});
|
||||
|
||||
const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12);
|
||||
const [loadedTracks, setLoadedTracks] = useState<MusicTrack[]>([]);
|
||||
|
||||
const { data: musicData, isLoading: musicLoading, refetch: refetchMusic } = useQuery<{ tracks: MusicTrack[] }>({
|
||||
queryKey: ['/api/music/search', selectedVideo?.id, musicOffset],
|
||||
queryFn: async () => {
|
||||
const minDuration = 10;
|
||||
const maxDuration = 120;
|
||||
const response = await fetch(
|
||||
`/api/music/search?minDuration=${minDuration}&maxDuration=${maxDuration}&limit=10&offset=${musicOffset}`
|
||||
);
|
||||
const data = await response.json();
|
||||
setLoadedTracks(data.tracks || []);
|
||||
return data;
|
||||
},
|
||||
enabled: currentStep === 'music' && !!selectedVideo,
|
||||
// --- Added for Internal Audio Tracks ---
|
||||
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
|
||||
queryKey: ['/api/audio-tracks'],
|
||||
});
|
||||
|
||||
const handleLoadNewMusic = () => {
|
||||
setMusicOffset(prev => prev + 10);
|
||||
refetchMusic();
|
||||
};
|
||||
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
|
||||
id: `internal_${t.id}`,
|
||||
title: t.title,
|
||||
artist: t.fileName || t.title,
|
||||
albumName: "Bibliothèque Interne",
|
||||
duration: t.duration || 0,
|
||||
previewUrl: t.url,
|
||||
downloadUrl: t.url,
|
||||
imageUrl: "",
|
||||
license: "Internal"
|
||||
}));
|
||||
// --- End Internal Tracks ---
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async (file: File) => {
|
||||
@@ -269,7 +265,7 @@ export default function MobileNewReel() {
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3 mt-4">
|
||||
{videoList.map((media) => (
|
||||
<div key={media.id} onClick={() => setSelectedVideoId(media.id) || setSelectedVideo(media)} className={`relative aspect-[9/16] bg-black rounded-lg overflow-hidden border-2 transition-all ${selectedVideoId === media.id ? 'border-primary' : 'border-transparent'}`}>
|
||||
<div key={media.id} onClick={() => { setSelectedVideoId(media.id); setSelectedVideo(media); }} className={`relative aspect-[9/16] bg-black rounded-lg overflow-hidden border-2 transition-all ${selectedVideoId === media.id ? 'border-primary' : 'border-transparent'}`}>
|
||||
<video src={media.originalUrl} className="w-full h-full object-cover" muted />
|
||||
</div>
|
||||
))}
|
||||
@@ -314,18 +310,32 @@ export default function MobileNewReel() {
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{musicData?.tracks?.map((track) => (
|
||||
<div key={track.id} onClick={() => setSelectedTrack(track)} className={`flex items-center gap-3 p-3 rounded-xl border ${selectedTrack?.id === track.id ? 'border-primary bg-primary/5' : 'border-border bg-card'}`}>
|
||||
<Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
|
||||
{isPlaying === track.id ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
|
||||
</Button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{track.title}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{track.artist}</p>
|
||||
</div>
|
||||
{selectedTrack?.id === track.id && <Check className="h-5 w-5 text-primary" />}
|
||||
{internalTracksLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
</div>
|
||||
))}
|
||||
) : internalTracks.length === 0 ? (
|
||||
<div className="text-center py-10 border-2 border-dashed border-border rounded-xl">
|
||||
<Music className="w-12 h-12 mx-auto text-muted-foreground mb-4 opacity-40" />
|
||||
<p className="text-muted-foreground font-medium">Aucune musique disponible</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Un administrateur peut ajouter des MP3 via la Bibliothèque Audio.</p>
|
||||
</div>
|
||||
) : (
|
||||
internalTracks.map((track) => (
|
||||
<div key={track.id} onClick={() => setSelectedTrack(track)} className={`flex items-center gap-3 p-3 rounded-xl border ${selectedTrack?.id === track.id ? 'border-primary bg-primary/5' : 'border-border bg-card'}`}>
|
||||
<Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
|
||||
{isPlaying === track.id ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 ml-0.5" />}
|
||||
</Button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{track.title}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
|
||||
</p>
|
||||
</div>
|
||||
{selectedTrack?.id === track.id && <Check className="h-5 w-5 text-primary" />}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedTrack && (
|
||||
|
||||
+100
-130
@@ -69,10 +69,17 @@ export default function NewReel() {
|
||||
const [drawText, setDrawText] = useState(true);
|
||||
const [stabilize, setStabilize] = useState(true); // default to true
|
||||
|
||||
// Enable TTS by default on mobile
|
||||
useEffect(() => {
|
||||
const isMobile = window.innerWidth < 768;
|
||||
if (isMobile) {
|
||||
setTtsEnabled(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
// État audio preview
|
||||
const [isPlaying, setIsPlaying] = useState<string | null>(null);
|
||||
const [musicOffset, setMusicOffset] = useState(0);
|
||||
|
||||
// Récupérer les pages disponibles
|
||||
const { data: pages = [] } = useQuery<SocialPage[]>({
|
||||
@@ -86,31 +93,23 @@ 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<MusicTrack[]>([]);
|
||||
|
||||
// Recherche de musiques par durée
|
||||
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&offset=${musicOffset}`
|
||||
);
|
||||
const data = await response.json();
|
||||
setLoadedTracks(data.tracks || []);
|
||||
return data;
|
||||
},
|
||||
enabled: currentStep === 'music' && !!selectedVideo,
|
||||
// --- Added for Internal Audio Tracks ---
|
||||
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
|
||||
queryKey: ['/api/audio-tracks'],
|
||||
});
|
||||
|
||||
// Charger 10 nouvelles musiques
|
||||
const handleLoadNewMusic = () => {
|
||||
setMusicOffset(prev => prev + 10);
|
||||
refetchMusic();
|
||||
};
|
||||
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
|
||||
id: `internal_${t.id}`,
|
||||
title: t.title,
|
||||
artist: t.fileName || t.title,
|
||||
albumName: "Bibliothèque Interne",
|
||||
duration: t.duration || 0,
|
||||
previewUrl: t.url,
|
||||
downloadUrl: t.url,
|
||||
imageUrl: "",
|
||||
license: "Internal"
|
||||
}));
|
||||
// --- End Internal Tracks ---
|
||||
|
||||
// Upload vidéo
|
||||
const uploadMutation = useMutation({
|
||||
@@ -531,118 +530,89 @@ export default function NewReel() {
|
||||
<CardContent>
|
||||
<audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
|
||||
|
||||
{musicLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
{(!musicData?.tracks || musicData.tracks.length === 0) && (
|
||||
<div className="text-center py-8 border-2 border-dashed border-border rounded-lg">
|
||||
<Music className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
|
||||
<p className="text-muted-foreground mb-2">
|
||||
Aucune musique disponible
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mb-4">
|
||||
Service FreeSound non configuré ou aucun résultat trouvé
|
||||
</p>
|
||||
<a
|
||||
href="https://freesound.org/apiv2/apply/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:underline"
|
||||
>
|
||||
Obtenir des credentials FreeSound →
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{musicData?.tracks?.map((track) => (
|
||||
<div
|
||||
key={track.id}
|
||||
onClick={() => handleSelectTrack(track)}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${selectedTrack?.id === track.id
|
||||
? 'bg-primary/10 border border-primary'
|
||||
: 'bg-muted/50 hover:bg-muted'
|
||||
}`}
|
||||
{/* BIBLIOTHÈQUE INTERNE */}
|
||||
<div className="space-y-2">
|
||||
{internalTracksLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : internalTracks.length === 0 ? (
|
||||
<div className="text-center py-10 border-2 border-dashed border-border rounded-xl">
|
||||
<Music className="w-12 h-12 mx-auto text-muted-foreground mb-4 opacity-40" />
|
||||
<p className="text-muted-foreground font-medium">Aucune musique disponible</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Un administrateur peut ajouter des MP3 via la Bibliothèque Audio.</p>
|
||||
</div>
|
||||
) : (
|
||||
internalTracks.map((track) => (
|
||||
<div
|
||||
key={track.id}
|
||||
onClick={() => handleSelectTrack(track)}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${selectedTrack?.id === track.id
|
||||
? 'bg-primary/10 border border-primary'
|
||||
: 'bg-muted/50 hover:bg-muted'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
togglePlayPreview(track);
|
||||
}}
|
||||
className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30 shrink-0"
|
||||
>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
togglePlayPreview(track);
|
||||
}}
|
||||
className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30"
|
||||
>
|
||||
{isPlaying === track.id ? (
|
||||
<Pause className="w-5 h-5" />
|
||||
) : (
|
||||
<Play className="w-5 h-5 ml-0.5" />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{track.title}</p>
|
||||
<p className="text-sm text-muted-foreground truncate">{track.artist}</p>
|
||||
</div>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{formatDuration(track.duration)}
|
||||
</span>
|
||||
{selectedTrack?.id === track.id && (
|
||||
<Check className="w-5 h-5 text-primary" />
|
||||
{isPlaying === track.id ? (
|
||||
<Pause className="w-5 h-5" />
|
||||
) : (
|
||||
<Play className="w-5 h-5 ml-0.5" />
|
||||
)}
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{track.title}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Bouton pour charger 10 nouvelles musiques */}
|
||||
{musicData?.tracks && musicData.tracks.length > 0 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mt-4"
|
||||
onClick={handleLoadNewMusic}
|
||||
disabled={musicLoading}
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${musicLoading ? 'animate-spin' : ''}`} />
|
||||
10 nouvelles musiques
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedTrack && (
|
||||
<div className="mt-4 space-y-4">
|
||||
<div>
|
||||
<Label className="flex items-center gap-2">
|
||||
<Volume2 className="w-4 h-4" />
|
||||
Volume musique: {musicVolume[0]}%
|
||||
</Label>
|
||||
<Slider
|
||||
value={musicVolume}
|
||||
onValueChange={setMusicVolume}
|
||||
max={100}
|
||||
step={5}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
{selectedTrack?.id === track.id && (
|
||||
<Check className="w-5 h-5 text-primary shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-between">
|
||||
<Button variant="outline" onClick={() => setCurrentStep('video')}>
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={() => {
|
||||
setSelectedTrack(null);
|
||||
setCurrentStep('text');
|
||||
}}>
|
||||
Passer
|
||||
</Button>
|
||||
<Button onClick={() => setCurrentStep('text')}>
|
||||
Continuer
|
||||
<ChevronRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
{/* Slider volume + navigation */}
|
||||
{selectedTrack && (
|
||||
<div className="mt-4">
|
||||
<Label className="flex items-center gap-2">
|
||||
<Volume2 className="w-4 h-4" />
|
||||
Volume musique: {musicVolume[0]}%
|
||||
</Label>
|
||||
<Slider
|
||||
value={musicVolume}
|
||||
onValueChange={setMusicVolume}
|
||||
max={100}
|
||||
step={5}
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex justify-between">
|
||||
<Button variant="outline" onClick={() => setCurrentStep('video')}>
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" onClick={() => {
|
||||
setSelectedTrack(null);
|
||||
setCurrentStep('text');
|
||||
}}>
|
||||
Passer
|
||||
</Button>
|
||||
<Button onClick={() => setCurrentStep('text')}>
|
||||
Continuer
|
||||
<ChevronRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user