aiden
/
ytDownloader
mirror of https://github.com/aandrew-me/ytDownloader
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve download item UI

Browse Source
aandrew-me 2 weeks ago
parent 97ab87cfcc
commit dd4b5e7600
5 changed files with 167 additions and 28 deletions
Show Stats Download Patch File Download Diff File

110
assets/css/index.css
Unescape Escape View File

@ -61,6 +61,42 @@ img {
height: 40px; height: 40px;
cursor: pointer; cursor: pointer;
transition: 0.3s; 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 { #menu {
@ -185,10 +221,12 @@ img {
.itemIconBox { .itemIconBox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
} }
.itemIcon { .itemIcon {
max-width: 160px; max-width: 180px;
max-height: 90px; height: 115px;
object-fit: cover;
border-radius: 10px; border-radius: 10px;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
@ -208,7 +246,14 @@ img {
} }
.itemTitle { .itemTitle {
padding: 5px; padding: 8px 0;
font-weight: bold;
font-size: 20px;
text-align: start;
max-width: 96%;
}
.itemChannel {
opacity: 0.6;
} }
.itemBody { .itemBody {
height: 90%; height: 90%;
@ -216,15 +261,17 @@ img {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-start;
margin-left: 30px;
} }
.itemProgress { .itemProgress {
font-weight: bold;
cursor: pointer;
padding: 4px 0; padding: 4px 0;
width: 90%;
text-align: start;
} }
.custom-progress { .custom-progress {
width: 90%; width: 100%;
height: 8px; height: 8px;
background: #e0e0e0; background: #e0e0e0;
border-radius: 6px; border-radius: 6px;
@ -241,7 +288,7 @@ img {
} }
.itemSpeed { .itemSpeed {
padding: 10px 5px 5px 5px; padding: 10px 5px 5px 0;
} }
.itemClose { .itemClose {
position: absolute; position: absolute;
@ -249,13 +296,23 @@ img {
right: 8px; right: 8px;
cursor: pointer; cursor: pointer;
cursor: pointer; cursor: pointer;
width: 20px; width: 15px;
height: 20px; height: 15px;
background: color-mix(in srgb, var(--item-bg) 85%, black);
padding: 5px;
border-radius: 50%;
} }
.itemType { .itemType {
font-style: italic;
margin-top: 5px; margin-top: 5px;
position: absolute;
padding: 5px;
background: #1310108a;
color: white;
left: 5px;
bottom: 5px;
margin: top 8px; margin: top 8px;
border-radius: 5px;
font-size: 10px;
} }
#closeHidden { #closeHidden {
@ -264,8 +321,11 @@ img {
right: 10px; right: 10px;
cursor: pointer; cursor: pointer;
cursor: pointer; cursor: pointer;
width: 20px; width: 15px;
height: 20px; height: 15px;
background: color-mix(in srgb, var(--item-bg) 85%, black);
padding: 5px;
border-radius: 50%;
} }
#hidden { #hidden {
@ -1293,7 +1353,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
transition: color 0.2s; 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); background-color: var(--box-toggle);
border: 1px solid var(--box-separation); border: 1px solid var(--box-separation);
padding: 18px 24px; padding: 18px 24px;
@ -1380,7 +1442,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
background: var(--blueBtn); background: var(--blueBtn);
cursor: pointer; cursor: pointer;
margin-top: -6px; 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); 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); background: var(--blueBtn-bottom);
} }
.target-size-container, .target-percent-container { .target-size-container,
.target-percent-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
} }
#target-size-input, #target-percent-input { #target-size-input,
#target-percent-input {
background-color: var(--select); background-color: var(--select);
color: var(--text); color: var(--text);
border: 1px solid var(--box-separation); border: 1px solid var(--box-separation);
@ -1408,7 +1474,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
transition: border-color 0.2s; 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); border-color: var(--blueBtn);
} }
@ -1426,7 +1493,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
margin: 25px auto 15px auto; 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); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
@ -1452,7 +1521,9 @@ input[type="range"]::-webkit-slider-thumb:hover {
overflow: hidden; overflow: hidden;
max-height: 1000px; max-height: 1000px;
opacity: 1; 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 { .advanced-settings-collapse.collapsed {
@ -1464,4 +1535,3 @@ input[type="range"]::-webkit-slider-thumb:hover {
.full-width-settings { .full-width-settings {
width: 100% !important; width: 100% !important;
} }

BIN
assets/images/close.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

60
assets/images/download-speed.svg
Unescape Escape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assets/images/external-link.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

25
src/renderer.js
Unescape Escape View File

@ -116,6 +116,7 @@ class YtDownloaderApp {
// Video metadata // Video metadata
videoInfo: { videoInfo: {
title: "", title: "",
channel: "",
thumbnail: "", thumbnail: "",
duration: 0, duration: 0,
extractor_key: "", extractor_key: "",
@ -946,6 +947,7 @@ class YtDownloaderApp {
...this.state.videoInfo, ...this.state.videoInfo,
id: metadata.id, id: metadata.id,
title: metadata.title, title: metadata.title,
channel: metadata.channel,
thumbnail: metadata.thumbnail, thumbnail: metadata.thumbnail,
duration: durationInt, duration: durationInt,
extractor_key: metadata.extractor_key, extractor_key: metadata.extractor_key,
@ -979,6 +981,7 @@ class YtDownloaderApp {
type, type,
url: this.state.videoInfo.url, url: this.state.videoInfo.url,
title: this.state.videoInfo.title, title: this.state.videoInfo.title,
channel: this.state.videoInfo.channel,
thumbnail: this.state.videoInfo.thumbnail, thumbnail: this.state.videoInfo.thumbnail,
options: {...this.state.downloadOptions}, options: {...this.state.downloadOptions},
// Capture UI values at the moment of click // Capture UI values at the moment of click
@ -1199,6 +1202,7 @@ class YtDownloaderApp {
</div> </div>
<div class="itemBody"> <div class="itemBody">
<div class="itemTitle">${job.title}</div> <div class="itemTitle">${job.title}</div>
<div class="itemChannel">${job.channel}</div>
<p>${i18n.__("preparing")}</p> <p>${i18n.__("preparing")}</p>
</div> </div>
</div>`; </div>`;
@ -1642,9 +1646,8 @@ class YtDownloaderApp {
const audioExt = format.ext === "webm" ? "opus" : format.ext; const audioExt = format.ext === "webm" ? "opus" : format.ext;
const formatNote = const formatNote =
(i18n.__(format.format_note) || i18n.__("unknownQuality")); i18n.__(format.format_note) || i18n.__("unknownQuality");
// HTML for Audio Grid // HTML for Audio Grid
const htmlContent = ` const htmlContent = `
@ -1791,10 +1794,14 @@ class YtDownloaderApp {
<img src="../assets/images/close.png" class="itemClose" id="${randomId}_close"> <img src="../assets/images/close.png" class="itemClose" id="${randomId}_close">
<div class="itemBody"> <div class="itemBody">
<div class="itemTitle">${job.title}</div> <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.__( <div id="${randomId}_prog" class="itemProgress">${i18n.__(
"preparing", "preparing",
)}</div> )}</div>
<button id="${randomId}_openBtn" class="openFileBtn"><img class="btnIcon" src="../assets/images/external-link.png"/>Open file</button>
</div> </div>
</div>`; </div>`;
$(CONSTANTS.DOM_IDS.DOWNLOAD_LIST).insertAdjacentHTML( $(CONSTANTS.DOM_IDS.DOWNLOAD_LIST).insertAdjacentHTML(
@ -1852,6 +1859,8 @@ class YtDownloaderApp {
*/ */
_showDownloadSuccessUI(randomId, actualFilePath, thumbnail) { _showDownloadSuccessUI(randomId, actualFilePath, thumbnail) {
const progressEl = $(`${randomId}_prog`); const progressEl = $(`${randomId}_prog`);
const openBtn = $(`${randomId}_openBtn`);
if (!progressEl) return; if (!progressEl) return;
let fullPath; let fullPath;
@ -1918,13 +1927,13 @@ class YtDownloaderApp {
const ext = fullFilename.split(".").pop(); const ext = fullFilename.split(".").pop();
progressEl.innerHTML = ""; // Clear progress bar progressEl.innerHTML = ""; // Clear progress bar
const link = document.createElement("b");
link.textContent = i18n.__("fileSavedClickToOpen"); openBtn.style.display = "flex";
link.style.cursor = "pointer"; openBtn.onclick = () => {
link.onclick = () => {
ipcRenderer.send("show-file", fullPath); ipcRenderer.send("show-file", fullPath);
}; };
progressEl.appendChild(link);
progressEl.style.display = "none";
$(`${randomId}_speed`).textContent = ""; $(`${randomId}_speed`).textContent = "";
// Send desktop notification // Send desktop notification

Write Preview
Loading…
Cancel
Save