Added splash screen

.gitignore

@@ -67,6 +67,7 @@ backend/appdata/users.json
 backend/users/*
 backend/appdata/cookies.txt
 backend/public
+backend/dist
 src/assets/i18n/*.json
 
 # User Files

backend/app.js

@@ -1,3 +1,7 @@
+// TODO: ignore this if not in electron
+const rootPath = require('electron-root-path').rootPath;
+process.chdir(rootPath);
+
 const { uuid } = require('uuidv4');
 const fs = require('fs-extra');
 const { promisify } = require('util');

backend/main.js

@@ -1,34 +1,62 @@
 const { app, BrowserWindow } = require('electron');
 const path = require('path');
-const url = require('url');
 const { spawn } = require('child_process');
 
 let win;
+let splashWindow;
 
-function createWindow() {
+function createSplashWindow() {
+  splashWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    frame: false,
+    alwaysOnTop: true,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+  splashWindow.loadFile('public/assets/splash.html')
+  splashWindow.on('closed', () => {
+    splashWindow = null
+  })
+}
+
+function createMainWindow() {
   win = new BrowserWindow(
     {
       width: 800,
       height: 600,
       webPreferences: {
-        nodeIntegration: true
-      }
+        nodeIntegration: true,
+        contextIsolation: true,
+        preload: path.join(__dirname, 'preload.js')
+      },
+      icon: path.join(__dirname, 'favicon.ico'),
+      show: false
     });
 
-  // load the dist folder from Angular
-  win.loadURL('http://localhost:17442')
-
   // The following is optional and will open the DevTools:
   // win.webContents.openDevTools()
 
   win.on('closed', () => {
     win = null;
   });
+}
 
-  const serverProcess = spawn('node', ['app.js']); //, {cwd: 'backend'});
+function createWindow() {
+  const serverProcess = spawn('node', [path.join(__dirname, 'app.js')]); //, {cwd: 'backend'});
+
+  createMainWindow();
+  createSplashWindow();
 
   // Log the server output to the console
   serverProcess.stdout.on('data', (data) => {
+    if (data.toString().includes('started on PORT')) {
+      splashWindow.close()
+      // load the dist folder from Angular
+      win.loadURL('http://localhost:17442')
+      win.show()
+    }
     console.log(`Server output: ${data}`);
   });
 
@@ -36,6 +64,10 @@ function createWindow() {
   serverProcess.stderr.on('data', (data) => {
     console.error(`Server error: ${data}`);
   });
+
+  process.on('uncaughtException', (error) => {
+    console.error('Uncaught exception:', error);
+  });
 }
 
 app.on('ready', createWindow);

backend/package.json

@@ -6,7 +6,39 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "pm2-runtime --raw pm2.config.js",
-    "debug": "set YTDL_MODE=debug && node app.js"
+    "debug": "set YTDL_MODE=debug && node app.js",
+    "electron": "electron main.js",
+    "pack": "electron-builder --dir",
+    "build": "electron-builder"
+  },
+  "build": {
+    "appId": "youtubedl.material",
+    "productName": "YoutubeDL-Material GUI",
+    "directories": {
+      "output": "dist"
+    },
+    "mac": {
+      "category": "public.app-category.utilities",
+      "target": "dmg"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "../src/favicon.ico"
+    },
+    "files": [
+      "!audio/*",
+      "!video/*",
+      "!users/*",
+      "!subscriptions/*",
+      "!appdata/*",
+      "*.js",
+      "authentication/auth.js",
+      "main.js",
+      "public/**/*",
+      "ffmpeg*",
+      "ffprobe*"
+    ],
+    "asar": false
   },
   "repository": {
     "type": "git",
@@ -19,6 +51,7 @@
   },
   "homepage": "",
   "dependencies": {
+    "app-root-path": "^3.1.0",
     "archiver": "^5.3.1",
     "async": "^3.2.3",
     "async-mutex": "^0.3.1",
@@ -26,6 +59,7 @@
     "bcryptjs": "^2.4.0",
     "compression": "^1.7.4",
     "config": "^3.2.3",
+    "electron-root-path": "^1.1.0",
     "express": "^4.17.3",
     "feed": "^4.2.2",
     "fluent-ffmpeg": "^2.1.2",
@@ -60,6 +94,8 @@
     "youtube-dl": "^3.0.2"
   },
   "devDependencies": {
-    "electron": "^24.1.2"
+    "electron": "^24.1.2",
+    "electron-builder": "^23.6.0",
+    "electron-packager": "^17.1.1"
   }
 }

backend/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge } = require('electron');
+const path = require('path');
+
+// Expose the 'path' module to the renderer process
+contextBridge.exposeInMainWorld('path', path);

src/assets/splash.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Splash Screen</title>
+    <style>
+      body {
+        background-color: #222;
+        margin: 0;
+        padding: 0;
+      }
+      .center {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="center">
+        <img src="images/logo_128px.png" alt="Logo">
+    </div>
+  </body>
+</html>