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

Adjusted Cover Scale Settings

Browse Source
This commit is contained in:
meowarex
2025-09-09 20:58:28 +10:00
parent f2c31bb33a
commit fa0a7b7f56
2 changed files with 77 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/Settings.tsx
+18 -18
View File
@@ -17,7 +17,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
spinSpeed: 45,
settingsAffectNowPlaying: true,
backgroundScale: 15,
backgroundRadius: 0,
backgroundRadius: 25,
});
export const Settings = () => {
@@ -172,6 +172,21 @@ export const Settings = () => {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
title="Text Glow"
desc="Adjust the glow size of lyrics (0-100, default: 20)"
min={0}
max={100}
step={1}
value={textGlow}
onNumber={(value: number) => {
setTextGlow((settings.textGlow = value));
// Update variables immediately when setting changes
if ((window as any).updateRadiantLyricsTextGlow) {
(window as any).updateRadiantLyricsTextGlow();
}
}}
/>
<LunaNumberSetting
title="Background Scale"
@@ -195,9 +210,9 @@ export const Settings = () => {
/>
<LunaNumberSetting
title="Background Radius"
desc="Round the image corners (percentage). 50% ≈ circle."
desc="Adjust the cover art corner radius (0-100%, 100% = circle)"
min={0}
max={50}
max={100}
step={1}
value={backgroundRadius}
onNumber={(value: number) => {
@@ -213,21 +228,6 @@ export const Settings = () => {
}
}}
/>
<LunaNumberSetting
title="Text Glow"
desc="Adjust the glow size of lyrics (0-100, default: 20)"
min={0}
max={100}
step={1}
value={textGlow}
onNumber={(value: number) => {
setTextGlow((settings.textGlow = value));
// Update variables immediately when setting changes
if ((window as any).updateRadiantLyricsTextGlow) {
(window as any).updateRadiantLyricsTextGlow();
}
}}
/>
<LunaNumberSetting
title="Background Contrast"
desc="Adjust the contrast of the spinning background (0-200, default: 120)"
plugins/radiant-lyrics-luna/src/index.ts
+59 -23
View File
@@ -8,29 +8,6 @@ const getScaledMultiplier = (): number => {
return value / 10;
};
// Helper to size an image using its intrinsic dimensions times scale (in pixels)
const applyScaledPixelSize = (img: HTMLImageElement | null): void => {
if (!img) return;
const scale = getScaledMultiplier();
const apply = () => {
const w = img.naturalWidth;
const h = img.naturalHeight;
if (w > 0 && h > 0) {
const wPx = Math.round(w * scale);
const hPx = Math.round(h * scale);
const wStr = `${wPx}px`;
const hStr = `${hPx}px`;
if (img.style.width !== wStr) img.style.width = wStr;
if (img.style.height !== hStr) img.style.height = hStr;
}
};
if (img.complete && img.naturalWidth > 0) {
apply();
} else {
img.addEventListener("load", apply, { once: true });
}
};
// Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3
import baseStyles from "file://styles.css?minify";
import playerBarHidden from "file://player-bar-hidden.css?minify";
@@ -333,6 +310,7 @@ let globalSpinningBgStyleTag: StyleTag | null = null;
let globalBackgroundContainer: HTMLElement | null = null;
let globalBackgroundImage: HTMLImageElement | null = null;
let globalBlackBg: HTMLElement | null = null;
let globalGradientOverlay: HTMLElement | null = null;
let currentGlobalCoverSrc: string | null = null;
let lastUpdateTime = 0;
const getUpdateThrottle = () => (settings.performanceMode ? 1500 : 500);
@@ -345,6 +323,29 @@ let nowPlayingGradientOverlay: HTMLElement | null = null;
let currentNowPlayingCoverSrc: string | null = null;
let spinAnimationAdded = false;
// apply scaled pixel sizes to cover art
const applyScaledPixelSize = (img: HTMLImageElement | null): void => {
if (!img) return;
const scale = getScaledMultiplier();
const apply = () => {
const w = img.naturalWidth;
const h = img.naturalHeight;
if (w > 0 && h > 0) {
const wPx = Math.round(w * scale);
const hPx = Math.round(h * scale);
const wStr = `${wPx}px`;
const hStr = `${hPx}px`;
if (img.style.width !== wStr) img.style.width = wStr;
if (img.style.height !== hStr) img.style.height = hStr;
}
};
if (img.complete && img.naturalWidth > 0) {
apply();
} else {
img.addEventListener("load", apply, { once: true });
}
};
// Update Cover Art background for Now Playing and Global
function updateCoverArtBackground(method: number = 0): void {
if (method === 1) {
@@ -607,6 +608,38 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
transform-origin: center center;
`;
globalBackgroundContainer.appendChild(globalBackgroundImage);
// Create gradient overlay
globalGradientOverlay = document.createElement("div");
globalGradientOverlay.className = "global-spinning-gradient-overlay";
globalGradientOverlay.style.cssText = `
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%);
z-index: -1;
pointer-events: none;
`;
globalBackgroundContainer.appendChild(globalGradientOverlay);
}
// Ensure gradient overlay exists even if container was pre-existing
if (!globalGradientOverlay && globalBackgroundContainer) {
globalGradientOverlay = document.createElement("div");
globalGradientOverlay.className = "global-spinning-gradient-overlay";
globalGradientOverlay.style.cssText = `
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 90%);
z-index: -1;
pointer-events: none;
`;
globalBackgroundContainer.appendChild(globalGradientOverlay);
}
// Update image source efficiently (throttled)
@@ -629,6 +662,7 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
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;
// Do not apply radius to vignette overlay; matches Now Playing behavior
if (settings.spinningArtEnabled) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
globalBackgroundImage.style.willChange = "transform";
@@ -642,6 +676,7 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
if (globalBackgroundImage.style.borderRadius !== radius)
globalBackgroundImage.style.borderRadius = radius;
// Do not apply radius to vignette overlay; matches Now Playing behavior
if (settings.spinningArtEnabled) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
globalBackgroundImage.style.willChange = "transform";
@@ -662,6 +697,7 @@ const cleanUpGlobalSpinningBackground = function (): void {
globalBackgroundContainer = null;
globalBackgroundImage = null;
globalBlackBg = null;
globalGradientOverlay = null;
currentGlobalCoverSrc = null;
if (globalSpinningBgStyleTag) {