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

Background Radius

Browse Source
This commit is contained in:
meowarex
2025-09-09 20:23:42 +10:00
parent 2ea44bd3cc
commit 78d960588c
2 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/Settings.tsx
+26 -1
View File
@@ -17,6 +17,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
spinSpeed: 45,
settingsAffectNowPlaying: true,
backgroundScale: 15,
backgroundRadius: 0,
});
export const Settings = () => {
@@ -57,6 +58,9 @@ export const Settings = () => {
const [backgroundScale, setBackgroundScale] = React.useState(
settings.backgroundScale,
);
const [backgroundRadius, setBackgroundRadius] = React.useState(
settings.backgroundRadius,
);
// Derive props and override onChange to accept a broader first param type
type BaseSwitchProps = React.ComponentProps<typeof LunaSwitchSetting>;
@@ -178,7 +182,6 @@ export const Settings = () => {
onNumber={(value: number) => {
const next = Math.max(1, Math.min(30, Math.round(value)));
setBackgroundScale((settings.backgroundScale = next));
// Immediate visual update without throttle
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
@@ -190,6 +193,28 @@ export const Settings = () => {
}
}}
/>
<LunaNumberSetting
title="Background Radius"
desc="Round the image corners (0–50%). 50% ≈ circle."
min={0}
max={50}
step={1}
value={backgroundRadius}
onNumber={(value: number) => {
const next = Math.max(0, Math.min(50, Math.round(value)));
setBackgroundRadius((settings.backgroundRadius = next));
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (
sessionStorage &&
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
title="Text Glow"
desc="Adjust the glow size of lyrics (0-100, default: 20)"
plugins/radiant-lyrics-luna/src/index.ts
+11
View File
@@ -465,10 +465,13 @@ function updateCoverArtBackground(method: number = 0): void {
const scalePm = getScaledMultiplier();
const widthPm = `${Math.round(scalePm * 100)}vw`;
const heightPm = `${Math.round(scalePm * 100)}vh`;
const radiusPm = `${Math.max(0, Math.min(50, settings.backgroundRadius ?? 0))}%`;
if (nowPlayingBackgroundImage.style.width !== widthPm)
nowPlayingBackgroundImage.style.width = widthPm;
if (nowPlayingBackgroundImage.style.height !== heightPm)
nowPlayingBackgroundImage.style.height = heightPm;
if (nowPlayingBackgroundImage.style.borderRadius !== radiusPm)
nowPlayingBackgroundImage.style.borderRadius = radiusPm;
const filt = `blur(${blur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${contrast}%)`;
if (nowPlayingBackgroundImage.style.filter !== filt)
nowPlayingBackgroundImage.style.filter = filt;
@@ -486,10 +489,13 @@ function updateCoverArtBackground(method: number = 0): void {
const scaleNm = getScaledMultiplier();
const widthNm = `${Math.round(scaleNm * 100)}vw`;
const heightNm = `${Math.round(scaleNm * 100)}vh`;
const radiusNm = `${Math.max(0, Math.min(50, settings.backgroundRadius ?? 0))}%`;
if (nowPlayingBackgroundImage.style.width !== widthNm)
nowPlayingBackgroundImage.style.width = widthNm;
if (nowPlayingBackgroundImage.style.height !== heightNm)
nowPlayingBackgroundImage.style.height = heightNm;
if (nowPlayingBackgroundImage.style.borderRadius !== radiusNm)
nowPlayingBackgroundImage.style.borderRadius = radiusNm;
const filt = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
if (nowPlayingBackgroundImage.style.filter !== filt)
nowPlayingBackgroundImage.style.filter = filt;
@@ -605,12 +611,15 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
const scale = getScaledMultiplier();
const scaledWidth = `${Math.round(scale * 100)}vw`;
const scaledHeight = `${Math.round(scale * 100)}vh`;
const radius = `${Math.max(0, Math.min(50, settings.backgroundRadius ?? 0))}%`;
// Performance mode optimizations
if (settings.performanceMode) {
// Performance mode with spinning enabled
globalBackgroundImage.style.width = scaledWidth;
globalBackgroundImage.style.height = scaledHeight;
globalBackgroundImage.style.filter = `blur(${Math.min(settings.backgroundBlur, 20)}px) brightness(${settings.backgroundBrightness / 100}) contrast(${Math.min(settings.backgroundContrast, 150)}%)`;
if (globalBackgroundImage.style.borderRadius !== radius)
globalBackgroundImage.style.borderRadius = radius;
if (settings.spinningArtEnabled) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
globalBackgroundImage.style.willChange = "transform";
@@ -624,6 +633,8 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalBackgroundImage.style.width = scaledWidth;
globalBackgroundImage.style.height = scaledHeight;
globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
if (globalBackgroundImage.style.borderRadius !== radius)
globalBackgroundImage.style.borderRadius = radius;
if (settings.spinningArtEnabled) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
globalBackgroundImage.style.willChange = "transform";