Separate audio selection for video

assets/css/index.css

@@ -338,7 +338,7 @@ body {
 	z-index: 1;
 	left: 0;
 	right: 0;
-	margin: auto;
+	margin: auto auto 20px auto;
 	top: 20%;
 	background-color: var(--box-main);
 	border-radius: 10px;
@@ -347,7 +347,7 @@ body {
 	color: var(--text);
 }
 
-#audioExtract {
+#audioExtract, .separationBox {
 	margin: 10px;
 	padding: 10px;
 	background-color: var(--box-toggle);
@@ -399,6 +399,7 @@ body {
 	font-size: large;
 	margin: 8px;
 	outline: none;
+	max-width: 100%;
 }
 
 #videoFormatSelect, #audioFormatSelect {

html/index.html

@@ -92,16 +92,35 @@
         </div>
         <p id="title">Title </p>
 
+        <!-- Video tab -->
         <div id="videoList">
-            <label class="formatSelect">Select Format </label>
-            <select id="videoFormatSelect" class="select">
-            </select>
+            <div class="separationBox">
+                <h2>Video</h2>
+                <label class="formatSelect">Select Format </label>
+                <select id="videoFormatSelect" class="select">
+                </select>
+                <br>
+                <input type="hidden" name="url" class="url" id="url">
+
+                <!-- Audio options for video -->
+                <div id="audioForVideo">
+                    <h2>Audio</h2>
+                    <label class="formatSelect">Select Audio Format </label>
+                    <select id="audioForVideoFormatSelect" class="select">
+                    </select>
+                    <br>
+                    <input type="hidden" name="url" class="url">
+                </div>
+                <br>
+            </div>
+
+
             <br>
-            <input type="hidden" name="url" class="url" id="url">
             <button class="submitBtn" id="videoDownload">Download</button>
             <button id="advancedVideoToggle" class="advancedToggle" onClick="advancedToggle()">More options</button>
         </div>
 
+        <!-- Audio tab -->
         <div id="audioList">
             <div id="audioPresent">
                 <label class="formatSelect">Select Format </label>
@@ -112,6 +131,33 @@
                 <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">
@@ -146,33 +192,6 @@
 
         </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/renderer.js

@@ -261,6 +261,7 @@ async function getInfo(url) {
 	// Cleaning text
 	getId("videoFormatSelect").innerHTML = "";
 	getId("audioFormatSelect").innerHTML = "";
+	getId("audioForVideoFormatSelect").innerHTML = "";
 
 	const startTime = getId("startTime");
 	startTime.value = "";
@@ -603,6 +604,8 @@ async function getInfo(url) {
 						size +
 						"</option>";
 					getId("audioFormatSelect").innerHTML += element;
+					getId("audioForVideoFormatSelect").innerHTML += element;
+					
 				}
 				// Both audio and video available
 				else if (