mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-24 07:28:11 +02:00
feat: Implement internal MP3 management and logo overlay functionality for Reels.
This commit is contained in:
1 parent
d89de20df2
commit
0e9622b5eb
12 files changed
+632
-8
No files matched your search
@@ -97,6 +97,24 @@ export default function NewReel() {
|
||||
// État pour stocker les musiques chargées manuellement
|
||||
const [loadedTracks, setLoadedTracks] = useState<MusicTrack[]>([]);
|
||||
|
||||
// --- Added for Internal Audio Tracks ---
|
||||
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
|
||||
queryKey: ['/api/audio-tracks'],
|
||||
});
|
||||
|
||||
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
|
||||
id: `internal_${t.id}`,
|
||||
title: t.title,
|
||||
artist: "Bibliothèque Interne",
|
||||
albumName: "Upload",
|
||||
duration: t.duration || 0,
|
||||
previewUrl: t.url,
|
||||
downloadUrl: t.url,
|
||||
imageUrl: "",
|
||||
license: "Internal"
|
||||
}));
|
||||
// --- 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],
|
||||
@@ -539,6 +557,54 @@ export default function NewReel() {
|
||||
<CardContent>
|
||||
<audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
|
||||
|
||||
{/* INTERNAL TRACKS SECTION */}
|
||||
<div className="mb-6 space-y-2">
|
||||
<h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wider px-1">Bibliothèque Interne</h3>
|
||||
{internalTracksLoading ? (
|
||||
<div className="flex justify-center py-4"><Loader2 className="w-6 h-6 animate-spin text-primary" /></div>
|
||||
) : 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>
|
||||
) : (
|
||||
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"
|
||||
>
|
||||
{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-primary truncate font-medium flex items-center gap-1">
|
||||
<Music className="w-3 h-3" />
|
||||
{track.artist}
|
||||
</p>
|
||||
</div>
|
||||
{selectedTrack?.id === track.id && (
|
||||
<Check className="w-5 h-5 text-primary shrink-0" />
|
||||
)}
|
||||
</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>
|
||||
|
||||
{musicLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
|
||||
Reference in new issue
Block a user