UI enhancements and UX enhancements

app.js

@@ -24,7 +24,6 @@ let config;
 // Download directory
 let downloadDir = "";
 
-
 // Handling config file
 
 fs.readFile(configPath, (err) => {
@@ -127,11 +126,10 @@ 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)
@@ -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);
 });

html/index.html

@@ -109,6 +109,7 @@
 
     <script src="/socket.io/socket.io.js"></script>
     <script>
+        const electron = require("electron")
         function getId(id) {
             return (document.getElementById(id))
         }
@@ -158,8 +159,14 @@
             getId("audioProgressBox").style.display = "none";
             document.querySelector(".submitBtn").style.display = "inline-block"
 
-            getId("savedMsg").innerHTML = `File saved to <a class="savedMsg" href='file://${savedLocation}'>${savedLocation}</a>`
+            getId("savedMsg").innerHTML = `File saved. Click to open <b title="Click to open" class="savedMsg">${savedLocation}</b>`
+
+            getId("savedMsg").addEventListener("click", (e) => {
+                electron.shell.openPath(savedLocation)
+            })
         })
+
+
     </script>
 </body>
 

html/preferences.html

@@ -17,6 +17,8 @@
 
     <p id="msg"></pid>
 
+    <p>2. Enable transparent dark (only Linux) <input type="checkbox" id="enableTransparent"></p>
+
     <script src="/socket.io/socket.io.js"></script>
     <script>
         function getId(id){
@@ -44,6 +46,21 @@
                 getId("msg").textContent = "Not saved, some error has occured."
             }
         })
+
+        const enabledTransparent = getId("enableTransparent")
+        enabledTransparent.addEventListener("change", (event)=>{
+            if (enabledTransparent.checked){
+                localStorage.setItem("enabledTransparent", "true")
+            }
+            else{
+                localStorage.setItem("enabledTransparent", "false")
+            }
+        })
+
+        const localEnabledTransparent = localStorage.getItem("enabledTransparent")
+        if (localEnabledTransparent == "true"){
+            enabledTransparent.checked = true
+        }
     </script>
 </body>
 </html>

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();
+	});
 });

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 .",

public/extra.css

@@ -42,3 +42,8 @@ input[type="text"]{
 a{
     color:rgb(34, 136, 199);
 }
+
+input[type="checkbox"]{
+    width:20px;
+    height:20px;
+}

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 */

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)");