class Playlist { constructor(wrapperEl, url) { this.wrapperEl = wrapperEl; const request = new Request(url, { method: 'GET', }); fetch(request) .then(response => response.json()) .then(data => { let playlist = this.wrapperEl.querySelector('.playlist'); if (!playlist) { playlist = document.createElement('nav'); playlist.classList.add('playlist'); this.wrapperEl.appendChild(playlist) } else { playlist.innerHTML = ""; } const listEl = document.createElement("ul"); for (let file of data) { const liEl = document.createElement("li"); const imgEl = document.createElement("img"); imgEl.classList.add('img'); imgEl.title = file.id; imgEl.src = file.svg; liEl.append(imgEl); let time = file.mtime; if (file.ctime != file.mtime){ time += ` (orig: ${file.ctime})`; } const dateEl = document.createElement("span"); dateEl.classList.add('date'); dateEl.innerText = time; liEl.append(dateEl); const nameEl = document.createElement("span"); nameEl.classList.add('name'); nameEl.innerText = file.name; liEl.append(nameEl); const linksEl = document.createElement("span"); linksEl.classList.add('links'); liEl.append(linksEl); const playEl = document.createElement("a"); playEl.classList.add('play'); playEl.innerText = "Play"; playEl.href = location; playEl.pathname = "play.html"; playEl.search = "?"+file.name; linksEl.append(playEl); const annotateEl = document.createElement("a"); annotateEl.classList.add('annotate'); annotateEl.innerText = "Annotate"; annotateEl.href = location; annotateEl.pathname = "annotate.html"; annotateEl.search = "?"+file.name; linksEl.append(annotateEl); const drawEl = document.createElement("a"); drawEl.classList.add('draw'); drawEl.innerText = "Draw"; drawEl.href = location; drawEl.pathname = "draw.html"; drawEl.hash = file.id; linksEl.append(drawEl); // liEl.addEventListener('click', (e) => { // this.play(fileUrl); // playlist.style.display = "none"; // }); listEl.appendChild(liEl); } playlist.appendChild(listEl); // do something with the data sent in the request }); } }