Merge pull request #72 from charleslana/main

Add scroll to top window support and add option best quality video/audio from playlist

assets/css/index.css

@@ -421,3 +421,20 @@ body::-webkit-scrollbar-thumb {
 	background-color: rgb(79, 78, 78);
 	border-radius: 5px;
 }
+
+#goToTop {
+	display: none;
+	position: fixed;
+	bottom: 10px;
+	right: 10px;
+	z-index: 99;
+	border: none;
+	outline: none;
+	background-image: url(../images/up-arrow.png);
+	background-size: contain;
+	width: 40px;
+	height: 40px;
+	cursor: pointer;
+	color: white;
+	cursor: pointer;
+}  

html/index.html

@@ -149,6 +149,8 @@
     <div id="list">
     </div>
 
+    <div id="goToTop"></div> 
+
     <script>
         require("../src/translate_index")
     </script>

html/playlist.html

@@ -47,6 +47,10 @@
         <span id="link"></span>
         <br><br>
 
+        <span id="downloadBestQualityTxt">Download best quality for all videos</span>
+        <input id="downloadBestQualityChecked" type="checkbox">
+        <br>
+
         <label id="videoFormat">Select Video Format </label>
         <select id="select">
             <option value="144">144p</option>
@@ -81,6 +85,8 @@
     <h2 id="playlistName"></h2>
     <div id="list">
     </div>
+
+    <div id="goToTop"></div>
 </body>
 
 </html>

src/common.js

@@ -97,4 +97,22 @@ function advancedToggle() {
 		getId("advanced").style.display = "none";
 		advancedHidden = true;
 	}
-}
+}
+
+// Check scroll go to top
+
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+    getId("goToTop").style.display = "block";
+  } else {
+    getId("goToTop").style.display = "none";
+  }
+}
+
+// Function to scroll go to top
+
+getId("goToTop").addEventListener("click", () => {
+	window.scrollTo({top: 0, behavior: 'smooth'});
+});

src/playlist.js

@@ -74,6 +74,9 @@ function download(type) {
 	if (type === "video") {
 		quality = getId("select").value;
 		format = `"mp4[height<=${quality}]+m4a/mp4[height<=${quality}]/bv[height<=${quality}]+ba/best[height<=${quality}]/best"`;
+		if (getId("downloadBestQualityChecked").checked) {
+			format = "bv*+ba";
+		}
 	} else {
 		format = getId("audioSelect").value;
 	}
@@ -92,6 +95,8 @@ function download(type) {
 					"Playlist_vid_%(playlist_id)s",
 					"%(playlist_index)s.%(title)s.%(ext)s"
 				)}"`,
+				"--ffmpeg-location",
+				ffmpeg,
 				cookieArg,
 				browser,
 
@@ -140,6 +145,7 @@ function download(type) {
 			if (platform() == "win32") {
 				folderLocation =  folderLocation.split(path.sep).join("\\\\");
 			}
+			console.log(folderLocation);
 		}
 
 		if (eventData.includes(playlistTxt)) {
@@ -171,6 +177,8 @@ function download(type) {
 			)}</p>
 			</div>`;
 			getId("list").innerHTML += item;
+
+			window.scrollTo(0, document.body.scrollHeight);
 		}
 	});
 
@@ -207,6 +215,15 @@ function download(type) {
 	});
 }
 
+// Disable the option to select
+getId("downloadBestQualityChecked").addEventListener("click", () => {
+	if (getId("downloadBestQualityChecked").checked) {
+		getId("select").disabled = true;
+		return;
+	}
+	getId("select").disabled = false;
+});
+
 // Downloading video
 getId("download").addEventListener("click", () => {
 	download("video");

src/renderer.js

@@ -243,7 +243,7 @@ async function getInfo(url) {
 		console.log(error.toString("utf8"));
 		getId("loadingWrapper").style.display = "none";
 		getId("incorrectMsg").textContent = i18n.__(
-			"Some error has occured. Check your network and use correct URL"
+			"Some error has occurred. Check your network and use correct URL"
 		);
 	});
 
@@ -846,6 +846,8 @@ function afterSave(location, filename, progressId) {
 	).innerHTML = `<b onClick="showItem(\`${finalLocation}\`, \`${finalFilename}\`)">${i18n.__(
 		"File saved. Click to Open"
 	)}</b>`;
+
+	window.scrollTo(0, document.body.scrollHeight);
 }
 
 function showItem(location, filename) {