Add a way to enable legacy capturer

assets/lang/en-US.json

@@ -26,6 +26,8 @@
     "settings-startMinimized": "Start minimized",
     "settings-startMinimized-desc": "ArmCord starts in background and remains out of your way.",
     "settings-patches": "Automatic Patches",
+    "settings-useLegacyCapturer": "Use legacy capturer",
+    "settings-useLegacyCapturer-desc": "Use legacy screenshare module, instead of the new one. If you're experiencing issues with screen sharing, try enabling this.",
     "settings-patches-desk": "Fetches automatic patches that are distributed if release turns out to have bugs after release. Usually\n                you don't have to keep this enabled, unless notified in support Discord.",
     "settings-mobileMode": "Mobile mode",
     "settings-mobileMode-desc": "If you're on a device with touch-screen this feature is for you! It activates Discord's hidden mobile\n                mode meant for phones and tablets. Only major feature missing is voice chat support. This is ideal for\n                users on PinePhone and similar.",

src/content/setup.html

@@ -120,6 +120,7 @@
                     alternativePaste: false,
                     automaticPatches: false,
                     mods: "none",
+                    useLegacyCapturer: false,
                     inviteWebsocket: true,
                     mobileMode: false,
                     trayIcon: "default",
@@ -154,6 +155,7 @@
                             mobileMode: false,
                             automaticPatches: false,
                             performanceMode: "none",
+                            useLegacyCapturer: false,
                             alternativePaste: false,
                             disableAutogain: false,
                             startMinimized: false,
@@ -173,6 +175,7 @@
                         mobileMode: false,
                         disableAutogain: false,
                         mods: "none",
+                        useLegacyCapturer: false,
                         startMinimized: false,
                         alternativePaste: false,
                         performanceMode: "none",

src/ipc.ts

@@ -118,6 +118,9 @@ export function registerIpc() {
     ipcMain.on("clientmod", async (event, arg) => {
         event.returnValue = await getConfig("mods");
     });
+    ipcMain.on("legacyCapturer", async (event, arg) => {
+        event.returnValue = await getConfig("useLegacyCapturer");
+    });
     ipcMain.on("trayIcon", async (event, arg) => {
         event.returnValue = await getConfig("trayIcon");
     });
@@ -143,4 +146,5 @@ export function registerIpc() {
             event.returnValue = false;
         }
     });
+    ipcMain.handle("DESKTOP_CAPTURER_GET_SOURCES", (event, opts) => desktopCapturer.getSources(opts));
 }

src/preload/bridge.ts

@@ -1,6 +1,40 @@
 import {contextBridge, ipcRenderer} from "electron";
 import {injectTitlebar} from "./titlebar";
