script.js

let songs;
let currFolder;
// we're making seperate folders for each artist or music type and now getsongs would not load the entire folder at a time  instead it'll only load the provided folder inside the song library.
let getsongs = async (folder) => {
    currFolder = folder;
    // accessing library through api's.
    let url = `http://127.0.0.1:5500/${folder}/`;
    let music = await fetch(url);
    // .text() method is used to convert the js response into the plain text.
    let response = await music.text(); // await is used  so that the other functioning of the code would get stopped until the whole html gets loaded in response.
    songs = [];
    let div = document.createElement('div');
    div.innerHTML = response;
    let anchorTags = div.getElementsByTagName('a');
    for (let index = 0; index < anchorTags.length; index++) {
        let element = anchorTags[index];
        if (element.href.endsWith('.mp3')) {
            // songs.push(element.href); only the path of the elemnt is being pushed. But we need only the name of the song.
            songs.push(element.href.split(`/${folder}/`)[1]); //split always returns an array with split element as first and second element of that array.
        }
    }
    // Code to display all songs in the playlist
    let Uls = document.querySelector('.songList').getElementsByTagName('ul')[0];
    Uls.innerHTML = " ";
    for (let song of songs) {
        Uls.innerHTML = Uls.innerHTML + `
        <li class="flex py-2 border mb-3 border-white">
                                    <img src="sources/music.svg" alt="loading" class='mr-2'>
                                    <div class="pt-2">
                                        <h2 class="text-xs">${song.replaceAll('%20', " ")}</h2>
                                        <h2 class="text-sm">- _knucklehead07</h2>
                                    </div>
                                    <span class="text-sm pt-3 ml-15 mr-2 hover:underline">Play Now</span>
                                    <img src="sources/play1.svg" alt="Loading"></img>
                                </li>`; // replaces the %20 comes in the path with blankspaces.
    }

    //attaching query selector to all the list items.
    //Array.from helps to convert any iterable into an array element.
    let allImgs=Array.from(document.querySelector(".songList").getElementsByTagName('img'));
    let playBtn=[];
    for (let index = 0; index < allImgs.length; index++) {
        let element = allImgs[index];
        if(element.src.includes("sources/play1.svg")){
            playBtn.push(element); 
        }
    }
    Array.from(document.querySelector('.songList').getElementsByTagName('li')).forEach(gaana => {
        gaana.addEventListener("click", (evt) => {
            let currplayBtn=evt.currentTarget.getElementsByTagName('img')[1];
            currplayBtn.src="sources/pause1.svg";
            playMusic(`${gaana.querySelector('div').firstElementChild.innerHTML}`);

        })
        // This above statment would result us in the name of the Currentsong.
    })
    playBtn.forEach((evt)=>{
        evt.addEventListener("click",(e)=>{
              e.stopPropagation();
            if(currSong.paused){
                e.target.src="sources/pause1.svg";
                currSong.play();
                play.src = "sources/pause.svg"               
            }
            else{              
                currSong.pause();
                e.target.src="sources/play1.svg";
                play.src = "sources/play.svg"
            }
        })
    })
     return songs ;
}

// for converting seconds into minutes : seconds format 
function formatTime(seconds) {
    let minutes = Math.floor(seconds / 60);
    let remainingSeconds = Math.floor(seconds % 60);

    // add leading zero if needed
    minutes = minutes < 10 ? "0" + minutes : minutes;
    remainingSeconds = remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds;

    return minutes + ":" + remainingSeconds;
}

let currSong = new Audio(); // a single global var is made since only one song should be played at a time.
let playMusic = (track, pause = false, pause1=false) => {
    currSong.src = `/${currFolder}/` + track; //.src always expects only a string.
    // since all the tracks are inside the songs folder. 
    if (!pause) {
        currSong.play();
        play.src = "sources/pause.svg";
        document.querySelector(".songList").getElementsByTagName("img")[1].src="sources/pause1.svg";
    }
    document.querySelector(".songInfo").innerHTML = decodeURI(track); // since encoded url was coming up here 
    document.querySelector(".songDuration").innerHTML = "00:00 / 00:00";

}

