67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
|
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 dateEl = document.createElement("span");
|
||
|
|
dateEl.classList.add('date');
|
||
|
|
dateEl.innerText = file.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);
|
||
|
|
|
||
|
|
// 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
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|