Added yt-dlp auto update support

assets/css/index.css

@@ -3,10 +3,10 @@
 	--text: white;
 	--box-main: rgb(80, 80, 80);
 	--box-toggle: rgb(70, 70, 70);
-	--box-toggleOn: rgb(67, 212, 164);
+	--box-toggleOn: rgb(28 232 138);
 	--theme-toggle: rgb(80, 193, 238);
 	--item-bg: rgb(60, 60, 60);
-	--box-shadow: none;
+	--box-shadow: 3px 3px 10px gray;
 }
 
 body {
@@ -176,6 +176,7 @@ body {
 	width: 80%;
 	padding: 10px 10px 20px 10px;
 	color: var(--text);
+	box-shadow: var(--box-shadow);
 }
 .hiddenVideoProgress, .hiddenAudioProgress{
 	display:none;

src/index.js

@@ -85,7 +85,7 @@ function toggle() {
 
 		root.style.setProperty("--background", "whitesmoke");
 		root.style.setProperty("--text", "rgb(45, 45, 45)");
-		root.style.setProperty("--box-main", "rgb(143, 239, 207)");
+		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")

src/renderer.js

@@ -23,7 +23,7 @@ function getId(id) {
 	return document.getElementById(id);
 }
 
-function downloadPathSelection(){
+function downloadPathSelection() {
 	let localPath = localStorage.getItem("downloadPath");
 
 	if (localPath) {
@@ -35,9 +35,7 @@ function downloadPathSelection(){
 	fs.mkdir(downloadDir, { recursive: true }, () => {});
 }
 
-downloadPathSelection()
+downloadPathSelection();
-
-
 
 // Checking for yt-dlp
 let ytDlp;
@@ -51,8 +49,8 @@ async function downloadYtdlp() {
 	await YTDlpWrap.downloadFromGithub(ytdlpPath);
 	getId("popupBox").style.display = "none";
 	ytDlp = ytdlpPath;
-	console.log("yt-dlp bin Path: " + ytDlp);
 	ytdlp = new YTDlpWrap(ytDlp);
+	console.log("yt-dlp bin Path: " + ytDlp);
 }
 
 // Checking is yt-dlp has been installed by user
@@ -81,8 +79,15 @@ cp.exec("yt-dlp --version", (error, stdout, stderr) => {
 			} else {
 				console.log("yt-dlp binary is present in PATH");
 				ytDlp = ytdlpPath;
-				console.log("yt-dlp bin Path: " + ytDlp);
 				ytdlp = new YTDlpWrap(ytDlp);
+				cp.spawn(`${ytDlp}`, ["-U"])
+					.stdout.on("data", (data) =>
+						console.log(data.toString("utf8"))
+					)
+					.stderr.on("data", (data) => {
+						console.log(data.toString("utf8"));
+					});
+				console.log("yt-dlp bin Path: " + ytDlp);
 			}
 		});
 	} else {
@@ -111,10 +116,10 @@ function pasteUrl() {
 	getInfo(url);
 }
 
-getId("closeHidden").addEventListener("click", ()=>{
+getId("closeHidden").addEventListener("click", () => {
 	getId("hidden").style.display = "none";
 	getId("loadingWrapper").style.display = "none";
-})
+});
 
 document.addEventListener("keydown", (event) => {
 	if (event.ctrlKey && event.key == "v") {
@@ -128,7 +133,7 @@ getId("pasteUrl").addEventListener("click", () => {
 
 // Getting video info
 async function getInfo(url) {
-	downloadPathSelection()
+	downloadPathSelection();
 	getId("videoFormatSelect").innerHTML = "";
 	getId("audioFormatSelect").innerHTML = "";
 	let info;
@@ -232,16 +237,15 @@ async function getInfo(url) {
 
 					const element =
 						"<option value='" +
-							format_id +
+						format_id +
-							"'>" +
+						"'>" +
-							"Quality: " +
+						"Quality: " +
-							(format.format_note ||
+						(format.format_note || "Unknown quality") +
-						"Unknown quality") +
+						" | " +
-							" | " +
+						audio_ext +
-							audio_ext +
+						" | " +
-							" | " +
+						size +
-							size +
+						"</option>";
-							"</option>";
 					getId("audioFormatSelect").innerHTML += element;
 				}
 				// Both audio and video available