Bump to v0.2.3

.vscode/settings.json

@@ -9,6 +9,12 @@
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
     "[json]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },

README.md

@@ -2,9 +2,14 @@
 
 Vencord Desktop is a cross platform desktop app aiming to give you a snappier Discord experience with Vencord pre-installed
 
-![image](https://user-images.githubusercontent.com/45497981/235024615-94565eaf-f412-4384-a3f5-d8cde7458f6d.png)
+Vencord Desktop is currently in beta
 
-Vencord Desktop is currently in beta. Bug reports, feature requests & contributions are highly appreciated!!
+**Not yet supported**:
+- Global Keybinds
+
+Bug reports, feature requests & contributions are highly appreciated!!
+
+![image](https://user-images.githubusercontent.com/45497981/235024615-94565eaf-f412-4384-a3f5-d8cde7458f6d.png)
 
 ## Installing
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "VencordDesktop",
-    "version": "0.2.0",
+    "version": "0.2.3",
     "private": true,
     "description": "",
     "keywords": [],
@@ -22,6 +22,9 @@
         "testTypes": "tsc --noEmit",
         "watch": "pnpm build --watch"
     },
+    "dependencies": {
+        "arrpc": "github:OpenAsar/arrpc#3eb5d36a5e9295d3aeafc49975df5d399eb627fd"
+    },
     "devDependencies": {
         "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
         "@types/node": "^18.15.11",
@@ -30,7 +33,7 @@
         "@typescript-eslint/parser": "^5.57.1",
         "@vencord/types": "^0.1.2",
         "dotenv": "^16.0.3",
-        "electron": "^23.2.0",
+        "electron": "^25.2.0",
         "electron-builder": "^23.6.0",
         "esbuild": "^0.17.14",
         "eslint": "^8.38.0",
@@ -80,6 +83,15 @@
             }
         },
         "mac": {
+            "target": [
+                {
+                    "target": "default",
+                    "arch": [
+                        "x64",
+                        "arm64"
+                    ]
+                }
+            ],
             "category": "Network"
         },
         "nsis": {

pnpm-lock.yaml

@@ -1,5 +1,10 @@
 lockfileVersion: '6.0'
 
+dependencies:
+  arrpc:
+    specifier: github:OpenAsar/arrpc#3eb5d36a5e9295d3aeafc49975df5d399eb627fd
+    version: github.com/OpenAsar/arrpc/3eb5d36a5e9295d3aeafc49975df5d399eb627fd
+
 devDependencies:
   '@fal-works/esbuild-plugin-global-externals':
     specifier: ^2.1.2
@@ -23,8 +28,8 @@ devDependencies:
     specifier: ^16.0.3
     version: 16.0.3
   electron:
-    specifier: ^23.2.0
-    version: 23.2.0
+    specifier: ^25.2.0
+    version: 25.2.0
   electron-builder:
     specifier: ^23.6.0
     version: 23.6.0
@@ -515,10 +520,6 @@ packages:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
     dev: true
 
-  /@types/node@16.18.22:
-    resolution: {integrity: sha512-LJSIirgASa1LicFGTUFwDY7BfKDtLIbijqDLkH47LxEo/jtdrtiZ4/kLPD99bEQhTcPcuh6KhDllHqRxygJD2w==}
-    dev: true
-
   /@types/node@18.15.11:
     resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
     dev: true
@@ -1508,14 +1509,14 @@ packages:
       - supports-color
     dev: true
 
-  /electron@23.2.0:
-    resolution: {integrity: sha512-De9e21cri0QYct/w6tTNOnKyCt9RVKUw5F8PEN4FPzGR9tr6IT53uyt42uH754uJWrZeLMCAdoXy6/0GmMmYZA==}
+  /electron@25.2.0:
+    resolution: {integrity: sha512-I/rhcW2sV2fyiveVSBr2N7v5ZiCtdGY0UiNCDZgk2fpSC+irQjbeh7JT2b4vWmJ2ogOXBjqesrN9XszTIG6DHg==}
     engines: {node: '>= 12.20.55'}
     hasBin: true
     requiresBuild: true
     dependencies:
       '@electron/get': 2.0.2
-      '@types/node': 16.18.22
+      '@types/node': 18.15.11
       extract-zip: 2.0.1
     transitivePeerDependencies:
       - supports-color
@@ -3785,6 +3786,19 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /ws@8.13.0:
+    resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
+    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
+    dev: false
+
   /xmlbuilder@15.1.1:
     resolution: {integrity: sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==}
     engines: {node: '>=8.0'}
@@ -3829,3 +3843,14 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+  github.com/OpenAsar/arrpc/3eb5d36a5e9295d3aeafc49975df5d399eb627fd:
+    resolution: {tarball: https://codeload.github.com/OpenAsar/arrpc/tar.gz/3eb5d36a5e9295d3aeafc49975df5d399eb627fd}
+    name: arrpc
+    version: 3.1.0
+    dependencies:
+      ws: 8.13.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false

src/main/arrpc.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import Server from "arrpc";
+import { send as sendToBridge } from "arrpc/src/bridge";
+
+import { Settings } from "./settings";
+
+let server: any;
+
+export async function initArRPC() {
+    if (server || !Settings.store.arRPC) return;
+
+    server = await new Server();
+    server.on("activity", sendToBridge);
+}
+
+Settings.addChangeListener("arRPC", initArRPC);

src/main/autoStart.ts

@@ -0,0 +1,49 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { app } from "electron";
+import { existsSync, mkdirSync, rmSync, writeFileSync } from "fs";
+import { join } from "path";
+
+interface AutoStart {
+    isEnabled(): boolean;
+    enable(): void;
+    disable(): void;
+}
+
+function makeAutoStartLinux(): AutoStart {
+    const configDir = process.env.XDG_CONFIG_HOME || join(process.env.HOME!, ".config");
+    const dir = join(configDir, "autostart");
+    const file = join(dir, "vencord.desktop");
+
+    return {
+        isEnabled: () => existsSync(file),
+        enable() {
+            const desktopFile = `
+[Desktop Entry]
+Type=Application
+Version=1.0
+Name=Vencord
+Comment=Vencord autostart script
+Exec=${process.execPath}
+Terminal=false
+StartupNotify=false
+`.trim();
+
+            mkdirSync(dir, { recursive: true });
+            writeFileSync(file, desktopFile);
+        },
+        disable: () => rmSync(file, { force: true })
+    };
+}
+
+const autoStartWindowsMac: AutoStart = {
+    isEnabled: () => app.getLoginItemSettings().openAtLogin,
+    enable: () => app.setLoginItemSettings({ openAtLogin: true }),
+    disable: () => app.setLoginItemSettings({ openAtLogin: false })
+};
+
+export const autoStart = process.platform === "linux" ? makeAutoStartLinux() : autoStartWindowsMac;

src/main/constants.ts

@@ -17,7 +17,7 @@ export const VENCORD_SETTINGS_FILE = join(VENCORD_SETTINGS_DIR, "settings.json")
 export const VENCORD_FILES_DIR =
     (require("./settings") as typeof import("./settings")).Settings.store.vencordDir || join(DATA_DIR, "vencordDist");
 
-export const USER_AGENT = `VencordDesktop/${app.getVersion()} (https://github.com/Vencord/Electron)`;
+export const USER_AGENT = `VencordDesktop/${app.getVersion()} (https://github.com/Vencord/Desktop)`;
 
 // dimensions shamelessly stolen from Discord Desktop :3
 export const MIN_WIDTH = 940;

src/main/firstLaunch.ts

@@ -0,0 +1,69 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { app } from "electron";
+import { BrowserWindow } from "electron/main";
+import { copyFileSync, mkdirSync, readdirSync } from "fs";
+import { join } from "path";
+import { SplashProps } from "shared/browserWinProperties";
+import { STATIC_DIR } from "shared/paths";
+
+import { autoStart } from "./autoStart";
+import { DATA_DIR } from "./constants";
+import { createWindows } from "./mainWindow";
+import { Settings } from "./settings";
+
+interface Data {
+    minimizeToTray: boolean;
+    discordBranch: "stable" | "canary" | "ptb";
+    autoStart: boolean;
+    importSettings: boolean;
+    richPresence: boolean;
+}
+
+export function createFirstLaunchTour() {
+    const win = new BrowserWindow({
+        ...SplashProps,
+        frame: true,
+        autoHideMenuBar: true,
+        height: 470,
+        width: 550
+    });
+
+    win.loadFile(join(STATIC_DIR, "first-launch.html"));
+    win.webContents.addListener("console-message", (_e, _l, msg) => {
+        if (msg === "cancel") return app.exit();
+
+        if (!msg.startsWith("form:")) return;
+        const data = JSON.parse(msg.slice(5)) as Data;
+
+        Settings.store.minimizeToTray = data.minimizeToTray;
+        Settings.store.discordBranch = data.discordBranch;
+        Settings.store.firstLaunch = false;
+        Settings.store.arRPC = data.richPresence;
+
+        if (data.autoStart) autoStart.enable();
+
+        if (data.importSettings) {
+            const from = join(app.getPath("userData"), "..", "Vencord", "settings");
+            const to = join(DATA_DIR, "settings");
+            try {
+                const files = readdirSync(from);
+                mkdirSync(to, { recursive: true });
+
+                for (const file of files) {
+                    copyFileSync(join(from, file), join(to, file));
+                }
+            } catch (e) {
+                console.error("Failed to import settings:", e);
+            }
+        }
+
+        win.close();
+
+        createWindows();
+    });
+}

src/main/index.ts

@@ -7,16 +7,14 @@
 import "./ipc";
 
 import { app, BrowserWindow } from "electron";
-import { join } from "path";
 import { checkUpdates } from "updater/main";
 
 import { ICON_PATH } from "../shared/paths";
-import { once } from "../shared/utils/once";
-import { DATA_DIR, VENCORD_FILES_DIR } from "./constants";
-import { createMainWindow } from "./mainWindow";
+import { DATA_DIR } from "./constants";
+import { createFirstLaunchTour } from "./firstLaunch";
+import { createWindows, mainWin } from "./mainWindow";
+import { registerScreenShareHandler } from "./screenShare";
 import { Settings } from "./settings";
-import { createSplashWindow } from "./splash";
-import { ensureVencordFiles } from "./utils/vencordLoader";
 
 if (IS_DEV) {
     require("source-map-support").install();
@@ -25,10 +23,6 @@ if (IS_DEV) {
 // Make the Vencord files use our DATA_DIR
 process.env.VENCORD_USER_DATA_DIR = DATA_DIR;
 
-const runVencordMain = once(() => require(join(VENCORD_FILES_DIR, "vencordDesktopMain.js")));
-
-let mainWin: BrowserWindow | null = null;
-
 function init() {
     // <-- BEGIN COPY PASTED FROM DISCORD -->
 
@@ -58,7 +52,8 @@ function init() {
         if (process.platform === "win32") app.setAppUserModelId("dev.vencord.desktop");
         else if (process.platform === "darwin") app.dock.setIcon(ICON_PATH);
 
-        createWindows();
+        registerScreenShareHandler();
+        bootstrap();
 
         app.on("activate", () => {
             if (BrowserWindow.getAllWindows().length === 0) createWindows();
@@ -78,22 +73,12 @@ if (!app.requestSingleInstanceLock({ IS_DEV })) {
     init();
 }
 
-async function createWindows() {
-    const splash = createSplashWindow();
-
-    await ensureVencordFiles();
-    runVencordMain();
-
-    mainWin = createMainWindow();
-
-    mainWin.once("ready-to-show", () => {
-        splash.destroy();
-        mainWin!.show();
-
-        if (Settings.store.maximized) {
-            mainWin!.maximize();
-        }
-    });
+async function bootstrap() {
+    if (!Object.hasOwn(Settings.store, "firstLaunch")) {
+        createFirstLaunchTour();
+    } else {
+        createWindows();
+    }
 }
 
 app.on("window-all-closed", () => {

src/main/ipc.ts

@@ -11,6 +11,7 @@ import { join } from "path";
 import { debounce } from "shared/utils/debounce";
 
 import { IpcEvents } from "../shared/IpcEvents";
+import { autoStart } from "./autoStart";
 import { VENCORD_FILES_DIR, VENCORD_QUICKCSS_FILE } from "./constants";
 import { mainWin } from "./mainWindow";
 import { Settings } from "./settings";
@@ -39,6 +40,12 @@ ipcMain.on(IpcEvents.GET_VERSION, e => {
     e.returnValue = app.getVersion();
 });
 
+ipcMain.on(IpcEvents.AUTOSTART_ENABLED, e => {
+    e.returnValue = autoStart.isEnabled();
+});
+ipcMain.handle(IpcEvents.ENABLE_AUTOSTART, autoStart.enable);
+ipcMain.handle(IpcEvents.DISABLE_AUTOSTART, autoStart.disable);
+
 ipcMain.handle(IpcEvents.SET_SETTINGS, (_, settings: typeof Settings.store, path?: string) => {
     Settings.setData(settings, path);
 });

src/main/mainWindow.ts

@@ -6,13 +6,16 @@
 
 import { app, BrowserWindow, BrowserWindowConstructorOptions, Menu, Tray } from "electron";
 import { join } from "path";
+import { once } from "shared/utils/once";
 
 import { ICON_PATH } from "../shared/paths";
 import { createAboutWindow } from "./about";
-import { DEFAULT_HEIGHT, DEFAULT_WIDTH, MIN_HEIGHT, MIN_WIDTH } from "./constants";
+import { initArRPC } from "./arrpc";
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH, MIN_HEIGHT, MIN_WIDTH, VENCORD_FILES_DIR } from "./constants";
 import { Settings, VencordSettings } from "./settings";
+import { createSplashWindow } from "./splash";
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
-import { downloadVencordFiles } from "./utils/vencordLoader";
+import { downloadVencordFiles, ensureVencordFiles } from "./utils/vencordLoader";
 
 let isQuitting = false;
 let tray: Tray;
@@ -213,7 +216,7 @@ function initSettingsListeners(win: BrowserWindow) {
     });
 }
 
-export function createMainWindow() {
+function createMainWindow() {
     const win = (mainWin = new BrowserWindow({
         show: false,
         autoHideMenuBar: true,
@@ -254,7 +257,7 @@ export function createMainWindow() {
     initSettingsListeners(win);
 
     win.webContents.setUserAgent(
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36"
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36"
     );
 
     const subdomain =
@@ -266,3 +269,25 @@ export function createMainWindow() {
 
     return win;
 }
+
+const runVencordMain = once(() => require(join(VENCORD_FILES_DIR, "vencordDesktopMain.js")));
+
+export async function createWindows() {
+    const splash = createSplashWindow();
+
+    await ensureVencordFiles();
+    runVencordMain();
+
+    mainWin = createMainWindow();
+
+    mainWin.once("ready-to-show", () => {
+        splash.destroy();
+        mainWin!.show();
+
+        if (Settings.store.maximized) {
+            mainWin!.maximize();
+        }
+    });
+
+    initArRPC();
+}

src/main/screenShare.ts

@@ -0,0 +1,55 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { desktopCapturer, ipcMain, session, Streams } from "electron";
+import type { StreamPick } from "renderer/components/ScreenSharePicker";
+import { IpcEvents } from "shared/IpcEvents";
+
+export function registerScreenShareHandler() {
+    ipcMain.handle(IpcEvents.CAPTURER_GET_LARGE_THUMBNAIL, async (_, id: string) => {
+        const sources = await desktopCapturer.getSources({
+            types: ["window", "screen"],
+            thumbnailSize: {
+                width: 1920,
+                height: 1080
+            }
+        });
+        return sources.find(s => s.id === id)?.thumbnail.toDataURL();
+    });
+
+    session.defaultSession.setDisplayMediaRequestHandler(async (request, callback) => {
+        const sources = await desktopCapturer.getSources({
+            types: ["window", "screen"],
+            thumbnailSize: {
+                width: 176,
+                height: 99
+            }
+        });
+
+        const data = sources.map(({ id, name, thumbnail }) => ({
+            id,
+            name,
+            url: thumbnail.toDataURL()
+        }));
+
+        const choice = await request.frame
+            .executeJavaScript(`VencordDesktop.Components.ScreenShare.openScreenSharePicker(${JSON.stringify(data)})`)
+            .then(e => e as StreamPick)
+            .catch(() => null);
+
+        if (!choice) return callback({});
+
+        const source = sources.find(s => s.id === choice.id);
+        if (!source) return callback({});
+
+        const streams: Streams = {
+            video: source
+        };
+        if (choice.audio && process.platform === "win32") streams.audio = "loopback";
+
+        callback(streams);
+    });
+}

src/main/settings.ts

@@ -4,8 +4,8 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
-import { readFileSync, writeFileSync } from "fs";
-import { join } from "path";
+import { mkdirSync, readFileSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
 import type { Settings as TSettings } from "shared/settings";
 import { SettingsStore } from "shared/utils/SettingsStore";
 
@@ -25,7 +25,10 @@ function loadSettings<T extends object = any>(file: string, name: string) {
     } catch {}
 
     const store = new SettingsStore(settings);
-    store.addGlobalChangeListener(o => writeFileSync(file, JSON.stringify(o, null, 4)));
+    store.addGlobalChangeListener(o => {
+        mkdirSync(dirname(file), { recursive: true });
+        writeFileSync(file, JSON.stringify(o, null, 4));
+    });
 
     return store;
 }

src/preload/VencordDesktopNative.ts

@@ -15,6 +15,11 @@ export const VencordDesktopNative = {
         relaunch: () => invoke<void>(IpcEvents.RELAUNCH),
         getVersion: () => sendSync<void>(IpcEvents.GET_VERSION)
     },
+    autostart: {
+        isEnabled: () => sendSync<boolean>(IpcEvents.AUTOSTART_ENABLED),
+        enable: () => invoke<void>(IpcEvents.ENABLE_AUTOSTART),
+        disable: () => invoke<void>(IpcEvents.DISABLE_AUTOSTART)
+    },
     fileManager: {
         showItemInFolder: (path: string) => invoke<void>(IpcEvents.SHOW_ITEM_IN_FOLDER, path),
         selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR)
@@ -29,5 +34,8 @@ export const VencordDesktopNative = {
     },
     win: {
         focus: () => invoke<void>(IpcEvents.FOCUS)
+    },
+    capturer: {
+        getLargeThumbnail: (id: string) => invoke<string>(IpcEvents.CAPTURER_GET_LARGE_THUMBNAIL, id)
     }
 };

src/renderer/components/ScreenSharePicker.tsx

@@ -0,0 +1,225 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vencord Desktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import "./screenSharePicker.css";
+
+import { classes, closeModal, Margins, Modals, openModal, useAwaiter } from "@vencord/types/utils";
+import { findByPropsLazy } from "@vencord/types/webpack";
+import { Button, Card, Forms, Switch, Text, useState } from "@vencord/types/webpack/common";
+import type { Dispatch, SetStateAction } from "react";
+import { isWindows } from "renderer/utils";
+
+const StreamResolutions = ["720", "1080", "1440", "Source"] as const;
+const StreamFps = ["15", "30", "60"] as const;
+
+const WarningIconClasses = findByPropsLazy("warning", "error", "container");
+
+export type StreamResolution = (typeof StreamResolutions)[number];
+export type StreamFps = (typeof StreamFps)[number];
+
+interface StreamSettings {
+    resolution: StreamResolution;
+    fps: StreamFps;
+    audio: boolean;
+}
+
+export interface StreamPick extends StreamSettings {
+    id: string;
+}
+
+interface Source {
+    id: string;
+    name: string;
+    url: string;
+}
+
+export function openScreenSharePicker(screens: Source[]) {
+    return new Promise<StreamPick>((resolve, reject) => {
+        const key = openModal(
+            props => (
+                <ModalComponent
+                    screens={screens}
+                    modalProps={props}
+                    submit={resolve}
+                    close={() => {
+                        props.onClose();
+                        reject("Aborted");
+                    }}
+                />
+            ),
+            {
+                onCloseRequest() {
+                    closeModal(key);
+                    reject("Aborted");
+                }
+            }
+        );
+    });
+}
+
+function ScreenPicker({ screens, chooseScreen }: { screens: Source[]; chooseScreen: (id: string) => void }) {
+    return (
+        <div className="vcd-screen-picker-grid">
+            {screens.map(({ id, name, url }) => (
+                <label key={id}>
+                    <input type="radio" name="screen" value={id} onChange={() => chooseScreen(id)} />
+
+                    <img src={url} alt="" />
+                    <Text variant="text-sm/normal">{name}</Text>
+                </label>
+            ))}
+        </div>
+    );
+}
+
+function StreamSettings({
+    source,
+    settings,
+    setSettings
+}: {
+    source: Source;
+    settings: StreamSettings;
+    setSettings: Dispatch<SetStateAction<StreamSettings>>;
+}) {
+    const [thumb] = useAwaiter(() => VencordDesktopNative.capturer.getLargeThumbnail(source.id), {
+        fallbackValue: source.url,
+        deps: [source.id]
+    });
+
+    return (
+        <div>
+            <Forms.FormTitle>What you're streaming</Forms.FormTitle>
+            <Card className="vcd-screen-picker-card vcd-screen-picker-preview">
+                <img src={thumb} alt="" />
+                <Text variant="text-sm/normal">{source.name}</Text>
+            </Card>
+
+            <Forms.FormTitle>Stream Settings</Forms.FormTitle>
+
+            <Card className="vcd-screen-picker-card">
+                <Card className={classes(WarningIconClasses.container, WarningIconClasses.warning, Margins.bottom8)}>
+                    <Forms.FormText>
+                        Resolution and Frame Rate aren't implemented for now. Locked to 720p 30fps
+                    </Forms.FormText>
+                </Card>
+
+                <div className="vcd-screen-picker-quality">
+                    <section>
+                        <Forms.FormTitle>Resolution</Forms.FormTitle>
+                        <div className="vcd-screen-picker-radios">
+                            {StreamResolutions.map(res => (
+                                <label className="vcd-screen-picker-radio" data-checked={settings.resolution === res}>
+                                    <Text variant="text-sm/bold">{res}</Text>
+                                    <input
+                                        type="radio"
+                                        name="resolution"
+                                        value={res}
+                                        checked={settings.resolution === res}
+                                        onChange={() => setSettings(s => ({ ...s, resolution: res }))}
+                                    />
+                                </label>
+                            ))}
+                        </div>
+                    </section>
+
+                    <section>
+                        <Forms.FormTitle>Frame Rate</Forms.FormTitle>
+                        <div className="vcd-screen-picker-radios">
+                            {StreamFps.map(fps => (
+                                <label className="vcd-screen-picker-radio" data-checked={settings.fps === fps}>
+                                    <Text variant="text-sm/bold">{fps}</Text>
+                                    <input
+                                        type="radio"
+                                        name="fps"
+                                        value={fps}
+                                        checked={settings.fps === fps}
+                                        onChange={() => setSettings(s => ({ ...s, fps }))}
+                                    />
+                                </label>
+                            ))}
+                        </div>
+                    </section>
+                </div>
+
+                {isWindows && (
+                    <Switch
+                        value={settings.audio}
+                        onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
+                        hideBorder
+                        className="vcd-screen-picker-audio"
+                    >
+                        Stream With Audio
+                    </Switch>
+                )}
+            </Card>
+        </div>
+    );
+}
+
+function ModalComponent({
+    screens,
+    modalProps,
+    submit,
+    close
+}: {
+    screens: Source[];
+    modalProps: any;
+    submit: (data: StreamPick) => void;
+    close: () => void;
+}) {
+    const [selected, setSelected] = useState<string>();
+    const [settings, setSettings] = useState<StreamSettings>({
+        resolution: "1080",
+        fps: "60",
+        audio: true
+    });
+
+    return (
+        <Modals.ModalRoot {...modalProps}>
+            <Modals.ModalHeader className="vcd-screen-picker-header">
+                <Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
+                <Modals.ModalCloseButton onClick={close} />
+            </Modals.ModalHeader>
+
+            <Modals.ModalContent className="vcd-screen-picker-modal">
+                {!selected ? (
+                    <ScreenPicker screens={screens} chooseScreen={setSelected} />
+                ) : (
+                    <StreamSettings
+                        source={screens.find(s => s.id === selected)!}
+                        settings={settings}
+                        setSettings={setSettings}
+                    />
+                )}
+            </Modals.ModalContent>
+
+            <Modals.ModalFooter className="vcd-screen-picker-footer">
+                <Button
+                    disabled={!selected}
+                    onClick={() => {
+                        submit({
+                            id: selected!,
+                            ...settings
+                        });
+                        close();
+                    }}
+                >
+                    Go Live
+                </Button>
+
+                {selected ? (
+                    <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
+                        Back
+                    </Button>
+                ) : (
+                    <Button color={Button.Colors.TRANSPARENT} onClick={close}>
+                        Cancel
+                    </Button>
+                )}
+            </Modals.ModalFooter>
+        </Modals.ModalRoot>
+    );
+}

src/renderer/components/Settings.tsx

@@ -7,12 +7,15 @@
 import "./settings.css";
 
 import { Margins } from "@vencord/types/utils";
-import { Button, Forms, Select, Switch, Text } from "@vencord/types/webpack/common";
+import { Button, Forms, Select, Switch, Text, useState } from "@vencord/types/webpack/common";
 import { useSettings } from "renderer/settings";
 
 export default function SettingsUi() {
     const Settings = useSettings();
 
+    const { autostart } = VencordDesktopNative;
+    const [autoStartEnabled, setAutoStartEnabled] = useState(autostart.isEnabled());
+
     const switches: [keyof typeof Settings, string, string, boolean?, (() => boolean)?][] = [
         ["tray", "Tray Icon", "Add a tray icon for Vencord Desktop", true],
         [
@@ -22,6 +25,7 @@ export default function SettingsUi() {
             true,
             () => Settings.tray ?? true
         ],
+        ["arRPC", "Rich Presence", "Enables Rich Presence via arRPC", false],
         [
             "disableMinSize",
             "Disable minimum window size",
@@ -57,6 +61,17 @@ export default function SettingsUi() {
 
             <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
 
+            <Switch
+                value={autoStartEnabled}
+                onChange={async v => {
+                    await autostart[v ? "enable" : "disable"]();
+                    setAutoStartEnabled(v);
+                }}
+                note="Automatically start Vencord Desktop on computer start-up"
+            >
+                Start With System
+            </Switch>
+
             {switches.map(([key, text, note, def, predicate]) => (
                 <Switch
                     value={(Settings[key as any] ?? def ?? false) && predicate?.() !== false}

src/renderer/components/index.ts

@@ -4,4 +4,5 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
+export * as ScreenShare from "./ScreenSharePicker";
 export { default as Settings } from "./Settings";

src/renderer/components/screenSharePicker.css

@@ -0,0 +1,126 @@
+.vcd-screen-picker-modal {
+    padding: 1em;
+}
+
+.vcd-screen-picker-header h1 {
+    margin: 0;
+}
+
+.vcd-screen-picker-footer {
+    display: flex;
+    gap: 1em;
+}
+
+.vcd-screen-picker-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2em 1em;
+}
+
+.vcd-screen-picker-grid input {
+    appearance: none;
+    cursor: pointer;
+}
+
+.vcd-screen-picker-selected img {
+    border: 2px solid var(--brand-experiment);
+    border-radius: 3px;
+}
+
+.vcd-screen-picker-grid label {
+    overflow: hidden;
+    padding: 4px 0px;
+    cursor: pointer;
+}
+
+.vcd-screen-picker-grid label:hover {
+    outline: 2px solid var(--brand-experiment);
+}
+
+
+.vcd-screen-picker-grid div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: center;
+    font-weight: 600;
+    margin-inline: 0.5em;
+}
+
+.vcd-screen-picker-card {
+    padding: 0.5em;
+    box-sizing: border-box;
+}
+
+.vcd-screen-picker-preview img {
+    width: 100%;
+    margin-bottom: 0.5em;
+}
+
+.vcd-screen-picker-preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.vcd-screen-picker-radio input {
+    display: none;
+}
+
+.vcd-screen-picker-radio {
+    background-color: var(--background-secondary);
+    border: 1px solid var(--primary-800);
+    padding: 0.3em;
+    cursor: pointer;
+}
+
+.vcd-screen-picker-radio h2 {
+    margin: 0;
+}
+
+.vcd-screen-picker-radio[data-checked="true"] {
+    background-color: var(--brand-experiment);
+    border-color: var(--brand-experiment);
+}
+
+.vcd-screen-picker-radio[data-checked="true"] h2 {
+    color: var(--interactive-active);
+}
+
+.vcd-screen-picker-quality {
+    display: flex;
+    gap: 1em;
+
+    margin-bottom: 0.5em;
+
+    opacity: 0.3;
+}
+
+.vcd-screen-picker-quality section {
+    flex: 1 1 auto;
+}
+
+.vcd-screen-picker-radios {
+    display: flex;
+    width: 100%;
+    border-radius: 3px;
+}
+
+.vcd-screen-picker-radios label {
+    flex: 1 1 auto;
+    text-align: center;
+}
+
+.vcd-screen-picker-radios label:first-child {
+    border-radius: 3px 0 0 3px;
+}
+
+.vcd-screen-picker-radios label:last-child {
+    border-radius: 0 3px 3px 0;
+}
+
+.vcd-screen-picker-audio {
+    margin-bottom: 0;
+}

src/renderer/index.ts

@@ -9,4 +9,17 @@ import "./fixes";
 console.log("read if cute :3");
 
 export * as Components from "./components";
-export { Settings } from "./settings";
+import { Settings } from "./settings";
+export { Settings };
+
+const arRPC = Vencord.Plugins.plugins["WebRichPresence (arRPC)"];
+
+arRPC.required = !!Settings.store.arRPC;
+
+Settings.addChangeListener("arRPC", v => {
+    arRPC.required = !!v;
+    if (v && !arRPC.started) Vencord.Plugins.startPlugin(arRPC);
+    else if (arRPC.started) {
+        Vencord.Plugins.stopPlugin(arRPC);
+    }
+});

src/renderer/utils.ts

@@ -12,3 +12,7 @@ export const isFirstRun = (() => {
     localStorage.setItem(key, "false");
     return true;
 })();
+
+const { platform } = navigator;
+
+export const isWindows = platform.startsWith("Win");

src/shared/IpcEvents.ts

@@ -10,11 +10,12 @@ export const enum IpcEvents {
     GET_RENDERER_SCRIPT = "VCD_GET_RENDERER_SCRIPT",
     GET_RENDERER_CSS_FILE = "VCD_GET_RENDERER_CSS_FILE",
 
-    RELAUNCH = "VCD_RELAUNCH",
-    FOCUS = "VCD_FOCUS",
-
     GET_VERSION = "VCD_GET_VERSION",
 
+    RELAUNCH = "VCD_RELAUNCH",
+    CLOSE = "VCD_CLOSE",
+    FOCUS = "VCD_FOCUS",
+
     SHOW_ITEM_IN_FOLDER = "VCD_SHOW_ITEM_IN_FOLDER",
     GET_SETTINGS = "VCD_GET_SETTINGS",
     SET_SETTINGS = "VCD_SET_SETTINGS",
@@ -27,5 +28,9 @@ export const enum IpcEvents {
 
     SPELLCHECK_SET_LANGUAGES = "VCD_SPELLCHECK_SET_LANGUAGES",
 
-    CLOSE = "VCD_CLOSE"
+    CAPTURER_GET_LARGE_THUMBNAIL = "VCD_CAPTURER_GET_LARGE_THUMBNAIL",
+
+    AUTOSTART_ENABLED = "VCD_AUTOSTART_ENABLED",
+    ENABLE_AUTOSTART = "VCD_ENABLE_AUTOSTART",
+    DISABLE_AUTOSTART = "VCD_DISABLE_AUTOSTART"
 }

src/shared/settings.d.ts

@@ -18,4 +18,7 @@ export interface Settings {
     minimizeToTray?: boolean;
     skippedUpdate?: string;
     staticTitle?: boolean;
+    arRPC?: boolean;
+
+    firstLaunch?: boolean;
 }

src/updater/main.ts

@@ -22,11 +22,18 @@ let updateData: UpdateData;
 
 ipcMain.handle(IpcEvents.UPDATER_GET_DATA, () => updateData);
 ipcMain.handle(IpcEvents.UPDATER_DOWNLOAD, () => {
+    const portable = !!process.env.PORTABLE_EXECUTABLE_FILE;
+
     const { assets } = updateData.release;
     const url = (() => {
         switch (process.platform) {
             case "win32":
-                return assets.find(a => a.name.endsWith(".exe"))!.browser_download_url;
+                return assets.find(a => {
+                    if (!a.name.endsWith(".exe")) return false;
+
+                    const isSetup = a.name.includes("Setup");
+                    return portable ? !isSetup : isSetup;
+                })!.browser_download_url;
             case "darwin":
                 return assets.find(a => a.name.endsWith(".dmg"))!.browser_download_url;
             case "linux":

static/about.html

@@ -19,16 +19,44 @@
         Vencord pre-installed
     </p>
 
-    <h2>Links</h2>
-    <ul>
-        <li>
-            <a href="https://vencord.dev">Vencord Website</a>
-        </li>
-        <li>
-            <a href="https://github.com/Vencord/Desktop" target="_blank">Source Code</a>
-        </li>
-        <li>
-            <a href="https://github.com/Vencord/Desktop/issues" target="_blank">Report bugs / Request features</a>
-        </li>
-    </ul>
+    <section>
+        <h2>Links</h2>
+        <ul>
+            <li>
+                <a href="https://vencord.dev" target="_blank">Vencord Website</a>
+            </li>
+            <li>
+                <a href="https://github.com/Vencord/Desktop" target="_blank">Source Code</a>
+            </li>
+            <li>
+                <a href="https://github.com/Vencord/Desktop/issues" target="_blank">Report bugs / Request features</a>
+            </li>
+        </ul>
+    </section>
+
+    <section>
+        <h2>Acknowledgements</h2>
+        <p>These awesome libraries empower Vencord Desktop</p>
+        <ul>
+            <li>
+                <a href="https://github.com/electron/electron" target="_blank">Electron</a>
+                - Build cross-platform desktop apps with JavaScript, HTML, and CSS
+            </li>
+            <li>
+                <a href="https://github.com/electron-userland/electron-builder" target="_blank">Electron Builder</a>
+                - A complete solution to package and build a ready for distribution Electron app with “auto update”
+                support out of the box
+            </li>
+            <li>
+                <a href="https://github.com/OpenAsar/arrpc" target="_blank">arrpc</a>
+                - An open implementation of Discord's Rich Presence server
+            </li>
+            <li>
+                And many
+                <a href="https://github.com/Vencord/Desktop/blob/main/pnpm-lock.yaml" target="_blank"
+                    >more awesome open source libraries</a
+                >
+            </li>
+        </ul>
+    </section>
 </body>

static/first-launch.html

@@ -0,0 +1,194 @@
+<head>
+    <style>
+        :root {
+            --bg: white;
+            --fg: black;
+            --fg-secondary: #313338;
+            --fg-semi-trans: rgb(0 0 0 / 0.2);
+            --link: #006ce7;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg: hsl(223 6.7% 20.6%);
+                --fg: white;
+                --fg-secondary: #b5bac1;
+                --fg-semi-trans: rgb(255 255 255 / 0.2);
+                --link: #00a8fc;
+            }
+        }
+
+        body {
+            height: 100vh;
+
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+                "Open Sans", "Helvetica Neue", sans-serif;
+            margin: 0;
+            padding: 1.5em;
+            padding-bottom: 1em;
+
+            border: 1px solid var(--fg-semi-trans);
+            border-top: none;
+            display: flex;
+            flex-direction: column;
+            box-sizing: border-box;
+        }
+
+        body,
+        select {
+            background: var(--bg);
+            color: var(--fg);
+        }
+
+        select {
+            padding: 0.3em;
+            margin: -0.3em;
+            border-radius: 6px;
+        }
+
+        h1 {
+            margin: 0.4em 0 0;
+        }
+
+        p {
+            margin: 1em 0 2em;
+        }
+
+        a {
+            color: var(--link);
+        }
+
+        form {
+            display: grid;
+            gap: 1em;
+            margin: 0;
+        }
+
+        label {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        label:has(input[type="checkbox"]),
+        select {
+            cursor: pointer;
+        }
+
+        label:not(:last-child)::after {
+            content: "";
+            position: absolute;
+            bottom: -10px;
+            width: 100%;
+            height: 1px;
+            background-color: var(--fg-secondary);
+            opacity: 0.5;
+        }
+
+        label div {
+            display: grid;
+            gap: 0.2em;
+        }
+
+        label h2 {
+            margin: 0;
+            font-weight: normal;
+            font-size: 1.1rem;
+            line-height: 1rem;
+        }
+
+        label span {
+            font-size: 0.9rem;
+            font-weight: 400;
+            color: var(--fg-secondary);
+        }
+
+        #buttons {
+            display: flex;
+            justify-content: end;
+            gap: 0.5em;
+            margin-top: auto;
+        }
+
+        button {
+            padding: 0.6em;
+            background: red;
+            color: white;
+            border-radius: 6px;
+            border: none;
+            cursor: pointer;
+            transition: 200ms filter;
+        }
+
+        button:hover {
+            filter: brightness(0.8);
+        }
+
+        #submit {
+            background: green;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Welcome to Vencord Desktop</h1>
+    <p>Let's customise your experience!</p>
+
+    <form>
+        <label>
+            <h2>Discord Branch</h2>
+            <select name="discordBranch">
+                <option value="stable">stable</option>
+                <option value="canary">canary</option>
+                <option value="ptb">ptb</option>
+            </select>
+        </label>
+
+        <label>
+            <div>
+                <h2>Start with System</h2>
+                <span>Automatically open Vencord Desktop when your computer starts</span>
+            </div>
+            <input type="checkbox" name="autoStart" />
+        </label>
+
+        <label>
+            <div>
+                <h2>Rich Presence</h2>
+                <span>Enable Rich presence (game activity) via arRPC</span>
+            </div>
+            <input type="checkbox" name="richPresence" checked />
+        </label>
+
+        <label>
+            <div>
+                <h2>Import Settings</h2>
+                <span>Import Settings from existing Vencord install (if found)</span>
+            </div>
+            <input type="checkbox" name="importSettings" checked />
+        </label>
+
+        <label>
+            <div>
+                <h2>Minimise to Tray</h2>
+                <span>Minimise to Tray when closing</span>
+            </div>
+            <input type="checkbox" name="minimizeToTray" checked />
+        </label>
+    </form>
+    <div id="buttons">
+        <button id="cancel">Quit</button>
+        <button id="submit">Submit</button>
+    </div>
+</body>
+
+<script>
+    cancel.onclick = () => console.info("cancel");
+    submit.onclick = e => {
+        const form = document.querySelector("form");
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries());
+        console.info("form:" + JSON.stringify(data));
+        e.preventDefault();
+    };
+</script>