-
+const CANCEL_ID = "desktop-capturer-selection__cancel";
+const desktopCapturer = {
+    getSources: (opts: any) => ipcRenderer.invoke("DESKTOP_CAPTURER_GET_SOURCES", opts)
+};
+interface IPCSources {
+    id: string;
+    name: string;
+    thumbnail: HTMLCanvasElement;
+}
+async function getDisplayMediaSelector() {
+    const sources: IPCSources[] = await desktopCapturer.getSources({
+        types: ["screen", "window"]
+    });
+    return `<div class="desktop-capturer-selection__scroller">
+  <ul class="desktop-capturer-selection__list">
+    ${sources
+        .map(
+            ({id, name, thumbnail}) => `
+      <li class="desktop-capturer-selection__item">
+        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
+          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
+          <span class="desktop-capturer-selection__name">${name}</span>
+        </button>
+      </li>
+    `
+        )
+        .join("")}
+    <li class="desktop-capturer-selection__item">
+      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
+        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
+      </button>
+    </li>
+  </ul>
+</div>`;
+}
 contextBridge.exposeInMainWorld("armcord", {
     window: {
         show: () => ipcRenderer.send("win-show"),
@@ -20,6 +54,7 @@ contextBridge.exposeInMainWorld("armcord", {
         ipcRenderer.invoke("getLang", toGet).then((result) => {
             return result;
         }),
+    getDisplayMediaSelector: getDisplayMediaSelector,
     version: ipcRenderer.sendSync("get-app-version", "app-version"),
     mods: ipcRenderer.sendSync("clientmod"),
     packageVersion: ipcRenderer.sendSync("get-package-version", "app-version"),

src/preload/capturer.ts

@@ -1,47 +1,11 @@
 //Fixed context isolation version https://github.com/getferdi/ferdi/blob/develop/src/webview/screenshare.ts
 //original https://github.com/electron/electron/issues/16513#issuecomment-602070250
-import {ipcRenderer} from "electron";
 import {addStyle, addScript} from "../utils";
 import fs from "fs";
 import path from "path";
-const desktopCapturer = {
-    getSources: (opts: any) => ipcRenderer.invoke("DESKTOP_CAPTURER_GET_SOURCES", opts)
-};
+
 const CANCEL_ID = "desktop-capturer-selection__cancel";
 
-interface IPCSources {
-    id: string;
-    name: string;
-    thumbnail: HTMLCanvasElement;
-}
-
-export async function getDisplayMediaSelector() {
-    const sources: IPCSources[] = await desktopCapturer.getSources({
-        types: ["screen", "window"]
-    });
-    return `<div class="desktop-capturer-selection__scroller">
-  <ul class="desktop-capturer-selection__list">
-    ${sources
-        .map(
-            ({id, name, thumbnail}) => `
-      <li class="desktop-capturer-selection__item">
-        <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
-          <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
-          <span class="desktop-capturer-selection__name">${name}</span>
-        </button>
-      </li>
-    `
-        )
-        .join("")}
-    <li class="desktop-capturer-selection__item">
-      <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
-        <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
-      </button>
-    </li>
-  </ul>
-</div>`;
-}
-
 const screenShareJS = `
 window.navigator.mediaDevices.getDisplayMedia = () => new Promise(async (resolve, reject) => {
   try {

src/preload/preload.ts

@@ -1,6 +1,5 @@
 import {ipcRenderer} from "electron";
 import "./bridge";
-//import "./capturer";
 import "./patch";
 import * as fs from "fs";
 import * as path from "path";
@@ -8,6 +7,10 @@ import {fixTitlebar, injectTitlebar} from "./titlebar";
 import {sleep, addStyle, addScript} from "../utils";
 import {injectMobileStuff} from "./mobile";
 window.localStorage.setItem("hideNag", "true");
+if (ipcRenderer.sendSync("legacyCapturer")) {
+    console.warn("Using legacy capturer module");
+    import("./capturer");
+}
 var version = ipcRenderer.sendSync("displayVersion");
 var channel = ipcRenderer.sendSync("channel");
 async function updateLang() {

src/settings/settings.html

@@ -191,6 +191,18 @@
                 <p data-string="settings-skipSplash-desc" class="description"></p>
             </div>
             <br />
+            <div>
+                <label class="header" data-string="settings-useLegacyCapturer"></label>
+                <input
+                    id="useLegacyCapturer"
+                    class="tgl tgl-light left"
+                    data-setting="useLegacyCapturer"
+                    type="checkbox"
+                />
+                <label class="tgl-btn left" for="useLegacyCapturer"></label>
+                <p data-string="settings-useLegacyCapturer-desc" class="description"></p>
+            </div>
+            <br />
             <button data-string="settings-pluginsFolder" data-open="Plugins" class="center"></button>
             <br />
             <button data-string="settings-themesFolder" data-open="Themes" class="center"></button>

src/utils.ts

@@ -51,6 +51,7 @@ export function setup() {
         inviteWebsocket: true,
         startMinimized: false,
         disableAutogain: false,
+        useLegacyCapturer: false,
         mobileMode: false,
         trayIcon: "default",
         doneSetup: false
@@ -244,6 +245,7 @@ export interface Settings {
     skipSplash: boolean;
     performanceMode: string;
     startMinimized: boolean;
+    useLegacyCapturer: boolean;
     inviteWebsocket: boolean;
     disableAutogain: boolean;
     trayIcon: string;

src/window.ts

@@ -130,7 +130,10 @@ async function doAfterDefiningTheWindow() {
         }
         return {action: "deny"};
     });
-    import("./screenshare/main");
+    if ((await getConfig("useLegacyCapturer")) == false) {
+        console.log("Starting screenshare module...");
+        import("./screenshare/main");
+    }
     mainWindow.webContents.session.webRequest.onBeforeRequest((details, callback) => {
         if (/api\/v\d\/science$/g.test(details.url)) return callback({cancel: true});
         return callback({});