Flow Refactor

This commit is contained in:
2025-09-09 19:01:12 +10:00
parent 0d9b378e43
commit 11d08b6403
9 changed files with 124 additions and 74 deletions
+8 -8
View File
@@ -65,7 +65,7 @@ export const Settings = () => {
title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Stytling Changes"
checked={lyricsGlowEnabled}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
// Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsStyles) {
@@ -77,7 +77,7 @@ export const Settings = () => {
title="Track Title Glow"
desc="Apply glow to the track title"
checked={trackTitleGlow}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
setTrackTitleGlow((settings.trackTitleGlow = checked));
if ((window as any).updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles();
@@ -88,7 +88,7 @@ export const Settings = () => {
title="Hide UI Feature"
desc="Enable hide/unhide UI functionality with toggle buttons"
checked={hideUIEnabled}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
setHideUIEnabled((settings.hideUIEnabled = checked));
}}
/>
@@ -96,7 +96,7 @@ export const Settings = () => {
title="Player Bar Visibility in Hide UI Mode"
desc="Keep player bar visible when UI is hidden"
checked={playerBarVisible}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
setPlayerBarVisible((settings.playerBarVisible = checked));
// Update styles immediately when setting changes
@@ -109,7 +109,7 @@ export const Settings = () => {
title="Cover Everywhere"
desc="Apply the spinning Cover Art background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
checked={spinningCoverEverywhere}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
console.log(
"Spinning Cover Everywhere:",
checked ? "enabled" : "disabled",
@@ -127,7 +127,7 @@ export const Settings = () => {
title="Performance Mode | Experimental"
desc="Performance mode: Reduces blur effects & uses smaller image sizes, to optimize GPU usage"
checked={performanceMode}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
console.log("Performance Mode:", checked ? "enabled" : "disabled");
setPerformanceMode((settings.performanceMode = checked));
// Update background animations immediately when setting changes
@@ -143,7 +143,7 @@ export const Settings = () => {
title="Background Cover Spin" // Cheers @Max/n0201 for the idea <3
desc="Enable the spinning cover art background animation"
checked={spinningArtEnabled}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
console.log(
"Background Cover Spin:",
checked ? "enabled" : "disabled",
@@ -262,7 +262,7 @@ export const Settings = () => {
title="Settings Affect Now Playing"
desc="Apply background settings to Now Playing view"
checked={settingsAffectNowPlaying}
onChange={(_event: unknown, checked: boolean) => {
onChange={(_: void, checked: boolean) => {
console.log(
"Settings Affect Now Playing:",
checked ? "enabled" : "disabled",
+30 -16
View File
@@ -38,30 +38,30 @@ const updateRadiantLyricsTextGlow = function (): void {
// Function to update styles when settings change
const updateRadiantLyricsStyles = function (): void {
if (isHidden) {
// Apply only base styles (button hiding), NOT separated lyrics styles
// to avoid affecting lyrics scrolling behavior
// Apply only base styles (button hiding) and optional player bar hiding
baseStyleTag.css = baseStyles;
// Apply player bar styles based on setting
if (!settings.playerBarVisible) {
playerBarStyleTag.css = playerBarHidden;
} else {
playerBarStyleTag.remove();
}
// Ensure lyrics glow styles are not applied when hidden
lyricsGlowStyleTag.remove();
return;
}
// Update lyrics glow based on setting (only if UI is not hidden to avoid interference)
// Update lyrics glow based on setting (only when UI is visible)
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer && !isHidden) {
if (lyricsContainer) {
if (settings.lyricsGlowEnabled) {
lyricsContainer.classList.remove("lyrics-glow-disabled");
(lyricsContainer as HTMLElement).classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow;
updateRadiantLyricsTextGlow();
} else {
lyricsContainer.classList.add("lyrics-glow-disabled");
(lyricsContainer as HTMLElement).classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove();
}
} else if (!isHidden) {
} else {
observePromise<HTMLElement>(unloads, '[class^="_lyricsContainer"]')
.then((el) => {
if (!el) return;
@@ -95,6 +95,16 @@ const updateRadiantLyricsStyles = function (): void {
var isHidden = false;
let unhideButtonAutoFadeTimeout: number | null = null;
// Helper to safely create a one-off timeout that clears previous if any
const safelySetAutoFadeTimeout = (
existingId: number | null,
fn: () => void,
delay: number,
): number => {
if (existingId != null) window.clearTimeout(existingId);
return window.setTimeout(fn, delay);
};
const updateButtonStates = function (): void {
const hideButton = document.querySelector(".hide-ui-button") as HTMLElement;
const unhideButton = document.querySelector(
@@ -120,7 +130,7 @@ const updateButtonStates = function (): void {
}
if (unhideButton) {
// Clear any existing auto-fade timeout
if (unhideButtonAutoFadeTimeout) {
if (unhideButtonAutoFadeTimeout != null) {
window.clearTimeout(unhideButtonAutoFadeTimeout);
unhideButtonAutoFadeTimeout = null;
}
@@ -137,11 +147,15 @@ const updateButtonStates = function (): void {
unhideButton.style.pointerEvents = "auto";
// Set up auto-fade after 2 seconds
unhideButtonAutoFadeTimeout = window.setTimeout(() => {
if (isHidden && unhideButton && !unhideButton.matches(":hover")) {
unhideButton.classList.add("auto-faded");
}
}, 2000);
unhideButtonAutoFadeTimeout = safelySetAutoFadeTimeout(
unhideButtonAutoFadeTimeout,
() => {
if (isHidden && unhideButton && !unhideButton.matches(":hover")) {
unhideButton.classList.add("auto-faded");
}
},
2000,
);
}, 50);
} else {
// Smooth fade out for Unhide UI button
@@ -771,7 +785,7 @@ unloads.add(() => {
cleanUpDynamicArt();
// Clean up auto-fade timeout
if (unhideButtonAutoFadeTimeout) {
if (unhideButtonAutoFadeTimeout != null) {
window.clearTimeout(unhideButtonAutoFadeTimeout);
unhideButtonAutoFadeTimeout = null;
}
@@ -9,22 +9,19 @@
@font-face {
font-family: "AbyssFont";
font-weight: 500;
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2")
format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 600;
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2")
format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 700;
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2")
format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
}
/* Enhanced lyrics styling with glow effects */