Update translations, download progress for app updates, minor UI changes

8 months ago · fda4c604d6
parent c043db96dc
commit fda4c604d6
8 changed files with 168 additions and 21 deletions
--- a/assets/css/extra.css
+++ b/assets/css/extra.css
@ -292,7 +292,6 @@ input[type="checkbox"] {
 	font-size: large;
 	color: white;
 	background-color: var(--greenBtn);
-	border-bottom: 4px solid var(--greenBtn-bottom);
 	cursor: pointer;
 	position: relative;
 	outline: none;
@ -348,3 +347,28 @@ body::-webkit-scrollbar-thumb {
 	resize: none;
 	overflow: hidden;
 }
+
+.popup-container {
+	position: fixed;
+	bottom: 30px;
+	left: 30px;
+	z-index: 9999;
+
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.popup-item {
+	display: inline-block;
+
+	color: #fff;
+	padding: 12px 24px;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	font-weight: 600;
+	font-size: 15px;
+
+	opacity: 1;
+	transition: opacity 0.4s;
+}
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -305,7 +305,7 @@ img {
 	color: var(--text);
 	margin: 10px auto;
 	border-radius: 10px;
-	padding: 20px;
+	padding: 10px;
 	align-items: center;
 	justify-content: space-between;
 }
@ -1135,4 +1135,41 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	font-family: "JetBrains";
 	border-radius: 8px;
 	resize: vertical;
-}
+}
+
+#updatePopup {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 9999;
+    background-color: var(--box-separation);
+    padding: 15px 20px;
+    border-radius: 10px;
+	display: none;
+
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+}
+
+.progress-track {
+    width: 200px;
+    height: 8px;
+    background-color: rgba(209, 209, 209, 0.446);
+    border-radius: 4px;
+    overflow: hidden;
+	margin: 10px 2px;
+}
+
+#progressBarFill {
+    height: 100%;
+    width: 0%;
+    background-color: var(--greenBtn);
+    transition: width 0.2s ease;
+}
+
+.update-label, #updateProgress {
+    font-size: 14px;
+}
--- a/html/index.html
+++ b/html/index.html
@ -251,7 +251,15 @@

    <div id="popupContainer" class="popup-container"></div>

+    <div id="updatePopup">
+        <span class="update-label" data-translate="downloadingUpdate">Downloading update</span>

+        <div class="progress-track">
+            <div id="progressBarFill"></div>
+        </div>
+
+        <span id="updateProgress">0.0%</span>
+    </div>
 </body>

 </html>
--- a/html/preferences.html
+++ b/html/preferences.html
@ -111,8 +111,10 @@

    <p id="flatpakTxt" data-translate="flatsealPermissionWarning"></p>
    <div class="prefBox">
-        <span id="browserTxt" data-translate="selectBrowserForCookies">Select browser to use cookies from</span>
-        <span id="browserInfo" data-translate-title="cookiesWarning"> ℹ️</span>
+        <div>
+            <span id="browserTxt" data-translate="selectBrowserForCookies">Select browser to use cookies from</span>
+            <span id="browserInfo" data-translate-title="cookiesWarning"> &#9432;</span>
+        </div>
        <select id="browser">
            <option value="" id="none" data-translate="none">None</option>
            <option value="chrome">Chrome</option>
