58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
|
function readableMicroseconds(us) {
|
||
|
|
const min = parseInt(us / 60_000_000);
|
||
|
|
const sec = parseInt((us % 60_000_000) / 1_000_000);
|
||
|
|
|
||
|
|
if (!min) {
|
||
|
|
return `${sec}s`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return `${min}m ${sec}s`;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function main() {
|
||
|
|
const response = await fetch(`/api/video-queue`);
|
||
|
|
if (!response.ok) {
|
||
|
|
error("something went wrong");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const json = await response.json();
|
||
|
|
if (!json.ok) {
|
||
|
|
error(json.error);
|
||
|
|
}
|
||
|
|
|
||
|
|
const queue = json.queue;
|
||
|
|
|
||
|
|
document.getElementById("result").innerHTML =
|
||
|
|
`<p>Currently processing ${queue.length} video(s)</p>`
|
||
|
|
+ `<ul id="video-list">`
|
||
|
|
+ queue
|
||
|
|
.map(vid => {
|
||
|
|
const percentage = parseInt(vid.progress / vid.duration * 100);
|
||
|
|
const uploadedTime = readableMicroseconds(vid.progress);
|
||
|
|
const totalTime = readableMicroseconds(vid.duration);
|
||
|
|
|
||
|
|
return `
|
||
|
|
<li>
|
||
|
|
<div class="video-item">
|
||
|
|
<div class="video-image">
|
||
|
|
<img class="shadow" src="/videos/${vid.id}.png" alt="">
|
||
|
|
<img class="non-shadow" src="/videos/${vid.id}.png" alt="">
|
||
|
|
</div>
|
||
|
|
<span class="video-info">
|
||
|
|
${vid.title}
|
||
|
|
<br>
|
||
|
|
<p>Uploaded ${uploadedTime} of ${totalTime} (${percentage}%)</p>
|
||
|
|
<progress max="${vid.duration}" value="${vid.progress}">${percentage}%</progress>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
`;
|
||
|
|
})
|
||
|
|
.join("")
|
||
|
|
+ "</ul>";
|
||
|
|
}
|
||
|
|
|
||
|
|
main();
|
||
|
|
|