add setting for custom splash animations

src/main/index.ts

@@ -6,7 +6,7 @@
 
 import "./ipc";
 
-import { app, BrowserWindow, nativeTheme } from "electron";
+import { app, BrowserWindow, nativeTheme, protocol } from "electron";
 import { checkUpdates } from "updater/main";
 
 import { DATA_DIR } from "./constants";
@@ -63,6 +63,12 @@ function init() {
         registerScreenShareHandler();
         registerMediaPermissionsHandler();
 
+        //register file handler so we can load the custom splash animation from the user's filesystem
+        protocol.registerFileProtocol("image", (request, callback) => {
+            const url = request.url.substring(8);
+            callback({path: url});
+        });
+
         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,7 +4,7 @@
  * 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";
@@ -12,11 +12,8 @@ import { ICON_PATH, VIEW_DIR } from "shared/paths";
 import { Settings } from "./settings";
 
 export function createSplashWindow(startMinimized = false) {
-    const { splashBackground, splashColor, splashTheming, disableSplashAnimation } = Settings.store;
+    const { splashBackground, splashColor, splashTheming, splashAnimationPath } = Settings.store;
 
-    if (disableSplashAnimation) {
-        SplashProps.height = 150;
-    }
     const splash = new BrowserWindow({
         ...SplashProps,
         icon: ICON_PATH,
@@ -38,8 +35,16 @@ export function createSplashWindow(startMinimized = false) {
         }
     }
     
-    if (!disableSplashAnimation) {
-        splash.webContents.insertCSS(`img {display: block !important}`);
+    if (splashAnimationPath) {
+        splash.webContents.executeJavaScript(`
+            document.getElementById("animation").src = "image://${splashAnimationPath}";
+        `);
+    }
+    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

@@ -49,7 +49,6 @@ export default function SettingsUi() {
         ["disableSmoothScroll", "Disable smooth scrolling", "Disables smooth scrolling in Vesktop", false],
         ["hardwareAcceleration", "Hardware Acceleration", "Enable hardware acceleration", true],
         ["splashTheming", "Splash theming", "Adapt the splash window colors to your custom theme", false],
-        ["disableSplashAnimation", "Disable splash animation", "Disable the animation on the splash window", false],
         [
             "openLinksWithElectron",
             "Open Links in app (experimental)",
@@ -154,6 +153,45 @@ 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 () => {
+                        console.log("test");
+                        const choice = await VesktopNative.fileManager.selectImagePath();
+                        console.log(choice);
+                        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,7 +28,7 @@ export interface Settings {
     checkUpdates?: boolean;
 
     splashTheming?: boolean;
-    disableSplashAnimation?: boolean;
+    splashAnimationPath?: string;
     splashColor?: string;
     splashBackground?: string;
 }

static/views/splash.html

@@ -25,15 +25,13 @@
         img {
             width: 128px;
             height: 128px;
-            image-rendering: pixelated;
-            display: none;
         }
     </style>
 </head>
 
 <body>
     <div class="wrapper">
-        <img draggable="false" src="../shiggy.gif" alt="shiggy" role="presentation" />
+        <img id="animation" draggable="false" alt="animation" role="presentation" />
         <p>Loading Vesktop...</p>
     </div>
 </body>