dark mode

Joery-M · Jul 29, 2022 · bd0e0b3 · bd0e0b3
1 parent 1546fca
commit bd0e0b3
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 56 deletions.
diff --git a/index.js b/index.js
@@ -1,6 +1,6 @@
 if (require('electron-squirrel-startup')) return app.quit();
 
-const { app, BrowserWindow, dialog, ipcMain, shell } = require('electron');
+const { app, BrowserWindow, dialog, ipcMain, shell, nativeTheme, webFrameMain } = require('electron');
 const fs = require('fs');
 const path = require('path');
 const ytdl = require('ytdl-core');
@@ -10,7 +10,7 @@ const cp = require('child_process');
 
 const ffmpegPath = require("ffmpeg-static-electron").path;
 
-require("./updater")
+require("./updater");
 
 function createWindow ()
 {
@@ -26,7 +26,8 @@ function createWindow ()
         icon: process.platform == "darwin" ? "./icon.icns" : "./icon.ico",
         title: "YouTube Downloader",
         maxHeight: 820,
-        autoHideMenuBar: true
+        autoHideMenuBar: true,
+        transparent: true
     });
 
     win.loadFile('./app/index.html').then(() =>
@@ -51,6 +52,8 @@ function createWindow ()
     {
         win.webContents.send("winFocus");
     });
+
+    nativeTheme.themeSource = "system";
 }
 
 app.whenReady().then(() =>
@@ -121,7 +124,7 @@ ipcMain.on("download", async (ev, url, type) =>
                 return;
             }
             lastPercent = curPercent;
-            ev.sender.send("percent", curPercent);
+            sendPercent(curPercent);
         });
 
 
@@ -152,7 +155,12 @@ ipcMain.on("download", async (ev, url, type) =>
                     {
                         fs.rmSync(stream.path);
 
-                        win.webContents.send("doneDownload", true);
+                        if (!win.isFocused())
+                        {
+                            win.flashFrame(true);
+                        }
+
+                        doneDownload(true);
 
                         ipcMain.once("doneDialogRes", (ev, res) =>
                         {
@@ -165,35 +173,25 @@ ipcMain.on("download", async (ev, url, type) =>
                     })
                     .on("progress", (progress) =>
                     {
-                        ev.sender.send("percent", Math.round(progress.percent));
+                        sendPercent(Math.round(progress.percent));
                     })
                     .save(fileName);
-                var test = cp.spawn(ffmpeg, [], {
-                    windowsHide: true,
-                    stdio: [
-                        /* Standard: stdin, stdout, stderr */
-                        'inherit', 'inherit', 'inherit',
-                        /* Custom: pipe:3, pipe:4, pipe:5 */
-                        'pipe', 'pipe', 'pipe',
-                    ],
-                });
                 return;
             }
 
-            win.webContents.send("doneDownload", true);
+            doneDownload(true);
 
             ipcMain.once("doneDialogRes", (ev, res) =>
             {
                 if (res)
                 {
-                    var fileLoc = path.parse(fileName).dir;
-                    shell.openPath(fileLoc);
+                    shell.showItemInFolder(fileName);
                 }
             });
         });
     } else
     {
-        win.webContents.send("doneDownload");
+        doneDownload();
     }
 
 });
@@ -218,7 +216,7 @@ async function downloadVideoAndAudioHigh (ev, url, type, filters)
         function addToPercent (info)
         {
             doneBytes += info;
-            ev.sender.send("percent", Math.round(doneBytes / totalBytes * 100));
+            sendPercent(Math.round(doneBytes / totalBytes * 100));
         }
         function setMax (a, b, info3)
         {
@@ -254,33 +252,51 @@ async function downloadVideoAndAudioHigh (ev, url, type, filters)
                         fs.rmSync("./audio.mp3");
                         fs.rmSync("./video.mp4");
 
-                        win.webContents.send("doneDownload");
+                        doneDownload();
                     })
                     .on('end', function ()
                     {
                         fs.rmSync("./audio.mp3");
                         fs.rmSync("./video.mp4");
 
-                        win.webContents.send("doneDownload", true);
+                        doneDownload(true);
+
+                        if (!win.isFocused())
+                        {
+                            win.flashFrame(true);
+                        }
 
                         ipcMain.once("doneDialogRes", (ev, res) =>
                         {
                             if (res)
                             {
-                                var fileLoc = path.parse(fileName).dir;
-                                shell.openPath(fileLoc);
+                                shell.showItemInFolder(fileName);
                             }
                         });
                     })
                     .on("progress", (progress) =>
                     {
-                        ev.sender.send("percent", Math.round(progress.percent));
+                        sendPercent(Math.round(progress.percent));
                     })
                     .save(fileName);
             }
         }
     } else
     {
-        win.webContents.send("doneDownload");
+        doneDownload();
     }
