From b5a1ae5676e8dc3ccf7b85478dc2aa31b0fff81a Mon Sep 17 00:00:00 2001 From: aandrew-me Date: Tue, 2 Aug 2022 23:27:08 +0600 Subject: [PATCH] UI enhancements and UX enhancements --- app.js | 34 +++++++++++++++++--------------- html/index.html | 9 ++++++++- html/preferences.html | 17 ++++++++++++++++ main.js | 46 ++++++++++++++++++++++++++----------------- package.json | 2 +- public/extra.css | 5 +++++ public/index.css | 10 +++++----- public/index.js | 15 ++++++++++---- 8 files changed, 93 insertions(+), 45 deletions(-) diff --git a/app.js b/app.js index 35acf86..5816454 100644 --- a/app.js +++ b/app.js @@ -24,7 +24,6 @@ let config; // Download directory let downloadDir = ""; - // Handling config file fs.readFile(configPath, (err) => { @@ -127,13 +126,12 @@ io.on("connection", (socket) => { socket.on("newPath", (userPath) => { let path; - if (userPath[userPath.length-1] == "/"){ - path = userPath - } - else{ - path = userPath + "/" + if (userPath[userPath.length - 1] == "/") { + path = userPath; + } else { + path = userPath + "/"; } - + checkPath(path) .then((response) => { const newConfig = { @@ -219,8 +217,8 @@ app.post("/download", async (req, res) => { } else { quality = format.audioBitrate + "kbps"; } - const randomNum = Math.random().toFixed(5).toString("16").slice(2) - const filename = `${title}_${randomNum}_${quality}.${extension}` + const randomNum = Math.random().toFixed(5).toString("16").slice(2); + const filename = `${title}_${randomNum}_${quality}.${extension}`; const info = { format: format, title: title, @@ -235,13 +233,18 @@ app.post("/download", async (req, res) => { const format = info.format; const extension = info.extension; let filename = ""; + // Trying to remove ambiguous characters for (let i = 0; i < info.filename.length; i++) { - const pattern = /^[a-zA-Z0-9.]$/g; + const pattern = /^[`~!@#$%^&*:;,<>?/|'"-+=\]\[]$/g; let letter = ""; if (pattern.test(info.filename[i])) { - letter = info.filename[i]; + letter = ""; } else { - letter = "_"; + if (info.filename[i] == " ") { + letter = "_"; + } else { + letter = info.filename[i]; + } } filename += letter; } @@ -336,8 +339,7 @@ app.post("/download", async (req, res) => { if (progress == 100) { io.to(socketId).emit("saved", `${downloadDir}`); } - io.to(socketId) - .emit("onlyAudioProgress", progress); + io.to(socketId).emit("onlyAudioProgress", progress); }) .pipe(fs.createWriteStream(downloadDir + filename)); } @@ -348,8 +350,8 @@ app.post("/test", (req, res) => { console.log(req.body); }); -const PORT=59876 +const PORT = 59876; -server.listen(PORT , () => { +server.listen(PORT, () => { console.log("Server: http://localhost:" + PORT); }); diff --git a/html/index.html b/html/index.html index 41e9fc1..3f6cabc 100644 --- a/html/index.html +++ b/html/index.html @@ -109,6 +109,7 @@ diff --git a/html/preferences.html b/html/preferences.html index e728bcc..740847e 100644 --- a/html/preferences.html +++ b/html/preferences.html @@ -17,6 +17,8 @@

+

2. Enable transparent dark (only Linux)

