Fixes and optimizations

3 years ago · 20545723f4
parent 2ea87dadde
commit 20545723f4
9 changed files with 59 additions and 91 deletions
--- a/README.md
+++ b/README.md
@ -15,7 +15,7 @@ A GUI for downloading Video and Audio files from YouTube using Nodejs and Electr

 ✅ No external dependencies needed

-✅ And ofcourse no trackers or ads
+✅ And of-course no trackers or ads

 ## Screenshots

@ -70,3 +70,7 @@ To run with [Electron](https://www.electronjs.org/) :
 ```
 npm start
 ```
+To build for Linux
+```
+npm run linux
+```
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -188,14 +188,22 @@ label {
 	background-color: rgb(64, 227, 64);
 	color: white;
 	border: none;
+	border-bottom: 5px solid rgb(50, 185, 50);
 	font-size: large;
 	cursor: pointer;
 	display: inline-block;
 	outline:none;
+	position:relative;

 	animation-duration: 0.5s;
 	animation-timing-function: linear;
 }
+.submitBtn:active{
+	border:none;
+	top:5px;
+	margin-bottom: 5px;
+	transition:.3s;
+}

 #incorrectMsg {
 	color: rgb(250, 59, 59);
--- a/html/about.html
+++ b/html/about.html
@ -27,9 +27,7 @@
        const { ipcRenderer, shell } = require("electron")

        document.getElementById("back").addEventListener("click", ()=>{
-            ipcRenderer.send("load-page", __dirname + "/index.html")
-        })
-
+            ipcRenderer.send("close-secondary")        })
        document.getElementById("sourceLink").addEventListener("click", ()=>{
            shell.openExternal("https://github.com/aandrew-me/ytDownloader")
        })
--- a/html/index.html
+++ b/html/index.html
@ -28,7 +28,7 @@
    </div>


-    <button id="pasteUrl" class="submitBtn">Click to paste video URL or ID (Ctrl + V)</button>
+    <button id="pasteUrl" class="submitBtn">Click to paste video URL or ID [Ctrl + V]</button>

    <div id="loadingWrapper">
        <span>Processing </span>
--- a/html/old.html
+++ b/html/old.html
@ -1,79 +0,0 @@
-<h2>YouTube Downloader</h2>
-    <input type="text" name="url" placeholder="Paste Video URL or ID here" id="url" autofocus>
-    <!-- Get info button -->
-    <button id="getInfo" onclick="clickAnimation('getInfo')">Get info</button>
-
-    <p id="incorrectMsg"></p>
-
-    <div id="loadingWrapper">
-        <span>Loading</span>
-        <svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-            y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
-            <circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
-                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
-            </circle>
-            <circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
-                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
-            </circle>
-            <circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
-                <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
-            </circle>
-        </svg>
-    </div>
-
-
-    <div id="hidden">
-        <div id="btnContainer">
-            <button class="toggleBtn" id="videoToggle">Video</button>
-            <button class="toggleBtn" id="audioToggle">Audio</button>
-        </div>
-        <p id="title">Title: </p>
-
-        <div id="videoList">
-            <label>Select Format - </label>
-            <select id="videoFormatSelect">
-            </select>
-            <br>
-            <input type="hidden" name="url" class="url" id="url">
-            <button class="submitBtn" id="videoDownload">Download</button>
-        </div>
-
-        <div id="audioList">
-            <label>Select Format - </label>
-            <select id="audioFormatSelect">
-            </select>
-            <br>
-            <input type="hidden" name="url" class="url">
-            <button class="submitBtn" id="audioDownload">Download</button>
-        </div>
-
-        <div id="preparingBox">
-            <span>Preparing</span>
-            <svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
-                <circle fill="rgb(84, 171, 222)" stroke="none" cx="6" cy="50" r="6">
-                    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1" />
-                </circle>
-                <circle fill="rgb(84, 171, 222)" stroke="none" cx="26" cy="50" r="6">
-                    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2" />
-                </circle>
-                <circle fill="rgb(84, 171, 222)" stroke="none" cx="46" cy="50" r="6">
-                    <animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3" />
-                </circle>
-            </svg>
-        </div>
-
-        <p id="savedMsg"></p>
-
-        <div class="progressBox" id="videoProgressBox">
-            <label>Video Progress: <progress max="100" value="0" id="videoProgress"></progress></label>
-            <br>
-            <label>Audio Progress: <progress max="100" value="0" id="audioProgress"></progress></label>
-        </div>
-
-        <div class="progressBox" id="audioProgressBox">
-            <label>Download Progress: <progress max="100" value="0" id="onlyAudioProgress"></progress></label>
-        </div>
-
-
-    </div>
--- a/html/preferences.html
+++ b/html/preferences.html
@ -10,6 +10,7 @@
 <body>
    <a id="back">Home</a>
    <h1>Preferences</h1>
