meoware.exe/TidaLuna-Plugins
1
0
Fork 0
mirror of https://github.com/meowarex/TidaLuna-Plugins.git synced 2026-06-18 03:43:10 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #77 from meowarex/dev

Browse Source 
Added Lyric Font Size
This commit is contained in:
Meow Meow
2026-02-25 21:09:31 +11:00
committed by GitHub
parent a2cb822a2c 64dfe47592
commit 1a2e25c717
3 changed files with 61 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/Settings.tsx
+20 -1
View File
@@ -48,6 +48,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
blurInactive: true,
bubbledLyrics: true,
syllableLogging: false,
lyricsFontSize: 100,
});
export const Settings = () => {
@@ -132,6 +133,9 @@ export const Settings = () => {
window.updateLyricsStyleSetting = undefined;
};
}, []);
const [lyricsFontSize, setLyricsFontSize] = React.useState(
settings.lyricsFontSize,
);
const [contextAwareLyrics, setContextAwareLyrics] = React.useState(
settings.contextAwareLyrics,
);
@@ -156,7 +160,7 @@ export const Settings = () => {
<LunaSettings>
<AnySwitch
title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Styling Changes"
desc="Enable glowing effect on lyrics"
checked={lyricsGlowEnabled}
onChange={(_: unknown, checked: boolean) => {
settings.lyricsGlowEnabled = checked;
@@ -212,6 +216,21 @@ export const Settings = () => {
}
}}
/>
<LunaNumberSetting
title="Lyrics Font Size"
desc="Scale the lyrics font size (50-200%, default: 100)"
min={50}
max={200}
step={5}
value={lyricsFontSize}
onNumber={(value: number) => {
settings.lyricsFontSize = value;
setLyricsFontSize(value);
if (window.updateRadiantLyricsTextGlow) {
window.updateRadiantLyricsTextGlow();
}
}}
/>
<AnySwitch
title="Blur Inactive"
desc="Blurs inactive lyric lines, scaling with distance from the active line"
plugins/radiant-lyrics-luna/src/index.ts
+17 -32
View File
@@ -1,6 +1,6 @@
// MARKER: Core Setup
import { type LunaUnload, Tracer } from "@luna/core";
import { StyleTag, PlayState, MediaItem, observePromise, observe, safeInterval, safeTimeout } from "@luna/lib";
import { StyleTag, PlayState, MediaItem, observe, safeInterval, safeTimeout } from "@luna/lib";
import { settings, Settings } from "./Settings";
// Interpret integer backgroundScale (e.g., 10=1.0x, 20=2.0x)
const getScaledMultiplier = (): number => {
@@ -28,10 +28,8 @@ const playerBarStyleTag = new StyleTag("RadiantLyrics-player-bar", unloads);
const lyricsGlowStyleTag = new StyleTag("RadiantLyrics-lyrics-glow", unloads);
const floatingPlayerBarStyleTag = new StyleTag("RadiantLyrics-floating-player-bar", unloads);
// Apply lyrics glow styles if enabled
if (settings.lyricsGlowEnabled) {
lyricsGlowStyleTag.css = lyricsGlow;
}
// Always load lyrics CSS (glow is toggled via .lyrics-glow-disabled class)
lyricsGlowStyleTag.css = lyricsGlow;
// MARKER: Floating Player Bar
@@ -135,13 +133,24 @@ if (settings.qualityProgressColor) {
// Apply base styles always (I kinda dont really remember what this does but it's important i guess)
baseStyleTag.css = baseStyles;
// Update CSS variables for lyrics text glow based on settings
// Update CSS variables for lyrics glow + font scale
const updateRadiantLyricsTextGlow = function (): void {
const root = document.documentElement;
if (settings.lyricsGlowEnabled) {
root.style.setProperty("--rl-glow-outer", `${settings.textGlow}px`);
root.style.setProperty("--rl-glow-inner", "2px");
root.classList.remove("lyrics-glow-disabled");
} else {
root.style.setProperty("--rl-glow-outer", "0px");
root.style.setProperty("--rl-glow-inner", "0px");
root.classList.add("lyrics-glow-disabled");
}
root.style.setProperty("--rl-font-scale", `${settings.lyricsFontSize / 100}`);
};
// Apply glow state immediately at startup
updateRadiantLyricsTextGlow();
// Function to update styles when settings change
const updateRadiantLyricsStyles = function (): void {
// Handle Player Bar Visibility
@@ -158,32 +167,8 @@ const updateRadiantLyricsStyles = function (): void {
// Handle Floating Player Bar
applyFloatingPlayerBar();
// Update lyrics glow based on setting (Always apply if enabled, even when UI is hidden)
const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
if (lyricsContainer) {
if (settings.lyricsGlowEnabled) {
(lyricsContainer as HTMLElement).classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow;
// Toggle glow via CSS vars + class on :root (always available, no timing issues)
updateRadiantLyricsTextGlow();
} else {
(lyricsContainer as HTMLElement).classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove();
}
} else {
observePromise<HTMLElement>(unloads, '[class^="_lyricsContainer"]')
.then((el) => {
if (!el) return;
if (settings.lyricsGlowEnabled) {
el.classList.remove("lyrics-glow-disabled");
lyricsGlowStyleTag.css = lyricsGlow;
updateRadiantLyricsTextGlow();
} else {
el.classList.add("lyrics-glow-disabled");
lyricsGlowStyleTag.remove();
}
})
.catch(() => {});
}
// Track title glow toggle based on settings
const trackTitleEl = document.querySelector(
@@ -1757,7 +1742,7 @@ const buildWordSpans = (): {
"margin-bottom": "2rem",
"padding-top": "0",
"padding-bottom": "0",
"font-size": "40px",
"font-size": "calc(40px * var(--rl-font-scale, 1))",
"font-family": FONT_STACK,
"font-weight": "700",
color: "rgba(128, 128, 128, 0.4)",
plugins/radiant-lyrics-luna/src/lyrics-glow.css
+21 -27
View File
@@ -32,7 +32,7 @@
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
padding-left: 20px;
transition-duration: 0.7s;
font-size: 55px;
font-size: calc(55px * var(--rl-font-scale, 1));
/* biome-ignore lint: Active lyric uses Colorama color */
color: var(--cl-glow1, #fff) !important;
font-family:
@@ -47,7 +47,7 @@
0 0 0px transparent;
transition-duration: 0.25s;
color: rgba(128, 128, 128, 0.4);
font-size: 40px;
font-size: calc(40px * var(--rl-font-scale, 1));
font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -106,7 +106,7 @@
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
/* biome-ignore lint: Typography override for readability */
font-size: 38px !important;
font-size: calc(38px * var(--rl-font-scale, 1)) !important;
}
/* MARKER: WBW lyrics CSS */
@@ -328,7 +328,7 @@
/* Tidals "..." at the top of the container */
.rl-wbw-active > span:not([data-test="lyrics-line"]) {
display: block;
font-size: 40px;
font-size: calc(40px * var(--rl-font-scale, 1));
font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -383,30 +383,24 @@
padding-left: 20px;
}
/* Reset lyrics styling when disabled */
/* Reset glow when disabled */
.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"],
.lyrics-glow-disabled [class*="_lyricsText"] > div > span,
.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 */
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover {
/* biome-ignore lint: Kill glow on active/hover lines */
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;
}
/* thats right biome.. shut upp */
/* kill glow on active word */
.lyrics-glow-disabled .rl-wbw-word.rl-wbw-active {
/* biome-ignore lint: Kill glow on active word */
text-shadow: none !important;
}
/* kill glow on hovered word */
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word:hover,
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) > .rl-wbw-word.rl-wbw-word-hover,
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word:hover,
.lyrics-glow-disabled .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-main .rl-wbw-word.rl-wbw-word-hover {
/* biome-ignore lint: Kill glow on hovered word */
text-shadow: none !important;
}