marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 23:57:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Compress Loading Screen's CSS

Browse Source
This commit is contained in:
redphx 2024-08-31 19:02:36 +07:00
parent 26b28564cc
commit 5ba4a669e6
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/macros/build.ts
View File

@ -14,6 +14,6 @@ export const renderStylus = async () => {
}; };
export const compressCss = async (css: string) => { export const compressCss = (css: string) => {
return await (stylus(css, {}).set('compress', true)).render(); return (stylus(css, {}).set('compress', true)).render();
}; };

26
src/modules/loading-screen.ts
View File

@ -4,6 +4,7 @@ import { t } from "@utils/translation";
import { STATES } from "@utils/global"; import { STATES } from "@utils/global";
import { PrefKey } from "@/enums/pref-keys"; import { PrefKey } from "@/enums/pref-keys";
import { getPref } from "@/utils/settings-storages/global-settings-storage"; import { getPref } from "@/utils/settings-storages/global-settings-storage";
import { compressCss } from "@macros/build" with {type: "macro"};
export class LoadingScreen { export class LoadingScreen {
static #$bgStyle: HTMLElement; static #$bgStyle: HTMLElement;
@ -43,7 +44,7 @@ export class LoadingScreen {
static #hideRocket() { static #hideRocket() {
let $bgStyle = LoadingScreen.#$bgStyle; let $bgStyle = LoadingScreen.#$bgStyle;
const css = ` const css = compressCss(`
#game-stream div[class*=RocketAnimation-module__container] > svg { #game-stream div[class*=RocketAnimation-module__container] > svg {
display: none; display: none;
} }
@ -51,8 +52,8 @@ export class LoadingScreen {
#game-stream video[class*=RocketAnimationVideo-module__video] { #game-stream video[class*=RocketAnimationVideo-module__video] {
display: none; display: none;
} }
`; `);
$bgStyle.textContent += css; $bgStyle.textContent! += css;
} }
static #setBackground(imageUrl: string) { static #setBackground(imageUrl: string) {
@ -62,9 +63,8 @@ export class LoadingScreen {
// Limit max width to reduce image size // Limit max width to reduce image size
imageUrl = imageUrl + '?w=1920'; imageUrl = imageUrl + '?w=1920';
const css = ` const css = compressCss(`
#game-stream { #game-stream {
background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;
background-color: transparent !important; background-color: transparent !important;
background-position: center center !important; background-position: center center !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
@ -74,16 +74,16 @@ export class LoadingScreen {
#game-stream rect[width="800"] { #game-stream rect[width="800"] {
transition: opacity 0.3s ease-in-out !important; transition: opacity 0.3s ease-in-out !important;
} }
`; `) + `#game-stream {background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;}`;
$bgStyle.textContent += css; $bgStyle.textContent! += css;
const bg = new Image(); const bg = new Image();
bg.onload = e => { bg.onload = e => {
$bgStyle.textContent += ` $bgStyle.textContent += compressCss(`
#game-stream rect[width="800"] { #game-stream rect[width="800"] {
opacity: 0 !important; opacity: 0 !important;
} }
`; `);
}; };
bg.src = imageUrl; bg.src = imageUrl;
} }
@ -150,18 +150,18 @@ export class LoadingScreen {
if (getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.#$bgStyle) { if (getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.#$bgStyle) {
const $rocketBg = document.querySelector('#game-stream rect[width="800"]'); const $rocketBg = document.querySelector('#game-stream rect[width="800"]');
$rocketBg && $rocketBg.addEventListener('transitionend', e => { $rocketBg && $rocketBg.addEventListener('transitionend', e => {
LoadingScreen.#$bgStyle.textContent += ` LoadingScreen.#$bgStyle.textContent += compressCss(`
#game-stream { #game-stream {
background: #000 !important; background: #000 !important;
} }
`; `);
}); });
LoadingScreen.#$bgStyle.textContent += ` LoadingScreen.#$bgStyle.textContent += compressCss(`
#game-stream rect[width="800"] { #game-stream rect[width="800"] {
opacity: 1 !important; opacity: 1 !important;
} }
`; `);
} }
setTimeout(LoadingScreen.reset, 2000); setTimeout(LoadingScreen.reset, 2000);