Adjust UI thingos

This commit is contained in:
2026-03-28 21:39:34 +11:00
parent bff87b96a1
commit 9d1ca88e46
6 changed files with 30 additions and 94 deletions
+2 -18
View File
@@ -21,7 +21,6 @@ declare global {
export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
lyricsGlowEnabled: true,
trackTitleGlow: false,
hideUIEnabled: true,
playerBarVisible: false,
qualityProgressColor: true,
@@ -84,9 +83,6 @@ export const Settings = () => {
const [spinSpeed, setSpinSpeed] = React.useState(settings.spinSpeed);
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] =
React.useState(settings.settingsAffectNowPlaying);
const [trackTitleGlow, setTrackTitleGlow] = React.useState(
settings.trackTitleGlow,
);
const [backgroundScale, setBackgroundScale] = React.useState(
settings.backgroundScale,
);
@@ -184,19 +180,7 @@ export const Settings = () => {
}
}}
/>
<AnySwitch
title="Track Title Glow"
desc="Apply glow to the track title"
checked={trackTitleGlow}
onChange={(_: unknown, checked: boolean) => {
settings.trackTitleGlow = checked;
setTrackTitleGlow(checked);
if (window.updateRadiantLyricsStyles) {
window.updateRadiantLyricsStyles();
}
}}
/>
{(lyricsGlowEnabled || trackTitleGlow) && (
{lyricsGlowEnabled && (
<LunaNumberSetting
title="Text Glow"
desc="Adjust the glow size of lyrics (0-100, default: 20)"
@@ -346,7 +330,7 @@ export const Settings = () => {
/>
<AnySwitch
title="Floating Player Bar"
desc="Floating rounded player bar with backdrop blur"
desc="When disabled, the player bar becomes a square edge-to-edge bar"
checked={floatingPlayerBar}
onChange={(_: unknown, checked: boolean) => {
settings.floatingPlayerBar = checked;
@@ -128,8 +128,7 @@ main,
background: unset !important;
}
/* Make sidebar and player bar semi-transparent with optimized backdrop-filter */
[data-test="footer-player"],
/* Make sidebar semi-transparent with optimized backdrop-filter */
[data-test="main-layout-sidebar-wrapper"] {
/* biome-ignore lint: Must beat app inline styles for translucency */
background-color: rgba(0, 0, 0, 0.3) !important;
@@ -140,7 +139,6 @@ main,
}
/* Performance mode: reduce backdrop blur */
.performance-mode [data-test="footer-player"],
.performance-mode [data-test="main-layout-sidebar-wrapper"] {
/* biome-ignore lint: Performance mode style requires priority */
backdrop-filter: blur(5px) !important;
@@ -1,9 +1,22 @@
/* Floating Rounded Player Bar from Obsidian <3 */
/* Square Player Bar override — injected when floating is disabled */
/* MARKER: Floating Player Bar CSS */
[data-test="footer-player"] {
position: absolute !important;
backdrop-filter: blur(10px);
border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin, rgba(255, 255, 255, 0.1)) !important;
/* biome-ignore lint: Override native floating position */
bottom: 0 !important;
/* biome-ignore lint: Override native floating position */
left: 0 !important;
/* biome-ignore lint: Override native floating position */
right: 0 !important;
/* biome-ignore lint: Override native floating position */
width: 100% !important;
/* biome-ignore lint: Override native floating position */
margin: 0 !important;
/* biome-ignore lint: Force square corners */
border-radius: 0 !important;
/* biome-ignore lint: Remove floating border */
border: none !important;
/* biome-ignore lint: Remove floating shadow */
box-shadow: none !important;
}
+4 -46
View File
@@ -99,13 +99,12 @@ const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
};
};
// Apply Settings to Floating Player Bar using inline styles because idk.. CSS is hard (Change my mind!)
// Apply inline styles to the player bar (tint + optional radius/spacing customisation)
const applyPlayerBarTintToElement = (): void => {
const footerPlayer = document.querySelector(
'[data-test="footer-player"]',
) as HTMLElement;
if (!footerPlayer) return;
// Always apply tint regardless of floating state
const alpha = settings.playerBarTint / 10;
const { r, g, b } = hexToRgb(settings.playerBarTintColor);
footerPlayer.style.setProperty(
@@ -135,12 +134,12 @@ const applyPlayerBarTintToElement = (): void => {
}
};
// Apply/update the floating player bar stylesheet + tint
// When floating is disabled, inject square-bar CSS to override Tidal's native floating styles
const applyFloatingPlayerBar = (): void => {
if (settings.floatingPlayerBar) {
floatingPlayerBarStyleTag.css = floatingPlayerBarCss;
} else {
floatingPlayerBarStyleTag.remove();
} else {
floatingPlayerBarStyleTag.css = floatingPlayerBarCss;
}
applyPlayerBarTintToElement();
};
@@ -235,18 +234,6 @@ const updateRadiantLyricsStyles = function (): void {
// Toggle glow via CSS vars + class on :root (always available, no timing issues)
updateRadiantLyricsTextGlow();
// Track title glow toggle based on settings
const trackTitleEl = document.querySelector(
'[data-test="new-now-playing"] [class*="_titleContainer_"]',
) as HTMLElement | null;
if (trackTitleEl) {
if (settings.trackTitleGlow && settings.lyricsGlowEnabled) {
trackTitleEl.classList.remove("rl-title-glow-disabled");
} else {
trackTitleEl.classList.add("rl-title-glow-disabled");
}
}
};
// MARKER: UI Visibility Control
@@ -4107,34 +4094,6 @@ function setupNowPlayingObserver(): void {
});
}
function setupTrackTitleObserver(): void {
const trackTitleEl = document.querySelector(
'[data-test="new-now-playing"] [class*="_titleContainer_"]',
) as HTMLElement | null;
if (trackTitleEl) {
if (settings.trackTitleGlow && settings.lyricsGlowEnabled) {
trackTitleEl.classList.remove("rl-title-glow-disabled");
} else {
trackTitleEl.classList.add("rl-title-glow-disabled");
}
}
observe<HTMLElement>(
unloads,
'[data-test="new-now-playing"]',
() => {
const el = document.querySelector(
'[data-test="new-now-playing"] [class*="_titleContainer_"]',
) as HTMLElement | null;
if (!el) return;
if (settings.trackTitleGlow && settings.lyricsGlowEnabled) {
el.classList.remove("rl-title-glow-disabled");
} else {
el.classList.add("rl-title-glow-disabled");
}
},
);
}
// Apply seeker color on track change
onGlobalTrackChange(() => {
updateCoverArtBackground();
@@ -4144,6 +4103,5 @@ onGlobalTrackChange(() => {
// Init observers
setupHeaderObserver();
setupNowPlayingObserver();
setupTrackTitleObserver();
setupStickyLyricsObserver();
setupTrackChangeListener();
@@ -68,29 +68,6 @@
transition-duration: 0.7s;
}
/* Track title glow */
[data-test="new-now-playing"] [class*="_titleContainer_"] {
/* 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 */
[data-test="new-now-playing"] [class*="_titleContainer_"].rl-title-glow-disabled {
/* biome-ignore lint: Full reset required */
text-shadow: none !important;
}
/* Current line transitions */
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
transition:
@@ -278,3 +278,9 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
[class*="_contentInner"] {
max-width: none !important;
}
/* Round now-playing artwork corners */
[data-test="now-playing-artwork"] {
/* biome-ignore lint: Override flat corners */
border-radius: 10px !important;
}