Compare commits

...

2 Commits

2 changed files with 23 additions and 9 deletions

View File

@ -6,9 +6,9 @@ function appendMusicList(el, title, time)
const div = document.createElement("div")
tr.setAttribute("id", "queue-item")
tdtitle.setAttribute("class", "title")
tdtime.setAttribute("width", "50")
tdtime.innerHTML = time
div.setAttribute("class", "ellipsis")
div.setAttribute("colspan", "2")
div.innerHTML = title
@ -20,15 +20,22 @@ function appendMusicList(el, title, time)
return tr
}
// https://github.com/semibran/wrap-around/blob/master/index.js
function wrap(idx, len)
{
return idx >= 0 ? idx % len : (idx % len + len) % len
}
function audioPlayer()
{
const aPlay = document.getElementById("audioPlayer");
const aList = document.getElementById("audioPlaylist");
const aTrack = document.getElementById("audioTrack");
const aArtist = document.getElementById("audioArtist");
const aPlay = document.getElementById("audioPlayer")
const aList = document.getElementById("audioPlaylist")
const aTrack = document.getElementById("audioTrack")
const aArtist = document.getElementById("audioArtist")
const aCoverArt = document.getElementById("audioCoverArt")
var currentSong = null;
var currentSong = null
var aListLinks = []
function changeSong(idx, doplay=true)
{
@ -37,12 +44,11 @@ function audioPlayer()
aPlay.play()
return
}
const aListLinks = aList.getElementsByTagName("tr");
if (currentSong !== null)
{
aListLinks[currentSong].classList.remove("current-song");
}
currentSong = idx % aListLinks.length
currentSong = wrap(idx, aListLinks.length)
aListLinks[currentSong].classList.add("current-song");
const aSelected = aListLinks[currentSong].getElementsByTagName("div")[0]
@ -58,10 +64,11 @@ function audioPlayer()
musicList.forEach((value, index, array) => {
const el = appendMusicList(aList, value[1], value[3])
aListLinks.push(el)
el.addEventListener("click", () => {
// el.preventDefault();
changeSong(index)
});
})
})
aPlay.addEventListener("ended", function(){

View File

@ -52,6 +52,7 @@ article{
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
td {
@ -60,6 +61,12 @@ td {
border: 0px;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.current-song * {
background-color: white;
color: black;