Add manual video and audio quality preferences

assets/css/extra.css

@@ -72,11 +72,8 @@ a{
 }
 
 input[type="checkbox"]{
-    width:20px;
-    height:20px;
-    position: relative;
-    left:5px;
-    top: 5px;
+    width:25px;
+    height:25px;
 }
 
 #selectLocation{
@@ -106,7 +103,6 @@ select {
 	font-size: large;
 	outline: none;
     position:relative;
-    bottom:8px;
 }
 #browserInfo{
     cursor: pointer;

html/preferences.html

@@ -8,6 +8,7 @@
     <title id="title">Preferences</title>
     <link rel="stylesheet" href="../assets/css/extra.css">
     <!-- Translating -->
+    <script src="../src/preferences.js" defer></script>
     <script>window.i18n = new (require('../translations/i18n'));</script>
 </head>
 
@@ -45,6 +46,7 @@
     <br>
 
 
+    <!-- Language -->
     <div class="prefBox">
         <label id="selectLn">Select Language (Requires reload)</label>
         <select id="select" onchange="changeLanguage()">
@@ -64,6 +66,41 @@
     </div>
     <br>
 
+    <!-- Video Quality -->
+    <div class="prefBox">
+        <span id="preferredVideoTxt">Preferred video quality</span>
+        <select id="preferredVideoQuality">
+            <option value="144">144p</option>
+            <option value="240">240p</option>
+            <option value="360">360p</option>
+            <option value="480">480p</option>
+            <option value="720">720p (HD)</option>
+            <option value="1080">1080p (FHD)</option>
+            <option value="1440">1440p</option>
+            <option value="2160">2160p (4k)</option>
+        </select>
+
+    </div>
+
+    <br>
+    <!-- Audio format -->
+    <div class="prefBox">
+        <span id="preferredAudioTxt">Preferred audio format</span>
+        <select id="preferredAudioQuality">
+            <option value="mp3">Mp3</option>
+            <option value="aac">Aac</option>
+            <option value="m4a">M4a</option>
+            <option value="opus">Opus</option>
+            <option value="wav">Wav</option>
+            <option value="alac">Alac</option>
+            <option value="flac">Flac</option>
+            <option value="vorbis">Vorbis (ogg)</option>
+        </select>
+
+    </div>
+
+
+    <br>
     <div class="prefBox">
         <span id="browserTxt">Select browser to use cookies from</span>
         <span id="browserInfo"> ℹ️</span>
@@ -82,90 +119,7 @@
 
 
     <script>
-        let rightToLeft = false;
-        if (localStorage.getItem("rightToLeft")) {
-            rightToLeft = localStorage.getItem("rightToLeft")
-        }
-        if (rightToLeft == "true") {
-            document.querySelectorAll(".prefBox").forEach(item => {
-                item.style.flexDirection = "row-reverse"
-            })
-        }
-        else{
-            console.log("Change to left to right");
-            document.querySelectorAll(".prefBox").forEach(item => {
-                item.style.flexDirection = "row"
-            })
-        }
-        let downloadPath = localStorage.getItem("downloadPath")
-        getId("path").textContent = downloadPath
-
-        const { ipcRenderer, dialog } = require("electron")
-        function getId(id) {
-            return document.getElementById(id)
-        }
-
-        function restartApp() {
-            ipcRenderer.send("restart")
-        }
-
-        getId("back").addEventListener("click", () => {
-            ipcRenderer.send("close-secondary")
-        })
-
-        getId("selectLocation").addEventListener("click", () => {
-            ipcRenderer.send("select-location", "")
-        })
-
-        ipcRenderer.on("downloadPath", (event, downloadPath) => {
-            console.log(downloadPath);
-            localStorage.setItem("downloadPath", downloadPath)
-            getId("path").textContent = downloadPath
-        })
-
-        const enabledTransparent = getId("enableTransparent")
-        enabledTransparent.addEventListener("change", (event) => {
-            if (enabledTransparent.checked) {
-                localStorage.setItem("enabledTransparent", "true")
-            }
-            else {
-                localStorage.setItem("enabledTransparent", "false")
-            }
-        })
-
-        const localEnabledTransparent = localStorage.getItem("enabledTransparent")
-        if (localEnabledTransparent == "true") {
-            enabledTransparent.checked = true
-        }
-        const language = localStorage.getItem("language")
-
-        if (language) {
-            getId("select").value = language
-        }
-        function changeLanguage() {
-            const language = getId("select").value
-            localStorage.setItem("language", language)
-            if (language === "fa") {
-                rightToLeft = true;
-                localStorage.setItem("rightToLeft", true)
-            }
-            else {
-                rightToLeft = false;
-                localStorage.setItem("rightToLeft", false)
-            }
-        }
-
-        let browser = localStorage.getItem("browser")
-        if (browser) {
-            getId("browser").value = browser
-        }
-
-        getId("browser").addEventListener("change", () => {
-            browser = getId("browser").value
-            localStorage.setItem("browser", browser)
-        })
-
-        require("../src/translate_preferences")
+       
     </script>
 </body>
 