+}
+
+function sendPercent (percent)
+{
+    var win = BrowserWindow.getAllWindows()[0];
+    win.webContents.send("percent", percent);
+    win.setProgressBar(percent / 100);
+}
+
+function doneDownload (isError)
+{
+    var win = BrowserWindow.getAllWindows()[0];
+    win.setProgressBar(0);
+    win.webContents.send("doneDownload", isError);
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "youtube-downloader",
   "productName": "YouTube Downloader",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A standalone Youtube downloader",
   "main": "index.js",
   "repository": "https://github.com/Joery-M/YouTube-Downloader",
@@ -47,7 +47,8 @@
     "mac": {
       "category": "public.app-category.utilities",
       "icon": "./icon.icns",
-      "target": "pkg"
+      "target": "pkg",
+      "darkModeSupport": true
     }
   },
   "config": {
@@ -69,4 +70,4 @@
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   }
-}
+}
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,7 @@
 			<label class="mdc-text-field mdc-text-field--filled" id="ytLink">
 				<span class="mdc-floating-label">Video URL</span>
 				<input class="mdc-text-field__input" type="text" oninput="preview(this.value)" />
-				<span class="mdc-line-ripple"></span>
+				<span class="mdc-line-ripple mdc-label"></span>
 			</label>
 			<div id="iframe">
 				<div class="mdc-circular-progress" style="width: 48px; height: 48px" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
@@ -104,7 +104,7 @@
 		<div class="mdc-dialog">
 			<div class="mdc-dialog__container">
 				<div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title" aria-describedby="my-dialog-content">
-					<div class="mdc-dialog__content">Download done!</div>
+					<div class="mdc-dialog__title">Download done!</div>
 					<div class="mdc-dialog__actions">
 						<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="close">
 							<div class="mdc-button__ripple"></div>

diff --git a/src/mdc.scss b/src/mdc.scss
@@ -14,12 +14,6 @@
 @use "@material/menu/mdc-menu";
 @use "@material/select/styles";
 
-.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label,
-.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label
-{
-    color: rgba(0, 0, 0, 0.87) !important;
-}
-
 .mdc-dialog__button
 {
     --mdc-theme-primary: #202124;

diff --git a/src/script.ts b/src/script.ts
@@ -23,6 +23,7 @@ interface ElectronMain
     doneDownload: (ev: any) => void;
     onFocus: (ev: any) => void;
     dialogResponse: (res: any) => void;
+    isDarkMode: () => boolean;
 }
 //@ts-ignore
 var electron: ElectronMain = window.electron;
@@ -33,6 +34,13 @@ var os: string = window.os;
 document.addEventListener("DOMContentLoaded", () =>
 {
     document.body.style.opacity = "1";
+
+    var text = clipboard.readText();
+    if (electron.validateURL(text) && textInput.value !== text)
+    {
+        textInput.value = text;
+        preview(text);
+    }
 });
 
 MDCRipple.attachTo(document.querySelector('#downloadButton'));
@@ -45,10 +53,11 @@ iframeSpinner.determinate = false;
 const downloadButton: HTMLInputElement = document.querySelector("#downloadButton");
 
 downloadButton.addEventListener("click", download);
-(document.querySelector("#ytLink input") as HTMLInputElement).addEventListener("input", (ev)=>{
-    var url = (document.querySelector("#ytLink input") as HTMLInputElement).value
-    preview(url)
-})
+(document.querySelector("#ytLink input") as HTMLInputElement).addEventListener("input", (ev) =>
+{
+    var url = (document.querySelector("#ytLink input") as HTMLInputElement).value;
+    preview(url);
+});
 
 const endMsg = new MDCDialog(document.querySelector('.mdc-dialog'));
 endMsg.listen("MDCDialog:closing", (ev: MDCDialogCloseEvent) =>
@@ -59,12 +68,6 @@ endMsg.listen("MDCDialog:closing", (ev: MDCDialogCloseEvent) =>
 
 const iframe = document.querySelector("iframe");
 
-var text = clipboard.readText();
-if (electron.validateURL(text) && textInput.value !== text)
-{
-    textInput.value = text;
-    preview(text);
-}
 electron.onFocus(() =>
 {
     var text = clipboard.readText();
@@ -105,22 +108,24 @@ async function preview (url: string)
     }
 }
 
-document.querySelector("#demo-selected-text").innerHTML += " (Low)";
+var listText = document.querySelector("#demo-selected-text");
+listText.innerHTML += " (Low)";
 
 document.querySelectorAll(".mdc-list-item").forEach((elem) =>
 {
     elem.addEventListener("click", () =>
     {
-        setTimeout(() =>
+        console.log("a");
+        listText.addEventListener('DOMSubtreeModified', () =>
         {
             if (selectList.selectedIndex == 0)
             {
-                document.querySelector("#demo-selected-text").innerHTML += " (Low)";
+                listText.innerHTML += " (Low)";
             } else if (selectList.selectedIndex == 1)
             {
-                document.querySelector("#demo-selected-text").innerHTML += " (High)";
+                listText.innerHTML += " (High)";
             }
-        }, 0);
+        }, { once: true });
     });
 });