Moved over to Electron Builder

Author: deusprogrammer

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "description": "A foundation for scalable desktop apps",
+  "description": "An application for creating and managing clips for What the Dub and Rifftrax",
   "keywords": [
     "electron",
     "boilerplate",
@@ -21,17 +21,10 @@
   },
   "license": "MIT",
   "author": {
-    "name": "Electron React Boilerplate Maintainers",
-    "email": "electronreactboilerplate@gmail.com",
-    "url": "https://electron-react-boilerplate.js.org"
+    "name": "Michael C. Main",
+    "email": "deusprogrammer@gmail.com",
+    "url": "https://deusprogrammer.com/util/wtd-tool"
   },
-  "contributors": [
-    {
-      "name": "Amila Welihinda",
-      "email": "[email protected]",
-      "url": "https://github.com/amilajack"
-    }
-  ],
   "main": "./src/main/main.ts",
   "scripts": {
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
@@ -113,7 +106,8 @@
     "electron-updater": "^5.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-toastify": "^9.0.1"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
@@ -183,8 +177,8 @@
     "webpack-merge": "^5.8.0"
   },
   "build": {
-    "productName": "ElectronReact",
-    "appId": "org.erb.ElectronReact",
+    "productName": "Dub Editor",
+    "appId": "com.trinary.dub-editor",
     "asar": true,
     "asarUnpack": "**\\*.{node,dll}",
     "files": [

package.json

@@ -0,0 +1,5 @@
+{
+     "whatTheDubDirectory": "~/Library/Application Support/Steam/steamapps/common/WhatTheDub/WhatTheDub.app/Contents/Resources/Data",
+     "rifftraxDirectory": "~/Library/Application Support/Steam/steamapps/common/RiffTraxTheGame/RiffTraxTheGame.app/Contents/Resources/Data",
+     "isMac": true
+}

src/main/config.json

@@ -0,0 +1,13 @@
+type Config = {
+    whatTheDubDirectory: string | null,
+    rifftraxDirectory: string | null,
+    isMac: boolean
+}
+
+const defaultConfig : Config = {
+    whatTheDubDirectory: null,
+    rifftraxDirectory: null,
+    isMac: false
+}
+
+export default defaultConfig;

src/main/defaultConfig.ts

@@ -9,12 +9,18 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import fs from 'fs';
+import { app, BrowserWindow, dialog, shell, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
 
+import defaultConfig from './defaultConfig';
+
+const HOME : string = process.env.HOME || "/";
+const CONFIG_FILE : string = `${HOME}/.dub-editor-config.json`;
+
 export default class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
@@ -25,11 +31,18 @@ export default class AppUpdater {
 
 let mainWindow: BrowserWindow | null = null;
 
-ipcMain.on('ipc-example', async (event, arg) => {
-  const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
-  console.log(msgTemplate(arg));
-  event.reply('ipc-example', msgTemplate('pong'));
-});
+let config = defaultConfig;
+if (process.platform === 'darwin') {
+    config.whatTheDubDirectory = "~/Library/Application Support/Steam/steamapps/common/WhatTheDub/WhatTheDub.app/Contents/Resources/Data";
+    config.rifftraxDirectory = "~/Library/Application Support/Steam/steamapps/common/RiffTraxTheGame/RiffTraxTheGame.app/Contents/Resources/Data";
+    config.isMac = true;
+}
+
+if (!fs.existsSync(CONFIG_FILE)) {
+    fs.writeFileSync(CONFIG_FILE, Buffer.from(JSON.stringify(config, null, 5)));
+} else {
+    config = JSON.parse(fs.readFileSync(CONFIG_FILE, {}).toString());
+}
 
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
@@ -71,8 +84,8 @@ const createWindow = async () => {
 
   mainWindow = new BrowserWindow({
     show: false,
-    width: 1024,
-    height: 728,
+    width: 1920,
+    height: 1080,
     icon: getAssetPath('icon.png'),
     webPreferences: {
       preload: app.isPackaged
@@ -135,3 +148,140 @@ app
     });
   })
   .catch(console.log);
+
+// Bridged functionality
+
+ipcMain.handle('updateConfig', (event, newConfig) => {
+  console.log("CONFIG: " + JSON.stringify(newConfig));
+  config = newConfig;
+  fs.writeFileSync(CONFIG_FILE, Buffer.from(JSON.stringify(config, null, 5)));
+  return;
+});
+
+ipcMain.handle('getConfig', () => {
+  return config;
+});
+
+ipcMain.handle('getVideos', (event, game) => {
+  let clipsDirectory = null;
+  if (game === "rifftrax") {
+      clipsDirectory = `${config.rifftraxDirectory}/StreamingAssets/VideoClips`.replace("~", HOME);
+  } else if (game === "whatthedub") {
+      clipsDirectory = `${config.whatTheDubDirectory}/StreamingAssets/VideoClips`.replace("~", HOME);
+  } else {
+      return [];
+  }
+
+  const files = fs.readdirSync(clipsDirectory);
+  const fileObjects = files.filter(file => file.endsWith(".mp4") || file.endsWith(".mp4.disabled")).map((file) => {return {_id: file.substring(0, file.lastIndexOf(".mp4")), name: file.replace(/_/g, " ").substring(0, file.lastIndexOf(".mp4")), game, disabled: file.endsWith(".disabled")}});
+  return fileObjects;
+});
+
+ipcMain.handle('getVideo', (event, {id, game}) => {
+  console.log("Opening: " + id + " from game " + game);
+
+  let directory = null;
+  if (game === "rifftrax") {
+      directory = config.rifftraxDirectory;
+  } else if (game === "whatthedub") {
+      directory = config.whatTheDubDirectory;
+  } else {
+      return [];
+  }
+  
+  const clipsDirectory = `${directory}/StreamingAssets/VideoClips`.replace("~", HOME);
+  const subsDirectory = `${directory}/StreamingAssets/Subtitles`.replace("~", HOME);
+  const videoFilePath = `${clipsDirectory}/${id}.mp4`;
+  const subFilePath = `${subsDirectory}/${id}.srt`;
+
+  const videoBase64 = fs.readFileSync(videoFilePath, {encoding: 'base64'});
+  const subtitles = fs.readFileSync(subFilePath, {encoding: 'base64'});
+
+  return {
+      name: id.replace(/_/g, " "),
+      videoUrl: `data:video/mp4;base64,${videoBase64}`,
+      subtitles: [],
+      srtBase64: subtitles 
+  }
+});
+
+ipcMain.handle('storeVideo', (event, {base64ByteStream, subtitles, title, clipNumber, game}) => {
+  console.log(`STORING ${title}-${clipNumber} for game ${game} with subtitles ${subtitles}`);
+
+  let directory = null;
+  if (game === "rifftrax") {
+      directory = config.rifftraxDirectory;
+  } else if (game === "whatthedub") {
+      directory = config.whatTheDubDirectory;
+  } else {
+      return;
+  }
+
+  let baseFileName = title.replace(" ", "_") + `-Clip${`${clipNumber}`.padStart(3, "0")}`;
+
+  const clipsDirectory = `${directory}/StreamingAssets/VideoClips`.replace("~", HOME);
+  const subsDirectory = `${directory}/StreamingAssets/Subtitles`.replace("~", HOME);
+  const videoFilePath = `${clipsDirectory}/_${baseFileName}.mp4`;
+  const subFilePath = `${subsDirectory}/_${baseFileName}.srt`;
+
+  console.log("SAVING TO " + videoFilePath + "\n" + subFilePath);
+
+  fs.writeFileSync(videoFilePath, Buffer.from(base64ByteStream, "base64"));
+  fs.writeFileSync(subFilePath, subtitles);
+});
+
+ipcMain.handle('deleteVideo', (event, {id, game}) => {
+  console.log("DELETING " + id + " FOR GAME " + game);
+
+  let directory = null;
+  if (game === "rifftrax") {
+      directory = config.rifftraxDirectory;
+  } else if (game === "whatthedub") {
+      directory = config.whatTheDubDirectory;
+  } else {
+      return;
+  }
+  const clipsDirectory = `${directory}/StreamingAssets/VideoClips`.replace("~", HOME);
+  const subsDirectory = `${directory}/StreamingAssets/Subtitles`.replace("~", HOME);
+  const videoFilePath = `${clipsDirectory}/${id}.mp4`;
+  const subFilePath = `${subsDirectory}/${id}.srt`;
+
+  console.log("DELETING " + videoFilePath + "\n" + subFilePath);
+
+  fs.unlinkSync(videoFilePath);
+  fs.unlinkSync(subFilePath);
+});
+
+ipcMain.handle('openDialog', async () => {
+  const response = await dialog.showOpenDialog({properties: ['openDirectory', 'createDirectory'] });
+  if (!response.canceled) {
+      return response.filePaths[0];
+  } else {
+      return null;
+  }
+});
+
+ipcMain.handle('setActive', async (event, {id, game, isActive}) => {
+  console.log("TOGGLING " + id + " in game " + game + " to " + isActive);
+
+  let directory = null;
+  if (game === "rifftrax") {
+      directory = config.rifftraxDirectory;
+  } else if (game === "whatthedub") {
+      directory = config.whatTheDubDirectory;
+  } else {
+      return;
+  }
+  const clipsDirectory = `${directory}/StreamingAssets/VideoClips`.replace("~", HOME);
+  const subsDirectory = `${directory}/StreamingAssets/Subtitles`.replace("~", HOME);
+  const videoFilePath = `${clipsDirectory}/${id}.mp4`;
+  const subFilePath = `${subsDirectory}/${id}.srt`;
+
+  if(isActive) {
+      fs.renameSync(`${videoFilePath}.disabled`, videoFilePath);
+      fs.renameSync(`${subFilePath}.disabled`, subFilePath);
+  } else {
+      fs.renameSync(videoFilePath, `${videoFilePath}.disabled`);
+      fs.renameSync(subFilePath, `${subFilePath}.disabled`);
+  }
+});

src/main/main.ts

@@ -1,21 +1,24 @@
-import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
+import { contextBridge, ipcRenderer } from 'electron';
 
 export type Channels = 'ipc-example';
 
-contextBridge.exposeInMainWorld('electron', {
-  ipcRenderer: {
-    sendMessage(channel: Channels, args: unknown[]) {
-      ipcRenderer.send(channel, args);
-    },
-    on(channel: Channels, func: (...args: unknown[]) => void) {
-      const subscription = (_event: IpcRendererEvent, ...args: unknown[]) =>
-        func(...args);
-      ipcRenderer.on(channel, subscription);
-
-      return () => ipcRenderer.removeListener(channel, subscription);
-    },
-    once(channel: Channels, func: (...args: unknown[]) => void) {
-      ipcRenderer.once(channel, (_event, ...args) => func(...args));
-    },
-  },
+contextBridge.exposeInMainWorld('api', {
+    send: async (channel: string, args: any) => {
+        // whitelist channels
+        let validChannels = [
+            "updateConfig",
+            "getConfig",
+            "getVideos",
+            "getVideo",
+            "storeVideo",
+            "setActive",
+            "deleteVideo",
+            "openDialog"
+        ];
+        if (validChannels.includes(channel)) {
+            return await ipcRenderer.invoke(channel, args);
+        } else {
+            throw `Invalid channel: ${channel}`;
+        }
+    }
 });