tretrauit/explorers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(webui): concurrent downloading

Browse Source
This commit is contained in:
tretrauit 2024-03-22 22:12:17 +07:00
parent 51834cc7e6
commit c2203943e2
1 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/assets/index.js
View File

@ -73,49 +73,53 @@ getLessonButton.addEventListener('click', async () => {
<br>`;
}
let videoDlResult = null;
const promises = [];
const downloadSelectedButton = document.createElement("button");
downloadSelectedButton.innerHTML = "Download Selected";
downloadSelectedButton.addEventListener('click', async () => {
for (const [id, video] of Object.entries(ids)) {
const checkbox = document.querySelector(`#${id}`);
if (!checkbox.checked) {
continue;
}
const videoRsp = await fetch(`/api/v1/videos/${video.id}`);
if (videoRsp.status !== 200) {
console.error(`Failed to get video ${video.name}`);
continue;
}
const videoData = await videoRsp.json();
if (videoDlResult === null) {
result.appendChild(document.createElement("br"));
result.appendChild(document.createElement("br"));
videoDlResult = document.createElement("div");
videoDlResult.className = "block";
result.appendChild(videoDlResult);
}
const progressId = randomString(15);
const progressStrId = randomString(15);
videoDlResult.innerHTML += `<span>${video.name}.mp4 <progress id="${progressId}" value="0" max="100"></progress> <span id="${progressStrId}">0%</span></span><br>`
const rsp = await fetch(`/api/v1/download-video?${new URLSearchParams({
url: encodeURIComponent(videoData.m3u8),
output: encodeURIComponent(`videos/${video.name}.mp4`),
})}`);
const reader = rsp.body.getReader();
while (true) {
// wait for next encoded chunk
const { done, value } = await reader.read();
// check if stream is done
if (done) break;
// Decodes data chunk and yields it
const progress = Math.floor(Number.parseFloat(new TextDecoder().decode(value)));
document.querySelector(`#${progressId}`).value = progress;
document.querySelector(`#${progressStrId}`).innerText = `${progress}%`;
}
if (rsp.status !== 200) {
console.error(`Failed to download ${video.name}`);
}
promises.push(async () => {
const checkbox = document.querySelector(`#${id}`);
if (!checkbox.checked) {
return;
}
const videoRsp = await fetch(`/api/v1/videos/${video.id}`);
if (videoRsp.status !== 200) {
console.error(`Failed to get video ${video.name}`);
return;
}
const videoData = await videoRsp.json();
if (videoDlResult === null) {
result.appendChild(document.createElement("br"));
result.appendChild(document.createElement("br"));
videoDlResult = document.createElement("div");
videoDlResult.className = "block";
result.appendChild(videoDlResult);
}
const progressId = randomString(15);
const progressStrId = randomString(15);
videoDlResult.innerHTML += `<span>${video.name}.mp4 <progress id="${progressId}" value="0" max="100"></progress> <span id="${progressStrId}">0%</span></span><br>`
const rsp = await fetch(`/api/v1/download-video?${new URLSearchParams({
url: encodeURIComponent(videoData.m3u8),
output: encodeURIComponent(`videos/${video.name}.mp4`),
})}`);
const reader = rsp.body.getReader();
while (true) {
// wait for next encoded chunk
const { done, value } = await reader.read();
// check if stream is done
if (done) break;
// Decodes data chunk and yields it
const progress = Math.floor(Number.parseFloat(new TextDecoder().decode(value)));
document.querySelector(`#${progressId}`).value = progress;
document.querySelector(`#${progressStrId}`).innerText = `${progress}%`;
}
if (rsp.status !== 200) {
console.error(`Failed to download ${video.name}`);
}
});
}
await Promise.all(promises.map(p => p()));
});
result.appendChild(downloadSelectedButton);
// result.innerHTML += "<button>Download All</button>";