script.js

let currentSong = new Audio();
let songs = [];
let currFolder = "";

function secondsToMinutesSeconds(seconds) {
    if (isNaN(seconds) || seconds < 0) return "00:00";
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.floor(seconds % 60);
    return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
}

async function getSongs(folder) {
    currFolder = folder;
    let encodedFolder = encodeURIComponent(folder);
    let a = await fetch(`/songs/${encodedFolder}/`);
    let response = await a.text();

    let div = document.createElement("div");
    div.innerHTML = response;
    let as = div.getElementsByTagName("a");

    songs = [];
    for (let index = 0; index < as.length; index++) {
        const element = as[index];
        if (element.href.endsWith(".mp3")) {
            let songName = element.href.split('/').pop();
            songs.push(decodeURIComponent(songName));
        }
    }

    let songUl = document.querySelector(".songlist ul");
    songUl.innerHTML = "";
    for (const song of songs) {
        songUl.innerHTML += 
            `<li>
                <div class="info">
                    <img class="invert" src="music.svg" alt="">
                    <div class="details">
                        <div class="song-name">${song.replaceAll("%20", " ")}</div>
                        <div class="song-artist">${currFolder}</div>
                    </div>
                </div>
                <div class="playnow">
                    <span>Play Now</span>
                    <img class="invert" src="play.svg" alt="">
                </div>
            </li>`;
    }

    Array.from(document.querySelectorAll(".songlist li")).forEach(e => {
        e.addEventListener("click", () => {
            playMusic(e.querySelector(".details .song-name").textContent.trim());
        });
    });
}

const playMusic = (track, pause = false) => {
    currentSong.src = `/songs/${currFolder}/` + encodeURIComponent(track);
    const playingGif = document.getElementById("playingGif");

    if (!pause) {
        currentSong.play();
        document.getElementById("play").src = "pause.svg";
        playingGif.style.display = "block";
    } else {
        currentSong.pause();
        document.getElementById("play").src = "play.svg";
        playingGif.style.display = "none";
    }
    document.querySelector(".songinfo").innerHTML = decodeURI(track);
    document.querySelector(".songtime").innerHTML = "00:00 / 00:00";
}

async function main() {
    // Load default playlist on page load
    await getSongs("Saiman");

    if (songs.length > 0) {
        currentSong.src = `/songs/${currFolder}/` + encodeURIComponent(songs[0]);
    }

    const playButton = document.getElementById("play");
    playButton.addEventListener("click", () => {
        if (currentSong.paused) {
            currentSong.play();
            playButton.src = "pause.svg";
            document.getElementById("playingGif").style.display = "block";
        } else {
            currentSong.pause();
            playButton.src = "play.svg";
            document.getElementById("playingGif").style.display = "none";
        }
    });

    currentSong.addEventListener("timeupdate", () => {
        document.querySelector(".songtime").innerHTML = `${secondsToMinutesSeconds(currentSong.currentTime)} / ${secondsToMinutesSeconds(currentSong.duration)}`;
        document.querySelector(".circle").style.left = (currentSong.currentTime / currentSong.duration) * 100 + "%";
    });

    document.querySelector(".seekbar").addEventListener("click", e => {
        let percent = (e.offsetX / e.target.getBoundingClientRect().width) * 100;
        document.querySelector(".circle").style.left = percent + "%";
        currentSong.currentTime = ((currentSong.duration) * percent) / 100;
    });

    document.querySelector(".hamburger").addEventListener("click", () => {
        document.querySelector(".left").style.left = "0";
    });

    document.querySelector(".close").addEventListener("click", () => {
        document.querySelector(".left").style.left = "-120%";
    });

    document.getElementById("previous").addEventListener("click", () => {
        let currentSongName = decodeURIComponent(currentSong.src.split("/").pop());
        let index = songs.indexOf(currentSongName);
        if (index > 0) {
            playMusic(songs[index - 1]);
        }
    });

    document.getElementById("next").addEventListener("click", () => {
        let currentSongName = decodeURIComponent(currentSong.src.split("/").pop());
        let index = songs.indexOf(currentSongName);
        if (index < songs.length - 1) {
            playMusic(songs[index + 1]);
        }
    });

    document.querySelector(".range input").addEventListener("change", (e) => {
        currentSong.volume = parseInt(e.target.value) / 100;
        const volumeIcon = document.querySelector(".volume>img");
        if (currentSong.volume > 0) {
            volumeIcon.src = "volume.svg";
        } else {
            volumeIcon.src = "mute.svg";
        }
    });

    Array.from(document.getElementsByClassName("card")).forEach(e => { 
        e.addEventListener("click", async item => {
            await getSongs(item.currentTarget.dataset.folder);
            if (songs.length > 0) {
                playMusic(songs[0]);
            }
        });
    });
}

main();