Add clear downloads button

assets/css/index.css

@@ -535,7 +535,7 @@ button {
 	outline: none;
 }
 
-#extractBtn {
+#extractBtn, .blueBtn {
 	color: white;
 	background-color: var(--blueBtn);
 	border: none;
@@ -548,6 +548,10 @@ button {
 	font-size: large;
 }
 
+#clearBtn {
+	display: none;
+}
+
 #extractBtn:active {
 	top: 4px;
 	margin-bottom: 12px;

html/index.html

@@ -196,6 +196,8 @@
     <!-- Downloads list -->
     <div id="list"></div>
 
+    <button class="blueBtn" id="clearBtn">Clear Downloads</button>
+
     <div id="goToTop"></div>
 
     <script>

src/renderer.js

@@ -71,6 +71,7 @@ let showMoreFormats = false;
 let configArg = "";
 let configTxt = "";
 let proxy = "";
+let downloadedItemList = []
 
 if (localStorage.getItem("configPath")) {
 	configArg = "--config-location";
@@ -1009,10 +1010,12 @@ function download(
 
 	getId(randomId + ".close").addEventListener("click", () => {
 		if (getId(randomId)) {
+			removeFromDownloadedList(randomId)
 			fadeItem(randomId);
 		}
 	});
 
+
 	let downloadProcess;
 	let filename = "";
 
@@ -1236,6 +1239,7 @@ function download(
 		})
 		.once("close", (code) => {
 			getId(randomId + "speed").textContent = "";
+			addToDownloadedList(randomId)
 			currentDownloads--;
 			console.log("Closed with code " + code);
 			if (code == 0) {
@@ -1294,6 +1298,34 @@ function fadeItem(id) {
 	}, 500);
 }
 
+function clearAllDownloaded(){
+	downloadedItemList.forEach(item => {
+		fadeItem(item)
+	})
+	downloadedItemList = []
+	hideClearBtn()
+}
+
+function addToDownloadedList(id){
+	downloadedItemList.push(id)
+
+	if (downloadedItemList.length > 1) {
+		getId("clearBtn").style.display = "inline-block";
+
+	}
+}
+
+function removeFromDownloadedList(id){
+	downloadedItemList.splice(downloadedItemList.indexOf(id), 1);
+
+	if (downloadedItemList.length < 2) {
+		hideClearBtn();
+	}
+}
+
+function hideClearBtn(){
+	getId("clearBtn").style.display = "none"
+}
 // After saving video
 
 function afterSave(location, filename, progressId, thumbnail) {
@@ -1406,6 +1438,10 @@ getId("selectLocation").addEventListener("click", () => {
 	ipcRenderer.send("select-location-main", "");
 });
 
+getId("clearBtn").addEventListener("click", () => {
+	clearAllDownloaded();
+})
+
 ipcRenderer.on("downloadPath", (event, downloadPath) => {
 	console.log(downloadPath);
 	getId("path").textContent = downloadPath[0];