--- a/main.js
+++ b/main.js
@ -462,6 +462,7 @@ function registerAutoUpdaterEvents() {
 	});

 	autoUpdater.on("update-downloaded", async () => {
+		appState.mainWindow.webContents.send("update-downloaded", "");
 		const dialogOpts = {
 			type: "info",
 			buttons: [i18n("restart"), i18n("later")],
@ -477,6 +478,10 @@ function registerAutoUpdaterEvents() {
 		}
 	});

+	autoUpdater.on("download-progress", async (info) => {
+		appState.mainWindow.webContents.send("download-progress", info.percent);
+	})
+
 	autoUpdater.on("error", (error) => {
 		console.error("Auto-update error:", error);
 		dialog.showErrorBox(
--- a/src/preferences.js
+++ b/src/preferences.js
@ -1,3 +1,6 @@
+const {ipcRenderer, shell} = require("electron");
+const {accessSync, constants} = require("original-fs");
+
 const storageTheme = localStorage.getItem("theme");
 if (storageTheme) {
 	document.documentElement.setAttribute("theme", storageTheme);
@ -24,7 +27,6 @@ if (rightToLeft == "true") {
 let downloadPath = localStorage.getItem("downloadPath");
 getId("path").textContent = downloadPath;

-const {ipcRenderer, shell} = require("electron");
 /**
 *
 * @param {string} id
@ -49,10 +51,16 @@ getId("selectLocation").addEventListener("click", () => {
 	ipcRenderer.send("select-location-secondary", "");
 });

-ipcRenderer.on("downloadPath", (event, downloadPath) => {
-	console.log(downloadPath[0]);
-	localStorage.setItem("downloadPath", downloadPath[0]);
-	getId("path").textContent = downloadPath[0];
+ipcRenderer.on("downloadPath", (_event, downloadPath) => {
+	try {
+		accessSync(downloadPath[0], constants.W_OK);
+
+		console.log(downloadPath[0]);
+		localStorage.setItem("downloadPath", downloadPath[0]);
+		getId("path").textContent = downloadPath[0];
+	} catch (error) {
+		showPopup(i18n.__("unableToAccessDir"), true)
+	}
 });

 // Selecting config directory
@ -177,8 +185,10 @@ ytDlpArgsInput.addEventListener("input", () => {
 });

 getId("learnMoreLink").addEventListener("click", () => {
-	shell.openExternal("https://github.com/aandrew-me/ytDownloader/wiki/Custom-yt%E2%80%90dlp-options")
-})
+	shell.openExternal(
+		"https://github.com/aandrew-me/ytDownloader/wiki/Custom-yt%E2%80%90dlp-options"
+	);
+});

 // Reload
 function reload() {
@ -280,3 +290,36 @@ const showMoreFormatOpts = localStorage.getItem("showMoreFormats");
 if (showMoreFormatOpts == "true") {
 	showMoreFormats.checked = true;
 }
+
+function showPopup(text, isError = false) {
+	let popupContainer = document.getElementById("popupContainer");
+
+	if (!popupContainer) {
+		popupContainer = document.createElement("div");
+		popupContainer.id = "popupContainer";
+		popupContainer.className = "popup-container";
+		document.body.appendChild(popupContainer);
+	}
+
+	const popup = document.createElement("span");
+	popup.textContent = text;
+	popup.classList.add("popup-item");
+
+	popup.style.background = isError ? "#ff6b6b" : "#54abde";
+
+	if (isError) {
+		popup.classList.add("popup-error");
+	}
+
+	popupContainer.appendChild(popup);
+
+	setTimeout(() => {
+		popup.style.opacity = "0";
+		setTimeout(() => {
+			popup.remove();
+			if (popupContainer.childElementCount === 0) {
+				popupContainer.remove();
+			}
+		}, 1000);
+	}, 2200);
+}
--- a/src/renderer.js
+++ b/src/renderer.js
@ -51,6 +51,9 @@ const CONSTANTS = {
 		POPUP_TEXT: "popupText",
 		POPUP_SVG: "popupSvg",
 		YTDLP_DOWNLOAD_PROGRESS: "ytDlpDownloadProgress",
+		UPDATE_POPUP: "updatePopup",
+		UPDATE_POPUP_PROGRESS: "updateProgress",
+		UPDATE_POPUP_BAR: "progressBarFill",
 		// Menu
 		MENU_ICON: "menuIcon",
 		MENU: "menu",
@ -369,8 +372,8 @@ class YtDownloaderApp {
 		}

 		// Priority 4: Default location or download
-		const ytDlpPath = await this.ensureYtDlpBinary(defaultYtDlpPath)
-		return ytDlpPath
+		const ytDlpPath = await this.ensureYtDlpBinary(defaultYtDlpPath);
+		return ytDlpPath;
 	}

 	/**
@ -426,15 +429,14 @@ class YtDownloaderApp {
 				);
 				$(CONSTANTS.DOM_IDS.POPUP_SVG).style.display = "none";

-
 				const tryAgainBtn = document.createElement("button");
 				tryAgainBtn.id = "tryBtn";
-				tryAgainBtn.textContent = i18n.__("tryAgain")
+				tryAgainBtn.textContent = i18n.__("tryAgain");
 				tryAgainBtn.addEventListener("click", () => {
 					// TODO: Improve it
 					ipcRenderer.send("reload");
 				});
-				document.getElementById("popup").appendChild(tryAgainBtn)
+				document.getElementById("popup").appendChild(tryAgainBtn);

 				throw new Error("Failed to download yt-dlp.");
 			}
@ -606,9 +608,32 @@ class YtDownloaderApp {
 		// IPC listeners
 		ipcRenderer.on("link", (event, text) => this.getInfo(text));
 		ipcRenderer.on("downloadPath", (event, downloadPath) => {
-			const newPath = downloadPath[0];
-			$(CONSTANTS.DOM_IDS.PATH_DISPLAY).textContent = newPath;
-			this.state.downloadDir = newPath;
+			try {
+				accessSync(downloadPath[0], constants.W_OK);
+
+				const newPath = downloadPath[0];
+				$(CONSTANTS.DOM_IDS.PATH_DISPLAY).textContent = newPath;
+				this.state.downloadDir = newPath;
+			} catch (error) {
+				console.log(error);
+				this._showPopup(i18n.__("unableToAccessDir"), true);
+			}
+		});
+
+		ipcRenderer.on("download-progress", (_event, percent) => {
+			if (percent) {
+				const popup = $(CONSTANTS.DOM_IDS.UPDATE_POPUP);
+				const textEl = $(CONSTANTS.DOM_IDS.UPDATE_POPUP_PROGRESS);
+				const barEl = $(CONSTANTS.DOM_IDS.UPDATE_POPUP_BAR);
+
+				popup.style.display = "flex";
+				textEl.textContent = `${percent.toFixed(1)}%`;
+				barEl.style.width = `${percent}%`;
+			}
+		});
+
+		ipcRenderer.on("update-downloaded", (_event, _) => {
+			$(CONSTANTS.DOM_IDS.UPDATE_POPUP).style.display = "none";
 		});

 		// Menu Listeners
--- a/translations/en.json
+++ b/translations/en.json
@ -159,5 +159,8 @@
 	"failedToDeleteHistoryItem": "Failed to delete history item",
 	"customArgsTxt": "Set custom yt-dlp options.",
 	"learnMore": "Learn more",
-	"updateError": "An error occurred during the update process"
+	"updateError": "An error occurred during the update process",
+	"unableToAccessDir": "The program cannot access that folder",
+	"downloadingUpdate": "Downloading update"
+
 }