aiden
/
ytDownloader
mirror of https://github.com/aandrew-me/ytDownloader
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Playlist download improvements

Browse Source
pull/39/head
aandrew-me 3 years ago
parent 4a57bf971e
commit e52e78cfdf
4 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File

1
assets/css/index.css
Unescape Escape View File

@ -113,7 +113,6 @@ body {
padding: 20px 10px; padding: 20px 10px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: var(--box-shadow);
} }
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {

9
html/playlist.html
Unescape Escape View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -9,9 +10,10 @@
<script src="../src/playlist.js" defer></script> <script src="../src/playlist.js" defer></script>
<script src="../src/common.js" defer></script> <script src="../src/common.js" defer></script>
<link rel="stylesheet" href="../assets/css/playlist.css"> <link rel="stylesheet" href="../assets/css/playlist.css">
<!-- Translating --> <!-- Translating -->
<script>window.i18n = new (require('../translations/i18n'));</script> <script>window.i18n = new (require('../translations/i18n'));</script>
</head> </head>
<body> <body>
<!-- Theme toggle --> <!-- Theme toggle -->
@ -51,5 +53,10 @@
<p id="incorrectMsg"></p> <p id="incorrectMsg"></p>
</div> </div>
<h2 id="playlistName"></h2>
<div id="list">
</div>
</body> </body>
</html> </html>

11
src/common.js
Unescape Escape View File

@ -48,6 +48,7 @@ if (enabledTransparent == "true") {
function toggle() { function toggle() {
if (darkTheme == false) { if (darkTheme == false) {
// Switching to dark theme
circle.style.left = "25px"; circle.style.left = "25px";
root.style.setProperty("--background", bgColor); root.style.setProperty("--background", bgColor);
@ -56,11 +57,11 @@ function toggle() {
root.style.setProperty("--box-toggle", "rgb(70,70,70)"); root.style.setProperty("--box-toggle", "rgb(70,70,70)");
root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)"); root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
root.style.setProperty("--item-bg", "rgb(75, 75, 75)"); root.style.setProperty("--item-bg", "rgb(75, 75, 75)");
root.style.setProperty("--box-shadow", "none");
darkTheme = true; darkTheme = true;
localStorage.setItem("theme", "dark"); localStorage.setItem("theme", "dark");
} else { } else {
// Switching to light theme
circle.style.left = "0px"; circle.style.left = "0px";
root.style.setProperty("--background", "whitesmoke"); root.style.setProperty("--background", "whitesmoke");
@ -68,12 +69,8 @@ function toggle() {
root.style.setProperty("--box-main", "rgb(174 249 224)"); root.style.setProperty("--box-main", "rgb(174 249 224)");
root.style.setProperty("--box-toggle", "rgb(108, 231, 190)"); root.style.setProperty("--box-toggle", "rgb(108, 231, 190)");
root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)"); root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
root.style.setProperty("--item-bg", "#ececec"); root.style.setProperty("--item-bg", "#dddddd");
root.style.setProperty("--box-shadow", "3px 3px 10px gray");
root.style.setProperty(
"--box-shadow",
"2px 2px 5px rgb(92, 92, 92), -2px -2px 5px rgb(219, 219, 219)"
);
darkTheme = false; darkTheme = false;
localStorage.setItem("theme", "light"); localStorage.setItem("theme", "light");

38
src/playlist.js
Unescape Escape View File

@ -5,6 +5,7 @@ let url;
const ytDlp = localStorage.getItem("ytdlp"); const ytDlp = localStorage.getItem("ytdlp");
const ytdlp = new YTDlpWrap(ytDlp); const ytdlp = new YTDlpWrap(ytDlp);
const downloadDir = localStorage.getItem("downloadPath"); const downloadDir = localStorage.getItem("downloadPath");
const i18n = new (require("../translations/i18n"))();
function getId(id) { function getId(id) {
return document.getElementById(id); return document.getElementById(id);
@ -27,10 +28,17 @@ document.addEventListener("keydown", (event) => {
}); });
// Patterns // Patterns
const playlistName = "Downloading playlist: ";
const videoIndex = "Downloading video ";
// Downloading playlist: Inkscape Tutorials // Downloading playlist: Inkscape Tutorials
// Downloading video 1 of 82 // Downloading video 1 of 82
getId("download").addEventListener("click", () => { getId("download").addEventListener("click", () => {
let count = 0;
getId("options").style.display = "none";
getId("pasteLink").style.display = "none";
getId("playlistName").textContent = i18n.__("Processing") + "..."
const quality = getId("select").value; const quality = getId("select").value;
const format = `"mp4[height<=${quality}]+m4a/mp4[height<=${quality}]/bv[height<=${quality}]+ba/best[height<=${quality}]/best"`; const format = `"mp4[height<=${quality}]+m4a/mp4[height<=${quality}]/bv[height<=${quality}]+ba/best[height<=${quality}]/best"`;
const controller = new AbortController(); const controller = new AbortController();
@ -54,9 +62,39 @@ getId("download").addEventListener("click", () => {
downloadProcess.on("ytDlpEvent", (eventType, eventData) => { downloadProcess.on("ytDlpEvent", (eventType, eventData) => {
console.log(eventData); console.log(eventData);
if (eventData.includes(playlistName)) {
getId("playlistName").textContent = eventData;
}
if (eventData.includes(videoIndex)) {
count += 1;
const itemTitle = i18n.__("Video") + " " + eventData.split(" ")[3];
if (count > 1) {
getId(`p${count - 1}`).textContent = i18n.__("File saved successfully")
}
const item = `<div class="item">
<p class="itemTitle">${itemTitle}</p>
<p class="itemProgress" id="p${count}">${i18n.__("Downloading...")}</p>
</div>`;
getId("list").innerHTML += item;
}
});
downloadProcess.on("progress", (progress) => {
if (getId(`p${count}`)) {
getId(`p${count}`).textContent = `${i18n.__("Progress")} ${progress.percent}% | ${i18n.__("Speed")} ${progress.currentSpeed}`
}
}); });
downloadProcess.on("error", (error) => { downloadProcess.on("error", (error) => {
getId("incorrectMsg").textContent = error; getId("incorrectMsg").textContent = error;
}); });
downloadProcess.on("close", ()=>{
getId("pasteLink").style.display = "inline-block";
})
}); });

Write Preview
Loading…
Cancel
Save