Config file support and bug fixes

html/index.html

@@ -71,6 +71,7 @@
         </svg>
     </div>
     <p id="incorrectMsg"></p>
+    <br>
 
     <div id="hidden">
         <img src="../assets/images/close.png" alt="close" id="closeHidden">
@@ -138,9 +139,6 @@
 
 
     </div>
-
-    <br><br>
-
     <!-- Downloads list -->
     <div id="list"></div>
 

html/playlist.html

@@ -100,7 +100,7 @@
 
         <!-- Hidden -->
         <div id="advancedMenu">
-            <span>Playlist range</span>
+            <span id="rangeTxt">Playlist range</span>
             <input type="number" id="playlistIndex" class="input" placeholder="Start">:
             <input type="number" id="playlistEnd" class="input" placeholder="End">
         </div>

html/preferences.html

@@ -121,7 +121,7 @@
     <div id="pathConfig">
 
         <div class="configBox">
-            <span>Use configuration file</span>
+            <span id="configTxt">Use configuration file</span>
             <input type="checkbox" id="configCheck">
         </div>
 
@@ -129,14 +129,14 @@
             <br>
             <button class="greenBtn" id="configBtn">Select config file</button>
             <br>
-            <strong id="configPathTxt">Path: </strong>
+            <strong id="configPathTxt">Path:</strong>
             <span id="configPath"></span>
         </div>
     </div>
 
     <br>
     <div class="prefBox">
-        <span>Filename format for playlists</span>
+        <span id="fileFormatTxt">Filename format for playlists</span>
         <input type="text" id="filenameFormat" placeholder="yt-dlp format style"
             value="%(playlist_index)s.%(title)s.%(ext)s">
         <button class="redBtn" id="resetFilenameFormat">Reset to default</button>
@@ -144,7 +144,7 @@
 
     <br>
     <div class="prefBox">
-        <span>Folder name format for playlists</span>
+        <span id="dirFormatTxt">Folder name format for playlists</span>
         <input type="text" id="foldernameFormat" value="%(playlist_title)s" placeholder="yt-dlp format style">
         <button class="redBtn" id="resetFoldernameFormat">Reset to default</button>
     </div>

src/playlist.js

