mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-23 15:08:13 +02:00
feat(mobile): use internal audio tracks for reels instead of external search
This commit is contained in:
1 parent
4e189e7797
commit
ccfa2dd354
1 file changed
+40
-30
@@ -62,7 +62,6 @@ export default function MobileNewReel() {
|
|||||||
|
|
||||||
// É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);
|
|
||||||
const [stabilize, setStabilize] = useState(true); // Activé par défaut pour les Reels
|
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 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[] }>({
|
// --- Added for Internal Audio Tracks ---
|
||||||
queryKey: ['/api/music/search', selectedVideo?.id, musicOffset],
|
const { data: internalTracksResponse = [], isLoading: internalTracksLoading } = useQuery<any[]>({
|
||||||
queryFn: async () => {
|
queryKey: ['/api/audio-tracks'],
|
||||||
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,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleLoadNewMusic = () => {
|
const internalTracks: MusicTrack[] = (internalTracksResponse || []).map(t => ({
|
||||||
setMusicOffset(prev => prev + 10);
|
id: `internal_${t.id}`,
|
||||||
refetchMusic();
|
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({
|
const uploadMutation = useMutation({
|
||||||
mutationFn: async (file: File) => {
|
mutationFn: async (file: File) => {
|
||||||
@@ -314,18 +310,32 @@ export default function MobileNewReel() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
{musicData?.tracks?.map((track) => (
|
{internalTracksLoading ? (
|
||||||
<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'}`}>
|
<div className="flex items-center justify-center py-8">
|
||||||
<Button size="icon" variant="ghost" className="h-10 w-10 rounded-full bg-primary/10" onClick={(e) => { e.stopPropagation(); togglePlayPreview(track); }}>
|
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||||
{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" />}
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{selectedTrack && (
|
{selectedTrack && (
|
||||||
|
|||||||
Reference in new issue
Block a user