diff --git a/Video 84 - Project 2 - Spotify Clone/js/js1 b/Video 84 - Project 2 - Spotify Clone/js/js1 new file mode 100644 index 0000000..a151ee9 --- /dev/null +++ b/Video 84 - Project 2 - Spotify Clone/js/js1 @@ -0,0 +1,195 @@ +console.log('Lets write JavaScript'); +let currentSong = new Audio(); +let songs; +let currFolder; + +function secondsToMinutesSeconds(seconds) { + if (isNaN(seconds) || seconds < 0) { + return "00:00"; + } + // Calculate minutes and remaining seconds + const minutes = Math.floor(seconds / 60); + const remainingSeconds = Math.floor(seconds % 60); + + // Format the minutes and seconds with leading zeros + const formattedMinutes = String(minutes).padStart(2, '0'); + const formattedSeconds = String(remainingSeconds).padStart(2, '0'); + + // Return the formatted string in "mm:ss" format + return `${formattedMinutes}:${formattedSeconds}`; +} + +async function getSongs(folder) { + currFolder = folder; + + let a = await fetch(`/${folder}/`) + 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")) { + songs.push(element.href.split(`/${folder}/`)[1]) + } + } + + + let songUL = document.querySelector(".songlist").getElementsByTagName("ul")[0] + songUL.innerHTML = "" + for (const song of songs) { + songUL.innerHTML = songUL.innerHTML + `
  • +
    +
    ${song.replaceAll("%20", " ")}
    +
    Nick
    +
    +
    + Play Now + +
    • `; + } + // attaching event listner to all songs + Array.from(document.querySelector(".songlist").getElementsByTagName("li")).forEach(e => { + e.addEventListener("click", element => { + console.log(e.querySelector(".info").firstElementChild.innerHTML) + playMusic(e.querySelector(".info").firstElementChild.innerHTML.trim()); + + }) + + }) + return songs +} + + + // attach an event listner to play,pause and previous + play.addEventListener("click", () => { + if (currentSong.paused) { + currentSong.play() + play.src = "img/pause.svg" + } + else { + currentSong.pause() + play.src = "img/play.svg" + } + }) + +const playMusic = (track, pause = false) => { + // let audio = new Audio("/songs/" + track ) + currentSong.src = `/${currFolder}/` + track + if (!pause) { + currentSong.play() + play.src = "img/pause.svg" + + } + document.querySelector(".songinfo").innerHTML = track //we can use decode here + document.querySelector(".songtime").innerHTML = "00:00/00:00" +} + +async function displayAlbums() { + let a = await fetch(`/songs/`) + let response = await a.text(); + let div = document.createElement("div") + div.innerHTML = response; + let anchors = div.getElementsByTagName("a") + let cardContainer = document.querySelector(".cardContainer") + let array = Array.from(anchors) + for (let index = 0; index < array.length; index++) { + const e = array[index]; + + if (e.href.includes("/songs/") && !e.href.includes(".htaccess")){ + + let folder = (e.href.split("/").slice(-1)[0]) + //Get the metadata of the folder + let a = await fetch(`/songs/${folder}/info.json`) + let response = await a.json(); + console.log(response) + cardContainer.innerHTML = cardContainer.innerHTML + `
    +
    + + + +
    + +

    ${response.title}

    +

    ${response.description}

    +
    ` + } + + } + //load the playlist whenever card is clicked + + Array.from(document.getElementsByClassName("card")).forEach(e => { + e.addEventListener("click", async item => { + songs = await getSongs(`songs/${item.currentTarget.dataset.folder}`) + playMusic(songs[0]) + }) + }) + + +} + + +async function main() { + + await getSongs("songs/GDS") + playMusic(songs[0], true) + + //display all the albums in the page + displayAlbums() + + // listen for time update event + currentSong.addEventListener("timeupdate", () => { + document.querySelector(".songtime").innerHTML = `${secondsToMinutesSeconds(currentSong.currentTime)} / ${secondsToMinutesSeconds(currentSong.duration)}` + document.querySelector(".circle").style.left = (currentSong.currentTime / currentSong.duration) * 100 + "%"; + }) + // add a event listner for seek bar + 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 + }) + //add an event listner for hamburger + document.querySelector(".hamburger").addEventListener("click", () => { + document.querySelector(".left").style.left = "0" + }) + + //add an event listner for close button + document.querySelector(".close").addEventListener("click", () => { + document.querySelector(".left").style.left = "-120%" + }) + + previous.addEventListener("click", () => { + console.log("previous clicked") + console.log("currentsong") + let index = songs.indexOf(currentSong.src.split("/").slice(-1)[0]) + if ((index - 1) >= 0) { + playMusic(songs[index - 1]) + + } + }) + + next.addEventListener("click", () => { + console.log("Next clicked") + let index = songs.indexOf(currentSong.src.split("/").slice(-1)[0]) + if ((index + 1) < songs.length) { + playMusic(songs[index + 1]) + + } + }) + + //load the playlist whenever card is clicked + + Array.from(document.getElementsByClassName("card")).forEach(e => { + e.addEventListener("click", async item => { + + songs = await getSongs(`songs/${item.currentTarget.dataset.folder}`) + }) + }) + +} +main()