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

Background Cover Scale

Browse Source
This commit is contained in:
meowarex
2025-09-09 20:09:24 +10:00
parent 9c9b47c930
commit 2ea44bd3cc
2 changed files with 73 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/radiant-lyrics-luna/src/Settings.tsx
+25
View File
@@ -16,6 +16,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
backgroundBrightness: 40,
spinSpeed: 45,
settingsAffectNowPlaying: true,
backgroundScale: 15,
});
export const Settings = () => {
@@ -53,6 +54,9 @@ export const Settings = () => {
const [trackTitleGlow, setTrackTitleGlow] = React.useState(
settings.trackTitleGlow,
);
const [backgroundScale, setBackgroundScale] = React.useState(
settings.backgroundScale,
);
// Derive props and override onChange to accept a broader first param type
type BaseSwitchProps = React.ComponentProps<typeof LunaSwitchSetting>;
@@ -165,6 +169,27 @@ export const Settings = () => {
}
}}
/>
<LunaNumberSetting
title="Background Cover Scale"
desc="Integer scale 1–30 (10=100%, 20=200%, 30=300%)"
min={1}
max={30}
value={backgroundScale}
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();
}
if (
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
+48 -24
View File
@@ -2,6 +2,11 @@
import { LunaUnload, Tracer, ftch } from "@luna/core";
import { StyleTag, PlayState, observePromise, observe } from "@luna/lib";
import { settings, Settings } from "./Settings";
// Interpret integer backgroundScale (1–30) strictly as 0.1–3.0 multiplier
const getScaledMultiplier = (): number => {
const value = Math.round(settings.backgroundScale);
return Math.max(0.1, Math.min(3, value / 10));
};
// Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3
import baseStyles from "file://styles.css?minify";
@@ -377,7 +382,9 @@ function updateCoverArtBackground(method: number = 0): void {
.querySelectorAll(
".now-playing-background-image, .now-playing-black-bg, .now-playing-gradient-overlay",
)
.forEach((el) => el.remove());
.forEach((el) => {
el.remove();
});
// Create container
nowPlayingBackgroundContainer = document.createElement("div");
@@ -455,10 +462,13 @@ function updateCoverArtBackground(method: number = 0): void {
// Performance mode with spinning enabled
const blur = Math.min(settings.backgroundBlur, 20);
const contrast = Math.min(settings.backgroundContrast, 150);
if (nowPlayingBackgroundImage.style.width !== "70vw")
nowPlayingBackgroundImage.style.width = "70vw";
if (nowPlayingBackgroundImage.style.height !== "70vh")
nowPlayingBackgroundImage.style.height = "70vh";
const scalePm = getScaledMultiplier();
const widthPm = `${Math.round(scalePm * 100)}vw`;
const heightPm = `${Math.round(scalePm * 100)}vh`;
if (nowPlayingBackgroundImage.style.width !== widthPm)
nowPlayingBackgroundImage.style.width = widthPm;
if (nowPlayingBackgroundImage.style.height !== heightPm)
nowPlayingBackgroundImage.style.height = heightPm;
const filt = `blur(${blur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${contrast}%)`;
if (nowPlayingBackgroundImage.style.filter !== filt)
nowPlayingBackgroundImage.style.filter = filt;
@@ -473,10 +483,13 @@ function updateCoverArtBackground(method: number = 0): void {
nowPlayingBackgroundImage.classList.remove("performance-mode-static");
} else {
// Normal mode
if (nowPlayingBackgroundImage.style.width !== "90vw")
nowPlayingBackgroundImage.style.width = "90vw";
if (nowPlayingBackgroundImage.style.height !== "90vh")
nowPlayingBackgroundImage.style.height = "90vh";
const scaleNm = getScaledMultiplier();
const widthNm = `${Math.round(scaleNm * 100)}vw`;
const heightNm = `${Math.round(scaleNm * 100)}vh`;
if (nowPlayingBackgroundImage.style.width !== widthNm)
nowPlayingBackgroundImage.style.width = widthNm;
if (nowPlayingBackgroundImage.style.height !== heightNm)
nowPlayingBackgroundImage.style.height = heightNm;
const filt = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
if (nowPlayingBackgroundImage.style.filter !== filt)
nowPlayingBackgroundImage.style.filter = filt;
@@ -520,16 +533,15 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
return;
}
// Throttle updates to prevent excessive DOM manipulation
// Only throttle image src updates; style updates below always run for responsiveness
const now = Date.now();
if (
now - lastUpdateTime < getUpdateThrottle() &&
currentGlobalCoverSrc === coverArtImageSrc
) {
return;
const shouldUpdateImageSrc =
now - lastUpdateTime >= getUpdateThrottle() ||
currentGlobalCoverSrc !== coverArtImageSrc;
if (shouldUpdateImageSrc) {
lastUpdateTime = now;
currentGlobalCoverSrc = coverArtImageSrc;
}
lastUpdateTime = now;
currentGlobalCoverSrc = coverArtImageSrc;
// Add StyleTag if not present
if (!globalSpinningBgStyleTag) {
@@ -579,18 +591,25 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalBackgroundContainer.appendChild(globalBackgroundImage);
}
// Update image source efficiently
if (globalBackgroundImage && globalBackgroundImage.src !== coverArtImageSrc) {
// Update image source efficiently (throttled)
if (
shouldUpdateImageSrc &&
globalBackgroundImage &&
globalBackgroundImage.src !== coverArtImageSrc
) {
globalBackgroundImage.src = coverArtImageSrc;
}
// Apply performance-optimized settings
if (globalBackgroundImage) {
const scale = getScaledMultiplier();
const scaledWidth = `${Math.round(scale * 100)}vw`;
const scaledHeight = `${Math.round(scale * 100)}vh`;
// Performance mode optimizations
if (settings.performanceMode) {
// Performance mode with spinning enabled
globalBackgroundImage.style.width = "100vw";
globalBackgroundImage.style.height = "100vh";
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 (settings.spinningArtEnabled) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
@@ -602,8 +621,8 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
globalBackgroundImage.classList.remove("performance-mode-static");
} else {
// Normal mode
globalBackgroundImage.style.width = "150vw";
globalBackgroundImage.style.height = "150vh";
globalBackgroundImage.style.width = scaledWidth;
globalBackgroundImage.style.height = scaledHeight;
globalBackgroundImage.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
if (settings.spinningArtEnabled) {
globalBackgroundImage.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
@@ -664,7 +683,7 @@ const updateRadiantLyricsNowPlayingBackground = function (): void {
const defaultContrast = 120;
const defaultSpinSpeed = 45;
let blur, brightness, contrast, spinSpeed;
let blur: number, brightness: number, contrast: number, spinSpeed: number;
if (settings.settingsAffectNowPlaying) {
blur = settings.backgroundBlur;
@@ -678,6 +697,11 @@ const updateRadiantLyricsNowPlayingBackground = function (): void {
spinSpeed = defaultSpinSpeed;
}
// Apply size based on backgroundScale
const scale = getScaledMultiplier();
imgElement.style.width = `${Math.round(scale * 100)}vw`;
imgElement.style.height = `${Math.round(scale * 100)}vh`;
// Performance mode optimizations
if (settings.performanceMode) {
// Reduce blur and effects for better performance, but keep spinning