From 40ed89dd346bfa54c87431aea2c2db2c700194c0 Mon Sep 17 00:00:00 2001 From: meowarex Date: Wed, 13 Aug 2025 21:08:30 +1000 Subject: [PATCH] Updated Settings --- plugins/colorama-lyrics-luna/src/Settings.tsx | 86 +++++++++---------- plugins/colorama-lyrics-luna/src/index.ts | 24 +++--- plugins/colorama-lyrics-luna/src/styles.css | 1 - 3 files changed, 51 insertions(+), 60 deletions(-) diff --git a/plugins/colorama-lyrics-luna/src/Settings.tsx b/plugins/colorama-lyrics-luna/src/Settings.tsx index 0758c26..d6139a1 100644 --- a/plugins/colorama-lyrics-luna/src/Settings.tsx +++ b/plugins/colorama-lyrics-luna/src/Settings.tsx @@ -2,7 +2,7 @@ import { ReactiveStore } from "@luna/core"; import { LunaSettings, LunaNumberSetting, LunaSwitchSetting, LunaTextSetting } from "@luna/ui"; import React from "react"; -export type ColoramaMode = "single" | "gradient" | "auto-single" | "auto-gradient" | "rainbow"; +export type ColoramaMode = "single" | "gradient-experimental" | "cover" | "cover-gradient"; export const settings = await ReactiveStore.getPluginStorage("ColoramaLyrics", { enabled: true, @@ -15,7 +15,6 @@ export const settings = await ReactiveStore.getPluginStorage("ColoramaLyrics", { gradientEnd: "#AAFFFF", gradientEndAlpha: 100, gradientAngle: 0, - rainbowSpeed: 8, customColors: [] as string[], excludeInactive: false }); @@ -30,7 +29,6 @@ export const Settings = () => { const [gradientEnd, setGradientEnd] = React.useState(settings.gradientEnd); const [gradientEndAlpha, setGradientEndAlpha] = React.useState(settings.gradientEndAlpha ?? 100); const [gradientAngle, setGradientAngle] = React.useState(settings.gradientAngle); - const [rainbowSpeed, setRainbowSpeed] = React.useState(settings.rainbowSpeed ?? 8); const [customInput, setCustomInput] = React.useState(settings.singleColor); const [customColors, setCustomColors] = React.useState(settings.customColors); const [showPicker, setShowPicker] = React.useState(false); @@ -129,8 +127,10 @@ export const Settings = () => { {/* Mode selection via dropdown (aligned right) */}
-
Mode
-
Choose how lyrics are colored
+
+
Mode
+
Choose how lyrics are colored
+
@@ -161,7 +160,7 @@ export const Settings = () => {
Lyrics Color
-
Solid color (configure inside picker)
+
Set lyrics color
- {/* Gradient controls (triggers only) */} -
-
Gradient
-
Pick start/end and angle (inside picker)
-
-
- {/* Auto gradient controls (open picker for angle) */} -
+ {/* Cover gradient controls (open picker for angle) */} +
-
Auto Gradient
-
Configure angle inside the picker
+
Cover (Gradient) - Experimental
+
Set angle
- {/* Rainbow controls removed: mode exists but has no UI */} + {/* Rainbow mode removed */} {/* Modal for picking and managing colors (reused) */} {shouldRender && ( @@ -267,7 +263,7 @@ export const Settings = () => {
{mode === 'single' ? 'Single Color' : 'Gradient Colors'}
- {mode === 'gradient' && ( + {mode === 'gradient-experimental' && (
Editing
)} - {mode !== 'auto-gradient' && ( + {mode !== 'cover-gradient' && (
{allColors.map((color, index) => (
)} - {mode !== 'auto-gradient' && ( + {mode !== 'cover-gradient' && (
Custom Hex (#RRGGBB)
@@ -343,7 +339,7 @@ export const Settings = () => { const next = normalizeToRGB(trimmed); setSingleColor((settings.singleColor = next)); setCustomInput(next); - } else if (mode === "gradient") { + } else if (mode === "gradient-experimental") { const norm = normalizeToRGB(trimmed); if (activeEndpoint === 'end') { setGradientEnd((settings.gradientEnd = norm)); @@ -376,7 +372,7 @@ export const Settings = () => { if (hexColorRegex.test(trimmed)) { if (mode === "single") { setSingleColor((settings.singleColor = normalizeToRGB(trimmed))); - } else if (mode === "gradient") { + } else if (mode === "gradient-experimental") { const norm = normalizeToRGB(trimmed); if (activeEndpoint === 'end') { setGradientEnd((settings.gradientEnd = norm)); @@ -428,7 +424,7 @@ export const Settings = () => {
)} - {mode === 'gradient' && ( + {mode === 'gradient-experimental' && (
@@ -490,7 +486,7 @@ export const Settings = () => {
)} - {mode === 'auto-gradient' && ( + {mode === 'cover-gradient' && (
Angle
@@ -531,7 +527,7 @@ export const Settings = () => { )} { diff --git a/plugins/colorama-lyrics-luna/src/index.ts b/plugins/colorama-lyrics-luna/src/index.ts index 285197b..0fa3c43 100644 --- a/plugins/colorama-lyrics-luna/src/index.ts +++ b/plugins/colorama-lyrics-luna/src/index.ts @@ -124,10 +124,10 @@ function applyGradient(start: string, end: string, angle: number) { } function resetModeClasses(): void { - document.body.classList.remove('colorama-single', 'colorama-gradient', 'colorama-rainbow'); + document.body.classList.remove('colorama-single', 'colorama-gradient'); } -async function applyAutoColors(gradient: boolean) { +async function applyCoverColors(gradient: boolean) { const img = await getCoverArtElement(); if (!img) return; const colors = getDominantColorsFromImage(img, gradient ? 2 : 1); @@ -143,7 +143,7 @@ async function applyAutoColors(gradient: boolean) { function applyColoramaLyrics(): void { if (!settings.enabled) { - document.body.classList.remove('colorama-single', 'colorama-gradient', 'colorama-rainbow'); + document.body.classList.remove('colorama-single', 'colorama-gradient'); return; } @@ -158,17 +158,14 @@ function applyColoramaLyrics(): void { case "single": applySingleColor(settings.singleColor); break; - case "gradient": + case "gradient-experimental": applyGradient(settings.gradientStart, settings.gradientEnd, settings.gradientAngle); break; - case "rainbow": - // no-op: rainbow mode disabled + case "cover": + applyCoverColors(false); break; - case "auto-single": - applyAutoColors(false); - break; - case "auto-gradient": - applyAutoColors(true); + case "cover-gradient": + applyCoverColors(true); break; } } @@ -182,7 +179,7 @@ function observeTrackChanges(): void { const currentTrackId = PlayState.playbackContext?.actualProductId; if (currentTrackId && currentTrackId !== lastTrackId) { lastTrackId = currentTrackId; - if (settings.mode.startsWith("auto")) { + if (settings.mode === 'cover' || settings.mode === 'cover-gradient') { setTimeout(() => applyColoramaLyrics(), 200); } } @@ -220,7 +217,6 @@ function hookRadiantUpdates(): void { setTimeout(() => hookRadiantUpdates(), 0); -// Observe active lyric span changes and restart rainbow animation to avoid freezes -// Rainbow mode disabled: no lyrics observer needed +// Rainbow mode removed diff --git a/plugins/colorama-lyrics-luna/src/styles.css b/plugins/colorama-lyrics-luna/src/styles.css index 13a023b..494acf1 100644 --- a/plugins/colorama-lyrics-luna/src/styles.css +++ b/plugins/colorama-lyrics-luna/src/styles.css @@ -32,7 +32,6 @@ -webkit-text-fill-color: transparent !important; } -/* Ensure active line keeps rainbow in only-active mode */ /* Only-active: apply container class only on the active line via JS */ /* Slight emphasis on current line (uniform to single mode) */