New playlist mode and style changes for progress

assets/css/index.css

@@ -109,7 +109,7 @@ body {
 	color: var(--text);
 	margin: 10px auto;
 	border-radius: 10px;
-	padding: 20px 10px;
+	padding: 10px;
 	align-items: center;
 	justify-content: space-between;
 }
@@ -131,7 +131,10 @@ body {
 		width: 90%;
 	}
 }
-
+.itemIconBox{
+	display:flex;
+	flex-direction: column;
+}
 .itemIcon {
 	max-width: 160px;
 	max-height: 90px;
@@ -141,6 +144,7 @@ body {
 
 .itemTitle {
 	font-family: sans-serif;
+	padding:5px;
 }
 .itemBody {
 	height: 90%;
@@ -155,6 +159,12 @@ body {
 	margin-top: 10px;
 	font-family: sans-serif;
 }
+.progressBar{
+	width:90%;
+}
+.itemSpeed{
+	padding:10px 5px 5px 5px;
+}
 .itemClose {
 	position: absolute;
 	top: 5px;
@@ -167,6 +177,7 @@ body {
 .itemType {
 	font-style: italic;
 	margin-top: 5px;
+	margin: top 8px;
 }
 
 #closeHidden {

src/playlist_new.js

@@ -79,31 +79,50 @@ function pasteLink() {
 				const parsed = JSON.parse(stdout);
 				console.log(parsed);
 				let items = "";
-				parsed.entries.forEach((entry) => {
+				// If correct playlist url is used
-					const randId = Math.random().toFixed(10).toString().slice(2);
+				if (parsed.entries) {
-		
+					parsed.entries.forEach((entry) => {
-					if (entry.channel) {
+						const randId = Math.random()
-						items += `
+							.toFixed(10)
-					<div class="item" id="${randId}">
+							.toString()
-					<img src="${
+							.slice(2);
-						entry.thumbnails[3].url
+
-					}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
+						if (entry.channel) {
-		
+							items += `
-					<div class="itemBody">
+						<div class="item" id="${randId}">
-						<div class="itemTitle">${entry.title}</div>
+						<img src="${
-						<div>${formatTime(entry.duration)}</div>
+							entry.thumbnails[3].url
-						<input type="checkbox" class="playlistCheck" id="c${randId}">
+						}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
+			
+						<div class="itemBody">
+							<div class="itemTitle">${entry.title}</div>
+							<div>${formatTime(entry.duration)}</div>
+							<input type="checkbox" class="playlistCheck" id="c${randId}">
+						</div>
 					</div>
-				</div>
+						`;
-					`;
+						}
-					}
+					});
-				});
+					getId("data").innerHTML = items;
-				getId("data").innerHTML = items;
+					getId("loadingWrapper").style.display = "none";
-				getId("loadingWrapper").style.display = "none";
+				}
+				// If correct playlist url is not used
+				else {
+					getId("loadingWrapper").style.display = "none";
+					getId("incorrectMsg").textContent = i18n.__(
+						"Incompatible URL. Please provide a playlist URL"
+					);
+					getId("errorDetails").innerHTML = `
+			<strong>URL: ${clipboardText}</strong>
+			<br><br>
+			${error}
+			`;
+					getId("errorDetails").title = i18n.__("Click to copy");
+					getId("errorBtn").style.display = "inline-block";
+				}
 			}
 		}
 	);
-
 }
 
 getId("pasteLink").addEventListener("click", (e) => {

src/renderer.js

@@ -209,9 +209,9 @@ function defaultVideoToggle() {
 		defaultWindow = localStorage.getItem("defaultWindow");
 	}
 	if (defaultWindow == "video") {
-		selectVideo()
+		selectVideo();
 	} else {
-		selectAudio()
+		selectAudio();
 	}
 }
 
@@ -530,13 +530,14 @@ getId("videoDownload").addEventListener("click", (event) => {
 		const randId = Math.random().toFixed(10).toString().slice(2);
 		const item = `
 		<div class="item" id="${randId}">
+			<div class="itemIconBox">
 			<img src="${
 				thumbnail || "../assets/images/thumb.png"
 			}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
-
+			<span class="itemType">${i18n.__("Video")}</span>
+			</div>
 			<div class="itemBody">
 				<div class="itemTitle">${title}</div>
-				<div class="itemType">${i18n.__("Video")}</div>
 				<p>${i18n.__("Download pending")}</p>
 			</div>
 		</div>
@@ -588,11 +589,12 @@ getId("audioDownload").addEventListener("click", (event) => {
 		const item = `
 		
 		<div class="item" id="${randId}">
+			<div class="itemIconBox">
 			<img src="${thumbnail}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
-
+			<span class="itemType">${i18n.__("Video")}</span>
+			</div>
 			<div class="itemBody">
 				<div class="itemTitle">${title}</div>
-				<div class="itemType">${i18n.__("Video")}</div>
 				<p>${i18n.__("Download pending")}</p>
 			</div>
 		</div>
@@ -643,11 +645,12 @@ getId("extractBtn").addEventListener("click", () => {
 
 		const item = `
 		<div class="item" id="${randId}">
+			<div class="itemIconBox">
 			<img src="${thumbnail}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
-
+			<span class="itemType">${i18n.__("Video")}</span>
+		</div>
 			<div class="itemBody">
 				<div class="itemTitle">${title}</div>
-				<div class="itemType">${i18n.__("Video")}</div>
 				<p>${i18n.__("Download pending")}</p>
 			</div>
 		</div>
@@ -827,18 +830,22 @@ function download(
 
 	const newItem = `
 		<div class="item" id="${randomId}">
+		<div class="itemIconBox">
+			<img src="${
+				thumb1 || thumbnail || "../assets/images/thumb.png"
+			}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
+			<span class="itemType">${
+				type === "video" ? i18n.__("Video") : i18n.__("Audio")
+			}</span>
+		</div>
 		<img src="../assets/images/close.png" onClick="fadeItem('${randomId}')" class="itemClose"}" id="${
 		randomId + ".close"
 	}">
-		<img src="${
+
-			thumb1 || thumbnail || "../assets/images/thumb.png"
-		}" alt="No thumbnail" class="itemIcon" crossorigin="anonymous">
 
 		<div class="itemBody">
 			<div class="itemTitle">${newTitle}</div>
-			<div class="itemType">${
+			<strong class="itemSpeed" id="${randomId + "speed"}"></strong>
-				type === "video" ? i18n.__("Video") : i18n.__("Audio")
-			}</div>
 			<div id="${randomId + "prog"}" class="itemProgress"></div>
 		</div>
 	</div>
@@ -999,11 +1006,12 @@ function download(
 				getId(randomId + "prog").textContent =
 					i18n.__("Processing") + "...";
 			} else {
-				getId(randomId + "prog").textContent = `${i18n.__(
+				getId(randomId + "speed").textContent = `${i18n.__("Speed")}: ${
-					"Progress"
-				)}: ${progress.percent}%  ${i18n.__("Speed")}: ${
 					progress.currentSpeed || 0
 				}`;
+				getId(
+					randomId + "prog"
+				).innerHTML = `<progress class="progressBar" min=0 max=100 value=${progress.percent}>`;
 			}
 
 			// const items = JSON.parse(localStorage.getItem("itemList"));
@@ -1020,6 +1028,7 @@ function download(
 			getId(randomId + "prog").textContent = i18n.__("Downloading...");
 		})
 		.once("close", (code) => {
+			getId(randomId + "speed").textContent = ""
 			currentDownloads--;
 			console.log("Closed with code " + code);
 			if (code == 0) {