Separate audio for video

assets/css/index.css

@@ -402,7 +402,7 @@ body {
 	max-width: 100%;
 }
 
-#videoFormatSelect, #audioFormatSelect {
+#videoFormatSelect, #audioFormatSelect, #audioForVideoFormatSelect {
 	font-family: JetBrains, monospace;
 	font-size: medium;
 }

html/index.html

@@ -131,34 +131,8 @@
                 <button class="submitBtn" id="audioDownload">Download</button>
                 <button id="advancedAudioToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
             </div>
-
-            <!-- Extraction options start -->
-            <div id="audioExtract">
-                <h2 id="extractHeader">Extract Audio</h2>
-                <label class="formatSelect">Select Format </label>
-                <select id="extractSelection" class="select">
-                    <option value="mp3">Mp3</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>
-                <label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
-                <select id="extractQualitySelect" class="select">
-                    <option id="extractQualityNormal" value="5">Normal</option>
-                    <option id="extractQualityBest" value="0">Best</option>
-                    <option id="extractQualityGood" value="2">Good</option>
-                    <option id="extractQualityBad" value="8">Bad</option>
-                    <option id="extractQualityWorst" value="10">Worst</option>
-                </select>
-                <br>
-                <button id="extractBtn">Extract</button>
         </div>
 
-            <!-- Extraction options end -->
-        </div>
         <div id="advanced">
             <div class="advancedItem">
                 <span id="quitTxt">Close app when download finishes</span>
@@ -192,6 +166,32 @@
 
         </div>
 
+        <!-- Extraction options start -->
+        <div id="audioExtract">
+            <h2 id="extractHeader">Extract Audio</h2>
+            <label class="formatSelect">Select Format </label>
+            <select id="extractSelection" class="select">
+                <option value="mp3">Mp3</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>
+            <label class="extractQualitySelect" id="extractQualitySelectTxt">Select Quality</label>
+            <select id="extractQualitySelect" class="select">
+                <option id="extractQualityNormal" value="5">Normal</option>
+                <option id="extractQualityBest" value="0">Best</option>
+                <option id="extractQualityGood" value="2">Good</option>
+                <option id="extractQualityBad" value="8">Bad</option>
+                <option id="extractQualityWorst" value="10">Worst</option>
+            </select>
+            <br>
+            <button id="extractBtn">Extract</button>
+        </div>
+
+        <!-- Extraction options end -->
 
     </div>
     <!-- Downloads list -->

src/index.js

@@ -23,6 +23,7 @@ function selectVideo(){
 	videoToggle.style.backgroundColor = "var(--box-toggleOn)";
 	audioToggle.style.backgroundColor = "var(--box-toggle)";
 	getId("audioList").style.display = "none";
+	getId("audioExtract").style.display = "none";
 	getId("videoList").style.display = "block";
 }
 
@@ -32,4 +33,5 @@ function selectAudio(){
 	videoToggle.style.backgroundColor = "var(--box-toggle)";
 	getId("videoList").style.display = "none";
 	getId("audioList").style.display = "block";
+	getId("audioExtract").style.display = "block";
 }

src/renderer.js

