UI/UX improvements

pull/330/head
aandrew-me 10 months ago
parent e45ea0f191
commit ee343d82e6

@ -174,7 +174,7 @@ input[type="text"],
#pathConfig {
display: flex;
justify-content: space-between;
margin: 0 15px;
margin: 15px 15px;
padding: 20px 15px;
border-radius: 15px;
background-color: var(--box-main);
@ -186,6 +186,7 @@ input[type="text"],
cursor: pointer;
text-decoration: underline;
color: var(--blueBtn);
display: none;
}
.prefBox {

@ -33,10 +33,10 @@
--box-toggle: #191919;
--box-separation: #2e2e2e;
--box-toggleOn: #2e2e2e;
--item-bg: #191919;
--item-bg: #2c2e31;
--box-shadow: none;
--select: rgb(68 214 141);
--greenBtn: #24D166;
--greenBtn: #24d166;
--greenBtn-bottom: #3e6c20;
--redBtn: #c82b2d;
--redBtn-bottom: #803334;
@ -64,7 +64,7 @@
:root[theme="onedark"] {
--background: #282c34;
--text: #d2d6df;
--box-main: #4d515d;
--box-main: #3a3d46;
--box-toggle: #2f333d;
--box-separation: #2f333d;
--box-toggleOn: #13a3b7;
@ -154,7 +154,8 @@ body {
transition: 0.4s;
font-size: large;
}
#popupBox, #popupBoxMac {
#popupBox,
#popupBoxMac {
width: 100vw;
height: 100vh;
margin: 0;
@ -165,7 +166,8 @@ body {
z-index: 2;
display: none;
}
#popup, #popupMac {
#popup,
#popupMac {
position: absolute;
padding: 20px;
top: 50%;
@ -228,14 +230,15 @@ body {
outline: none;
border: none;
font-family: "Ubuntu";
font-size: large;
font-size: large;
}
.menuItem {
font-family: "Ubuntu";
color: white;
font-family: "Ubuntu";
color: white;
text-decoration: none;
padding: 5px;
cursor: pointer;
border-bottom: 1px solid #37384a;
}
.menuItem:active,
.menuItem:link {
@ -361,13 +364,15 @@ body {
border: var(--border);
}
#videoBox, #audioBox {
#videoBox,
#audioBox {
background-color: var(--box-toggle);
padding: 10px;
border-radius: 10px;
}
#audioExtract, .separationBox {
#audioExtract,
.separationBox {
margin: 10px;
padding: 10px;
background-color: var(--box-separation);
@ -382,7 +387,7 @@ body {
left: 0;
right: 0;
margin: auto;
top: 20%;
top: 15%;
background-color: var(--box-main);
width: 80%;
border-radius: 10px;
@ -429,7 +434,7 @@ body {
}
#videoTypeSelect {
width: 160px
width: 160px;
}
#audioQualitySelect {
@ -440,7 +445,9 @@ body {
padding: 10px;
}
#videoFormatSelect, #audioFormatSelect, #audioForVideoFormatSelect {
#videoFormatSelect,
#audioFormatSelect,
#audioForVideoFormatSelect {
font-family: JetBrains, monospace;
font-size: medium;
width: 400px;
@ -516,7 +523,8 @@ input[type="number"]::-webkit-outer-spin-button {
margin: 5px;
}
#incorrectMsg, #incorrectMsgPlaylist {
#incorrectMsg,
#incorrectMsgPlaylist {
color: var(--redBtn);
}
@ -572,7 +580,8 @@ button {
outline: none;
}
#extractBtn, .blueBtn {
#extractBtn,
.blueBtn {
color: white;
background-color: var(--blueBtn);
border: none;
@ -589,7 +598,8 @@ button {
width: 150px;
}
#download, #audioDownload {
#download,
#audioDownload {
width: 140px;
}
@ -597,7 +607,8 @@ button {
display: none;
}
#extractBtn:active, .blueBtn:active {
#extractBtn:active,
.blueBtn:active {
background-color: var(--blueBtn-bottom);
border: none;
}
@ -623,10 +634,10 @@ button {
display: none;
}
.advancedItem {
border: 1.5px solid gray;
border-radius: 15px;
padding: 20px;
margin: 10px;
background-color: var(--item-bg);
}
#subHeader {
@ -634,7 +645,7 @@ button {
margin-top: 0;
}
h2{
h2 {
margin: 12px;
font-size: 24px;
}
@ -701,7 +712,7 @@ body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background:linear-gradient(rgb(110, 110, 110), rgb(77, 77, 77));
background: linear-gradient(rgb(110, 110, 110), rgb(77, 77, 77));
border-radius: 8px;
}
@ -731,7 +742,6 @@ body::-webkit-scrollbar-thumb {
}
}
/* Compressor styles */
#compressor-header {
text-align: center;
@ -758,7 +768,7 @@ body::-webkit-scrollbar-thumb {
}
.drop-zone:hover {
border-color: #2196F3;
border-color: #2196f3;
cursor: pointer;
}
@ -768,7 +778,7 @@ body::-webkit-scrollbar-thumb {
}
.drop-zone.dragover {
border-color: #2196F3;
border-color: #2196f3;
background-color: var(--box-toggleOn);
}
@ -814,7 +824,7 @@ body::-webkit-scrollbar-thumb {
}
.compress-label {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: block;
margin-bottom: 10px;
font-weight: 500;
@ -869,11 +879,15 @@ body::-webkit-scrollbar-thumb {
width: 200px;
}
.nvidia_opt, .amf_opt, .qsv_opt, .vaapi_opt, .videotoolbox_opt {
.nvidia_opt,
.amf_opt,
.qsv_opt,
.vaapi_opt,
.videotoolbox_opt {
display: none;
}
#custom-folder-select{
#custom-folder-select {
padding: 10px;
margin-left: 0;
display: none;
@ -894,7 +908,7 @@ body::-webkit-scrollbar-thumb {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
animation: none;
mix-blend-mode: normal;
}
/* End */

@ -24,21 +24,16 @@
<div class="prefBox" style="border: none;">
<strong id="dlText">Download location</strong>
</div>
<br>
<div class="prefBox">
<span id="clText">Current download location - </span><span id="path"></span>
</div>
<br>
<button id="selectLocation" class="greenBtn">Select Download Location</button>
<p id="msg">
</p>
<br>
<!-- Language -->
<div class="prefBox">
<label id="selectLn">Select Language (Requires reload)</label>
@ -64,7 +59,6 @@
<option value="bn">বাংলা</option>
</select>
</div>
<br>
<!-- Video Quality -->
<div class="prefBox">
@ -81,7 +75,6 @@
</select>
</div>
<br>
<!-- Video Codec -->
<div class="prefBox">
@ -95,7 +88,6 @@
</div>
<br>
<!-- Audio format -->
<div class="prefBox">
<span id="preferredAudioTxt">Preferred audio format</span>
@ -128,13 +120,11 @@
<option value="vivaldi">Vivaldi</option>
</select>
</div>
<br>
<div class="prefBox">
<span id="proxyTitle">Proxy</span>
<input type="text" id="proxyTxt" placeholder="Example: http://localhost:8080" pattern="^(http:\/\/|https:\/\/|socks5:\/\/)?[a-zA-Z0-9.]+:[\d]+$">
</div>
<br>
<div id="pathConfig">
@ -151,13 +141,11 @@
<span id="configPath"></span>
</div>
</div>
<br>
<div class="prefBox">
<span id="showMoreFormatsTxt">Show more format options</span>
<input type="checkbox" class="cb" id="showMoreFormats">
</div>
<br>
<div class="prefBox">
<span id="fileFormatTxt">Filename format for playlists</span>
@ -166,25 +154,24 @@
<button class="redBtn" id="resetFilenameFormat">Reset to default</button>
</div>
<br>
<div class="prefBox">
<span id="dirFormatTxt">Folder name format for playlists</span>
<input type="text" id="foldernameFormat" value="%(playlist_title)s" placeholder="yt-dlp format style">
<button class="redBtn" id="resetFoldernameFormat">Reset to default</button>
</div>
<br>
<div class="prefBox">
<span id="maxTxt">Maximum number of active downloads</span>
<input type="number" min="1" class="input" id="maxDownloads" value="5">
</div>
<br>
<div class="prefBox">
<span id="trayTxt">Close to system tray</span>
<input type="checkbox" class="cb" id="closeToTray">
</div>
<br>
<div class="prefBox" id="autoUpdatesBox">
<span id="autoUpdateTxt">Disable auto updates</span>
<input type="checkbox" class="cb" id="autoUpdateDisabled">

@ -5,7 +5,7 @@
"yt-dlp-wrap-plus": "^2.3.20"
},
"name": "ytdownloader",
"version": "3.19.2-beta",
"version": "3.19.2",
"main": "main.js",
"scripts": {
"start": "electron .",

@ -8,12 +8,10 @@ function getId(id) {
return document.getElementById(id);
}
let menuIsOpen = false;
getId("menuIcon").addEventListener("click", () => {
if (menuIsOpen) {
const menuDisplay = getId("menu").style.display;
if (menuDisplay != "none" && menuDisplay != "") {
getId("menuIcon").style.transform = "rotate(0deg)";
menuIsOpen = false;
let count = 0;
let opacity = 1;
const fade = setInterval(() => {
@ -28,7 +26,6 @@ getId("menuIcon").addEventListener("click", () => {
}, 50);
} else {
getId("menuIcon").style.transform = "rotate(90deg)";
menuIsOpen = true;
setTimeout(() => {
getId("menu").style.display = "flex";

@ -103,7 +103,7 @@ let currentDownloads = 0;
let controllers = new Object();
// Video and audio preferences
let preferredVideoQuality = 720;
let preferredVideoQuality = 1080;
let preferredAudioQuality = "";
let preferredVideoCodec = "avc1";
/**
@ -141,8 +141,8 @@ function downloadPathSelection() {
downloadPathSelection();
const possiblePaths = [
"/opt/homebrew/bin/yt-dlp", // Apple Silicon
"/usr/local/bin/yt-dlp", // Intel
"/opt/homebrew/bin/yt-dlp", // Apple Silicon
"/usr/local/bin/yt-dlp", // Intel
];
// Checking for yt-dlp
@ -150,10 +150,10 @@ let ytDlp;
let ytdlpPath = path.join(os.homedir(), ".ytDownloader", "ytdlp");
if (os.platform() === "darwin") {
ytdlpPath = possiblePaths.find(p => fs.existsSync(p)) || null;
ytdlpPath = possiblePaths.find((p) => fs.existsSync(p)) || null;
if (ytdlpPath == null) {
showMacYtdlpPopup()
showMacYtdlpPopup();
}
}
@ -213,24 +213,28 @@ async function downloadYtdlp() {
const fullYtdlpBinIsPresent = !!localStorage.getItem("fullYtdlpBinPresent");
cp.exec(`"${ytdlpPath}" --version`, (error, _stdout, _stderr) => {
if ((error || !fullYtdlpBinIsPresent) && os.platform() !== "freebsd" && os.platform() !== "darwin") {
getId("popupBox").style.display = "block";
process.on("uncaughtException", (reason, promise) => {
document.querySelector("#popupBox p").textContent = i18n.__(
"Failed to download necessary files. Please check your network and try again"
);
getId("popupSvg").style.display = "none";
getId("popup").innerHTML += `<button id="tryBtn">${i18n.__(
"Try again"
)}</button>`;
console.log("Failed to download yt-dlp");
getId("tryBtn").addEventListener("click", () => {
getId("popup").removeChild(getId("popup").lastChild);
downloadYtdlp();
});
if (
(error || !fullYtdlpBinIsPresent) &&
os.platform() !== "freebsd" &&
os.platform() !== "darwin"
) {
getId("popupBox").style.display = "block";
process.on("uncaughtException", (reason, promise) => {
document.querySelector("#popupBox p").textContent = i18n.__(
"Failed to download necessary files. Please check your network and try again"
);
getId("popupSvg").style.display = "none";
getId("popup").innerHTML += `<button id="tryBtn">${i18n.__(
"Try again"
)}</button>`;
console.log("Failed to download yt-dlp");
getId("tryBtn").addEventListener("click", () => {
getId("popup").removeChild(getId("popup").lastChild);
downloadYtdlp();
});
downloadYtdlp();
});
downloadYtdlp();
} else {
console.log("yt-dlp binary is present in PATH");
ytDlp = ytdlpPath;
@ -378,20 +382,22 @@ async function getInfo(url) {
});
infoProcess.stderr.on("data", (error) => {
validInfo = false;
// Error message handling
console.log(error.toString("utf8"));
getId("loadingWrapper").style.display = "none";
getId("incorrectMsg").textContent = i18n.__(
"Some error has occurred. Check your network and use correct URL"
);
getId("errorBtn").style.display = "inline-block";
getId("errorDetails").innerHTML = `
if (!error.toString().startsWith("WARNING")) {
validInfo = false;
// Error message handling
console.log(error.toString("utf8"));
getId("loadingWrapper").style.display = "none";
getId("incorrectMsg").textContent = i18n.__(
"Some error has occurred. Check your network and use correct URL"
);
getId("errorBtn").style.display = "inline-block";
getId("errorDetails").innerHTML = `
<strong>URL: ${url}</strong>
<br><br>
${error.toString("utf8")}
`;
getId("errorDetails").title = i18n.__("Click to copy");
getId("errorDetails").title = i18n.__("Click to copy");
}
});
infoProcess.on("close", () => {
@ -1114,6 +1120,8 @@ function download(
// If video has no sound, audio needs to be downloaded
console.log("Downloading both video and audio");
const cleanFfmpegPathWin = path.join(__dirname, "..", "ffmpeg.exe");
const args = [
range1 || rangeOption,
range2 || rangeCmd,
@ -1123,6 +1131,10 @@ function download(
`"${path.join(downloadDir, filename + `.${ext}`)}"`,
"--ffmpeg-location",
ffmpeg,
// Fix for windows media player
os.platform() == "win32" && audioFormat == "" && ext == "mp4"
? `--exec "\\"${cleanFfmpegPathWin}\\" -y -i {} -c copy -movflags +faststart -brand isom {}.fixed.mp4 && move /Y {}.fixed.mp4 {}"`
: "",
subs1 || subs,
subs2 || subLangs,
"--no-playlist",

@ -48,6 +48,8 @@ if (process.env.FLATPAK_ID) {
getId("flatpakTxt").addEventListener("click", () => {
shell.openExternal("https://flathub.org/apps/com.github.tchx84.Flatseal")
})
getId("flatpakTxt").style.display = "block"
}
if (process.env.FLATPAK_ID || process.env.SNAP_NAME) {

Loading…
Cancel
Save