Improved video format details

assets/css/index.css

@@ -1,3 +1,9 @@
+@font-face {
+	font-family: 'JetBrains';
+	src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
+  }
+
+  
 :root[theme="light"] {
 	--background: #fff;
 	--text: rgb(45, 45, 45);
@@ -48,12 +54,12 @@
 	--blueBtn-bottom: rgb(44, 78, 180);
 }
 :root[theme="onedark"] {
-	--background: #282C34	;
+	--background: #282c34;
 	--text: #d2d6df;
-	--box-main: #4D515D;
+	--box-main: #4d515d;
-	--box-toggle: #2F333D;
+	--box-toggle: #2f333d;
 	--box-toggleOn: #13a3b7;
-	--item-bg: #4D515D;
+	--item-bg: #4d515d;
 	--select: #57b6c2;
 	--greenBtn: #85cf50;
 	--greenBtn-bottom: #406923;
@@ -63,13 +69,13 @@
 	--blueBtn-bottom: rgb(44, 78, 180);
 }
 :root[theme="matrix"] {
-	--background: #0D0208;
+	--background: #0d0208;
-	--text: #00FF41;
+	--text: #00ff41;
 	--box-main: #0c2216;
 	--box-toggle: #214338;
 	--box-toggleOn: #24782e;
 	--item-bg: #214338;
-	--select: #00FF41;
+	--select: #00ff41;
 	--greenBtn: #19b42b;
 	--greenBtn-bottom: #10701c;
 	--redBtn: #19b42b;
@@ -79,23 +85,23 @@
 }
 
 :root[theme="github"] {
-	--background: #F6F8FA;
+	--background: #f6f8fa;
-	--text: #292D31;
+	--text: #292d31;
-	--box-main: #FFFFFF;
+	--box-main: #ffffff;
-	--box-toggle: #F3f3f3;
+	--box-toggle: #f3f3f3;
 	--box-toggleOn: #cce5ff;
-	--item-bg: #3A66D150;
+	--item-bg: #3a66d150;
 	--select: #cce5ff;
 	--greenBtn: #0a9431;
 	--greenBtn-bottom: #0c6826;
 	--redBtn: #d73a49;
 	--redBtn-bottom: #9b2733;
-	--blueBtn: #005CC5;
+	--blueBtn: #005cc5;
 	--blueBtn-bottom: #00428e;
 }
 
 :root[theme="latte"] {
-	--background: #dce0e8	;
+	--background: #dce0e8;
 	--text: #4c4f69;
 	--box-main: #eff1f5;
 	--box-toggle: #e6e9ef;
@@ -111,10 +117,10 @@
 }
 
 :root[theme="solarized-dark"] {
-	--background: #002B36;
+	--background: #002b36;
 	--text: #a4b1b3;
 	--box-main: #003745;
-	--box-toggle: #2E4C52;
+	--box-toggle: #2e4c52;
 	--box-toggleOn: #005a6f;
 	--item-bg: #003745;
 	--select: #2aa198;
@@ -123,7 +129,7 @@
 	--redBtn: #dc322f;
 	--redBtn-bottom: #af2523;
 	--blueBtn: #268bd2;
-	--blueBtn-bottom:#2074b1;
+	--blueBtn-bottom: #2074b1;
 }
 
 body {
@@ -206,11 +212,11 @@ body {
 	backdrop-filter: blur(16px) saturate(160%);
 	-webkit-backdrop-filter: blur(16px) saturate(160%);
 	background-color: rgb(17, 25, 40);
-	color:white;
+	color: white;
-	padding:10px;
+	padding: 10px;
 	border-radius: 5px;
 	outline: none;
-	border:none;
+	border: none;
 	font-size: large;
 }
 .menuItem {
@@ -352,7 +358,7 @@ body {
 #options {
 	display: none;
 	position: absolute;
-	overflow:hidden;
+	overflow: hidden;
 	z-index: 1;
 	left: 0;
 	right: 0;
@@ -396,6 +402,11 @@ body {
 	outline: none;
 }
 
+#videoFormatSelect {
+	font-family: JetBrains, monospace;
+	font-size:medium;
+}
+
 label {
 	position: relative;
 	top: 3px;

src/renderer.js

@@ -47,6 +47,7 @@ let rangeOption = "--download-sections";
 let cookieArg = "";
 let browser = "";
 let maxActiveDownloads = 5;
+let showVcodec = false
 function checkMaxDownloads() {
 	if (localStorage.getItem("maxActiveDownloads")) {
 		const number = Number(localStorage.getItem("maxActiveDownloads"));
@@ -220,7 +221,7 @@ function defaultVideoToggle() {
 
 function pasteUrl() {
 	defaultVideoToggle();
-	hideHidden()
+	hideHidden();
 	getId("loadingWrapper").style.display = "flex";
 	getId("incorrectMsg").textContent = "";
 	const url = clipboard.readText();
@@ -229,14 +230,14 @@ function pasteUrl() {
 
 function pasteFromTray(url) {
 	defaultVideoToggle();
-	hideHidden()
+	hideHidden();
 	getId("loadingWrapper").style.display = "flex";
 	getId("incorrectMsg").textContent = "";
 	getInfo(url);
 }
 
 getId("closeHidden").addEventListener("click", () => {
-	hideHidden()
+	hideHidden();
 	getId("loadingWrapper").style.display = "none";
 });
 
@@ -344,7 +345,7 @@ async function getInfo(url) {
 			getId("loadingWrapper").style.display = "none";
 
 			getId("hidden").style.display = "inline-block";
-			getId("hidden").classList.add("scaleUp")
+			getId("hidden").classList.add("scaleUp");
 
 			getId("title").innerHTML =
 				`<b>${i18n.__("Title ")}</b>: ` +
@@ -416,24 +417,33 @@ async function getInfo(url) {
 						"|" +
 						(format.height || "NO");
 
+					// Video codec
+
+					const vcodec = format.vcodec && showVcodec? format.vcodec.split(".")[0] + "|  "  : ""
+					const spaceAfterVcodec = showVcodec ? "&#160".repeat(5 - vcodec.length) : ""
+
+					// Quality
+					const quality = format.height	? format.height + "p" + (format.fps == 60 ? "60" : "")
+						: "" ||format.resolution || i18n.__(format.format_note) || format.format_id ||"Unknown quality";
+					const spaceAfterQuality = "&#160".repeat(8 - quality.length)
+
+					// Extension
+					const extension = format.ext
+					const spaceAfterExtension = "&#160".repeat(5 - extension.length)
+					// Format and Quality Options
 					const element =
 						"<option value='" +
 						format_id +
 						"'" +
 						selectedText +
 						">" +
-						(format.height
+						quality +
-							? format.height +
+						spaceAfterQuality +
-							  "p" +
+						"| " +
-							  (format.fps == 60 ? "60" : "")
+						extension + spaceAfterExtension +
-							: "" ||
+						"|  " +
-							  format.resolution ||
+						vcodec +
-							  i18n.__(format.format_note) ||
+						spaceAfterVcodec+
-							  format.format_id ||
-							  "Unknown quality") +
-						"  |  " +
-						format.ext +
-						"  |  " +
 						size +
 						"</option>";
 					getId("videoFormatSelect").innerHTML += element;
@@ -515,7 +525,7 @@ async function getInfo(url) {
 // Video download event
 getId("videoDownload").addEventListener("click", (event) => {
 	checkMaxDownloads();
-	hideHidden()
+	hideHidden();
 	console.log(`Current:${currentDownloads} Max:${maxActiveDownloads}`);
 
 	if (currentDownloads < maxActiveDownloads) {
@@ -572,7 +582,7 @@ getId("videoDownload").addEventListener("click", (event) => {
 // Audio download event
 getId("audioDownload").addEventListener("click", (event) => {
 	checkMaxDownloads();
-	hideHidden()
+	hideHidden();
 	console.log(`Current:${currentDownloads} Max:${maxActiveDownloads}`);
 
 	if (currentDownloads < maxActiveDownloads) {
@@ -628,7 +638,7 @@ getId("audioDownload").addEventListener("click", (event) => {
 
 getId("extractBtn").addEventListener("click", () => {
 	checkMaxDownloads();
-	hideHidden()
+	hideHidden();
 
 	console.log(`Current:${currentDownloads} Max:${maxActiveDownloads}`);
 
@@ -1094,8 +1104,8 @@ function closeMenu() {
 	}, 50);
 }
 
-function hideHidden(){
+function hideHidden() {
-	getId("hidden").classList.remove("scaleUp")
+	getId("hidden").classList.remove("scaleUp");
 	getId("hidden").classList.add("scale");
 	setTimeout(() => {
 		getId("hidden").style.display = "none";