Add transparency option

.github/workflows/dev.yml

@@ -19,11 +19,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
 
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Replace the version number
               run: cat src/utils.ts | sed -e 's/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/DEV/g' | tee src/utils.ts > /dev/null
@@ -53,11 +56,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
-              
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Replace the version number
               run: cat src/utils.ts | sed -e 's/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/DEV/g' | tee src/utils.ts > /dev/null
@@ -84,11 +90,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
-              
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Replace the version number
               run: (Get-Content src/utils.ts) -replace "\d\.\d\.\d", "DEV" | Out-File src/utils.ts

.github/workflows/stable.yml

@@ -19,11 +19,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
 
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Build
               run: npm run build && electron-builder --linux && electron-builder --arm64 --linux && electron-builder --armv7l --linux
@@ -51,11 +54,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
-              
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Build
               run: npm run build && electron-builder --macos
@@ -83,11 +89,14 @@ jobs:
             - name: Checkout code
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              run: npm i -g pnpm
+
             - name: Install Node dependencies
-              run: npm install
+              run: pnpm install
-              
+
             - name: Install Electron-Builder
-              run: npm install -g electron-builder
+              run: pnpm install -g electron-builder
 
             - name: Build
               run: npm run build && electron-builder --windows

README.md

@@ -64,9 +64,9 @@ ArmCord is also available in [Pi-Apps](https://github.com/Botspot/pi-apps).
 
 
 ### Compiling:
- Alternatively you can run ArmCord from source (NodeJS and npm required):    
+ Alternatively you can run ArmCord from source (NodeJS and pnpm required):    
  1. Clone ArmCord repo: `git clone https://github.com/ArmCord/ArmCord.git`    
- 2. Run `npm install` to install dependencies   
+ 2. Run `pnpm install` to install dependencies   
  3. Build with `npm run build`   
  4. Compile/Package with `npm run package`    
 

package.json

@@ -38,6 +38,7 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
+    "@pyke/vibe": "^0.3.0",
     "electron-context-menu": "github:ArmCord/electron-context-menu",
     "os-locale": "^6.0.2",
     "v8-compile-cache": "^2.3.0",

src/main.ts

@@ -5,7 +5,7 @@ import {getConfig, checkIfConfigExists, injectElectronFlags} from "./utils";
 import "./extensions/mods";
 import "./extensions/plugin";
 import "./tray";
-import {createCustomWindow, createNativeWindow} from "./window";
+import {createCustomWindow, createNativeWindow, createTransparentWindow} from "./window";
 import path from "path";
 export var iconPath: string;
 export var settings: any;
@@ -40,6 +40,9 @@ app.whenReady().then(async () => {
             case "native":
                 createNativeWindow();
                 break;
+            case "transparent":
+                createTransparentWindow();
+                break;
             case "basic":
                 createNativeWindow();
                 break;

src/tray.ts

@@ -20,9 +20,8 @@ app.whenReady().then(async () => {
         }
     };
 
-    if (process.platform == "darwin" && trayPath.getSize().height > 22) 
+    if (process.platform == "darwin" && trayPath.getSize().height > 22) trayPath = trayPath.resize({height: 22});
-        trayPath = trayPath.resize({height: 22});
+
-    
     if ((await getConfig("windowStyle")) == "basic") {
         var clientName = (await getConfig("clientName")) ?? "ArmCord";
         tray = new Tray(trayPath);
@@ -32,13 +31,13 @@ app.whenReady().then(async () => {
                     {
                         label: `Finish the setup first!`,
                         enabled: false
-                    }, {
+                    },
+                    {
                         label: `Quit ${clientName}`,
                         click: async function () {
                             fs.unlink(await getConfigLocation(), (err) => {
-                                if (err) 
+                                if (err) throw err;
-                                    throw err;
+
-                                
                                 console.log('Closed during setup. "settings.json" was deleted');
                                 app.quit();
                             });
@@ -52,7 +51,8 @@ app.whenReady().then(async () => {
                         click: function () {
                             mainWindow.show();
                         }
-                    }, {
+                    },
+                    {
                         label: `Quit ${clientName}`,
                         click: function () {
                             let [width, height] = mainWindow.getSize();
@@ -74,13 +74,13 @@ app.whenReady().then(async () => {
                 {
                     label: `Finish the setup first!`,
                     enabled: false
-                }, {
+                },
+                {
                     label: `Quit ${clientName}`,
                     click: async function () {
                         fs.unlink(await getConfigLocation(), (err) => {
-                            if (err) 
+                            if (err) throw err;
-                                throw err;
+
-                            
                             console.log('Closed during setup. "settings.json" was deleted');
                             app.quit();
                         });
@@ -109,15 +109,18 @@ app.whenReady().then(async () => {
                     click: function () {
                         createSettingsWindow();
                     }
-                }, {
+                },
+                {
                     label: "Support Discord Server",
                     click: function () {
                         mainWindow.show();
                         mainWindow.loadURL("https://discord.gg/TnhxcqynZ2");
                     }
-                }, {
+                },
+                {
                     type: "separator"
-                }, {
+                },
+                {
                     label: `Quit ${clientName}`,
                     click: function () {
                         app.quit();
@@ -126,7 +129,8 @@ app.whenReady().then(async () => {
             ]);
             tray.setContextMenu(contextMenu);
         }
-    } tray.setToolTip(clientName);
+    }
+    tray.setToolTip(clientName);
     tray.on("click", function () {
         mainWindow.show();
     });

src/utils.ts

@@ -1,8 +1,10 @@
 import * as fs from "fs";
 import {app, dialog} from "electron";
 import path from "path";
+import vibe from "@pyke/vibe";
 export var firstRun: boolean;
 export var contentPath: string;
+export var transparency: boolean;
 //utility 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) {
     const style = document.createElement("style");
@@ -118,6 +120,11 @@ export async function injectElectronFlags() {
         default:
             console.log("No performance modes set");
     }
+    if ((await getConfig("windowStyle")) == "transparent") {
+        console.log("Transparent mode enabled");
+        vibe.setup(app);
+        transparency = true;
+    }
 }
 export async function setLang(language: string) {
     const langConfigFile = path.join(app.getPath("userData"), "/storage/") + "lang.json";

src/window.ts

@@ -4,7 +4,16 @@
 // I'm sorry for this mess but I'm not sure how to fix it.
 import {BrowserWindow, shell, app, dialog, nativeImage} from "electron";
 import path from "path";
-import {checkIfConfigIsBroken, firstRun, getConfig, contentPath, setConfig, setLang, setWindowState} from "./utils";
+import {
+    checkIfConfigIsBroken,
+    firstRun,
+    getConfig,
+    contentPath,
+    setConfig,
+    setLang,
+    setWindowState,
+    transparency
+} from "./utils";
 import {registerIpc} from "./ipc";
 import {setMenu} from "./menu";
 import * as fs from "fs";
@@ -12,6 +21,7 @@ import startServer from "./socket";
 import contextMenu from "electron-context-menu";
 import os from "os";
 import {tray} from "./tray";
+import vibe from "@pyke/vibe";
 import {iconPath} from "./main";
 export let mainWindow: BrowserWindow;
 export let inviteWindow: BrowserWindow;
@@ -41,6 +51,11 @@ contextMenu({
     ]
 });
 async function doAfterDefiningTheWindow() {
+    if (transparency) {
+        vibe.applyEffect(mainWindow, "acrylic");
+        vibe.setDarkMode(mainWindow);
+        mainWindow.show();
+    }
     var ignoreProtocolWarning = await getConfig("ignoreProtocolWarning");
     await checkIfConfigIsBroken();
     registerIpc();
@@ -54,18 +69,18 @@ async function doAfterDefiningTheWindow() {
         }
         mainWindow.webContents.userAgent = `Mozilla/5.0 (X11; ${osType} ${os.arch()}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36`; //fake useragent for screenshare to work
     }
-    const gotTheLock = app.requestSingleInstanceLock()
+    const gotTheLock = app.requestSingleInstanceLock();
 
     if (!gotTheLock) {
-    app.quit()
+        app.quit();
     } else {
-    app.on('second-instance', (event, commandLine, workingDirectory) => {
+        app.on("second-instance", (event, commandLine, workingDirectory) => {
-        // i love stack overflow
+            // i love stack overflow
-        if (mainWindow) {
+            if (mainWindow) {
-        mainWindow.restore()
+                mainWindow.restore();
-        mainWindow.focus()
+                mainWindow.focus();
-        }
+            }
-    })
+        });
     }
     mainWindow.webContents.setWindowOpenHandler(({url}) => {
         if (url.startsWith("https:" || url.startsWith("http:") || url.startsWith("mailto:"))) {
@@ -252,7 +267,25 @@ export function createNativeWindow() {
     });
     doAfterDefiningTheWindow();
 }
-
+export function createTransparentWindow() {
+    mainWindow = new BrowserWindow({
+        width: 300,
+        height: 350,
+        title: "ArmCord",
+        darkTheme: true,
+        icon: iconPath,
+        frame: true,
+        backgroundColor: "#00000000",
+        show: false,
+        autoHideMenuBar: true,
+        webPreferences: {
+            sandbox: false,
+            preload: path.join(__dirname, "preload/preload.js"),
+            spellcheck: true
+        }
+    });
+    doAfterDefiningTheWindow();
+}
 export function createInviteWindow() {
     inviteWindow = new BrowserWindow({
         width: 800,