add splash animation preview in the vesktop settings

src/main/index.ts

@@ -6,7 +6,7 @@
 
 import "./ipc";
 
-import { app, BrowserWindow, nativeTheme, net, protocol } from "electron";
+import { app, BrowserWindow, nativeTheme, net, protocol, session } from "electron";
 import { autoUpdater } from "electron-updater";
 
 import { DATA_DIR } from "./constants";
@@ -80,11 +80,35 @@ 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);
         });
 
+        //this patches the discord csp to allow the splash-animation:// protocol 
+        //the vencord:// protocol is already whitelisted, but the code for doing that is in the
+        //vencord repo, not the vesktop one. hopefully in the future, the splash image functionality
+        //can be added to the vencord:// protocol handler, or the vencord:// protocol handler can be moved here
+        let otherHandler: any = null;
+        session.defaultSession.webRequest.onHeadersReceived(({responseHeaders, resourceType}, callback) => {
+            if (responseHeaders && resourceType === "mainFrame" && responseHeaders["content-security-policy"]) {
+                let csp = responseHeaders["content-security-policy"][0];
+                csp = csp.replace("img-src", "img-src splash-animation:");
+                responseHeaders["content-security-policy"] = [csp];
+            }
+            if (otherHandler) {
+                otherHandler({responseHeaders, resourceType}, callback);
+            }
+            else {
+                callback({ cancel: false, responseHeaders });
+            }
+        });
+        //we need to overwrite onHeadersReceived because normally electron only allows one handler to be active at a time
+        session.defaultSession.webRequest.onHeadersReceived = (handler) => {
+            otherHandler = handler;
+        }
+
         bootstrap();
 
         app.on("activate", () => {

src/main/splash.ts

@@ -4,7 +4,7 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
-import { BrowserWindow, webContents } from "electron";
+import { BrowserWindow } from "electron";
 import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
 import { ICON_PATH, VIEW_DIR } from "shared/paths";

src/renderer/components/settings/CustomSplashAnimation.tsx

@@ -4,7 +4,7 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
-import { Button, Forms, Toasts } from "@vencord/types/webpack/common";
+import { Button, Forms } from "@vencord/types/webpack/common";
 
 import { SettingsComponent } from "./Settings";
 
@@ -13,19 +13,27 @@ export const CustomSplashAnimation: SettingsComponent = ({ settings }) => {
         <>
         
         <Forms.FormText>
-            The animation on the splash window is loaded from{" "}
             {settings.splashAnimationPath ? (
-                <a
+                <div style={{
-                    href="about:blank"
+                    display: "flex",
-                    onClick={e => {
+                    alignItems: "center",
-                        e.preventDefault();
+                    gap: "16px"
-                        VesktopNative.fileManager.showItemInFolder(settings.splashAnimationPath!);
+                }}>
-                    }}
+                    <img src="splash-animation:///" width="64px" height="64px"></img>
-                >
+                    <p>The custom splash animation is enabled. It is loaded from 
-                    {settings.splashAnimationPath}
+                        <a
-                </a>
+                            href="about:blank"
+                            onClick={e => {
+                                e.preventDefault();
+                                VesktopNative.fileManager.showItemInFolder(settings.splashAnimationPath!);
+                            }}
+                        >
+                            {" " + settings.splashAnimationPath}
+                        </a>
+                    </p>
+                </div>
             ) : (
-                "the default location"
+                "A custom splash animation is not set."
             )}
         </Forms.FormText>
         <div className="vcd-location-btns" style={{marginBottom: 20}}>
@@ -36,7 +44,7 @@ export const CustomSplashAnimation: SettingsComponent = ({ settings }) => {
                     if (choice === "cancelled") return;
                     settings.splashAnimationPath = choice;
                 }}
-            >
+            >   
                 Change
             </Button>
             <Button