brikk.rocks/scripts/script.js

console.log("script.js wurde geladen!");

document.addEventListener("DOMContentLoaded", () => {
    let audioPlayer = document.getElementById("audioPlayer");

    // Falls das Audio-Element nicht existiert (z. B. auf Unterseiten), erstelle es dynamisch
    if (!audioPlayer) {
        audioPlayer = document.createElement("audio");
        audioPlayer.id = "audioPlayer";
        document.body.appendChild(audioPlayer);
    }

    const playMusicButton = document.getElementById("playMusic");
    const menuPlayPauseButton = document.getElementById("menuPlayPause");
    const soundwaveButton = document.getElementById("soundwaveButton");
    const menu = document.getElementById("menu");
    const progressSlider = document.getElementById("progressSlider");
    const trackButtons = document.querySelectorAll(".track");
    const playPauseButton = document.querySelector(".play-pause");
    const prevButton = document.querySelector(".prev");
    const nextButton = document.querySelector(".next");
    const header = document.querySelector("header");

    let currentIndex = 0;
    let dotInterval;

    /** 🎵 MUSIK SPEICHERN & WIEDERHERSTELLEN **/
    if (sessionStorage.getItem("audioSrc")) {
        audioPlayer.src = sessionStorage.getItem("audioSrc"); 
        audioPlayer.currentTime = parseFloat(sessionStorage.getItem("audioTime")) || 0;
        if (sessionStorage.getItem("audioPlaying") === "true") {
            audioPlayer.play();
        }
    } else if (!audioPlayer.src) {
        audioPlayer.src = "audio/bounce_launcher.mp3"; // Standard-Track nur setzen, wenn kein Track gespeichert ist
    }

    audioPlayer.addEventListener("timeupdate", () => {
        sessionStorage.setItem("audioTime", audioPlayer.currentTime);
    });

    audioPlayer.addEventListener("play", () => {
        sessionStorage.setItem("audioSrc", audioPlayer.src);
        sessionStorage.setItem("audioPlaying", "true");
    });

    audioPlayer.addEventListener("pause", () => {
        sessionStorage.setItem("audioPlaying", "false");
    });

    /** 🎚️ Fortschrittsleiste **/
    if (progressSlider) {
        audioPlayer.addEventListener("timeupdate", () => {
            if (audioPlayer.duration) {
                let progressPercent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
                progressSlider.value = progressPercent;
                progressSlider.style.background = `linear-gradient(to right, var(--secondary-color) ${progressPercent}%, #555 ${progressPercent}%)`;
            }
        });

        progressSlider.addEventListener("input", () => {
            let seekTime = (progressSlider.value / 100) * audioPlayer.duration;
            audioPlayer.currentTime = seekTime;
        });
    }

    /** 🎛️ Play/Pause-Icons aktualisieren **/
    function updatePlayPauseIcon() {
        let playIcon = "img/icons/play.png";
        let pauseIcon = "img/icons/pause.png";

        let playImg = `<img src="${playIcon}" alt="Play">`;
        let pauseImg = `<img src="${pauseIcon}" alt="Pause">`;

        if (!audioPlayer) return;

        if (audioPlayer.paused) {
            if (playPauseButton) playPauseButton.innerHTML = '<i class="fas fa-play"></i>';
            if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = playImg;
            if (playMusicButton) playMusicButton.innerHTML = playImg;
            if (soundwaveButton) soundwaveButton.classList.remove("playing");
        } else {
            if (playPauseButton) playPauseButton.innerHTML = '<i class="fas fa-pause"></i>';
            if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = pauseImg;
            if (playMusicButton) playMusicButton.innerHTML = pauseImg;
            if (soundwaveButton) soundwaveButton.classList.add("playing");
        }
    }

    updatePlayPauseIcon();

    if (audioPlayer && !audioPlayer.paused) {
        if (soundwaveButton) soundwaveButton.classList.add("playing");
    }

    /** ▶️ / ⏸️ Play/Pause Funktion **/
    function playPauseToggle() {
        if (audioPlayer.paused) {
            audioPlayer.play();
            sessionStorage.setItem("audioPlaying", "true");
        } else {
            audioPlayer.pause();
            sessionStorage.setItem("audioPlaying", "false");
        }
        updatePlayPauseIcon();
    }

    /** 🖱️ EventListener für Play/Pause **/
    if (playPauseButton) playPauseButton.addEventListener("click", playPauseToggle);
    if (menuPlayPauseButton) menuPlayPauseButton.addEventListener("click", playPauseToggle);
    if (playMusicButton) playMusicButton.addEventListener("click", playPauseToggle);

    /** 📜 Menü öffnen & schließen **/
    function toggleMenu() {
        if (!menu) return;
        menu.classList.toggle("active");
        updateHeaderState(); // Header-Zustand sofort anpassen
    }

    document.querySelectorAll("#menu nav a").forEach(link => {
        link.addEventListener("click", () => {
            closeMenu(); // Menü schließen, wenn ein Link geklickt wird
        });
    });
    
    
    function updateHeaderState() {
        if (menu && menu.classList.contains("active")) {
            // Menü ist geöffnet → Schrift schwarz, transparenter Hintergrund, kein Blur
            header.classList.add("menu-open");
            
        } else {
            // Menü ist geschlossen → Schrift weiß, dunkler transparenter Hintergrund mit Blur
            header.classList.remove("menu-open");
            
        }
    }
    
   

    function closeMenu() {
        if (!menu) return;
        menu.classList.remove("active");
        updateHeaderState();
    }

    if (soundwaveButton) soundwaveButton.addEventListener("click", toggleMenu);
    if (menu) {
        menu.addEventListener("click", (e) => {
            if (e.target === menu) closeMenu();
        });
    }



    /** 🔥 Markiert den aktuellen Track **/
    function updateTrackHighlight(activeButton) {
        trackButtons.forEach(btn => {
            btn.classList.remove("playing");
            btn.querySelector(".track-dots").innerText = "";
        });
        activeButton.classList.add("playing");
        animateDots();
    }

    /** 💡 Punkt-Animation **/
    function animateDots() {
        clearInterval(dotInterval);
        let playingTrack = document.querySelector(".track.playing .track-dots");
        if (!playingTrack) return;
        let dots = [".", "..", "...", ".....", "........"];
        let dotIndex = 0;
        dotInterval = setInterval(() => {
            if (!document.querySelector(".track.playing") || audioPlayer.paused) {
                clearInterval(dotInterval);
                if (playingTrack) playingTrack.innerText = "";
                return;
            }
            playingTrack.innerText = dots[dotIndex];
            dotIndex = (dotIndex + 1) % dots.length;
        }, 50);
    }

    /** 🎵 EventListener für Track-Klick **/
    trackButtons.forEach(button => button.addEventListener("click", (event) => {
        let clickedButton = event.currentTarget;
        let trackSrc = clickedButton.dataset.src;
        if (audioPlayer.src !== trackSrc) {
            audioPlayer.src = trackSrc;
            audioPlayer.play();
            updateTrackHighlight(clickedButton);
        } else {
            playPauseToggle();
        }
        updatePlayPauseIcon();
    }));


    /** ⏩ Nächster Track **/
function playNextTrack() {
    currentIndex = (currentIndex + 1) % trackButtons.length;
    let nextTrack = trackButtons[currentIndex];
    audioPlayer.src = nextTrack.dataset.src;
    audioPlayer.play();
    updateTrackHighlight(nextTrack);
    updatePlayPauseIcon();
}

/** ⏪ Vorheriger Track **/
function playPreviousTrack() {
    currentIndex = (currentIndex - 1 + trackButtons.length) % trackButtons.length;
    let prevTrack = trackButtons[currentIndex];
    audioPlayer.src = prevTrack.dataset.src;
    audioPlayer.play();
    updateTrackHighlight(prevTrack);
    updatePlayPauseIcon();
}

/** 🖱️ EventListener für Prev/Nächster Button **/
if (nextButton) nextButton.addEventListener("click", playNextTrack);
if (prevButton) prevButton.addEventListener("click", playPreviousTrack);


audioPlayer.addEventListener("ended", () => {
    playNextTrack();
    updateTrackHighlight(trackButtons[currentIndex]); // Markierung für den neuen Track setzen
});
});