Add option for custom startup animations

src/main/index.ts

@@ -6,7 +6,7 @@
 
 import "./ipc";
 
-import { app, BrowserWindow, nativeTheme } from "electron";
+import { app, BrowserWindow, nativeTheme, net, protocol } from "electron";
 import { checkUpdates } from "updater/main";
 
 import { DATA_DIR } from "./constants";
@@ -25,7 +25,7 @@ if (IS_DEV) {
 process.env.VENCORD_USER_DATA_DIR = DATA_DIR;
 
 function init() {
-    const { disableSmoothScroll, hardwareAcceleration } = Settings.store;
+    const { disableSmoothScroll, hardwareAcceleration, splashAnimationPath } = Settings.store;
 
     if (hardwareAcceleration === false) app.disableHardwareAcceleration();
     if (disableSmoothScroll) {
@@ -63,6 +63,11 @@ function init() {
         registerScreenShareHandler();
         registerMediaPermissionsHandler();
 
+        //register file handler so we can load the custom splash animation from the user's filesystem
+        protocol.handle("splash-animation", () => {
+            return net.fetch("file:///"+splashAnimationPath);
+        });
+
         bootstrap();
 
         app.on("activate", () => {

src/main/ipc.ts

@@ -121,6 +121,17 @@ handle(IpcEvents.SELECT_VENCORD_DIR, async () => {
     return dir;
 });
 
+handle(IpcEvents.SELECT_IMAGE_PATH, async () => {
+    const res = await dialog.showOpenDialog(mainWin!, {
+        properties: ["openFile"],
+        filters: [
+            {name: "Images", extensions: ["apng", "avif", "gif", "jpeg", "png", "svg", "webp"]}
+        ]
+    });
+    if (!res.filePaths.length) return "cancelled";
+    return res.filePaths[0];
+});
+
 handle(IpcEvents.SET_BADGE_COUNT, (_, count: number) => setBadgeCount(count));
 
 handle(IpcEvents.CLIPBOARD_COPY_IMAGE, async (_, buf: ArrayBuffer, src: string) => {

src/main/splash.ts

@@ -4,24 +4,24 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
-import { BrowserWindow } from "electron";
+import { BrowserWindow, webContents } from "electron";
 import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
 import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
 import { Settings } from "./settings";
 
 export function createSplashWindow(startMinimized = false) {
+    const { splashBackground, splashColor, splashTheming, splashAnimationPath } = Settings.store;
+
     const splash = new BrowserWindow({
         ...SplashProps,
         icon: ICON_PATH,
         show: !startMinimized
     });
-
+    
     splash.loadFile(join(VIEW_DIR, "splash.html"));
 
-    const { splashBackground, splashColor, splashTheming } = Settings.store;
-
     if (splashTheming) {
         if (splashColor) {
             const semiTransparentSplashColor = splashColor.replace("rgb(", "rgba(").replace(")", ", 0.2)");
@@ -34,6 +34,18 @@ export function createSplashWindow(startMinimized = false) {
             splash.webContents.insertCSS(`body { --bg: ${splashBackground} !important }`);
         }
     }
+
+    if (splashAnimationPath) {
+        splash.webContents.executeJavaScript(`
+            document.getElementById("animation").src = "splash-animation://img";
+        `);
+    }
+    else {
+        splash.webContents.insertCSS(`img {image-rendering: pixelated}`)
+        splash.webContents.executeJavaScript(`
+            document.getElementById("animation").src = "../shiggy.gif";
+        `);
+    }
 
     return splash;
 }

src/preload/VesktopNative.ts

@@ -33,7 +33,8 @@ export const VesktopNative = {
     },
     fileManager: {
         showItemInFolder: (path: string) => invoke<void>(IpcEvents.SHOW_ITEM_IN_FOLDER, path),
-        selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR)
+        selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR),
+        selectImagePath: () => invoke<LiteralUnion<"cancelled", string>>(IpcEvents.SELECT_IMAGE_PATH)
     },
     settings: {
         get: () => sendSync<Settings>(IpcEvents.GET_SETTINGS),

src/renderer/components/Settings.tsx

@@ -153,6 +153,43 @@ export default function SettingsUi() {
                 </>
             )}
 
+            <Forms.FormTitle>Custom Spash Animation</Forms.FormTitle>
+            <Forms.FormText>
+                The animation on the splash window is loaded from{" "}
+                {Settings.splashAnimationPath ? (
+                    <a
+                        href="about:blank"
+                        onClick={e => {
+                            e.preventDefault();
+                            VesktopNative.fileManager.showItemInFolder(Settings.splashAnimationPath!);
+                        }}
+                    >
+                        {Settings.splashAnimationPath}
+                    </a>
+                ) : (
+                    "the default location"
+                )}
+            </Forms.FormText>
+            <div className="vcd-location-btns" style={{marginBottom: 20}}>
+                <Button
+                    size={Button.Sizes.SMALL}
+                    onClick={async () => {
+                        const choice = await VesktopNative.fileManager.selectImagePath();
+                        if (choice === "cancelled") return;
+                        Settings.splashAnimationPath = choice;
+                    }}
+                >
+                    Change
+                </Button>
+                <Button
+                    size={Button.Sizes.SMALL}
+                    color={Button.Colors.RED}
+                    onClick={() => (Settings.splashAnimationPath = void 0)}
+                >
+                    Reset
+                </Button>
+            </div>
+
             <Forms.FormTitle>Vencord Location</Forms.FormTitle>
             <Forms.FormText>
                 Vencord files are loaded from{" "}

src/shared/IpcEvents.ts

@@ -24,6 +24,7 @@ export const enum IpcEvents {
     SET_SETTINGS = "VCD_SET_SETTINGS",
 
     SELECT_VENCORD_DIR = "VCD_SELECT_VENCORD_DIR",
+    SELECT_IMAGE_PATH= "VCD_SELECT_IMAGE_PATH",
 
     UPDATER_GET_DATA = "VCD_UPDATER_GET_DATA",
     UPDATER_DOWNLOAD = "VCD_UPDATER_DOWNLOAD",

src/shared/settings.d.ts

@@ -28,6 +28,7 @@ export interface Settings {
     checkUpdates?: boolean;
 
     splashTheming?: boolean;
+    splashAnimationPath?: string;
     splashColor?: string;
     splashBackground?: string;
 }

static/views/splash.html

@@ -24,20 +24,16 @@
 
         img {
             width: 128px;
-            height: 128px;
-            image-rendering: pixelated;
+            height: 128px
         }
     </style>
 </head>
 
 <body>
     <div class="wrapper">
-        <img
-            draggable="false"
-            src="../shiggy.gif"
-            alt="shiggy"
-            role="presentation"
-        />
+        <!-- the data url is here to ensure there isn't an empty frame before the image is loaded -->
+        <img id="animation" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+            draggable="false" alt="animation" role="presentation" />
         <p>Loading Vesktop...</p>
     </div>
-</body>
+</body>