package.json

@@ -4,7 +4,7 @@
 		"yt-dlp-wrap-extended": "^2.3.15"
 	},
 	"name": "ytdownloader",
-	"version": "3.8.0",
+	"version": "3.8.1",
 	"main": "main.js",
 	"scripts": {
 		"start": "electron .",

src/preferences.js

@@ -0,0 +1,107 @@
+let rightToLeft = false;
+if (localStorage.getItem("rightToLeft")) {
+    rightToLeft = localStorage.getItem("rightToLeft")
+}
+if (rightToLeft == "true") {
+    document.querySelectorAll(".prefBox").forEach(item => {
+        item.style.flexDirection = "row-reverse"
+    })
+}
+else {
+    console.log("Change to left to right");
+    document.querySelectorAll(".prefBox").forEach(item => {
+        item.style.flexDirection = "row"
+    })
+}
+let downloadPath = localStorage.getItem("downloadPath")
+getId("path").textContent = downloadPath
+
+const { ipcRenderer } = require("electron")
+function getId(id) {
+    return document.getElementById(id)
+}
+
+getId("back").addEventListener("click", () => {
+    ipcRenderer.send("close-secondary")
+})
+
+getId("selectLocation").addEventListener("click", () => {
+    ipcRenderer.send("select-location", "")
+})
+
+ipcRenderer.on("downloadPath", (event, downloadPath) => {
+    console.log(downloadPath);
+    localStorage.setItem("downloadPath", downloadPath)
+    getId("path").textContent = downloadPath
+})
+
+const enabledTransparent = getId("enableTransparent")
+enabledTransparent.addEventListener("change", (event) => {
+    if (enabledTransparent.checked) {
+        localStorage.setItem("enabledTransparent", "true")
+    }
+    else {
+        localStorage.setItem("enabledTransparent", "false")
+    }
+})
+
+const localEnabledTransparent = localStorage.getItem("enabledTransparent")
+if (localEnabledTransparent == "true") {
+    enabledTransparent.checked = true
+}
+const language = localStorage.getItem("language")
+
+if (language) {
+    getId("select").value = language
+}
+function changeLanguage() {
+    const language = getId("select").value
+    localStorage.setItem("language", language)
+    if (language === "fa") {
+        rightToLeft = true;
+        localStorage.setItem("rightToLeft", true)
+    }
+    else {
+        rightToLeft = false;
+        localStorage.setItem("rightToLeft", false)
+    }
+}
+
+let browser = localStorage.getItem("browser")
+if (browser) {
+    getId("browser").value = browser
+}
+
+getId("browser").addEventListener("change", () => {
+    browser = getId("browser").value
+    localStorage.setItem("browser", browser)
+})
+
+
+// Handling preferred video quality
+
+let preferredVideoQuality = localStorage.getItem("preferredVideoQuality")
+if (preferredVideoQuality){
+    getId("preferredVideoQuality").value = preferredVideoQuality
+}
+
+getId("preferredVideoQuality").addEventListener("change", ()=>{
+    preferredVideoQuality = getId("preferredVideoQuality").value
+    localStorage.setItem("preferredVideoQuality", preferredVideoQuality) = preferredVideoQuality
+})
+
+
+// Handling preferred audio quality
+
+let preferredAudioQuality = localStorage.getItem("preferredAudioQuality")
+if (preferredAudioQuality){
+    getId("preferredAudioQuality").value = preferredAudioQuality
+}
+
+getId("preferredAudioQuality").addEventListener("change", ()=>{
+    preferredAudioQuality = getId("preferredAudioQuality").value
+    localStorage.setItem("preferredAudioQuality", preferredAudioQuality) = preferredAudioQuality
+})
+
+
+require("../src/translate_preferences")

src/renderer.js

@@ -37,13 +37,7 @@ let browser = "";
 // Video and audio preferences
 let preferredVideoQuality = "";
 let preferredAudioQuality = "";
-if (localStorage.getItem("preferredVideoQuality")) {
-	preferredVideoQuality = localStorage.getItem("preferredVideoQuality");
-}
-if (localStorage.getItem("preferredAudioQuality")) {
-	preferredAudioQuality = localStorage.getItem("preferredAudioQuality");
-	getId("extractSelection").value = preferredAudioQuality;
-}
+
 
 function getId(id) {
 	return document.getElementById(id);
@@ -212,6 +206,13 @@ async function getInfo(url) {
 	getId("audioFormatSelect").innerHTML = "";
 	getId("startTime").value = "";
 	getId("endTime").value = "";
+	if (localStorage.getItem("preferredVideoQuality")) {
+		preferredVideoQuality = localStorage.getItem("preferredVideoQuality");
+	}
+	if (localStorage.getItem("preferredAudioQuality")) {
+		preferredAudioQuality = localStorage.getItem("preferredAudioQuality");
+		getId("extractSelection").value = preferredAudioQuality;
+	}
 
 	// Whether to use browser cookies or not
 	if (localStorage.getItem("browser")) {
@@ -563,10 +564,6 @@ function download(type) {
 		ext = videoValue.split("|")[1];
 		if (videoValue.split("|")[2] != "NO") {
 			preferredVideoQuality = Number(videoValue.split("|")[2]);
-			localStorage.setItem(
-				"preferredVideoQuality",
-				Number(videoValue.split("|")[2])
-			);
 		}
 	} else if (type === "audio") {
 		format_id = getId("audioFormatSelect").value.split("|")[0];

src/translate_preferences.js

@@ -1,8 +1,8 @@
 function getId(id){
     return document.getElementById(id)
 }
-function querySelector(element){
-    return document.querySelector(element)
+function querySelectorAll(element){
+    return document.querySelectorAll(element)
 }
 var i18n = new(require('../translations/i18n'))
 
@@ -15,7 +15,9 @@ getId("selectLocation").textContent = i18n.__("Select Download Location")
 getId("transparentText").textContent = i18n.__("Enable transparent dark mode(only Linux, needs relaunch)")
 getId("preferences").textContent = i18n.__("Preferences")
 getId("selectLn").textContent = i18n.__("Select Language (Requires relaunch)")
-// getId("restart").textContent = i18n.__("Restart app")
 getId("browserInfo").title = i18n.__("This option lets you download restricted content. You will get errors if cookies are not there")
 getId("browserTxt").textContent = i18n.__("Select browser to use cookies from")
 getId("none").textContent = i18n.__("None")
+querySelectorAll(".autoTxt").forEach(item => {
+    item.textContent = i18n.__("Automatic")
+});

translations/en.json

@@ -68,6 +68,6 @@
 	"Select Audio Format ":"Select Audio Format ",
 	"Maximum number of active downloads":"Maximum number of active downloads",
 	"Preferred video quality": "Preferred video quality",
-	"Preferred audio format": "Preferred audio format"
-
+	"Preferred audio format": "Preferred audio format",
+	"Best": "Best"
 }