async function displayAlbums() {
    let url = `http://127.0.0.1:5500/songs/`;
    let albums = await fetch(url);
    let response = await albums.text();
    let div = document.createElement('div');
    div.innerHTML = response;
    let anchorTags = div.getElementsByTagName('a');
    let a=Array.from(anchorTags);
    let cardContainer = document.querySelector(".cardContainer");
    for(let idx= 0;idx < a.length;idx++){
        let element=a[idx];
        if (element.href.includes("/songs/")){ // includes is a function in js that only picks up those tracks that contains /songs/ in it.
            let folder = element.href.split("/songs/")[1]; // contains the name of the folders 
    
            // now fetching the meta data from the json file created in each folder 
            let url = `http://127.0.0.1:5500/songs/${folder}/info.json`;
            let albums = await fetch(url);
            let response = await albums.json();
            cardContainer.innerHTML = cardContainer.innerHTML + `<div class="card" data-folder=${folder}>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"
                                role="img" aria-label="Play button" class="svgProperty">
    
                                <!-- Green circle -->
                                <circle cx="12" cy="12" r="11" fill="#1DB954" />
    
                                <!-- Smaller, centered play icon -->
                                <g transform="translate(12 12) scale(0.7) translate(-12 -12)">
                                    <path fill="black"
                                        d="M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z" />
                                </g>
                            </svg>
                            <img src="songs/${folder}/cover.jpeg" alt="loading" class="img">
                            <h2 class="text-sm font-bold">
                            ${response.title}</h2>
                            <p class="text-xs text-gray-400">${response.description}</p>
                        </div>`
        }
    }
}

async function main() {
    //Getting the list of all the songs.
    await getsongs("songs/HoneySingh");
    playMusic(songs[0], true);
    
    // Display all the albums on the page 
    await displayAlbums();

    //attaching event listener to previous  play  button.
    let play = document.getElementById('play'); // while using getElementbyId or getElementbyClass you don't use . or #
    play.addEventListener("click", () => {
        if (currSong.paused) {
            currSong.play();
            play.src = "sources/pause.svg";
        }
        else {
            currSong.pause();
            play.src = "sources/play.svg";
        }
    })
    // updating time as the music plays 
    currSong.addEventListener("timeupdate", () => {
        document.querySelector('.songDuration').innerHTML = `${formatTime(currSong.currentTime)} / ${formatTime(currSong.duration)}`;
        
        // seekbar formatting :
        document.querySelector('.circle').style.left = `${(currSong.currentTime / currSong.duration) * 100}` + "%";
    }) // css is applied from the left side which is equal to the calculation of currentTime and duration
    
    document.querySelector('.seekBar').addEventListener("click", (evt) => {
        let percent = `${((evt.offsetX / evt.target.getBoundingClientRect().width) * 100)}`;
        document.querySelector(".circle").style.left = percent + "%";
        // getBoundingClientRect() this tells how big is a particular element really is.
        
        //now if  we've changed the position of seekbar pointer  manually we also gotta change it's duration
        currSong.currentTime = (currSong.duration * percent) / 100;
        // (currSong.duration*percent)/100 this will give us the current time of the song.
        
        
    })
    //  Adding an event on the hamburger 
    document.querySelector(".hamburger").addEventListener("click", () => {
        document.querySelector(".left").style.left = "0px";
    })
    
    // Adding an event to the cross 
    document.querySelector(".cross").addEventListener("click", () => {
        document.querySelector(".left").style.left = "-110%";
    })
    
    // Adding an event to the previous
    let previous = document.getElementById('previous');
    previous.addEventListener("click", () => {
        currSong.pause();
        let index = songs.indexOf(currSong.src.split(`/${currFolder}/`)[1]);
        if ((index - 1) >= 0) {
            playMusic(songs[index - 1]);
        }
        else {
            playMusic(songs[0]);
        }
    })
    
    
    // Adding an eventlistener to the next button
    next.addEventListener("click", () => {
        let index = songs.indexOf(
            currSong.src.split(`/${currFolder}/`)[1]
        );
        index = (index + 1) % songs.length;
        playMusic(songs[index]);
    });
    
    // load the playlist whenever clicked on card 
    Array.from(document.getElementsByClassName("card")).forEach(element => {
        element.addEventListener("click", async (evt) => {
            // console.log(evt.target); represent that element where we have clicked but evt.currentTarget represents the place on which addEVentlistener is point
            songs = await getsongs(`songs/${evt.currentTarget.dataset.folder}`);
            playMusic(songs[0]);

            // since code of populating songs wasn't in getSongs earlier that's why we cut & pasted it into the getSongs function.
        })
    })   

    // tweeking with the volume bar :
    let input = document.querySelector(".volumeController").getElementsByTagName("input")[0];
    let volLogo = document.querySelector(".volumeController").getElementsByTagName("img")[0];
    // zero index is used since getElementsByTagName does not return a single value it returns multiple values bounded in array.
    input.addEventListener("change", (e) => {
        currSong.volume = (e.target.value) / 100;
        console.log(volLogo.src);
        if(volLogo.src.includes("sources/mute.svg")){
            volLogo.src="sources/volume.svg";
        }
    })
    volLogo.addEventListener("click", (e) => {
        if (e.target.src.includes("sources/volume.svg")) {
            e.target.src = "sources/mute.svg";
            currSong.volume = 0;
             document.querySelector(".volumeController").getElementsByTagName("input")[0].value=0;
        }
        else {
            e.target.src = "sources/volume.svg";
            currSong.volume=0.4;
            document.querySelector(".volumeController").getElementsByTagName("input")[0].value=40; 
        }

    })
}
main();