Bug fixes and enhancements

assets/css/index.css

@@ -5,7 +5,7 @@
 	--box-toggle: rgb(70, 70, 70);
 	--box-toggleOn: rgb(28 232 138);
 	--theme-toggle: rgb(80, 193, 238);
-	--item-bg: rgb(60, 60, 60);
+	--item-bg: rgb(70, 70, 70);
 	--box-shadow: none;
 }
 
@@ -104,7 +104,6 @@ body {
 	display: flex;
 	position: relative;
 	width: 86%;
-	height: 100px;
 	background-color: var(--item-bg);
 	color: var(--text);
 	margin: 10px auto;
@@ -141,8 +140,8 @@ body {
 .itemProgress {
 	font-weight: bold;
 	cursor: pointer;
+	margin-top:10px;
 }
-
 .itemClose {
 	position: absolute;
 	top: 5px;
@@ -179,10 +178,6 @@ body {
 	color: var(--text);
 	box-shadow: var(--box-shadow);
 }
-.hiddenVideoProgress,
-.hiddenAudioProgress {
-	display: none;
-}
 
 #btnContainer {
 	display: flex;

html/index.html

@@ -99,9 +99,9 @@
         <div id="advanced">
             <p>Download particular time-range</p>
             <label>Start</label>
-            <input type="text" id="startTime" class="time" placeholder="00:00">
+            <input type="text" id="startTime" class="time" placeholder="00:00" title="If kept empty, it will start from the beginning">
             :
-            <input type="text" id="endTime" class="time" placeholder="11:27">
+            <input type="text" id="endTime" class="time" placeholder="10:00" title="If kept empty, it will be downloaded to the end.">
             <label>End</label>
 
         </div>

src/renderer.js

@@ -8,7 +8,7 @@ const { default: YTDlpWrap } = require("yt-dlp-wrap");
 
 // Directories
 const homedir = os.homedir();
-const appdir = path.join(homedir, "ytDownloader");
+const appdir = path.join(homedir, "Downloads");
 const hiddenDir = path.join(homedir, ".ytDownloader");
 
 fs.mkdir(hiddenDir, { recursive: true }, () => {});
@@ -147,12 +147,16 @@ async function getInfo(url) {
 	downloadPathSelection();
 	getId("videoFormatSelect").innerHTML = "";
 	getId("audioFormatSelect").innerHTML = "";
+	getId("startTime").value = "";
+	getId("endTime").value = "";
+
 	let info;
 	cp.exec(`${ytDlp} -j ${url}`, (error, stdout, stderr) => {
 		try {
 			info = JSON.parse(stdout);
 		} catch (error) {
 			info = false;
+			console.log(error);
 		}
 
 		console.log(info);
@@ -313,6 +317,8 @@ getId("audioDownload").addEventListener("click", (event) => {
 	download("audio");
 });
 
+// Restore previous uncompleted downloads
+
 // function restorePrevious() {
 // 	if (!localStorage.getItem("itemList")) return;
 // 	const items = JSON.parse(localStorage.getItem("itemList"));
@@ -366,7 +372,7 @@ getId("audioDownload").addEventListener("click", (event) => {
 // 	return ret;
 // }
 
-// Manage advanced options
+// Manage advanced options, needs to be called
 
 // function manageAdvanced(duration) {
 // 	let startTime = getId("startTime").value;
@@ -435,12 +441,6 @@ function download(type) {
 		<div class="itemBody">
 			<div class="itemTitle">${title}</div>
 			<div class="itemType">${type}</div>
-			<input disabled type="range" value="0" class="hiddenVideoProgress" id="${
-				randomId + "vid"
-			}"></input>
-			<input disabled type="range" value="0" class="hiddenAudioProgress" id="${
-				randomId + "aud"
-			}"></input>
 			<div id="${randomId + "prog"}" class="itemProgress"></div>
 		</div>
 	</div>
@@ -472,7 +472,8 @@ function download(type) {
 		}
 		filename += letter;
 	}
-	filename = filename + `.${ext}`;
+	filename =
+		filename + Math.random().toFixed(3).toString().slice(2) + `.${ext}`;
 	console.log(path.join(downloadDir, filename));
 
 	let audioFormat;
@@ -490,6 +491,7 @@ function download(type) {
 	if (type === "video" && onlyvideo) {
 		// If video has no sound, audio needs to be downloaded
 		console.log("Downloading both video and audio");
+
 		downloadProcess = ytdlp.exec(
 			[
 				url,
@@ -547,9 +549,9 @@ function download(type) {
 			}
 			localStorage.setItem("itemList", JSON.stringify(items));
 		})
-		.once("ytDlpEvent", (eventType, eventData) =>
-		getId(randomId + "prog").textContent = "Downloading..."
-		)
+		.once("ytDlpEvent", (eventType, eventData) => {
+			getId(randomId + "prog").textContent = "Downloading...";
+		})
 		.on("close", () => {
 			if (willBeSaved) {
 				const items = JSON.parse(localStorage.getItem("itemList"));
@@ -566,8 +568,10 @@ function download(type) {
 			}
 		})
 		.on("error", (error) => {
-			getId(randomId + "prog").textContent = "Some error has occured";
-			console.log(error);
+			getId(randomId + "prog").textContent =
+				"Some error has occured. Hover to see details";
+			getId(randomId + "prog").title = error.message;
+			console.log(error.message);
 		});
 }