110 lines
3.1 KiB
JavaScript
110 lines
3.1 KiB
JavaScript
let remote = "http://localhost:8080"
|
|
|
|
let coverCache = []
|
|
|
|
let mainAudio = new Audio();
|
|
|
|
//LZString.compress()
|
|
|
|
async function playSong(songData, imageData) {
|
|
console.log(songData)
|
|
playbackIcon.src = "/loading.svg"
|
|
progressActive.style.width = "0%"
|
|
|
|
mainAudio.src = remote + "/api/stream/" + songData["id"]
|
|
|
|
coverLabel.src = imageData
|
|
titleLabel.innerText = songData["title"]
|
|
artistLabel.innerText = songData["artist"]
|
|
|
|
mainAudio.addEventListener("loadedmetadata", () => {
|
|
playbackIcon.src = "/pauseIcon.svg"
|
|
})
|
|
|
|
mainAudio.addEventListener("timeupdate", () => {
|
|
progressActive.style.width = mainAudio.currentTime / mainAudio.duration * 100 + "%"
|
|
})
|
|
|
|
mainAudio.play()
|
|
}
|
|
|
|
playButton.addEventListener("click", () => {
|
|
console.log("burger")
|
|
if (mainAudio.paused == false) {
|
|
mainAudio.pause()
|
|
playbackIcon.src = "/playIcon.svg"
|
|
} else {
|
|
mainAudio.play()
|
|
playbackIcon.src = "/pauseIcon.svg"
|
|
}
|
|
})
|
|
|
|
async function listSongs() {
|
|
// connect to the burgertunes API
|
|
let response = await fetch(remote + "/api/listmusic");
|
|
let json = await response.json()
|
|
|
|
// populate the ui with songs
|
|
|
|
// remove existing
|
|
document.querySelectorAll(".songDiv").forEach((x) => x.remove())
|
|
|
|
for (x in json) {
|
|
let songData = json[x]
|
|
|
|
let songDiv = document.createElement("div")
|
|
songDiv.id = "songDiv"
|
|
songDiv.classList.add("songDiv")
|
|
songList.append(songDiv)
|
|
|
|
let titleLabel = document.createElement("p")
|
|
titleLabel.classList.add("title")
|
|
titleLabel.innerText = songData["title"]
|
|
songDiv.append(titleLabel)
|
|
|
|
let artistLabel = document.createElement("p")
|
|
artistLabel.classList.add("artist")
|
|
artistLabel.innerText = songData["artist"]
|
|
songDiv.append(artistLabel)
|
|
|
|
let coverLabel = document.createElement("img")
|
|
coverLabel.classList.add("cover")
|
|
coverLabel.loading = "lazy"
|
|
coverLabel.src = ""
|
|
|
|
let imageData = "/placeholder.svg"
|
|
|
|
coverLabel.addEventListener("error", async function () {
|
|
// check if cover is already cached in memory
|
|
|
|
let coverCacheItem = coverCache.find(item => item.hash === songData["hash"]);
|
|
|
|
if (coverCacheItem) {
|
|
imageData = coverCacheItem["data"]
|
|
} else {
|
|
let imageResponse = await fetch(remote + "/api/cover/" + songData["id"]);
|
|
imageData = await imageResponse.text()
|
|
imageData = "data:image/avif;base64," + imageData
|
|
|
|
if (imageResponse.status == 200) {
|
|
coverCache.push({ "hash": songData["hash"], "data": imageData })
|
|
}
|
|
|
|
if (imageResponse.status != 200) {
|
|
imageData = "/placeholder.svg"
|
|
}
|
|
}
|
|
|
|
coverLabel.src = imageData
|
|
})
|
|
|
|
songDiv.addEventListener("click", () => {
|
|
playSong(songData, imageData)
|
|
});
|
|
songDiv.append(coverLabel)
|
|
|
|
}
|
|
console.log(json)
|
|
}
|
|
|
|
listSongs() |