Rewrite capturer

src/ipc.ts

@@ -143,5 +143,4 @@ export function registerIpc() {
             event.returnValue = false;
         }
     });
-    ipcMain.handle("DESKTOP_CAPTURER_GET_SOURCES", (event, opts) => desktopCapturer.getSources(opts));
 }

src/preload/bridge.ts

@@ -1,5 +1,4 @@
 import {contextBridge, ipcRenderer} from "electron";
-import {getDisplayMediaSelector} from "./capturer";
 import {injectTitlebar} from "./titlebar";
 
 contextBridge.exposeInMainWorld("armcord", {
@@ -24,7 +23,6 @@ contextBridge.exposeInMainWorld("armcord", {
     version: ipcRenderer.sendSync("get-app-version", "app-version"),
     mods: ipcRenderer.sendSync("clientmod"),
     packageVersion: ipcRenderer.sendSync("get-package-version", "app-version"),
-    getDisplayMediaSelector: getDisplayMediaSelector,
     splashEnd: () => ipcRenderer.send("splashEnd"),
     openSettingsWindow: () => ipcRenderer.send("openSettingsWindow")
 });

src/preload/preload.ts

@@ -1,6 +1,6 @@
 import {ipcRenderer} from "electron";
 import "./bridge";
-import "./capturer";
+//import "./capturer";
 import "./patch";
 import * as fs from "fs";
 import * as path from "path";

src/preload/titlebar.ts

@@ -54,54 +54,7 @@ export function injectTitlebar() {
         });
     });
 }
-export function injectHummusTitlebar() {
-    document.addEventListener("DOMContentLoaded", function (event) {
-        var elem = document.createElement("div");
-        elem.innerHTML = `
-        <button class="win-minimize" id="minimize"></button><button class="win-maximize" id="maximize"></button><button class="win-close" id="quit"></button>
-        `;
-        elem.classList.add("win-buttons");
-        elem.classList.add("win-buttons-light");
-        document.getElementsByClassName("titlebar")[0].appendChild(elem);
-        document.body.setAttribute("customTitlebar", "");
-        document.body.setAttribute("hummus", "");
-        document.body.setAttribute("armcord-platform", os.platform());
-        addStyle(`
-        html, body {
-            background-color: #1e2124;
-        }
-        
-        .friends-header,
-        .chat > .title-wrap {
-            float: right !important;
-            padding-right: 140px !important;
-        }`);
-        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");
-                document.body.removeAttribute("isMaximized");
-            } else if (ipcRenderer.sendSync("win-isNormal") == true) {
-                ipcRenderer.send("win-maximize");
-            }
-        });
-
-        quit!.addEventListener("click", () => {
-            if (ipcRenderer.sendSync("minimizeToTray") === true) {
-                ipcRenderer.send("win-hide");
-            } else if (ipcRenderer.sendSync("minimizeToTray") === false) {
-                ipcRenderer.send("win-quit");
-            }
-        });
-    });
-}
 export function fixTitlebar() {
     var elem = document.createElement("div");
     elem.innerHTML = `<nav class="titlebar">

src/screenshare/main.ts

@@ -0,0 +1,37 @@
+import {BrowserWindow, desktopCapturer, ipcMain, session, shell} from "electron";
+import path from "path";
+import {iconPath} from "../main";
+var capturerWindow: BrowserWindow;
+session.defaultSession.setDisplayMediaRequestHandler(async (request, callback) => {
+    const sources = await desktopCapturer.getSources({
+        types: ["screen", "window"]
+    });
+    console.log(sources);
+    capturerWindow = new BrowserWindow({
+        width: 800,
+        height: 600,
+        title: "ArmCord Screenshare",
+        darkTheme: true,
+        icon: iconPath,
+        frame: true,
+        autoHideMenuBar: true,
+        webPreferences: {
+            sandbox: false,
+            spellcheck: false,
+            preload: path.join(__dirname, "preload.js")
+        }
+    });
+    ipcMain.on("selectScreenshareSource", (event, id, name) => {
+        console.log(sources[id]);
+        console.log(id);
+        callback({video: {id, name}});
+
+        capturerWindow.close();
+    });
+    capturerWindow.webContents.setWindowOpenHandler(({url}) => {
+        shell.openExternal(url);
+        return {action: "deny"};
+    });
+    capturerWindow.loadURL(`file://${__dirname}/picker.html`);
+    capturerWindow.webContents.send("getSources", sources);
+});

src/screenshare/picker.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>ArmCord Screenshare</title>
+        <style>
+            @import url("../content/css/screenshare.css");
+        </style>
+    </head>
+    <body></body>
+</html>

src/screenshare/preload.ts

@@ -0,0 +1,55 @@
+import {IpcMain, ipcRenderer} from "electron";
+interface IPCSources {
+    id: string;
+    name: string;
+    thumbnail: HTMLCanvasElement;
+}
+async function addDisplays() {
+    ipcRenderer.on("getSources", (event, arg) => {
+        var sources: IPCSources[] = arg;
+        console.log(sources);
+        const selectionElem = document.createElement("div");
+        //@ts-ignore
+        selectionElem.classList = ["desktop-capturer-selection"];
+        selectionElem.innerHTML = `<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="screen-cancel" title="Cancel">
+          <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
+        </button>
+      </li>
+    </ul>
+    </div>`;
+        document.body.appendChild(selectionElem);
+        document.querySelectorAll(".desktop-capturer-selection__btn").forEach((button) => {
+            button.addEventListener("click", async () => {
+                try {
+                    const id = button.getAttribute("data-id");
+                    const title = button.getAttribute("title");
+                    if (id === "${CANCEL_ID}") {
+                        new Error("Cancelled by user");
+                    } else {
+                        ipcRenderer.sendSync("selectScreenshareSource", id, title);
+                    }
+                } catch (err) {
+                    console.error(err);
+                } finally {
+                    ipcRenderer.sendSync("closeScreenshareWindow");
+                }
+            });
+        });
+    });
+}
+addDisplays();

src/window.ts

@@ -130,6 +130,7 @@ async function doAfterDefiningTheWindow() {
         }
         return {action: "deny"};
     });
+    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({});