Separate video and audio download in playlists

html/playlist.html

@@ -20,10 +20,14 @@
             margin-top: 15px;
             font-weight: bold;
         }
-        #openDownloads{
-            display:none;
+
+        #openDownloads {
+            display: none;
             position: relative;
-            bottom:8px;
+            bottom: 8px;
+        }
+        #audioBox{
+            display:none;
         }
     </style>
 </head>
@@ -47,41 +51,50 @@
     <button class="submitBtn" id="pasteLink">Click to paste playlist link from clipboard [Ctrl + V]</button>
 
     <div id="options">
+        <div id="btnContainer">
+            <button class="toggleBtn" id="videoToggle">Video</button>
+            <button class="toggleBtn" id="audioToggle">Audio</button>
+        </div>
         <br>
         <strong id="linkTitle">Link:</strong>
         <span id="link"></span>
         <br><br>
+        <div id="videoBox">
+            <label id="videoFormat">Select Video Format </label>
+            <select id="select">
+                <option value="best" id="bestVideoOption">Best</option>
+                <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>
 
-        <label id="videoFormat">Select Video Format </label>
-        <select id="select">
-            <option value="best" id="bestVideoOption">Best</option>
-            <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>
-
-        <button class="submitBtn" id="download">Download</button>
+            <button class="submitBtn" id="download">Download</button>
+        </div>
 
-        <br>
-        <label id="audioFormat">Select Audio format </label>
-        <select id="audioSelect">
-            <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>
-        <button class="submitBtn" id="audioDownload">Download</button>
+        <div id="audioBox">
+
+            <label id="audioFormat">Select Audio format </label>
+            <select id="audioSelect">
+                <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>
+            <button class="submitBtn" id="audioDownload">Download</button>
+
+        </div>
 
         <p id="incorrectMsg"></p>
+
     </div>
 
     <h2 id="playlistName"></h2>

src/playlist.js

@@ -239,6 +239,26 @@ function closeMenu() {
 	}, 50);
 }
 
+// Video and audio toggle
+const videoToggle = getId("videoToggle");
+const audioToggle = getId("audioToggle");
+
+videoToggle.style.backgroundColor = "var(--box-toggleOn)";
+
+videoToggle.addEventListener("click", (event) => {
+	videoToggle.style.backgroundColor = "var(--box-toggleOn)";
+	audioToggle.style.backgroundColor = "var(--box-toggle)";
+	getId("audioBox").style.display = "none";
+	getId("videoBox").style.display = "block";
+});
+
+audioToggle.addEventListener("click", (event) => {
+	audioToggle.style.backgroundColor = "var(--box-toggleOn)";
+	videoToggle.style.backgroundColor = "var(--box-toggle)";
+	getId("videoBox").style.display = "none";
+	getId("audioBox").style.display = "block";
+});
+
 getId("openDownloads").addEventListener("click", () => {
 	openFolder(downloadDir);
 });