audioPlayer.js

@@ -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,22 +20,15 @@ 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 aListLinks = []
+	var currentSong = null;
 
 	function changeSong(idx, doplay=true)
 	{
@@ -44,11 +37,12 @@ function audioPlayer()
 			aPlay.play()
 			return
 		}
+		const aListLinks = aList.getElementsByTagName("tr");
 		if (currentSong !== null)
 		{
 			aListLinks[currentSong].classList.remove("current-song");
 		}
-		currentSong = wrap(idx, aListLinks.length)
+		currentSong = idx % aListLinks.length
 		aListLinks[currentSong].classList.add("current-song");
 
 		const aSelected = aListLinks[currentSong].getElementsByTagName("div")[0]
@@ -64,11 +58,10 @@ 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(){

styles.css

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