Playlist download improvements

3 years ago · e52e78cfdf
parent 4a57bf971e
commit e52e78cfdf
4 changed files with 51 additions and 10 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -113,7 +113,6 @@ body {
 	padding: 20px 10px;
 	align-items: center;
 	justify-content: space-between;
-	box-shadow: var(--box-shadow);
 }

@media screen and (max-width: 650px) {
--- a/html/playlist.html
+++ b/html/playlist.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -9,11 +10,12 @@
    <script src="../src/playlist.js" defer></script>
    <script src="../src/common.js" defer></script>
    <link rel="stylesheet" href="../assets/css/playlist.css">
-        <!-- Translating -->
+    <!-- Translating -->
    <script>window.i18n = new (require('../translations/i18n'));</script>
 </head>
+
 <body>
-    
+
    <!-- Theme toggle -->
    <div id="themeToggle" onclick="toggle()">
        <div id="themeToggleInside"></div>
@ -51,5 +53,10 @@

        <p id="incorrectMsg"></p>
    </div>
+
+    <h2 id="playlistName"></h2>
+    <div id="list">
+    </div>
 </body>
+
 </html>
--- a/src/common.js
+++ b/src/common.js
@ -48,6 +48,7 @@ if (enabledTransparent == "true") {

 function toggle() {
 	if (darkTheme == false) {
+		// Switching to dark theme
 		circle.style.left = "25px";

 		root.style.setProperty("--background", bgColor);
@ -56,11 +57,11 @@ function toggle() {
 		root.style.setProperty("--box-toggle", "rgb(70,70,70)");
 		root.style.setProperty("--theme-toggle", "rgb(80, 193, 238)");
 		root.style.setProperty("--item-bg", "rgb(75, 75, 75)");
-		root.style.setProperty("--box-shadow", "none");

 		darkTheme = true;
 		localStorage.setItem("theme", "dark");
 	} else {
+		// Switching to light theme
 		circle.style.left = "0px";

 		root.style.setProperty("--background", "whitesmoke");
@ -68,12 +69,8 @@ function toggle() {
 		root.style.setProperty("--box-main", "rgb(174 249 224)");
 		root.style.setProperty("--box-toggle", "rgb(108, 231, 190)");
 		root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");
-		root.style.setProperty("--item-bg", "#ececec");
-		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)"
-		);
+		root.style.setProperty("--item-bg", "#dddddd");
+

 		darkTheme = false;
 		localStorage.setItem("theme", "light");
--- a/src/playlist.js
+++ b/src/playlist.js
@ -5,6 +5,7 @@ let url;
 const ytDlp = localStorage.getItem("ytdlp");
 const ytdlp = new YTDlpWrap(ytDlp);
 const downloadDir = localStorage.getItem("downloadPath");
+const i18n = new (require("../translations/i18n"))();

 function getId(id) {
 	return document.getElementById(id);
@ -27,10 +28,17 @@ document.addEventListener("keydown", (event) => {
 });

 // Patterns
+const playlistName = "Downloading playlist: ";
+const videoIndex = "Downloading video ";
 //  Downloading playlist: Inkscape Tutorials
 // Downloading video 1 of 82

 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 format = `"mp4[height<=${quality}]+m4a/mp4[height<=${quality}]/bv[height<=${quality}]+ba/best[height<=${quality}]/best"`;
 	const controller = new AbortController();
@ -54,9 +62,39 @@ getId("download").addEventListener("click", () => {

 	downloadProcess.on("ytDlpEvent", (eventType, 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) => {
 		getId("incorrectMsg").textContent = error;
 	});
+
+	downloadProcess.on("close", ()=>{
+		getId("pasteLink").style.display = "inline-block";
+
+	})
 });