+ \ No newline at end of file diff --git a/main.js b/main.js index 376a36a..063693f 100644 --- a/main.js +++ b/main.js @@ -4,15 +4,27 @@ const path = require("path"); require("./app.js"); function createWindow() { + let isTransparent = false; + if (process.platform == "linux") { + isTransparent = true; + console.log("Using linux"); + } + const win = new BrowserWindow({ show: false, icon: __dirname + "/public/icon.png", + spellcheck: false, + transparent: isTransparent, + webPreferences: { + nodeIntegration: true, + contextIsolation: false + } }); win.loadURL("http://localhost:59876"); win.maximize(); win.show(); - autoUpdater.checkForUpdatesAndNotify(); + autoUpdater.checkForUpdatesAndNotify(); } app.whenReady().then(() => { @@ -38,26 +50,24 @@ app.on("window-all-closed", () => { autoUpdater.on("update-available", (_event, releaseNotes, releaseName) => { const dialogOpts = { - type: 'info', - buttons: ['Ok'], - title: 'Application Update', - message: process.platform === 'win32' ? releaseNotes : releaseName, - detail: 'A new version is being downloaded.' - } - dialog.showMessageBox(dialogOpts, (response) => { - - }); -}) + type: "info", + buttons: ["Ok"], + title: "Application Update", + message: process.platform === "win32" ? releaseNotes : releaseName, + detail: "A new version is being downloaded.", + }; + dialog.showMessageBox(dialogOpts, (response) => {}); +}); autoUpdater.on("update-downloaded", (_event, releaseNotes, releaseName) => { const dialogOpts = { - type: 'info', - buttons: ['Restart', 'Later'], - title: 'Application Update', - message: process.platform === 'win32' ? releaseNotes : releaseName, - detail: 'A new version has been downloaded. Restart the application to apply the updates.' + type: "info", + buttons: ["Restart", "Later"], + title: "Application Update", + message: process.platform === "win32" ? releaseNotes : releaseName, + detail: "A new version has been downloaded. Restart the application to apply the updates.", }; dialog.showMessageBox(dialogOpts).then((returnValue) => { - if (returnValue.response === 0) autoUpdater.quitAndInstall() - }) + if (returnValue.response === 0) autoUpdater.quitAndInstall(); + }); }); diff --git a/package.json b/package.json index 61b015f..f4d5a55 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "ytdl-core": "^4.11.0" }, "name": "ytdownloader", - "version": "1.5.6", + "version": "1.6.0", "main": "main.js", "scripts": { "start": "electron .", diff --git a/public/extra.css b/public/extra.css index 727b56f..43fde71 100644 --- a/public/extra.css +++ b/public/extra.css @@ -41,4 +41,9 @@ input[type="text"]{ } a{ color:rgb(34, 136, 199); +} + +input[type="checkbox"]{ + width:20px; + height:20px; } \ No newline at end of file diff --git a/public/index.css b/public/index.css index 00a6fd1..9a809df 100644 --- a/public/index.css +++ b/public/index.css @@ -1,6 +1,6 @@ :root { --background: whitesmoke; - --text: rgb(20, 20, 20); + --text: rgb(45, 45, 45); --box-main: rgb(143, 239, 207); --box-toggle: rgb(108, 231, 190); --box-toggleOn: rgb(67, 212, 164); @@ -213,11 +213,11 @@ svg { } .savedMsg { - color: rgb(131, 222, 253); + color: rgb(52, 170, 234); + cursor: pointer; } -.savedMsg:active, -.savedMsg:link { - color: rgb(131, 222, 253); +#savedMsg{ + cursor: pointer; } /* Scrollbar */ diff --git a/public/index.js b/public/index.js index 69c178e..3bb3753 100644 --- a/public/index.js +++ b/public/index.js @@ -186,11 +186,9 @@ getId("menuIcon").addEventListener("click", (event) => { const fade = setInterval(() => { if (count >= 10) { clearInterval(fade); - console.log("end") } else { opacity -= .1 getId("menu").style.opacity = opacity; - console.log("doing") count++; } }, 50); @@ -253,11 +251,20 @@ let darkTheme = false; let circle = getId("themeToggleInside"); const root = document.querySelector(":root"); +let enabledTransparent = localStorage.getItem("enabledTransparent") +let bgColor = "" +if (enabledTransparent == "true"){ + bgColor = "rgba(40,40,40, .7)" +} +else{ +bgColor = "rgb(40,40,40)" +} + function toggle() { if (darkTheme == false) { circle.style.left = "25px"; - root.style.setProperty("--background", "rgb(40,40,40)"); + root.style.setProperty("--background", bgColor); root.style.setProperty("--text", "white"); root.style.setProperty("--box-main", "rgb(80,80,80)"); root.style.setProperty("--box-toggle", "rgb(70,70,70)"); @@ -269,7 +276,7 @@ function toggle() { circle.style.left = "0px"; root.style.setProperty("--background", "whitesmoke"); - root.style.setProperty("--text", "rgb(20, 20, 20)"); + root.style.setProperty("--text", "rgba(45, 45, 45)"); root.style.setProperty("--box-main", "rgb(143, 239, 207)"); root.style.setProperty("--box-toggle", "rgb(108, 231, 190)"); root.style.setProperty("--theme-toggle", "rgb(147, 174, 185)");