From 7e33780743675b9a72e59a8206a95cf610d695c5 Mon Sep 17 00:00:00 2001 From: Vendicated Date: Thu, 6 Feb 2025 05:36:10 +0100 Subject: [PATCH] Fix Splash colour retrieval & show main window earlier if splash is disabled --- src/main/mainWindow.ts | 12 ++++--- src/main/splash.ts | 2 +- src/renderer/components/settings/Settings.tsx | 6 ++-- src/renderer/themedSplash.ts | 36 ++++++++++++++++++- 4 files changed, 47 insertions(+), 9 deletions(-) diff --git a/src/main/mainWindow.ts b/src/main/mainWindow.ts index 578e3cb..cbb0def 100644 --- a/src/main/mainWindow.ts +++ b/src/main/mainWindow.ts @@ -299,7 +299,7 @@ function getDarwinOptions(): BrowserWindowConstructorOptions { options.vibrancy = "sidebar"; options.backgroundColor = "#ffffff00"; } else { - if (splashTheming) { + if (splashTheming !== false) { options.backgroundColor = splashBackground; } else { options.backgroundColor = nativeTheme.shouldUseDarkColors ? "#313338" : "#ffffff"; @@ -405,14 +405,18 @@ function createMainWindow() { removeSettingsListeners(); removeVencordSettingsListeners(); - const { staticTitle, transparencyOption, enableMenu, customTitleBar } = Settings.store; + const { staticTitle, transparencyOption, enableMenu, customTitleBar, splashTheming, splashBackground } = + Settings.store; const { frameless, transparent } = VencordSettings.store; const noFrame = frameless === true || customTitleBar === true; + const backgroundColor = + splashTheming !== false ? splashBackground : nativeTheme.shouldUseDarkColors ? "#313338" : "#ffffff"; const win = (mainWin = new BrowserWindow({ - show: false, + show: Settings.store.enableSplashScreen === false, + backgroundColor, webPreferences: { nodeIntegration: false, sandbox: false, @@ -504,7 +508,7 @@ export async function createWindows() { splash?.destroy(); if (!startMinimized) { - mainWin!.show(); + if (splash) mainWin!.show(); if (State.store.maximized && !isDeckGameMode) mainWin!.maximize(); } diff --git a/src/main/splash.ts b/src/main/splash.ts index 7c05de9..2a26761 100644 --- a/src/main/splash.ts +++ b/src/main/splash.ts @@ -22,7 +22,7 @@ export function createSplashWindow(startMinimized = false) { const { splashBackground, splashColor, splashTheming } = Settings.store; - if (splashTheming) { + if (splashTheming !== false) { if (splashColor) { const semiTransparentSplashColor = splashColor.replace("rgb(", "rgba(").replace(")", ", 0.2)"); diff --git a/src/renderer/components/settings/Settings.tsx b/src/renderer/components/settings/Settings.tsx index 0c7817c..2531469 100644 --- a/src/renderer/components/settings/Settings.tsx +++ b/src/renderer/components/settings/Settings.tsx @@ -63,15 +63,15 @@ const SettingsOptions: Record> { key: "enableSplashScreen", title: "Enable Splash Screen", - description: "Shows a small splash screen while Vesktop is loading", + description: + "Shows a small splash screen while Vesktop is loading. Disabling this option will show the main window earlier while it's still loading.", defaultValue: true }, { key: "splashTheming", title: "Splash theming", description: "Adapt the splash window colors to your custom theme", - defaultValue: false, - disabled: () => Settings.store.enableSplashScreen === false + defaultValue: true }, WindowsTransparencyControls ], diff --git a/src/renderer/themedSplash.ts b/src/renderer/themedSplash.ts index 13490c4..f522696 100644 --- a/src/renderer/themedSplash.ts +++ b/src/renderer/themedSplash.ts @@ -10,15 +10,49 @@ function isValidColor(color: CSSStyleValue | undefined): color is CSSUnparsedVal return color instanceof CSSUnparsedValue && typeof color[0] === "string" && CSS.supports("color", color[0]); } +// https://gist.github.com/earthbound19/e7fe15fdf8ca3ef814750a61bc75b5ce +function clamp(value: number, min: number, max: number) { + return Math.max(Math.min(value, max), min); +} +const linearToGamma = (c: number) => (c >= 0.0031308 ? 1.055 * Math.pow(c, 1 / 2.4) - 0.055 : 12.92 * c); + +function oklabToSRGB({ L, a, b }: { L: number; a: number; b: number }) { + let l = L + a * +0.3963377774 + b * +0.2158037573; + let m = L + a * -0.1055613458 + b * -0.0638541728; + let s = L + a * -0.0894841775 + b * -1.291485548; + l **= 3; + m **= 3; + s **= 3; + let R = l * +4.0767416621 + m * -3.3077115913 + s * +0.2309699292; + let G = l * -1.2684380046 + m * +2.6097574011 + s * -0.3413193965; + let B = l * -0.0041960863 + m * -0.7034186147 + s * +1.707614701; + R = 255 * linearToGamma(R); + G = 255 * linearToGamma(G); + B = 255 * linearToGamma(B); + R = Math.round(clamp(R, 0, 255)); + G = Math.round(clamp(G, 0, 255)); + B = Math.round(clamp(B, 0, 255)); + + return `rgb(${R}, ${G}, ${B})`; +} + function resolveColor(color: string) { const span = document.createElement("span"); span.style.color = color; span.style.display = "none"; document.body.append(span); - const rgbColor = getComputedStyle(span).color; + let rgbColor = getComputedStyle(span).color; span.remove(); + if (rgbColor.startsWith("oklab(")) { + // scam + const [_, L, a, b] = rgbColor.match(/oklab\((.+?)[, ]+(.+?)[, ]+(.+?)\)/) ?? []; + if (L && a && b) { + rgbColor = oklabToSRGB({ L: parseFloat(L), a: parseFloat(a), b: parseFloat(b) }); + } + } + return rgbColor; }