Improve download item UI

2 weeks ago · dd4b5e7600
parent 97ab87cfcc
commit dd4b5e7600
5 changed files with 167 additions and 28 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -61,6 +61,42 @@ img {
 	height: 40px;
 	cursor: pointer;
 	transition: 0.3s;
+	z-index: 1;
+}
+
+.openFileBtn {
+	color: white;
+	background-color: var(--blueBtn);
+	border: none;
+	position: relative;
+	border-radius: 6px;
+	text-decoration: none;
+	cursor: pointer;
+	padding: 10px;
+	display: flex;
+	margin: 8px 0;
+	font-weight: normal;
+	align-items: center;
+	font-size: 15px;
+
+	display: none;
+}
+
+.btnIcon {
+	width: 15px;
+	height: 15px;
+	margin-right: 10px;
+}
+
+.speedContainer {
+	display: flex;
+}
+
+.speedIcon {
+	width: 15px;
+	height: 15px;
+	
+	color: var(--text)
 }

 #menu {
@ -185,10 +221,12 @@ img {
 .itemIconBox {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 }
 .itemIcon {
-	max-width: 160px;
-	max-height: 90px;
+	max-width: 180px;
+	height: 115px;
+	object-fit: cover;
 	border-radius: 10px;
 	margin: 0 10px 0 0;
 }
@ -208,7 +246,14 @@ img {
 }

 .itemTitle {
-	padding: 5px;
+	padding: 8px 0;
+	font-weight: bold;
+	font-size: 20px;
+	text-align: start;
+	max-width: 96%;
+}
+.itemChannel {
+	opacity: 0.6;
 }
 .itemBody {
 	height: 90%;
@ -216,15 +261,17 @@ img {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	align-items: flex-start;
+	margin-left: 30px;
 }
 .itemProgress {
-	font-weight: bold;
-	cursor: pointer;
 	padding: 4px 0;
+	width: 90%;
+	text-align: start;
 }

 .custom-progress {
-	width: 90%;
+	width: 100%;
 	height: 8px;
 	background: #e0e0e0;
 	border-radius: 6px;
@ -241,7 +288,7 @@ img {
 }

 .itemSpeed {
-	padding: 10px 5px 5px 5px;
+	padding: 10px 5px 5px 0;
 }
 .itemClose {
 	position: absolute;
@ -249,13 +296,23 @@ img {
 	right: 8px;
 	cursor: pointer;
 	cursor: pointer;
-	width: 20px;
-	height: 20px;
+	width: 15px;
+	height: 15px;
+	background: color-mix(in srgb, var(--item-bg) 85%, black);
+	padding: 5px;
+	border-radius: 50%;
 }
 .itemType {
-	font-style: italic;
 	margin-top: 5px;
+	position: absolute;
+	padding: 5px;
+	background: #1310108a;
+	color: white;
+	left: 5px;
+	bottom: 5px;
 	margin: top 8px;
+	border-radius: 5px;
+	font-size: 10px;
 }

 #closeHidden {
@ -264,8 +321,11 @@ img {
 	right: 10px;
 	cursor: pointer;
 	cursor: pointer;
-	width: 20px;
-	height: 20px;
+	width: 15px;
+	height: 15px;
+	background: color-mix(in srgb, var(--item-bg) 85%, black);
+	padding: 5px;
+	border-radius: 50%;
 }

 #hidden {
@ -1293,7 +1353,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	transition: color 0.2s;
 }

-.custom-slider-container, .target-size-container, .target-percent-container {
+.custom-slider-container,
+.target-size-container,
+.target-percent-container {
 	background-color: var(--box-toggle);
 	border: 1px solid var(--box-separation);
 	padding: 18px 24px;
@ -1380,7 +1442,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	background: var(--blueBtn);
 	cursor: pointer;
 	margin-top: -6px;
-	transition: transform 0.15s, background-color 0.15s;
+	transition:
+		transform 0.15s,
+		background-color 0.15s;
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }

@ -1389,14 +1453,16 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	background: var(--blueBtn-bottom);
 }

-.target-size-container, .target-percent-container {
+.target-size-container,
+.target-percent-container {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 8px;
 }

-#target-size-input, #target-percent-input {
+#target-size-input,
+#target-percent-input {
 	background-color: var(--select);
 	color: var(--text);
 	border: 1px solid var(--box-separation);
@ -1408,7 +1474,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	transition: border-color 0.2s;
 }

-#target-size-input:focus, #target-percent-input:focus {
+#target-size-input:focus,
+#target-percent-input:focus {
 	border-color: var(--blueBtn);
 }

@ -1426,7 +1493,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	justify-content: center;
 	gap: 8px;
 	margin: 25px auto 15px auto;
-	transition: background-color 0.2s, transform 0.1s;
+	transition:
+		background-color 0.2s,
+		transform 0.1s;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

@ -1452,7 +1521,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	overflow: hidden;
 	max-height: 1000px;
 	opacity: 1;
-	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+	transition:
+		max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+		opacity 0.3s ease;
 }

 .advanced-settings-collapse.collapsed {
@ -1464,4 +1535,3 @@ input[type="range"]::-webkit-slider-thumb:hover {
 .full-width-settings {
 	width: 100% !important;
 }
-
--- a/assets/images/close.png
+++ b/assets/images/close.png
--- a/assets/images/download-speed.svg
+++ b/assets/images/download-speed.svg
@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 305 305" style="enable-background:new 0 0 305 305;" xml:space="preserve">
+<g>
+	<path style="fill:#222220;" d="M305,173.726c0-41.662-16.799-79.469-43.972-107.02c-0.212-0.282-0.438-0.558-0.695-0.815
+		c-0.257-0.257-0.532-0.483-0.814-0.694C231.968,38.024,194.161,21.226,152.5,21.226c-41.661,0-79.468,16.799-107.02,43.971
+		c-0.282,0.212-0.557,0.438-0.814,0.694c-0.257,0.257-0.483,0.532-0.695,0.815C16.799,94.257,0,132.064,0,173.726
+		c0,40.729,15.859,79.018,44.655,107.821c0.004,0.004,0.008,0.009,0.012,0.013c0.003,0.002,0.005,0.005,0.008,0.007
+		c0.004,0.004,0.008,0.008,0.012,0.012c1.464,1.464,3.383,2.195,5.302,2.195c1.92,0,3.84-0.732,5.304-2.197
+		c0.125-0.125,0.238-0.258,0.352-0.39l23.112-23.113c2.929-2.93,2.929-7.678,0-10.607c-2.929-2.928-7.678-2.928-10.606,0
+		l-18.036,18.036c-21.031-23.403-33.232-52.857-34.91-84.277h25.507c4.142,0,7.5-3.357,7.5-7.5s-3.358-7.5-7.5-7.5H15.207
+		c1.744-32.272,14.668-61.618,34.957-84.229l17.987,17.987c1.464,1.464,3.384,2.196,5.303,2.196c1.919,0,3.839-0.732,5.303-2.196
+		c2.929-2.93,2.929-7.678,0-10.607L60.771,71.389C83.383,51.1,112.728,38.176,145,36.433v25.506c0,4.143,3.358,7.5,7.5,7.5
+		s7.5-3.357,7.5-7.5V36.433c32.272,1.743,61.617,14.668,84.229,34.957l-17.987,17.987c-2.929,2.93-2.929,7.678,0,10.607
+		c1.464,1.464,3.384,2.196,5.303,2.196s3.839-0.732,5.303-2.196l17.987-17.987c20.289,22.612,33.214,51.957,34.957,84.229h-25.506
+		c-4.142,0-7.5,3.357-7.5,7.5s3.358,7.5,7.5,7.5h25.507c-1.678,31.42-13.878,60.875-34.909,84.278l-18.036-18.037
+		c-2.928-2.928-7.677-2.928-10.606,0c-2.929,2.93-2.929,7.678,0,10.607l23.485,23.485c1.464,1.464,3.384,2.196,5.303,2.196
+		c0.959,0,1.919-0.183,2.822-0.549c0.903-0.366,1.749-0.915,2.482-1.647C289.137,252.755,305,214.459,305,173.726z"/>
+	<path style="fill:#222220;" d="M186.956,87.718c-3.847-1.541-8.211,0.327-9.751,4.173l-21.673,54.1
+		c-1.01-0.108-2.02-0.182-3.031-0.182c-10.556,0-20.091,5.847-24.886,15.259c-5.012,9.839-3.728,21.595,3.432,31.445
+		c0.732,1.007,1.652,1.928,2.666,2.665c5.817,4.229,12.314,6.464,18.788,6.464c10.556,0,20.092-5.847,24.886-15.259
+		c5.012-9.839,3.728-21.594-3.427-31.437c-0.732-1.01-1.654-1.934-2.671-2.674c-0.547-0.398-1.106-0.761-1.665-1.123l21.505-53.681
+		C192.669,93.624,190.801,89.258,186.956,87.718z M164.02,179.574c-2.221,4.359-6.635,7.067-11.52,7.067
+		c-3.204,0-6.429-1.119-9.589-3.327c-3.6-5.169-4.307-10.773-1.93-15.438c2.22-4.359,6.634-7.067,11.52-7.067
+		c1.558,0,3.12,0.27,4.678,0.795c0.051,0.021,0.098,0.048,0.15,0.069c0.164,0.065,0.329,0.118,0.494,0.171
+		c1.43,0.549,2.854,1.305,4.266,2.291C165.688,169.304,166.396,174.909,164.02,179.574z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/assets/images/external-link.png
+++ b/assets/images/external-link.png
--- a/src/renderer.js
+++ b/src/renderer.js
@ -116,6 +116,7 @@ class YtDownloaderApp {
 			// Video metadata
 			videoInfo: {
 				title: "",
+				channel: "",
 				thumbnail: "",
 				duration: 0,
 				extractor_key: "",
@ -946,6 +947,7 @@ class YtDownloaderApp {
 				...this.state.videoInfo,
 				id: metadata.id,
 				title: metadata.title,
+				channel: metadata.channel,
 				thumbnail: metadata.thumbnail,
 				duration: durationInt,
 				extractor_key: metadata.extractor_key,
@ -979,6 +981,7 @@ class YtDownloaderApp {
 			type,
 			url: this.state.videoInfo.url,
 			title: this.state.videoInfo.title,
+			channel: this.state.videoInfo.channel,
 			thumbnail: this.state.videoInfo.thumbnail,
 			options: {...this.state.downloadOptions},
 			// Capture UI values at the moment of click
@ -1199,6 +1202,7 @@ class YtDownloaderApp {
                </div>
                <div class="itemBody">
                    <div class="itemTitle">${job.title}</div>
+					<div class="itemChannel">${job.channel}</div>
                    <p>${i18n.__("preparing")}</p>
                </div>
            </div>`;
@ -1642,9 +1646,8 @@ class YtDownloaderApp {

 				const audioExt = format.ext === "webm" ? "opus" : format.ext;

-
 				const formatNote =
-					(i18n.__(format.format_note) || i18n.__("unknownQuality"));
+					i18n.__(format.format_note) || i18n.__("unknownQuality");

 				// HTML for Audio Grid
 				const htmlContent = `
@ -1791,10 +1794,14 @@ class YtDownloaderApp {
                <img src="../assets/images/close.png" class="itemClose" id="${randomId}_close">
                <div class="itemBody">
                    <div class="itemTitle">${job.title}</div>
-                    <strong class="itemSpeed" id="${randomId}_speed"></strong>
+					<div class="itemChannel">${job.channel}</div>
+					<div class="speedContainer">
+						<span class="itemSpeed" id="${randomId}_speed"></span>
+					</div>
                    <div id="${randomId}_prog" class="itemProgress">${i18n.__(
 						"preparing",
 					)}</div>
+					<button id="${randomId}_openBtn" class="openFileBtn"><img class="btnIcon" src="../assets/images/external-link.png"/>Open file</button>
                </div>
            </div>`;
 		$(CONSTANTS.DOM_IDS.DOWNLOAD_LIST).insertAdjacentHTML(
@ -1852,6 +1859,8 @@ class YtDownloaderApp {
 	 */
 	_showDownloadSuccessUI(randomId, actualFilePath, thumbnail) {
 		const progressEl = $(`${randomId}_prog`);
+		const openBtn = $(`${randomId}_openBtn`);
+
 		if (!progressEl) return;

 		let fullPath;
@ -1918,13 +1927,13 @@ class YtDownloaderApp {
 		const ext = fullFilename.split(".").pop();

 		progressEl.innerHTML = ""; // Clear progress bar
-		const link = document.createElement("b");
-		link.textContent = i18n.__("fileSavedClickToOpen");
-		link.style.cursor = "pointer";
-		link.onclick = () => {
+
+		openBtn.style.display = "flex";
+		openBtn.onclick = () => {
 			ipcRenderer.send("show-file", fullPath);
 		};
-		progressEl.appendChild(link);
+
+		progressEl.style.display = "none";
 		$(`${randomId}_speed`).textContent = "";

 		// Send desktop notification