Titlebar fix + tray + minor code improvements

package-lock.json

@@ -12,7 +12,9 @@
         "@types/node": "^14.18.2",
         "copyfiles": "^2.4.1",
         "electron-json-storage": "^4.5.0",
-        "typescript": "^4.5.4"
+        "typescript": "^4.5.4",
+        "v8-compile-cache": "^2.3.0",
+        "ws": "^8.4.0"
       },
       "devDependencies": {
         "electron": "^16.0.5"
@@ -1181,6 +1183,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -1212,6 +1219,26 @@
         "signal-exit": "^3.0.2"
       }
     },
+    "node_modules/ws": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz",
+      "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -2216,6 +2243,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -2241,6 +2273,12 @@
         "signal-exit": "^3.0.2"
       }
     },
+    "ws": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.4.0.tgz",
+      "integrity": "sha512-IHVsKe2pjajSUIl4KYMQOdlyliovpEPquKkqbwswulszzI7r0SfQrxnXdWAEqOlDCLrVSJzo+O1hAwdog2sKSQ==",
+      "requires": {}
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -2,12 +2,12 @@
   "name": "armcord",
   "version": "3.0.0",
   "description": "ArmCord is a custom client designed to enhance your Discord experience while keeping everything lightweight.",
-  "main": "src/index.ts",
+  "main": "dist/main.js",
   "scripts": {
     "build": "tsc",
     "watch": "tsc -w",
     "start": "npm run build && npm run copy-files && electron ./dist/main.js",
-    "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css dist/ && copyfiles package.json dist/"
+    "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css dist/ && copyfiles package.json dist/ && copyfiles assets/** dist/"
   },
   "repository": {
     "type": "git",
@@ -27,6 +27,8 @@
     "@types/node": "^14.18.2",
     "copyfiles": "^2.4.1",
     "electron-json-storage": "^4.5.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "v8-compile-cache": "^2.3.0",
+    "ws": "^8.4.0"
   }
 }

src/content/css/splash.css

@@ -66,7 +66,7 @@ video {
   object-fit: cover;
 }
 
-#text {
+#text-splashscreen {
   font-size: 7vw;
   text-align: center;
 

src/content/css/titlebar.css

@@ -120,4 +120,7 @@
     font-size: 0px !important;
     margin-left: initial !important;
     transform: translate(10px, 0px);
+  }
+  .withFrame-haYltI {
+    height: 23px !important;
   }

src/content/index.html

@@ -10,17 +10,17 @@
 
   <body>
     <div class="container">
-      <video autoplay loop class="logo">
+      <video autoplay loop class="logo" id="splashscreen-armcord">
         <source
           src="https://armcord.smartfridge.space/discord_loading.webm"
           type="video/webm"
         />
       </video>
-      <p id="text"></p>
+      <p id="text-splashscreen"></p>
     </div>
   </body>
   <script>
