function enqueue(ids){
    ids.forEach(id => {
        fetch("/"+id)
    })
}
function delete_item(index){
    fetch(`/delete/${index}`)
}
function random(){
    fetch("/random")
}
function playlist(){
  let volume_slider = document.getElementById("volume")
  function f(){
    fetch("/playlist").then(res => res.json()).then(res => {
        let el = document.getElementById("playlist")
        el.innerHTML = ''
        res.items.forEach((song, i) => {
            var li = document.createElement("li");
            let time = "(" + (song.duration/60).toFixed(2) + " minutes)"
            let my_html = `<div><h2>${song.title}</h2>
                  <span class="time">${time}</span>
                  <button onclick="delete_item(${i})">X</button>
                </div>`
            li.innerHTML = my_html
            el.appendChild(li)
        })
        volume_slider.value = res.volume * 100
    })
  }
  var intervalId = setInterval(f, 5000);
  f()

  volume_slider.onchange = function() {
    fetch(`/volume/${volume_slider.value/100}`)
  }
}
window.addEventListener('load', event => playlist());