Add zoom slider, match official client zoom

src/main/ipc.ts

@@ -93,6 +93,10 @@ handle(IpcEvents.MAXIMIZE, e => {
     }
 });
 
+handle(IpcEvents.SET_ZOOM, (e, zoom: number) => {
+    mainWin.webContents.setZoomFactor(zoom);
+});
+
 handle(IpcEvents.SPELLCHECK_SET_LANGUAGES, (_, languages: string[]) => {
     const ses = session.defaultSession;
 

src/main/mainWindow.ts

@@ -9,6 +9,7 @@ import {
     BrowserWindow,
     BrowserWindowConstructorOptions,
     dialog,
+    globalShortcut,
     Menu,
     MenuItemConstructorOptions,
     nativeTheme,
@@ -234,14 +235,14 @@ function initMenuBar(win: BrowserWindow) {
             click() {
                 app.quit();
             }
-        },
-        // See https://github.com/electron/electron/issues/14742 and https://github.com/electron/electron/issues/5256
-        {
-            label: "Zoom in (hidden, hack for Qwertz and others)",
-            accelerator: "CmdOrCtrl+=",
-            role: "zoomIn",
-            visible: false
         }
+        // See https://github.com/electron/electron/issues/14742 and https://github.com/electron/electron/issues/5256
+        // {
+        //     label: "Zoom in (hidden, hack for Qwertz and others)",
+        //     accelerator: "CmdOrCtrl+=",
+        //     role: "zoomIn",
+        //     visible: false
+        // }
     ] satisfies MenuItemList;
 
     const menu = Menu.buildFromTemplate([
@@ -448,6 +449,36 @@ function createMainWindow() {
 
 const runVencordMain = once(() => require(join(VENCORD_FILES_DIR, "vencordDesktopMain.js")));
 
+const allowedZoomFactors = [0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
+
+function handleZoomIn() {
+    const zoomFactor = Settings.store.zoomFactor ?? 1;
+    const currentIndex = allowedZoomFactors.indexOf(zoomFactor);
+    if (currentIndex < allowedZoomFactors.length - 1) {
+        const newZoomFactor = allowedZoomFactors[currentIndex + 1];
+        Settings.setData({ zoomFactor: newZoomFactor });
+        mainWin.webContents.setZoomFactor(newZoomFactor);
+        mainWin.webContents.send("zoomChanged", newZoomFactor);
+    }
+}
+
+function handleZoomOut() {
+    const zoomFactor = Settings.store.zoomFactor ?? 1;
+    const currentIndex = allowedZoomFactors.indexOf(zoomFactor);
+    if (currentIndex > 0) {
+        const newZoomFactor = allowedZoomFactors[currentIndex - 1];
+        Settings.setData({ zoomFactor: newZoomFactor });
+        mainWin.webContents.setZoomFactor(newZoomFactor);
+        mainWin.webContents.send("zoomChanged", newZoomFactor);
+    }
+}
+
+function resetZoom() {
+    Settings.setData({ zoomFactor: 1 });
+    mainWin.webContents.setZoomFactor(1);
+    mainWin.webContents.send("zoomChanged", 1);
+}
+
 export async function createWindows() {
     const startMinimized = process.argv.includes("--start-minimized");
     const splash = createSplashWindow(startMinimized);
@@ -461,6 +492,8 @@ export async function createWindows() {
     mainWin.webContents.on("did-finish-load", () => {
         splash.destroy();
 
+        mainWin.webContents.setZoomFactor(Settings.store.zoomFactor ?? 1);
+
         if (!startMinimized) {
             mainWin!.show();
             if (State.store.maximized && !isDeckGameMode) mainWin!.maximize();
@@ -478,6 +511,32 @@ export async function createWindows() {
                 mainWin!.maximize();
             }
         });
+
+        mainWin.on("focus", () => {
+            globalShortcut.register("CommandOrControl+0", () => {
+                resetZoom();
+            });
+            globalShortcut.register("CommandOrControl+plus", () => {
+                handleZoomIn();
+            });
+            globalShortcut.register("CommandOrControl+=", () => {
+                handleZoomIn();
+            });
+            globalShortcut.register("CommandOrControl+-", () => {
+                handleZoomOut();
+            });
+            globalShortcut.register("CommandOrControl+_", () => {
+                handleZoomOut();
+            });
+        });
+
+        mainWin.on("blur", () => {
+            globalShortcut.unregister("CommandOrControl+0");
+            globalShortcut.unregister("CommandOrControl+plus");
+            globalShortcut.unregister("CommandOrControl+=");
+            globalShortcut.unregister("CommandOrControl+-");
+            globalShortcut.unregister("CommandOrControl+_");
+        });
     });
 
     initArRPC();

src/preload/VesktopNative.ts

@@ -54,7 +54,8 @@ export const VesktopNative = {
         focus: () => invoke<void>(IpcEvents.FOCUS),
         close: (key?: string) => invoke<void>(IpcEvents.CLOSE, key),
         minimize: () => invoke<void>(IpcEvents.MINIMIZE),
-        maximize: () => invoke<void>(IpcEvents.MAXIMIZE)
+        maximize: () => invoke<void>(IpcEvents.MAXIMIZE),
+        zoom: (zoom: number) => invoke<void>(IpcEvents.SET_ZOOM, zoom)
     },
     capturer: {
         getLargeThumbnail: (id: string) => invoke<string>(IpcEvents.CAPTURER_GET_LARGE_THUMBNAIL, id)

src/preload/index.ts

@@ -17,6 +17,10 @@ require(ipcRenderer.sendSync(IpcEvents.GET_VENCORD_PRELOAD_FILE));
 webFrame.executeJavaScript(ipcRenderer.sendSync(IpcEvents.GET_VENCORD_RENDERER_SCRIPT));
 webFrame.executeJavaScript(ipcRenderer.sendSync(IpcEvents.GET_RENDERER_SCRIPT));
 
+ipcRenderer.on("zoomChanged", (event, newZoomFactor) => {
+    window.dispatchEvent(new CustomEvent("zoomChanged", { detail: newZoomFactor }));
+});
+
 // #region css
 const rendererCss = ipcRenderer.sendSync(IpcEvents.GET_RENDERER_CSS_FILE);
 

src/renderer/components/settings/Settings.tsx

@@ -16,6 +16,7 @@ import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
+import { WindowZoom } from "./WindowZoom";
 
 interface BooleanSetting {
     key: keyof typeof Settings.store;
@@ -65,7 +66,8 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             description: "Adapt the splash window colors to your custom theme",
             defaultValue: false
         },
-        WindowsTransparencyControls
+        WindowsTransparencyControls,
+        WindowZoom
     ],
     Behaviour: [
         {

src/renderer/components/settings/WindowZoom.tsx

@@ -0,0 +1,48 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Margins } from "@vencord/types/utils";
+import { Forms, Slider, useEffect, useState } from "@vencord/types/webpack/common";
+
+import { SettingsComponent } from "./Settings";
+
+export const WindowZoom: SettingsComponent = ({ settings }) => {
+    const [zoomFactor, setZoomFactor] = useState(settings.zoomFactor ?? 1);
+
+    useEffect(() => {
+        const handleZoomChange = event => {
+            console.log("zoom changed", event.detail);
+            setZoomFactor(event.detail);
+        };
+
+        window.addEventListener("zoomChanged", handleZoomChange);
+
+        return () => {
+            window.removeEventListener("zoomChanged", handleZoomChange);
+        };
+    }, []);
+
+    return (
+        <>
+            <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Zoom Level</Forms.FormTitle>
+            <Slider
+                className={Margins.top20}
+                initialValue={zoomFactor}
+                defaultValue={1}
+                onValueChange={v => {
+                    settings.zoomFactor = v;
+                    VesktopNative.win.zoom(v);
+                    setZoomFactor(v);
+                }}
+                minValue={0.5}
+                maxValue={2}
+                markers={[0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2]}
+                stickToMarkers={true}
+                onMarkerRender={v => (v === 1 ? "100" : `${Math.round(v * 100)}`)}
+            ></Slider>
+        </>
+    );
+};

src/shared/IpcEvents.ts

@@ -18,6 +18,7 @@ export const enum IpcEvents {
     FOCUS = "VCD_FOCUS",
     MINIMIZE = "VCD_MINIMIZE",
     MAXIMIZE = "VCD_MAXIMIZE",
+    SET_ZOOM = "VCD_ZOOM",
 
     SHOW_ITEM_IN_FOLDER = "VCD_SHOW_ITEM_IN_FOLDER",
     GET_SETTINGS = "VCD_GET_SETTINGS",

src/shared/settings.d.ts

@@ -20,6 +20,7 @@ export interface Settings {
     arRPC?: boolean;
     appBadge?: boolean;
     disableMinSize?: boolean;
+    zoomFactor?: number;
     clickTrayToShowHide?: boolean;
     /** @deprecated use customTitleBar */
     discordWindowsTitleBar?: boolean;