-    const text = document.getElementById("text");
+    const text = document.getElementById("text-splashscreen");
     if (window.navigator.onLine === false) {
       text.innerHTML =
         "You appear to be offline. Please connect to the internet and try again.";

src/extensions/mods.ts

@@ -0,0 +1,67 @@
+//https://github.com/GooseMod/GooseMod/wiki/Stuck-Updater-or-Blank-Window-Fix
+/* 
+Copyright 2021 GooseMod
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+import electron from 'electron';
+import * as storage from 'electron-json-storage';
+const otherMods = {
+    generic: {
+      electronProxy: require('util').types.isProxy(electron) // Many modern mods overwrite electron with a proxy with a custom BrowserWindow (copied from PowerCord)
+    }
+  };
+const unstrictCSP = () => {
+    console.log('Setting up CSP unstricter...');
+
+    const cspAllowAll = [
+      'connect-src',
+      'style-src',
+      'img-src',
+      'font-src'
+    ];
+
+    const corsAllowUrls = [
+      'https://github.com/GooseMod/GooseMod/releases/download/dev/index.js',
+      'https://github-releases.githubusercontent.com/',
+      'https://raw.githubusercontent.com/Cumcord/Cumcord/stable/dist/build.js',
+      'https://raw.githubusercontent.com/Cumcord/Cumcord/master/dist/build.js',
+      'https://raw.githubusercontent.com/FlickerMod/dist/main/build.js'
+    ];
+
+    electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, url }, done) => {
+      let csp = responseHeaders!['content-security-policy'];
+
+      if (otherMods.generic.electronProxy) { // Since patch v16, override other mod's onHeadersRecieved (Electron only allows 1 listener); because they rely on 0 CSP at all (GM just unrestricts some areas), remove it fully if we detect other mods
+        delete responseHeaders!['content-security-policy'];
+        csp = [];
+      }
+
+      if (csp) {
+        for (let p of cspAllowAll) {
+          csp[0] = csp[0].replace(`${p}`, `${p} * blob: data:`); // * does not include data: URIs
+        }
+
+        // Fix Discord's broken CSP which disallows unsafe-inline due to having a nonce (which they don't even use?)
+        csp[0] = csp[0].replace(/'nonce-.*?' /, '');
+      }
+
+      if (corsAllowUrls.some((x) => url.startsWith(x))) {
+        responseHeaders!['access-control-allow-origin'] = ['*'];
+      }
+
+      done({ responseHeaders });
+    });
+  };
+  storage.get('settings', function(error, data:any) {
+    if (error) throw error;
+    if (data.armcordCSP) {
+      unstrictCSP();
+    } else {
+        console.log('ArmCord CSP is disabled. The CSP should be managed by third-party plugin.');
+    }
+  });

src/main.ts

@@ -1,13 +1,15 @@
 // Modules to control application life and create native browser window
-import { app, BrowserWindow, ipcMain, shell } from "electron";
+import { app, BrowserWindow, ipcMain, shell, desktopCapturer } from "electron";
 import * as path from "path";
+import 'v8-compile-cache';
 import * as storage from 'electron-json-storage';
 import {setup} from './utils';
 import './extensions/plugin';
+import './tray';
 var isSetup = null;
 var contentPath:string = "null";
 var frame:boolean;
-
+export var mainWindow: BrowserWindow;
 storage.keys(function(error, keys) {
     if (error) throw error;
   
@@ -36,9 +38,9 @@ storage.get('settings', function(error, data:any) {
     console.log(frame)
   });
 function createWindow () {
-  const mainWindow = new BrowserWindow({
+   mainWindow = new BrowserWindow({
     width: 300,
-    height: 300,
+    height: 350,
     title: "ArmCord",
     frame: frame,
     webPreferences: {
@@ -60,6 +62,9 @@ function createWindow () {
   ipcMain.on("win-minimize", (event, arg) => {
     mainWindow.minimize();
   });
+  ipcMain.on("win-unmaximize", (event, arg) => {
+    mainWindow.unmaximize();
+  });
   ipcMain.on("win-show", (event, arg) => {
     mainWindow.show();
   });
@@ -75,6 +80,15 @@ function createWindow () {
   ipcMain.on("channel", (event) => {
     event.returnValue = storage.getSync('channel');
   })
+  ipcMain.on("armcord-support", (event) => {
+    mainWindow.loadURL("https://discord.gg/F25bc4RYDt");
+  })
+  ipcMain.handle(
+    'DESKTOP_CAPTURER_GET_SOURCES',
+    (event, opts) => desktopCapturer.getSources(opts)
+  )
+  mainWindow.webContents.userAgent =
+    "Mozilla/5.0 (X11; Linux x86) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"; //fake useragent
   mainWindow.loadFile(contentPath)
 }
 

src/preload/bridge.ts

@@ -4,14 +4,14 @@ import {getDisplayMediaSelector} from './capturer';
 
 contextBridge.exposeInMainWorld("armcord", {
   window: {
-    show: () => ipcRenderer.sendSync('win-show'),
-    hide: () => ipcRenderer.sendSync('win-hide'),
-    minimize: () => ipcRenderer.sendSync('win-minimize'),
-    maximize: () => ipcRenderer.sendSync('win-maximize'),
+    show: () => ipcRenderer.send('win-show'),
+    hide: () => ipcRenderer.send('win-hide'),
+    minimize: () => ipcRenderer.send('win-minimize'),
+    maximize: () => ipcRenderer.send('win-maximize'),
   },
   electron: process.versions.electron,
-  version: ipcRenderer.sendSync('get-app-version', 'app-version'),
+  version: ipcRenderer.send('get-app-version', 'app-version'),
   getDisplayMediaSelector: getDisplayMediaSelector,
-  splashEnd: () => ipcRenderer.sendSync('splashEnd'),
-  channel: ipcRenderer.sendSync('channel')
+  splashEnd: () => ipcRenderer.send('splashEnd'),
+  channel: ipcRenderer.send('channel')
 });

src/preload/capturer.ts

@@ -110,7 +110,7 @@ window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve
   try {
     const selectionElem = document.createElement('div');
     selectionElem.classList = ['desktop-capturer-selection'];
-    selectionElem.innerHTML = await window.electron.getDisplayMediaSelector();
+    selectionElem.innerHTML = await window.armcord.getDisplayMediaSelector();
     document.body.appendChild(selectionElem);
     document
       .querySelectorAll('.desktop-capturer-selection__btn')
@@ -148,5 +148,6 @@ window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve
 document.addEventListener("DOMContentLoaded", function(event) {     
   addScript(screenShareJS);
   addStyle(screenShareCSS);
+  console.log("Capturer injected.")
 });
 

src/preload/preload.ts

@@ -1,5 +1,6 @@
-import './capturer'
-import './bridge'
-import {injectTitlebar} from './titlebar';
+import "./capturer";
+import "./bridge";
+import { injectTitlebar } from "./titlebar";
+
 injectTitlebar();
-console.log("ArmCord");
+console.log("ArmCord");

src/preload/titlebar.ts

@@ -1,11 +1,11 @@
-import { ipcRenderer } from 'electron';
-import {addStyle} from '../utils'
-import * as fs from 'fs';
-import * as path from 'path';
+import { ipcRenderer } from "electron";
+import { addStyle } from "../utils";
+import * as fs from "fs";
+import * as path from "path";
 export function injectTitlebar() {
-    document.addEventListener("DOMContentLoaded", function (event) {
-        var elem = document.createElement("div");
-        elem.innerHTML = `<nav class="titlebar">
+  document.addEventListener("DOMContentLoaded", function (event) {
+    var elem = document.createElement("div");
+    elem.innerHTML = `<nav class="titlebar">
           <div class="window-title" id="window-title"></div>
           <div id="window-controls-container">
               <div id="minimize"></div>
@@ -13,34 +13,36 @@ export function injectTitlebar() {
               <div id="quit"></div>
           </div>
         </nav>`;
-        document.body.appendChild(elem);
-        const cssPath = path.join(__dirname, '../', '/content/css/titlebar.css');
-        addStyle(fs.readFileSync(
-           cssPath,
-          "utf8"
-        ));
-      
-        var minimize = document.querySelector("#minimize");
-        var maximize = document.querySelector("#maximize");
-        var quit = document.querySelector("#quit");
-      
-        minimize!.addEventListener("click", () => {
-          ipcRenderer.sendSync('win-minimize')
-        });
-      
-        maximize!.addEventListener("click", () => {
-          if (ipcRenderer.sendSync('win-isMaximized') == true) {
-              ipcRenderer.sendSync('win-minimize')
-          } else {
-              ipcRenderer.sendSync('win-maximize')
-          }
-        });
-      
-        quit!.addEventListener("click", () => {
-          ipcRenderer.sendSync('win-hide')
-        });
-      });
+    elem.classList.add("withFrame-haYltI");
+    if (document.getElementById("app-mount") == null) {
+      document.body.appendChild(elem);
+    } else {
+      document.getElementById("app-mount")!.prepend(elem);
+    }
+    const cssPath = path.join(__dirname, "../", "/content/css/titlebar.css");
+    addStyle(fs.readFileSync(cssPath, "utf8"));
+
+    var minimize = document.getElementById("minimize");
+    var maximize = document.getElementById("maximize");
+    var quit = document.getElementById("quit");
+
+    minimize!.addEventListener("click", () => {
+      ipcRenderer.send("win-minimize");
+    });
+
+    maximize!.addEventListener("click", () => {
+      if (ipcRenderer.sendSync("win-isMaximized") == true) {
+        ipcRenderer.send("win-unmaximize");
+      } else {
+        ipcRenderer.send("win-maximize");
+      }
+    });
+
+    quit!.addEventListener("click", () => {
+      ipcRenderer.send("win-hide");
+    });
+  });
 }
 export function removeTitlebar() {
-    document.querySelector('#titlebar')!.remove();
+  document.querySelector("#titlebar")!.remove();
 }

src/tray.ts

@@ -0,0 +1,29 @@
+import { app, Menu, Tray, ipcRenderer } from 'electron';
+import {mainWindow} from './main';
+let tray = null
+app.whenReady().then(() => {
+  tray = new Tray('./assets/ac_plug.png')
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: "Open ArmCord",
+      click: function () {
+        mainWindow.show();
+      },
+    },
+    {
+      label: "Support Discord Server",
+      click: function () {
+        mainWindow.show();
+        mainWindow.loadURL("https://discord.gg/F25bc4RYDt");
+      },
+    },
+    {
+      label: "Quit ArmCord",
+      click: function () {
+        app.quit();
+      },
+    },
+  ]);
+  tray.setToolTip('ArmCord' + process.env.npm_package_version)
+  tray.setContextMenu(contextMenu)
+})

src/utils.ts

@@ -1,3 +1,7 @@
+/*--------------------------------------------------------------------------------------------------------
+ *  This file has parts of one or more project files (VS Code) from Microsoft
+ *  You can check your respective license and the original file in https://github.com/Microsoft/vscode/
+ *-------------------------------------------------------------------------------------------------------*/
 import * as storage from 'electron-json-storage';
 //utillity functions that are used all over the codebase or just too obscure to be put in the file used in
 export function addStyle(styleString: string) {
@@ -13,12 +17,14 @@ export function addScript(scriptString: string) {
 };
 export function setup(){
     console.log("Setting up ArmCord settings.");
-      storage.set('settings', { customTitlebar: true, channel: 'stable', firstRun: 'done' }, function(error) {
+      storage.set('settings', { customTitlebar: true, channel: 'stable', firstRun: 'done', armcordCSP: true }, function(error) {
         if (error) throw error;
       });
 }
-export interface settingsStructure {
-    channel: string,
-    customTitlebar: boolean,
-    firstRun: string,
+export function append<T extends Node>(parent: HTMLElement, ...children: T[]): T {
+	children.forEach(child => parent.appendChild(child));
+	return children[children.length - 1];
+}
+export async function sleep(ms:number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
 }