@@ -382,6 +382,7 @@ async function getInfo(url) {
 
 			let preferredAudioFormatLength = 0;
 			let preferredAudioFormatCount = 0;
+			let maxAudioFormatNoteLength = 10;
 
 			// Initially going through all formats
 			// Getting approx size of audio file and checking if audio is present
@@ -420,9 +421,14 @@ async function getInfo(url) {
 					audioSize =
 						Number(format.filesize || format.filesize_approx) /
 						1000000;
+					
 					if (!audioExtensionList.includes(format.audio_ext)) {
 						audioExtensionList.push(format.audio_ext);
 					}
+
+					if (format.format_note.length > maxAudioFormatNoteLength) {
+						maxAudioFormatNoteLength = format.format_note.length
+					}
 				}
 
 				if (
@@ -528,16 +534,14 @@ async function getInfo(url) {
 						format.format_id ||
 						"Unknown quality";
 					const spaceAfterQuality = "&#160".repeat(
-						quality.length > 8 && 8 - quality.length > 0
+						quality.length <= 8 && 8 - quality.length > 0
 							? 8 - quality.length
-							: quality.length + 2
+							: quality.length + 1
 					);
 
 					// Extension
 					const extension = format.ext;
-					const spaceAfterExtension = "&#160".repeat(
+
-						5 - extension.length
-					);
 					// Format and Quality Options
 					const element =
 						"<option value='" +
@@ -548,8 +552,7 @@ async function getInfo(url) {
 						quality +
 						spaceAfterQuality +
 						"| " +
-						extension +
+						extension.padEnd(5, "\xa0") +
-						spaceAfterExtension +
 						"|  " +
 						vcodec +
 						spaceAfterVcodec +
@@ -588,18 +591,23 @@ async function getInfo(url) {
 
 					const format_id = format.format_id + "|" + audio_ext;
 
+					/**@type {string} */
+					let formatNote = (i18n.__(format.format_note) ||
+					i18n.__("Unknown quality"));
+
+					formatNote = formatNote.padEnd(maxAudioFormatNoteLength, "\xa0")
+
 					const element =
 						"<option value='" +
 						format_id +
 						"'" +
 						audioSelectedText +
 						">" +
-						i18n.__("Quality") +
+						// i18n.__("Quality") +
-						": " +
+						// ": " +
-						(i18n.__(format.format_note) ||
+						formatNote +
-							i18n.__("Unknown quality")) +
+						"| " +
-						" | " +
+						audio_ext.padEnd(4, "\xa0") +
-						audio_ext +
 						" | " +
 						size +
 						"</option>";
@@ -897,9 +905,10 @@ function download(
 
 	const url = url1 || getId("url").value;
 	console.log("URL", url);
-	let ext, extractExt, extractFormat1, extractQuality1;
+	let ext, extractExt, extractFormat1, extractQuality1, audioForVideoExt;
 
-	let format_id;
+	/**@type {string}*/
+	let format_id, audioForVideoFormat_id;
 	const randomId = "a" + Math.random().toFixed(10).toString().slice(2);
 
 	// Whether to close app
@@ -907,11 +916,31 @@ function download(
 
 	if (type === "video") {
 		const videoValue = getId("videoFormatSelect").value;
+		/**@type {string} */
+		const audioForVideoValue = getId("audioForVideoFormatSelect").value
+
 		format_id = videoValue.split("|")[0];
-		ext = videoValue.split("|")[1];
+		const videoExt = videoValue.split("|")[1];
+
 		if (videoValue.split("|")[2] != "NO") {
 			preferredVideoQuality = Number(videoValue.split("|")[2]);
 		}
+
+		audioForVideoFormat_id = audioForVideoValue.split("|")[0];
+
+		if (audioForVideoValue.split("|")[1] === "webm") {
+			audioForVideoExt = "opus";
+		} else {
+			audioForVideoExt = audioForVideoValue.split("|")[1];
+		}
+
+		if ((videoExt === "mp4" && audioForVideoExt === "opus") || (videoExt === "webm" && audioForVideoExt === "m4a")) {
+			ext = "mkv"
+		} else {
+			ext = videoExt;
+		}
+
+
 	} else if (type === "audio") {
 		format_id = getId("audioFormatSelect").value.split("|")[0];
 		if (getId("audioFormatSelect").value.split("|")[1] === "webm") {
@@ -920,7 +949,7 @@ function download(
 			ext = getId("audioFormatSelect").value.split("|")[1];
 		}
 	}
-	console.log("video extension:", ext);
+	console.log("Download extension:", ext);
 
 	const newItem = `
 		<div class="item" id="${randomId}">
@@ -995,8 +1024,10 @@ function download(
 	}
 	console.log("Filename:", filename);
 
+	/**@type {string} */
 	let audioFormat;
 
+	if (audioForVideoFormat_id === "auto") {
 		if (ext === "mp4") {
 			if (!(audioExtensionList.length == 0)) {
 				if (audioExtensionList.includes("m4a")) {
@@ -1011,6 +1042,10 @@ function download(
 			audioFormat = "+ba";
 		}
 
+	} else {
+		audioFormat = `+${audioForVideoFormat_id}`;
+	}
+
 	const controller = new AbortController();
 	controllers[randomId] = controller;
 
@@ -1035,7 +1070,7 @@ function download(
 				subs2 || subLangs,
 				"--no-playlist",
 				"--embed-metadata",
-				ext == "mp4" ? "--embed-thumbnail" : "",
+				ext == "mp4" && audioForVideoExt === "m4a" ? "--embed-thumbnail" : "",
 				configArg,
 				configTxt,
 				cookieArg,