change packager, following up the starting guide

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
-/dsr-win32-x64
+
+out/

README.md

@@ -1,5 +1,12 @@
 # Discord Video Sharing
 
-- [ ] Try to keep the video under 25mn <!-- Use Handbrake preset? -->
+- [ ] Try to keep the video under 25mb <!-- Use Handbrake preset? -->
   - [ ] If already under the limit, the file won't be compressed
 - [ ] Merge all audio files into one track <!-- ffmpeg -i in.mp4 -filter_complex "[0:a]amerge=inputs=2[a]" -ac 1 -map 0:v -map "[a]" -c:v copy out.mp4 -->
+
+## Dev
+
+```bash
+npm install --platform=win32
+npm run package
+```

package.json

@@ -5,8 +5,8 @@
   "main": "./dist/main.js",
   "scripts": {
     "build": "rm -rf ./dist 2> /dev/null; npx tsc",
-    "start": "npm run build && electron ./dist/main.js",
+    "start": "electron-forge start",
-    "package": "npm run build && npx electron-packager . --platform=win32 --arch=x64"
+    "package": "electron-forge package --platform=win32"
   },
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "typescript": "^5.1.6"
   },
   "devDependencies": {
-    "electron": "^25.3.2",
+    "@electron-forge/cli": "^6.2.1",
-    "electron-packager": "^17.1.1"
+    "electron": "^25.3.2"
   }
 }

src/main.ts

@@ -1,17 +1,26 @@
 import { app, BrowserWindow } from "electron";
-
+import path = require("path");
-const pathToFfmpeg = require("ffmpeg-static");
+/* import ffmpegPath = require("ffmpeg-static"); */
 
 const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+    },
   });
 
   win.loadFile("../index.html");
 };
-
 app.whenReady().then(() => {
-  /* console.log(pathToFfmpeg); */
   createWindow();
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") app.quit();
 });

src/preload.ts

@@ -0,0 +1,10 @@
+window.addEventListener("DOMContentLoaded", () => {
+  const replaceText = (selector: string, text: string) => {
+    const element = document.getElementById(selector);
+    if (element) element.innerText = text;
+  };
+
+  for (const dependency of ["chrome", "node", "electron"]) {
+    replaceText(`${dependency}-version`, process.versions[dependency]);
+  }
+});