Skip to content

Commit

Permalink
Use native DOM API
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevenjoezhang
stevenjoezhang committed Apr 17, 2022
1 parent 8aec9bd commit 139b5a3
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 92 deletions.
26 changes: 13 additions & 13 deletions app/js/danmaku.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,23 @@ function getDanmaku() {
fetch(`https://comment.bilibili.com/${downloader.cid}.xml`)
.then(response => response.text())
.then(result => {
danmakuArray = [];
$(result).find("d").each((i, o) => {
const info = $(o).attr("p").split(","),
danmaku = {
time: info[0],
sendTime: info[4],
user: info[6],
text: $(o).html()
};
danmakuArray.push(danmaku);
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(result, "text/xml");
danmakuArray = [...xmlDoc.querySelectorAll("d")].map(element => {
const info = element.getAttribute("p").split(",");
return {
time: info[0],
sendTime: info[4],
user: info[6],
text: element.textContent
};
}); //解析xml文档
})
.catch(error => showError("弹幕加载失败！"));
}

function danmakuFilter(text, T1, T2, ST1, ST2, user) {
$("tbody").eq(2).html("");
document.querySelector("#danmaku tbody").innerHTML = "";
for (let target of danmakuArray) {
const time = parseFloat(target.time);
let sendTime = parseFloat(target.sendTime);
Expand All @@ -33,7 +33,7 @@ function danmakuFilter(text, T1, T2, ST1, ST2, user) {
const newDate = new Date();
newDate.setTime(sendTime * 1000);
sendTime = newDate.toISOString().substring(5, 19).replace("T", " ");
$("tbody").eq(2).append(`<tr>
document.querySelector("#danmaku tbody").insertAdjacentHTML("beforeend", `<tr>
<td>${formatSeconds(time)}</td>
<td>${sendTime}</td>
<td>${target.text}</td>
Expand All @@ -59,7 +59,7 @@ function formatSeconds(value) {

function searchUser(event) {
event.preventDefault();
const user = $(event.target).html();
const user = event.target.textContent;
let uid;
if (user.indexOf("D") === 0) uid = "";
else if (/^b(\d+)$/.exec(user)) uid = /^b(\d+)$/.exec(user)[1];
Expand Down
105 changes: 51 additions & 54 deletions app/js/panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Downloader {
}

getVideoUrl() {
const videoUrl = $("#videoUrl").val();
const videoUrl = document.getElementById("videoUrl").value;
this.url = "";
const mapping = {
"BV": "https://www.bilibili.com/video/",
Expand Down Expand Up @@ -82,27 +82,27 @@ class Downloader {
}
this.getData();
getDanmaku(); //获取cid后，获取下载链接和弹幕信息
$("#cid").html(cid);
document.getElementById("cid").textContent = cid;
document.getElementById("nav").classList.remove("d-none");
document.querySelector("#nav .nav-link").click();
fetch("https://api.bilibili.com/x/web-interface/view?aid=" + aid)
.then(response => response.json())
.then(({ data }) => {
console.log("VIDEO INFO", data);
$("tbody").eq(1).html("");
document.querySelector("#tab-pane-1 tbody").innerHTML = "";
for (let [key, value] of Object.entries(data)) {
if (mime.getType(value) && mime.getType(value).includes("image")) { //解析图片地址
value = `<a href="${value}" download=""><img src="${value}"></a>`;
} else if (typeof value === "object") {
value = `<pre>${JSON.stringify(value, null, 2)}</pre>`;
}
$("tbody").eq(1).append(`<tr>
<th class="text-capitalize">${key}</th>
<td>${value}</td>
</tr>`);
document.querySelector("#tab-pane-1 tbody").insertAdjacentHTML("beforeend", `<tr>
<th class="text-capitalize">${key}</th>
<td>${value}</td>
</tr>`)
}
this.name = `${id}-${data.title}`;
$("#videoName").val(sanitize(this.name));
document.getElementById("videoName").value = sanitize(this.name);
})
.catch(error => showError("获取视频信息出错！"));
}
Expand All @@ -126,11 +126,11 @@ class Downloader {
fetch(playUrl)
.then(response => response.text())
.then(result => {
const data = fallback ? $(result) : JSON.parse(result);
const target = fallback ? data.find("durl") : (data.durl || data.result.durl);
const data = fallback ? this.parseData(result) : JSON.parse(result);
const target = data.durl || data.result.durl;
console.log("PLAY URL", data);
if (target) {
const quality = fallback ? $(data).find("quality").text() : (data.quality || data.result.quality),
const quality = data.quality || data.result.quality,
qualityArray = {
112: "高清 1080P+",
80: "高清 1080P",
Expand All @@ -141,10 +141,25 @@ class Downloader {
16: "流畅 360P",
15: "流畅 360P"
}; //需要修改，不是一一对应
$("#quality").html(qualityArray[quality] || "未知");
document.getElementById("quality").textContent = qualityArray[quality] || "未知";
$("#success").show();
fallback ? $("#error").show() : $("#error").hide();
fallback ? this.parseDataFallback(target) : this.parseData(target);

this.links = [];
document.querySelector("#success tbody").innerHTML = "";
target.forEach(part => {
this.links.push(part.url);
document.querySelector("#success tbody").insertAdjacentHTML("beforeend", `<tr>
<td>${part.order}</td>
<td>${part.length / 1e3}</td>
<td>${part.size / 1e6}</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked="true">
</div>
</td>
</tr>`);
});
} else {
if (fallback) throw Error();
this.getData(true);
Expand All @@ -155,49 +170,29 @@ class Downloader {
});
}

parseDataFallback(target) {
this.links = [];
$("tbody").eq(0).html("");
target.each((i, o) => {
const part = $(o);
this.links.push(part.find("url").text());
$("tbody").eq(0).append(`<tr>
<td>${part.find("order").text()}</td>
<td>${part.find("length").text() / 1e3}</td>
<td>${part.find("size").text() / 1e6}</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked="true">
</div>
</td>
</tr>`);
});
}

parseData(target) {
this.links = [];
$("tbody").eq(0).html("");
target.forEach(part => {
this.links.push(part.url);
$("tbody").eq(0).append(`<tr>
<td>${part.order}</td>
<td>${part.length / 1e3}</td>
<td>${part.size / 1e6}</td>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" checked="true">
</div>
</td>
</tr>`);
const data = $(target);
const result = {};
result.durl = [];
result.quality = data.find("quality").text();
data.find("durl").each((i, o) => {
const part = $(o);
result.durl.push({
url: part.find("url").text(),
order: part.find("order").text(),
length: part.find("length").text(),
size: part.find("size").text()
});
});
return result;
}

downloadAll() {
const { cid } = this;
let flag = true;
document.querySelectorAll("tbody input[type=checkbox]").forEach((element, part) => {
if (!element.checked || this.downloading.includes(this.links[part])) return;
$("#download").append(`<span>${cid}-${part}</span>
document.getElementById("download").insertAdjacentHTML("beforeend", `<span>${cid}-${part}</span>
<span class="speed"></span>
<span class="eta"></span>
<span class="addon"></span>
Expand All @@ -216,8 +211,8 @@ class Downloader {

downloadLink(part) {
const { name, cid, url } = this;
const downloadPath = $("#downloadPath").val();
const filename = $("#videoName").val() || name || cid;
const downloadPath = document.getElementById("downloadPath").value;
const filename = document.getElementById("videoName").value || name || cid;
const file = path.join(downloadPath, `${sanitize(filename)}-${part}.flv`);
fs.stat(file, (error, state) => {
const options = {
Expand All @@ -231,7 +226,7 @@ class Downloader {
const downloads = fs.createWriteStream(file, state ? { flags: "a" } : {}),
index = this.downloading.indexOf(options.url);
this.download(index, options, downloads);
if (state) $(".addon").eq(index).text(`从 ${Math.round(state.size / 1e6)}MB 处恢复的下载`);
if (state) document.querySelectorAll(".addon")[index].textContent = `从 ${Math.round(state.size / 1e6)}MB 处恢复的下载`;
//console.log(this.cid, file, options.url);
});
}
Expand All @@ -242,11 +237,13 @@ class Downloader {
time: 250 //单位ms
}).on("progress", progress => {
const { speed, eta, percentage } = progress; //显示进度条
$(".speed").eq(index).text(Math.round(speed / 1e3) + "KB/s");
$(".eta").eq(index).text(`eta:${eta}s`);
$(".progress-bar").eq(index).css("width", percentage + "%").text(Math.round(percentage) + "%");
document.querySelectorAll(".speed")[index].textContent = Math.round(speed / 1e3) + "KB/s";
document.querySelectorAll(".eta")[index].textContent = `eta:${eta}s`;
const bar = document.querySelectorAll(".progress-bar")[index];
bar.style.setProperty("width", percentage + "%")
bar.textContent = Math.round(percentage) + "%";
if (percentage === 100) {
document.querySelectorAll(".progress-bar")[index].classList.replace("progress-bar-animated", "bg-success");
bar.classList.replace("progress-bar-animated", "bg-success");
this.downloading[index] = "";
ipcRenderer.send("length", this.downloading.filter(item => item !== "").length);
}
Expand Down
4 changes: 0 additions & 4 deletions app/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,6 @@ ipcMain.on("show-context-menu", (event) => {
event.sender.send("context-menu-command", "copy");
}
}));
//添加菜单分割线
menu.append(new MenuItem({
type: "separator"
}));
//添加菜单功能
menu.append(new MenuItem({
label: "粘贴",
Expand Down
40 changes: 19 additions & 21 deletions app/panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,8 @@ <h1>Mimi Downloader</h1>
ipcRenderer.send("show-warning", message);
}

$("input[type=text]").each((i, o) => {
$(o).on("contextmenu", event => {
document.querySelectorAll("input[type=text]").forEach(element => {
element.addEventListener("contextmenu", event => {
event.preventDefault();
event.currentTarget.focus();
ipcRenderer.send("show-context-menu");
Expand All @@ -177,15 +177,15 @@ <h1>Mimi Downloader</h1>

ipcRenderer.on("context-menu-command", (e, command) => {
if (command === "copy") {
clipboard.writeText($(document.activeElement).val());
clipboard.writeText(document.activeElement.value);
} else if (command === "paste") {
$(document.activeElement).val(clipboard.readText());
document.activeElement.value = clipboard.readText();
}
});

ipcRenderer.on("default-path", (e, command) => {
defaultPath = command;
$("#downloadPath").val(defaultPath);
document.getElementById("downloadPath").value = defaultPath;
});

function help() {
Expand All @@ -197,47 +197,45 @@ <h1>Mimi Downloader</h1>
}

function selectAll() {
$("tbody input[type=checkbox]").prop("checked", true);
document.querySelectorAll("tbody input[type=checkbox]").forEach(element => element.checked = true);
}

function selectNone() {
$("tbody input[type=checkbox]").prop("checked", false);
document.querySelectorAll("tbody input[type=checkbox]").forEach(element => element.checked = false);
}

function selectReverse() {
$("tbody input[type=checkbox]").each((i, o) => {
$(o).prop("checked", !$(o).prop("checked"));
});
document.querySelectorAll("tbody input[type=checkbox]").forEach(element => element.checked = !element.checked);
}

function openDialog() {
ipcRenderer.send("open-dialog", $("#downloadPath").val() || defaultPath);
ipcRenderer.send("open-dialog", document.getElementById("downloadPath").value || defaultPath);
}

ipcRenderer.on("download-path", (event, command) => {
$("#downloadPath").val(command);
document.getElementById("downloadPath").value = command;
});

function openPath() {
ipcRenderer.send("open-path", $("#downloadPath").val());
ipcRenderer.send("open-path", document.getElementById("downloadPath").value);
}

function searchDanmaku() {
const text = $("#searchDanmaku").val();
if (!$("#filterSwitch").is(":checked")) {
const text = document.getElementById("searchDanmaku").value;
if (!document.getElementById("filterSwitch").checked) {
danmakuFilter(text);
return;
}
const T1 = parseFloat($("#T1").val());
const T2 = parseFloat($("#T2").val());
const ST1 = parseFloat($("#ST1").val());
const ST2 = parseFloat($("#ST2").val());
const user = $("#user").val();
const T1 = parseFloat(document.getElementById("T1").value);
const T2 = parseFloat(document.getElementById("T2").value);
const ST1 = parseFloat(document.getElementById("ST1").value);
const ST2 = parseFloat(document.getElementById("ST2").value);
const user = document.getElementById("user").value;
danmakuFilter(text, T1, T2, ST1, ST2, user);
}

function filterSwitch() {
$("#filter").is(":hidden") ? $("#filter").slideDown() : $("#filter").slideUp();
document.getElementById("filterSwitch").checked ? $("#filter").slideDown() : $("#filter").slideUp();
}
</script>
</body>
Expand Down

0 comments on commit 139b5a3

Please sign in to comment.