BIOME Refactor

This commit is contained in:
2025-09-09 18:31:35 +10:00
parent 99661096d5
commit 0d9b378e43
7 changed files with 176 additions and 89 deletions
+21 -16
View File
@@ -54,13 +54,18 @@ export const Settings = () => {
settings.trackTitleGlow,
);
// Use a permissive wrapper to align with current usage props
const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType<
Record<string, unknown>
>;
return (
<LunaSettings>
<LunaSwitchSetting
<AnySwitch
title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Stytling Changes"
checked={lyricsGlowEnabled}
onChange={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
// Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsStyles) {
@@ -68,30 +73,30 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Track Title Glow"
desc="Apply glow to the track title"
checked={trackTitleGlow}
onChange={(_: unknown, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
setTrackTitleGlow((settings.trackTitleGlow = checked));
if ((window as any).updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles();
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Hide UI Feature"
desc="Enable hide/unhide UI functionality with toggle buttons"
checked={hideUIEnabled}
onChange={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
setHideUIEnabled((settings.hideUIEnabled = checked));
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Player Bar Visibility in Hide UI Mode"
desc="Keep player bar visible when UI is hidden"
checked={playerBarVisible}
onChange={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
setPlayerBarVisible((settings.playerBarVisible = checked));
// Update styles immediately when setting changes
@@ -100,11 +105,11 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
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={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
console.log(
"Spinning Cover Everywhere:",
checked ? "enabled" : "disabled",
@@ -118,11 +123,11 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Performance Mode | Experimental"
desc="Performance mode: Reduces blur effects & uses smaller image sizes, to optimize GPU usage"
checked={performanceMode}
onChange={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
console.log("Performance Mode:", checked ? "enabled" : "disabled");
setPerformanceMode((settings.performanceMode = checked));
// Update background animations immediately when setting changes
@@ -134,11 +139,11 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Background Cover Spin" // Cheers @Max/n0201 for the idea <3
desc="Enable the spinning cover art background animation"
checked={spinningArtEnabled}
onChange={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
console.log(
"Background Cover Spin:",
checked ? "enabled" : "disabled",
@@ -253,11 +258,11 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Settings Affect Now Playing"
desc="Apply background settings to Now Playing view"
checked={settingsAffectNowPlaying}
onChange={(_, checked: boolean) => {
onChange={(_event: unknown, checked: boolean) => {
console.log(
"Settings Affect Now Playing:",
checked ? "enabled" : "disabled",
@@ -47,16 +47,21 @@
.global-spinning-image.performance-mode-static {
/* Keep animation enabled in performance mode */
/* Lighter blur for performance */
/* biome-ignore lint: Required to override app styles in performance mode */
filter: blur(20px) brightness(0.4) contrast(1.2) saturate(1) !important;
/* Smaller size for performance */
/* biome-ignore lint: Required to override app layout sizes */
width: 120vw !important;
/* biome-ignore lint: Required to override app layout sizes */
height: 120vh !important;
}
.now-playing-background-image.performance-mode-static {
/* Keep animation enabled in performance mode */
/* Optimized size and effects for performance */
/* biome-ignore lint: Required to override inline sizes in performance mode */
width: 80vw !important;
/* biome-ignore lint: Required to override inline sizes in performance mode */
height: 80vh !important;
}
@@ -89,8 +94,11 @@
@media (prefers-reduced-motion: reduce) {
.global-spinning-image,
.now-playing-background-image {
/* biome-ignore lint: Accessibility override needs priority */
animation: none !important;
/* biome-ignore lint: Accessibility override needs priority */
transform: translate(-50%, -50%) !important;
/* biome-ignore lint: Accessibility override needs priority */
will-change: auto !important;
}
}
@@ -99,6 +107,7 @@
.performance-mode .global-spinning-image,
.performance-mode .now-playing-background-image {
/* Keep animations but optimize filter effects */
/* biome-ignore lint: Intentional override of runtime styles */
filter: blur(10px) brightness(0.4) contrast(1.1) !important;
}
@@ -121,6 +130,7 @@ main,
[class^="_feedSidebarItemDiv"],
[class^="_cellContainer"],
[class^="_cellTextContainer"] {
/* biome-ignore lint: Ensure background is fully cleared under theme CSS */
background: unset !important;
}
@@ -129,8 +139,11 @@ main,
[data-test="main-layout-sidebar-wrapper"],
[class^="_bar"],
[class^="_sidebarItem"]:hover {
/* biome-ignore lint: Must beat app inline styles for translucency */
background-color: rgba(0, 0, 0, 0.3) !important;
/* biome-ignore lint: Must beat app inline styles for translucency */
backdrop-filter: blur(10px) !important;
/* biome-ignore lint: Must beat app inline styles for translucency */
-webkit-backdrop-filter: blur(10px) !important;
}
@@ -139,20 +152,27 @@ main,
.performance-mode [data-test="main-layout-sidebar-wrapper"],
.performance-mode [class^="_bar"],
.performance-mode [class^="_sidebarItem"]:hover {
/* biome-ignore lint: Performance mode style requires priority */
backdrop-filter: blur(5px) !important;
/* biome-ignore lint: Performance mode style requires priority */
-webkit-backdrop-filter: blur(5px) !important;
}
/* Feed sidebar panel - black tint background for readability */
[data-test="feed-sidebar"] {
/* biome-ignore lint: Ensure readability over media */
background-color: rgba(0, 0, 0, 0.5) !important;
/* biome-ignore lint: Ensure readability over media */
backdrop-filter: blur(10px) !important;
/* biome-ignore lint: Ensure readability over media */
-webkit-backdrop-filter: blur(10px) !important;
}
/* Performance mode: reduce sidebar backdrop blur */
.performance-mode [data-test="feed-sidebar"] {
/* biome-ignore lint: Performance mode style requires priority */
backdrop-filter: blur(5px) !important;
/* biome-ignore lint: Performance mode style requires priority */
-webkit-backdrop-filter: blur(5px) !important;
}
@@ -162,10 +182,12 @@ main,
[class*="_cellContainer"],
[data-test="feed-interval"],
[data-test="feed-item"] {
/* biome-ignore lint: Match theme transparency */
background-color: transparent !important;
}
/* Remove bottom gradient */
[class^="_bottomGradient"] {
/* biome-ignore lint: Explicitly remove conflicting gradient */
display: none !important;
}
@@ -31,10 +31,12 @@
[class*="_lyricsText"] > div > span[data-current="true"] {
text-shadow:
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
/* biome-ignore lint: Required to override app glow strength */
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
padding-left: 20px;
transition-duration: 0.7s;
font-size: 55px;
/* biome-ignore lint: Needs priority for active lyric color */
color: white !important;
font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -58,7 +60,9 @@
[class*="_lyricsText"] > div > span:hover {
text-shadow:
0 0 var(--rl-glow-inner, 2px) lightgray,
/* biome-ignore lint: Hover glow should override defaults */
0 0 var(--rl-glow-outer, 20px) lightgray !important;
/* biome-ignore lint: Hover color override */
color: lightgray !important;
padding-left: 20px;
transition-duration: 0.7s;
@@ -69,15 +73,21 @@
/* Title text color/gradient is left to default app styling; only glow is customized. */
text-shadow:
0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff),
/* biome-ignore lint: Title glow needs priority */
0 0 var(--rl-glow-outer, 30px) #fff !important;
/* biome-ignore lint: Reset vendor background clip */
-webkit-background-clip: initial !important;
/* biome-ignore lint: Reset background clip */
background-clip: initial !important;
/* biome-ignore lint: Reset vendor text fill */
-webkit-text-fill-color: initial !important;
/* biome-ignore lint: Ensure inherited color takes precedence */
color: inherit !important;
}
/* When track title glow setting is disabled, remove glow regardless of Colorama */
.rl-title-glow-disabled[data-test="now-playing-track-title"] {
/* biome-ignore lint: Full reset required */
text-shadow: none !important;
}
@@ -86,6 +96,7 @@
transition:
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out,
/* biome-ignore lint: Transition priority needed */
padding 0.7s ease-in-out !important;
}
@@ -97,6 +108,7 @@
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
/* biome-ignore lint: Typography override for readability */
font-size: 38px !important;
}
@@ -106,13 +118,22 @@
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover,
.lyrics-glow-disabled [data-test="now-playing-track-title"],
.lyrics-glow-disabled [class^="_lyricsContainer"] > div > div > span {
/* biome-ignore lint: Hard reset when disabled */
text-shadow: none !important;
/* biome-ignore lint: Hard reset when disabled */
padding-left: 0 !important;
/* biome-ignore lint: Hard reset when disabled */
transition: none !important;
/* biome-ignore lint: Hard reset when disabled */
font-size: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
color: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
font-family: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
font-weight: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
margin-bottom: inherit !important;
/* biome-ignore lint: Hard reset when disabled */
opacity: inherit !important;
}