import React, { useState, useEffect, useRef } from 'react'; import { Play, Pause, SkipForward, SkipBack, Volume2, Calendar, Music, Mail, Instagram, Twitter, ExternalLink, Disc, CheckCircle, Headphones, Mic2, AlertCircle } from 'lucide-react'; /* CONFIGURATION DES MIXES Pour Hostinger : 1. Crée un dossier "mixes" dans ton dossier "public". 2. Mets tes fichiers mp3 dedans. 3. Mets à jour les "audioSrc" ci-dessous avec les noms exacts de tes fichiers (ex: "/mixes/mon-mix.mp3"). */ const MOCK_MIXES = [ { id: 1, title: "Midnight Dreams Vol. 1", genre: "Deep House / Melodic", duration: "58:30", date: "12 Jan 2026", color: "from-purple-600 to-blue-600", description: "Un voyage sonore pour les nuits sans fin. Mélodies hypnotiques et basses profondes.", bpm: 122, audioSrc: "/mixes/midnight_dreams_vol1.mp3" // Change ceci avec ton vrai fichier }, { id: 2, title: "Techno Bunker Session", genre: "Peak Time Techno", duration: "1:05:12", date: "28 Dec 2025", color: "from-red-600 to-orange-600", description: "Énergie pure pour le dancefloor. Attention, haute intensité.", bpm: 135, audioSrc: "/mixes/techno_bunker.mp3" }, { id: 3, title: "Sunset Rooftop Live", genre: "Organic House", duration: "45:20", date: "10 Nov 2025", color: "from-pink-500 to-rose-400", description: "Vibes solaires enregistrées en live à Nice. Parfait pour l'apéro.", bpm: 118, audioSrc: "/mixes/sunset_live.mp3" }, { id: 4, title: "Lucid State of Mind", genre: "Progressive Trance", duration: "1:12:00", date: "15 Oct 2025", color: "from-cyan-500 to-blue-500", description: "L'essence même du projet 2Lucid. Un mix qui vous emmène ailleurs.", bpm: 128, audioSrc: "/mixes/lucid_state.mp3" } ]; export default function App() { const [currentTrack, setCurrentTrack] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [isMenuOpen, setIsMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState('home'); const [showNotification, setShowNotification] = useState(false); const [volume, setVolume] = useState(0.7); const [loadError, setLoadError] = useState(false); // Référence vers l'élément audio HTML réel const audioRef = useRef(null); // Gestion de la lecture/pause quand l'état change useEffect(() => { if (audioRef.current) { if (isPlaying) { const playPromise = audioRef.current.play(); if (playPromise !== undefined) { playPromise.catch((error) => { console.log("Lecture empêchée ou fichier manquant:", error); setIsPlaying(false); }); } } else { audioRef.current.pause(); } } }, [isPlaying, currentTrack]); // Gestion du volume useEffect(() => { if (audioRef.current) { audioRef.current.volume = volume; } }, [volume]); const handlePlay = (mix) => { setLoadError(false); if (currentTrack?.id === mix.id) { setIsPlaying(!isPlaying); } else { setCurrentTrack(mix); setIsPlaying(true); // Le changement de source est géré par la prop 'src' de l'élément audio } }; const handleTimeUpdate = () => { const current = audioRef.current.currentTime; const total = audioRef.current.duration; setCurrentTime(current); setDuration(total); setProgress((current / total) * 100); }; const handleAudioEnded = () => { setIsPlaying(false); setProgress(0); }; const handleAudioError = () => { if (currentTrack) { console.error("Erreur de chargement du fichier audio:", currentTrack.audioSrc); setLoadError(true); setIsPlaying(false); } }; const handleSeek = (e) => { if (!audioRef.current) return; const clickPosition = (e.nativeEvent.offsetX / e.currentTarget.offsetWidth); const newTime = clickPosition * audioRef.current.duration; audioRef.current.currentTime = newTime; setProgress(clickPosition * 100); }; // Formatage du temps (secondes -> mm:ss) const formatTime = (time) => { if (isNaN(time)) return "00:00"; const minutes = Math.floor(time / 60); const seconds = Math.floor(time % 60); return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; }; const handleNavClick = (sectionId) => { setActiveSection(sectionId); setIsMenuOpen(false); const element = document.getElementById(sectionId); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }; const handleContactSubmit = (e) => { e.preventDefault(); setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); }; return (
{/* Lecteur Audio Caché (Le vrai moteur) */}
); }