@@ -47,6 +47,13 @@ let playlistId = "";
 let folderLocation;
 
 function download(type) {
+	// Config file
+	let configArg = "";
+	let configTxt = "";
+	if (localStorage.getItem("configPath")) {
+		configArg = "--config-location";
+		configTxt = localStorage.getItem("configPath");
+	}
 	// Handling folder and file names
 	let foldernameFormat = "%(playlist_title)s";
 	let filenameFormat = "%(playlist_index)s.%(title)s.%(ext)s";
@@ -118,7 +125,8 @@ function download(type) {
 				ffmpeg,
 				cookieArg,
 				browser,
-
+				configArg,
+				configTxt,
 				`"${url}"`,
 			],
 			{ shell: true, detached: false },
@@ -139,7 +147,8 @@ function download(type) {
 				ffmpeg,
 				cookieArg,
 				browser,
-
+				configArg,
+				configTxt,
 				`"${url}"`,
 			],
 			{ shell: true, detached: false },
@@ -171,7 +180,7 @@ function download(type) {
 			console.log(playlistName);
 		}
 
-		if (eventData.includes(videoIndex)) {
+		if (eventData.includes(videoIndex) && !eventData.includes("thumbnail")) {
 			count += 1;
 			let itemTitle;
 			if (type === "video") {
@@ -325,3 +334,9 @@ getId("download").textContent = i18n.__("Download");
 getId("audioDownload").textContent = i18n.__("Download");
 getId("bestVideoOption").textContent = i18n.__("Best");
 getId("openDownloads").textContent = i18n.__("Open download folder");
+getId("videoToggle").textContent = i18n.__("Video");
+getId("audioToggle").textContent = i18n.__("Audio");
+getId("advancedToggle").textContent = i18n.__("More options");
+getId("rangeTxt").textContent = i18n.__("Playlist range");
+getId("playlistIndex").placeholder = i18n.__("Start");
+getId("playlistEnd").placeholder = i18n.__("End");

src/renderer.js

@@ -33,15 +33,20 @@ let rangeOption = "--download-sections";
 let cookieArg = "";
 let browser = "";
 let maxActiveDownloads = 5;
-if (localStorage.getItem("maxActiveDownloads")){
-	const number = Number(localStorage.getItem("maxActiveDownloads"))
-	if (number < 1){
-		maxActiveDownloads = 1
-	}
-	else{
-		maxActiveDownloads = number
+function checkMaxDownloads(){
+	if (localStorage.getItem("maxActiveDownloads")){
+		const number = Number(localStorage.getItem("maxActiveDownloads"))
+		if (number < 1){
+			maxActiveDownloads = 1
+		}
+		else{
+			maxActiveDownloads = number
+		}
 	}
 }
+checkMaxDownloads()
+
+
 let currentDownloads = 0;
 let controllers = new Object;
 
@@ -449,6 +454,7 @@ async function getInfo(url) {
 
 // Video download event
 getId("videoDownload").addEventListener("click", (event) => {
+	checkMaxDownloads()
 	getId("hidden").style.display = "none";
 	console.log(`Current:${currentDownloads} Max:${maxActiveDownloads}`);
 
@@ -483,6 +489,7 @@ getId("videoDownload").addEventListener("click", (event) => {
 
 // Audio download event
 getId("audioDownload").addEventListener("click", (event) => {
+	checkMaxDownloads()
 	getId("hidden").style.display = "none";
 	console.log(`Current:${currentDownloads} Max:${maxActiveDownloads}`);
 
@@ -515,12 +522,38 @@ getId("audioDownload").addEventListener("click", (event) => {
 });
 
 getId("extractBtn").addEventListener("click", () => {
-	const value = getId("extractSelection").value;
-	extractFormat = value;
-	preferredAudioQuality = value;
-	localStorage.setItem("preferredAudioQuality", value);
+	checkMaxDownloads()
 	getId("hidden").style.display = "none";
-	download("extract");
+	extractFormat = getId("extractSelection").value;
+
+	console.log(`Current:${currentDownloads} Max:${maxActiveDownloads}`);
+
+	if (currentDownloads < maxActiveDownloads) {
+		download("extract");
+		currentDownloads++;
+	} else {
+		const randId = Math.random().toFixed(10).toString().slice(2);
+		const item = `
+		<div class="item" id="${randId}">
+			<img src="${thumbnail}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
+
+			<div class="itemBody">
+				<div class="itemTitle">${title}</div>
+				<div class="itemType">${i18n.__("Video")}</div>
+				<p>${i18n.__("Download pending")}</p>
+			</div>
+		</div>
+		`;
+		getId("list").innerHTML += item;
+		const interval = setInterval(() => {
+			if (currentDownloads < maxActiveDownloads) {
+				getId(randId).remove()
+				download("extract");
+				currentDownloads++;
+				clearInterval(interval);
+			}
+		}, 2000);
+	}
 });
 
 // Restore previous uncompleted downloads
@@ -624,6 +657,15 @@ function manageAdvanced(duration) {
 
 function download(type) {
 	manageAdvanced(duration);
+
+	// Config file
+	let configArg = ""
+	let configTxt = ""
+	if (localStorage.getItem("configPath")){
+		configArg = "--config-location"
+		configTxt = localStorage.getItem("configPath")
+	}
+
 	const url = getId("url").value;
 	let ext;
 	let extractExt;
@@ -745,6 +787,8 @@ function download(type) {
 				subs,
 				subLangs,
 				"--no-playlist",
+				configArg,
+				`"${configTxt}"`,
 				cookieArg,
 				browser,
 				`"${url}"`,
@@ -772,6 +816,8 @@ function download(type) {
 				"--no-playlist",
 				cookieArg,
 				browser,
+				configArg,
+				`"${configTxt}"`,
 				`"${url}"`,
 			],
 			{ shell: true, detached: false },
@@ -795,6 +841,8 @@ function download(type) {
 				"--no-playlist",
 				cookieArg,
 				browser,
+				configArg,
+				`"${configTxt}"`,
 				`"${url}"`,
 			],
 			{ shell: true, detached: false },
@@ -833,9 +881,9 @@ function download(type) {
 			getId(randomId + "prog").textContent = i18n.__("Downloading...");
 		})
 		.once("close", (code) => {
+			currentDownloads--;
 			console.log("Closed with code " + code);
 			if (code == 0) {
-				currentDownloads--;
 				// const items = JSON.parse(localStorage.getItem("itemList"));
 				// // Clearing item from localstorage
 				// for (let item of items) {
@@ -883,7 +931,6 @@ function download(type) {
 
 function fadeItem(id) {
 	controllers[id].abort()
-	currentDownloads --;
 	let count = 0;
 	let opacity = 1;
 	const fade = setInterval(() => {
@@ -940,6 +987,7 @@ function closeMenu() {
 	const fade = setInterval(() => {
 		if (count >= 10) {
 			clearInterval(fade);
+			getId("menu").style.display = "none"
 		} else {
 			opacity -= 0.1;
 			getId("menu").style.opacity = opacity;

src/translate_preferences.js

@@ -28,3 +28,11 @@ querySelectorAll(".autoTxt").forEach((item) => {
 getId("preferredAudioTxt").textContent = i18n.__("Preferred audio format");
 getId("preferredVideoTxt").textContent = i18n.__("Preferred video quality");
 getId("restart").textContent = i18n.__("Restart app");
+getId("configTxt").textContent = i18n.__("Use configuration file");
+getId("configBtn").textContent = i18n.__("Select config file");
+getId("configPathTxt").textContent = i18n.__("Path:");
+getId("fileFormatTxt").textContent = i18n.__("Filename format for playlists");
+getId("dirFormatTxt").textContent = i18n.__("Folder name format for playlists");
+getId("resetFilenameFormat").textContent = i18n.__("Reset to default");
+getId("resetFoldernameFormat").textContent = i18n.__("Reset to default");
+getId("maxTxt").textContent = i18n.__("Maximum number of active downloads");