mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-11 17:26:45 +02:00
feat: introduce a new collapsible sidebar navigation component and an audio administration page.
This commit is contained in:
Michael committed
1 parent
9e9eb7d1bb
commit
451f0a441b
3 files changed
+71
-151
No files matched your search
@@ -286,6 +286,30 @@ export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</a>
|
</a>
|
||||||
|
<a
|
||||||
|
href="/audio-admin"
|
||||||
|
onClick={(e) => handleLinkClick("/audio-admin", e)}
|
||||||
|
className={`
|
||||||
|
flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
|
||||||
|
${location === "/audio-admin"
|
||||||
|
? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
|
||||||
|
: 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
|
||||||
|
}
|
||||||
|
${isCollapsed ? 'justify-center' : ''}
|
||||||
|
`}
|
||||||
|
data-testid="link-audio-admin"
|
||||||
|
>
|
||||||
|
{location === "/audio-admin" && (
|
||||||
|
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
|
||||||
|
)}
|
||||||
|
<Music className="w-5 h-5" />
|
||||||
|
{!isCollapsed && <span>Bibliothèque Audio</span>}
|
||||||
|
{isCollapsed && (
|
||||||
|
<div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
|
||||||
|
Bibliothèque Audio
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/settings"
|
href="/settings"
|
||||||
onClick={(e) => handleLinkClick("/settings", e)}
|
onClick={(e) => handleLinkClick("/settings", e)}
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export default function AudioAdmin() {
|
|||||||
const uploadMutation = useMutation({
|
const uploadMutation = useMutation({
|
||||||
mutationFn: async (file: File) => {
|
mutationFn: async (file: File) => {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("audio", file);
|
formData.append("file", file);
|
||||||
|
|
||||||
const res = await fetch("/api/audio-tracks", {
|
const res = await fetch("/api/audio-tracks", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
|||||||
+46
-150
@@ -80,7 +80,6 @@ export default function NewReel() {
|
|||||||
|
|
||||||
// État audio preview
|
// État audio preview
|
||||||
const [isPlaying, setIsPlaying] = useState<string | null>(null);
|
const [isPlaying, setIsPlaying] = useState<string | null>(null);
|
||||||
const [musicOffset, setMusicOffset] = useState(0);
|
|
||||||
|
|
||||||
// Récupérer les pages disponibles
|
// Récupérer les pages disponibles
|
||||||
const { data: pages = [] } = useQuery<SocialPage[]>({
|
const { data: pages = [] } = useQuery<SocialPage[]>({
|
||||||
@@ -94,9 +93,6 @@ export default function NewReel() {
|
|||||||
|
|
||||||
const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12);
|
const videoList = allMedia.filter(m => m.type === 'video').slice(0, 12);
|
||||||
|
|
||||||
// État pour stocker les musiques chargées manuellement
|
|
||||||
const [loadedTracks, setLoadedTracks] = useState<MusicTrack[]>([]);
|
|
||||||
|
|
||||||
// --- Added for Internal Audio Tracks ---
|
// --- Added for Internal Audio Tracks ---
|
||||||
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
|
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
|
||||||
queryKey: ['/api/audio-tracks'],
|
queryKey: ['/api/audio-tracks'],
|
||||||
@@ -105,8 +101,8 @@ export default function NewReel() {
|
|||||||
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
|
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
|
||||||
id: `internal_${t.id}`,
|
id: `internal_${t.id}`,
|
||||||
title: t.title,
|
title: t.title,
|
||||||
artist: "Bibliothèque Interne",
|
artist: t.fileName || t.title,
|
||||||
albumName: "Upload",
|
albumName: "Bibliothèque Interne",
|
||||||
duration: t.duration || 0,
|
duration: t.duration || 0,
|
||||||
previewUrl: t.url,
|
previewUrl: t.url,
|
||||||
downloadUrl: t.url,
|
downloadUrl: t.url,
|
||||||
@@ -115,29 +111,6 @@ export default function NewReel() {
|
|||||||
}));
|
}));
|
||||||
// --- End Internal Tracks ---
|
// --- End Internal Tracks ---
|
||||||
|
|
||||||
// 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,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Charger 10 nouvelles musiques
|
|
||||||
const handleLoadNewMusic = () => {
|
|
||||||
setMusicOffset(prev => prev + 10);
|
|
||||||
refetchMusic();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Upload vidéo
|
// Upload vidéo
|
||||||
const uploadMutation = useMutation({
|
const uploadMutation = useMutation({
|
||||||
mutationFn: async (file: File) => {
|
mutationFn: async (file: File) => {
|
||||||
@@ -557,13 +530,18 @@ export default function NewReel() {
|
|||||||
<CardContent>
|
<CardContent>
|
||||||
<audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
|
<audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
|
||||||
|
|
||||||
{/* INTERNAL TRACKS SECTION */}
|
{/* BIBLIOTHÈQUE INTERNE */}
|
||||||
<div className="mb-6 space-y-2">
|
<div className="space-y-2">
|
||||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider px-1">Bibliothèque Interne</h3>
|
|
||||||
{internalTracksLoading ? (
|
{internalTracksLoading ? (
|
||||||
<div className="flex justify-center py-4"><Loader2 className="w-6 h-6 animate-spin text-primary" /></div>
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||||
|
</div>
|
||||||
) : internalTracks.length === 0 ? (
|
) : internalTracks.length === 0 ? (
|
||||||
<p className="text-sm text-muted-foreground italic px-1 bg-muted/30 p-3 rounded-lg">Aucune musique n'a été ajoutée par les administrateurs.</p>
|
<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) => (
|
internalTracks.map((track) => (
|
||||||
<div
|
<div
|
||||||
@@ -589,9 +567,8 @@ export default function NewReel() {
|
|||||||
</button>
|
</button>
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="font-medium truncate">{track.title}</p>
|
<p className="font-medium truncate">{track.title}</p>
|
||||||
<p className="text-xs text-primary truncate font-medium flex items-center gap-1">
|
<p className="text-xs text-muted-foreground truncate">
|
||||||
<Music className="w-3 h-3" />
|
{Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
|
||||||
{track.artist}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{selectedTrack?.id === track.id && (
|
{selectedTrack?.id === track.id && (
|
||||||
@@ -601,122 +578,41 @@ export default function NewReel() {
|
|||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{/* END INTERNAL TRACKS SECTION */}
|
|
||||||
|
|
||||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider px-1 mb-2">Recherche FreeSound</h3>
|
{/* Slider volume + navigation */}
|
||||||
|
{selectedTrack && (
|
||||||
{musicLoading ? (
|
<div className="mt-4">
|
||||||
<div className="flex items-center justify-center py-8">
|
<Label className="flex items-center gap-2">
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
<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>
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<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'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<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>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in new issue
Block a user