+    <strong>Restart app for changes to take place</strong>
    <p>1. Download location</p>
    <p>Default location: <span id="path"></span></p>
    <button id="selectLocation">Select Download Location</button>
@ -29,7 +30,7 @@
        }

        getId("back").addEventListener("click", ()=>{
-            ipcRenderer.send("load-page", __dirname + "/index.html")
+            ipcRenderer.send("close-secondary")
        })

        getId("selectLocation").addEventListener("click", ()=>{
--- a/main.js
+++ b/main.js
@ -1,6 +1,6 @@
 const { app, BrowserWindow, dialog, ipcMain } = require("electron");
 const { autoUpdater } = require("electron-updater");
-let win;
+let win, secondaryWindow;

 function createWindow() {
 	let isTransparent = false;
@ -21,7 +21,7 @@ function createWindow() {

 	win.loadFile("html/index.html");
 	win.maximize();
-	// win.setMenu(null)
+	win.setMenu(null)
 	win.show();
 	// win.webContents.openDevTools();
 	autoUpdater.checkForUpdatesAndNotify();
@ -39,8 +39,25 @@ app.whenReady().then(() => {
 	}
 });

-ipcMain.on("load-page", (event, arg) => {
-	win.loadFile(arg);
+ipcMain.on("load-page", (event, file) => {
+	secondaryWindow = new BrowserWindow({
+		webPreferences: {
+			nodeIntegration: true,
+			contextIsolation: false,
+		},
+		parent: win,
+		modal: true,
+		show: false,
+	});
+	// win.loadFile(file);
+	secondaryWindow.loadFile(file);
+	secondaryWindow.maximize();
+	secondaryWindow.show();
+});
+
+ipcMain.on("close-secondary", () => {
+	secondaryWindow.close();
+	secondaryWindow = null;
 });

 ipcMain.on("select-location", () => {
--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
 		"ytdl-core": "^4.11.1"
 	},
 	"name": "ytdownloader",
-	"version": "2.0.6",
+	"version": "2.1.0",
 	"main": "main.js",
 	"scripts": {
 		"start": "electron .",
--- a/src/renderer.js
+++ b/src/renderer.js
@ -40,7 +40,9 @@ async function getVideoInfo(url) {
 		.then((data) => {
 			info = data;
 		})
-		.catch((error) => {});
+		.catch((error) => {
+			console.log(error);
+		});
 	return info;
 }

@ -509,11 +511,28 @@ async function findInfo(url, itag) {
 }

 // Opening windows
+function closeMenu(){
+	getId("menuIcon").style.transform = "rotate(0deg)";
+		menuIsOpen = false;
+		let count = 0;
+		let opacity = 1;
+		const fade = setInterval(() => {
+			if (count >= 10) {
+				clearInterval(fade);
+			} else {
+				opacity -= 0.1;
+				getId("menu").style.opacity = opacity;
+				count++;
+			}
+		}, 50);
+}

 getId("preferenceWin").addEventListener("click", () => {
+	closeMenu()
 	ipcRenderer.send("load-page", __dirname + "/preferences.html");
 });

 getId("aboutWin").addEventListener("click", () => {
+	closeMenu()
 	ipcRenderer.send("load-page", __dirname + "/about.html");
 });