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 #51 from meowarex/dev

Browse Source 
Background Scale & Radius
This commit is contained in:
Meow Meow
2025-09-09 21:10:32 +10:00
committed by GitHub
parent 8c27eebd88 b9a9588f9d
commit 1876a37185
28 changed files with 4095 additions and 3101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/audio-visualizer-luna/src/Settings.tsx
+126 -45
View File
@@ -1,13 +1,21 @@
import { ReactiveStore } from "@luna/core";
import { LunaSettings, LunaNumberSetting, LunaSwitchSetting, LunaTextSetting } from "@luna/ui";
import {
LunaSettings,
LunaNumberSetting,
LunaSwitchSetting,
LunaTextSetting,
} from "@luna/ui";
import React from "react";
export const settings = await ReactiveStore.getPluginStorage("AudioVisualizer", {
export const settings = await ReactiveStore.getPluginStorage(
"AudioVisualizer",
{
barCount: 32,
barColor: "#ffffff",
barRounding: true,
customColors: [] as string[]
});
customColors: [] as string[],
},
);
export const Settings = () => {
const [barCount, setBarCount] = React.useState(settings.barCount);
@@ -18,7 +26,9 @@ export const Settings = () => {
const [shouldRender, setShouldRender] = React.useState(false);
const [customInput, setCustomInput] = React.useState(settings.barColor);
const [customColors, setCustomColors] = React.useState(settings.customColors);
const [hoveredColorIndex, setHoveredColorIndex] = React.useState<number | null>(null);
const [hoveredColorIndex, setHoveredColorIndex] = React.useState<
number | null
>(null);
const closeColorPicker = () => {
setIsAnimatingIn(false);
@@ -43,9 +53,25 @@ export const Settings = () => {
// Common color presets for cool points :D
const colorPresets = [
"#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff",
"#ff8800", "#8800ff", "#0088ff", "#88ff00", "#ff0088", "#00ff88",
"#444444", "#888888", "#cccccc", "#1db954", "#e22134", "#1976d2"
"#ffffff",
"#ff0000",
"#00ff00",
"#0000ff",
"#ffff00",
"#ff00ff",
"#00ffff",
"#ff8800",
"#8800ff",
"#0088ff",
"#88ff00",
"#ff0088",
"#00ff88",
"#444444",
"#888888",
"#cccccc",
"#1db954",
"#e22134",
"#1976d2",
];
const updateColor = (color: string) => {
@@ -63,9 +89,11 @@ export const Settings = () => {
// Validate hex color format
const hexColorRegex = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i;
if (hexColorRegex.test(trimmedInput) &&
if (
hexColorRegex.test(trimmedInput) &&
!colorPresets.includes(trimmedInput) &&
!customColors.includes(trimmedInput)) {
!customColors.includes(trimmedInput)
) {
const newCustomColors = [...customColors, trimmedInput];
setCustomColors(newCustomColors);
settings.customColors = newCustomColors;
@@ -74,7 +102,9 @@ export const Settings = () => {
};
const removeCustomColor = (colorToRemove: string) => {
const newCustomColors = customColors.filter(color => color !== colorToRemove);
const newCustomColors = customColors.filter(
(color) => color !== colorToRemove,
);
setCustomColors(newCustomColors);
settings.customColors = newCustomColors;
@@ -117,19 +147,40 @@ export const Settings = () => {
{/* I'm not sure if this is a good idea, but it works & looks amazing */}
{/* Sorry @Inrixia <3 */}
<div style={{
<div
style={{
padding: "16px 0",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
}}>
alignItems: "center",
}}
>
<div>
<div style={{ fontWeight: "normal", fontSize: "1.075rem", marginBottom: "4px" }}>Bar Color</div>
<div style={{ opacity: 0.7, fontSize: "14px" }}>Color of the visualizer bars</div>
<div
style={{
fontWeight: "normal",
fontSize: "1.075rem",
marginBottom: "4px",
}}
>
Bar Color
</div>
<div style={{ display: "flex", gap: "8px", alignItems: "center", position: "relative" }}>
<div style={{ opacity: 0.7, fontSize: "14px" }}>
Color of the visualizer bars
</div>
</div>
<div
style={{
display: "flex",
gap: "8px",
alignItems: "center",
position: "relative",
}}
>
<button
onClick={() => showColorPicker ? closeColorPicker() : openColorPicker()}
onClick={() =>
showColorPicker ? closeColorPicker() : openColorPicker()
}
style={{
width: "32px",
height: "32px",
@@ -140,15 +191,17 @@ export const Settings = () => {
backdropFilter: "blur(10px)",
WebkitBackdropFilter: "blur(10px)",
position: "relative",
overflow: "hidden"
overflow: "hidden",
}}
>
<div style={{
<div
style={{
position: "absolute",
inset: 0,
background: "rgba(0,0,0,0.1)",
backdropFilter: "blur(2px)"
}} />
backdropFilter: "blur(2px)",
}}
/>
</button>
{/* Custom Color Picker Modal */}
@@ -165,13 +218,14 @@ export const Settings = () => {
background: "rgba(0,0,0,0.6)",
zIndex: 1000,
opacity: isAnimatingIn ? 1 : 0,
transition: "opacity 0.2s ease"
transition: "opacity 0.2s ease",
}}
onClick={closeColorPicker}
/>
{/* Color Picker Panel */}
<div style={{
<div
style={{
position: "fixed",
top: "50%",
left: "50%",
@@ -187,20 +241,32 @@ export const Settings = () => {
zIndex: 1001,
boxShadow: "0 20px 40px rgba(0,0,0,0.7)",
opacity: isAnimatingIn ? 1 : 0,
transform: isAnimatingIn ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0.9)",
transition: "all 0.2s ease"
}}>
<div style={{ marginBottom: "12px", color: "#fff", fontWeight: "bold", fontSize: "14px" }}>
transform: isAnimatingIn
? "translate(-50%, -50%) scale(1)"
: "translate(-50%, -50%) scale(0.9)",
transition: "all 0.2s ease",
}}
>
<div
style={{
marginBottom: "12px",
color: "#fff",
fontWeight: "bold",
fontSize: "14px",
}}
>
Choose Color
</div>
{/* Color Grid */}
<div style={{
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)",
gap: "8px",
marginBottom: "16px"
}}>
marginBottom: "16px",
}}
>
{allColors.map((color, index) => {
const isCustomColor = customColors.includes(color);
const isHovered = hoveredColorIndex === index;
@@ -211,7 +277,7 @@ export const Settings = () => {
position: "relative",
width: "32px",
height: "32px",
cursor: "pointer"
cursor: "pointer",
}}
className="color-item"
onMouseEnter={() => setHoveredColorIndex(index)}
@@ -226,10 +292,13 @@ export const Settings = () => {
width: "100%",
height: "100%",
borderRadius: "6px",
border: barColor === color ? "2px solid #fff" : "1px solid rgba(255,255,255,0.2)",
border:
barColor === color
? "2px solid #fff"
: "1px solid rgba(255,255,255,0.2)",
background: color,
cursor: "pointer",
transition: "all 0.2s ease"
transition: "all 0.2s ease",
}}
/>
{isCustomColor && (
@@ -255,7 +324,7 @@ export const Settings = () => {
justifyContent: "center",
opacity: isHovered ? 1 : 0,
transition: "opacity 0.2s ease",
zIndex: 10
zIndex: 10,
}}
className="remove-button"
>
@@ -269,16 +338,28 @@ export const Settings = () => {
{/* Custom Hex Input */}
<div style={{ marginBottom: "12px" }}>
<div style={{ color: "rgba(255,255,255,0.7)", fontSize: "12px", marginBottom: "6px" }}>
<div
style={{
color: "rgba(255,255,255,0.7)",
fontSize: "12px",
marginBottom: "6px",
}}
>
Add Custom Color
</div>
<div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
<div
style={{
display: "flex",
gap: "8px",
alignItems: "center",
}}
>
<input
type="text"
value={customInput}
onChange={(e) => setCustomInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (e.key === "Enter") {
updateColor(customInput);
addCustomColor();
}
@@ -293,7 +374,7 @@ export const Settings = () => {
color: "#fff",
fontSize: "14px",
fontFamily: "monospace",
boxSizing: "border-box"
boxSizing: "border-box",
}}
/>
<button
@@ -313,13 +394,15 @@ export const Settings = () => {
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.2s ease"
transition: "all 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "rgba(255,255,255,0.25)";
e.currentTarget.style.background =
"rgba(255,255,255,0.25)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "rgba(255,255,255,0.15)";
e.currentTarget.style.background =
"rgba(255,255,255,0.15)";
}}
>
+
@@ -338,7 +421,7 @@ export const Settings = () => {
background: "rgba(255,255,255,0.1)",
color: "#fff",
cursor: "pointer",
fontSize: "12px"
fontSize: "12px",
}}
>
Done
@@ -348,8 +431,6 @@ export const Settings = () => {
)}
</div>
</div>
</LunaSettings>
);
};
plugins/audio-visualizer-luna/src/index.ts
+61 -32
View File
@@ -10,21 +10,28 @@ export const { trace } = Tracer("[Audio Visualizer]");
// Helper function for consistent logging
const log = (message: string) => console.log(`[Audio Visualizer] ${message}`);
const warn = (message: string) => console.warn(`[Audio Visualizer] ${message}`);
const error = (message: string) => console.error(`[Audio Visualizer] ${message}`);
const error = (message: string) =>
console.error(`[Audio Visualizer] ${message}`);
export { Settings };
// Basic config with settings
const config = {
enabled: true,
position: 'left' as 'left' | 'right',
position: "left" as "left" | "right",
width: 200,
height: 40,
get barCount() { return settings.barCount; },
get color() { return settings.barColor; },
get barRounding() { return settings.barRounding; },
get barCount() {
return settings.barCount;
},
get color() {
return settings.barColor;
},
get barRounding() {
return settings.barRounding;
},
sensitivity: 1.5,
smoothing: 0.8,
visualizerType: 'bars' as 'bars' | 'waveform' | 'circular'
visualizerType: "bars" as "bars" | "waveform" | "circular",
};
// Clean up resources
@@ -51,21 +58,24 @@ let canvasContext: CanvasRenderingContext2D | null = null;
const findAudioElement = (): HTMLAudioElement | null => {
// Try main selectors first
const selectors = [
'audio',
'video',
'audio[data-test]',
'[data-test="audio-player"] audio'
"audio",
"video",
"audio[data-test]",
'[data-test="audio-player"] audio',
];
for (const selector of selectors) {
const element = document.querySelector(selector) as HTMLAudioElement;
if (element && (element.tagName === 'AUDIO' || element.tagName === 'VIDEO')) {
if (
element &&
(element.tagName === "AUDIO" || element.tagName === "VIDEO")
) {
return element;
}
}
// Quick scan for any audio elements
const audioElements = document.querySelectorAll('audio, video');
const audioElements = document.querySelectorAll("audio, video");
for (const element of audioElements) {
const audioEl = element as HTMLAudioElement;
if (audioEl.src || audioEl.currentSrc) {
@@ -114,7 +124,10 @@ const initializeAudioVisualizer = async (): Promise<void> => {
log("Connected to audio stream with output");
} catch (error) {
// Audio is connected elsewhere - that's fine, we just can't visualize
if (error instanceof Error && error.message.includes('already connected')) {
if (
error instanceof Error &&
error.message.includes("already connected")
) {
log("Audio already connected elsewhere - skipping visualization");
}
return;
@@ -123,7 +136,7 @@ const initializeAudioVisualizer = async (): Promise<void> => {
// Resume context only if needed and don't wait for it
// (otherwise it will wait for the audio to start playing)
if (audioContext.state === 'suspended') {
if (audioContext.state === "suspended") {
audioContext.resume().catch(() => {}); // Fire and forget
}
@@ -136,7 +149,6 @@ const initializeAudioVisualizer = async (): Promise<void> => {
if (!animationId) {
animate();
}
} catch (err) {
// log errors
console.error(err);
@@ -151,7 +163,9 @@ const createVisualizerUI = (): void => {
if (!config.enabled) return;
// Find the search bar
const searchField = document.querySelector('input[class*="_searchField"]') as HTMLInputElement;
const searchField = document.querySelector(
'input[class*="_searchField"]',
) as HTMLInputElement;
if (!searchField) {
warn("Search field not found");
return;
@@ -164,13 +178,13 @@ const createVisualizerUI = (): void => {
}
// Create visualizer container
visualizerContainer = document.createElement('div');
visualizerContainer.id = 'audio-visualizer-container';
visualizerContainer = document.createElement("div");
visualizerContainer.id = "audio-visualizer-container";
visualizerContainer.style.cssText = `
display: flex;
align-items: center;
justify-content: center;
margin-${config.position === 'left' ? 'right' : 'left'}: 12px;
margin-${config.position === "left" ? "right" : "left"}: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 4px;
@@ -179,7 +193,7 @@ const createVisualizerUI = (): void => {
`;
// Create canvas
canvas = document.createElement('canvas');
canvas = document.createElement("canvas");
canvas.width = config.width;
canvas.height = config.height;
canvas.style.cssText = `
@@ -189,13 +203,19 @@ const createVisualizerUI = (): void => {
`;
visualizerContainer.appendChild(canvas);
canvasContext = canvas.getContext('2d');
canvasContext = canvas.getContext("2d");
// Insert visualizer next to search bar
if (config.position === 'left') {
searchContainer.parentElement?.insertBefore(visualizerContainer, searchContainer);
if (config.position === "left") {
searchContainer.parentElement?.insertBefore(
visualizerContainer,
searchContainer,
);
} else {
searchContainer.parentElement?.insertBefore(visualizerContainer, searchContainer.nextSibling);
searchContainer.parentElement?.insertBefore(
visualizerContainer,
searchContainer.nextSibling,
);
}
};
@@ -225,7 +245,8 @@ const animate = (): void => {
if (analyser && dataArray) {
analyser.getByteFrequencyData(dataArray);
// Check if there's actual audio signal (not just silence)
const avgVolume = dataArray.reduce((sum, val) => sum + val, 0) / dataArray.length;
const avgVolume =
dataArray.reduce((sum, val) => sum + val, 0) / dataArray.length;
hasRealAudio = avgVolume > 5; // Threshold for detecting actual audio
}
@@ -235,13 +256,13 @@ const animate = (): void => {
if (hasRealAudio && analyser && dataArray) {
// Draw real audio visualization
switch (config.visualizerType) {
case 'bars': // Is implemented YAYYY (default)
case "bars": // Is implemented YAYYY (default)
drawBars();
break;
case 'waveform': // Not implemented yet
case "waveform": // Not implemented yet
drawWaveform();
break;
case 'circular': // Not implemented yet
case "circular": // Not implemented yet
drawCircular();
break;
}
@@ -257,7 +278,14 @@ const animate = (): void => {
let waveTime = 0;
// Helper function to draw rounded rectangles
const drawRoundedRect = (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number): void => {
const drawRoundedRect = (
ctx: CanvasRenderingContext2D,
x: number,
y: number,
width: number,
height: number,
radius: number,
): void => {
ctx.beginPath();
ctx.roundRect(x, y, width, height, radius);
ctx.fill();
@@ -314,7 +342,7 @@ const drawBars = (): void => {
for (let i = 0; i < config.barCount; i++) {
const dataIndex = Math.floor(i * (dataArray.length / config.barCount));
const barHeight = (dataArray[dataIndex] * config.sensitivity * heightScale);
const barHeight = dataArray[dataIndex] * config.sensitivity * heightScale;
const x = i * barWidth;
const y = canvas.height - barHeight;
@@ -456,7 +484,8 @@ const observePlayState = (): void => {
// Start with fast checking, then slow down
const fastInterval = setInterval(() => {
checkAndInitialize();
if (checkCount > 10) { // After 10 quick checks, switch to slower
if (checkCount > 10) {
// After 10 quick checks, switch to slower
clearInterval(fastInterval);
const slowInterval = setInterval(checkAndInitialize, 2000);
unloads.add(() => clearInterval(slowInterval));
@@ -507,7 +536,7 @@ const completeCleanup = (): void => {
}
// Close audio context completely on plugin unload
if (audioContext && audioContext.state !== 'closed') {
if (audioContext && audioContext.state !== "closed") {
audioContext.close();
log("Closed AudioContext");
}
plugins/colorama-lyrics-luna/package.json
-1
View File
@@ -9,4 +9,3 @@
"main": "./src/index.ts",
"type": "module"
}
plugins/colorama-lyrics-luna/src/Settings.tsx
+429 -132
View File
@@ -2,7 +2,23 @@ import { ReactiveStore } from "@luna/core";
import { LunaSettings, LunaSwitchSetting } from "@luna/ui";
import React from "react";
export type ColoramaMode = "single" | "gradient-experimental" | "cover" | "cover-gradient";
declare global {
interface Window {
applyColoramaLyrics?: () => void;
}
}
// Define a typed onChange signature for the switch
type SwitchChangeHandler = (
event: React.ChangeEvent<HTMLInputElement> | null,
checked: boolean,
) => void;
export type ColoramaMode =
| "single"
| "gradient-experimental"
| "cover"
| "cover-gradient";
export const settings = await ReactiveStore.getPluginStorage("ColoramaLyrics", {
enabled: true,
@@ -16,32 +32,54 @@ export const settings = await ReactiveStore.getPluginStorage("ColoramaLyrics", {
gradientEndAlpha: 100,
gradientAngle: 0,
customColors: [] as string[],
excludeInactive: false
excludeInactive: false,
});
export const Settings = () => {
const [enabled, setEnabled] = React.useState(settings.enabled);
// const [enabled, setEnabled] = React.useState(settings.enabled);
const [mode, setMode] = React.useState<ColoramaMode>(settings.mode);
const [singleColor, setSingleColor] = React.useState(settings.singleColor);
const [singleAlpha, setSingleAlpha] = React.useState<number>(settings.singleAlpha ?? 100);
const [gradientStart, setGradientStart] = React.useState(settings.gradientStart);
const [gradientStartAlpha, setGradientStartAlpha] = React.useState<number>(settings.gradientStartAlpha ?? 100);
const [singleAlpha, setSingleAlpha] = React.useState<number>(
settings.singleAlpha ?? 100,
);
const [gradientStart, setGradientStart] = React.useState(
settings.gradientStart,
);
const [gradientStartAlpha, setGradientStartAlpha] = React.useState<number>(
settings.gradientStartAlpha ?? 100,
);
const [gradientEnd, setGradientEnd] = React.useState(settings.gradientEnd);
const [gradientEndAlpha, setGradientEndAlpha] = React.useState<number>(settings.gradientEndAlpha ?? 100);
const [gradientAngle, setGradientAngle] = React.useState(settings.gradientAngle);
const [gradientEndAlpha, setGradientEndAlpha] = React.useState<number>(
settings.gradientEndAlpha ?? 100,
);
const [gradientAngle, setGradientAngle] = React.useState(
settings.gradientAngle,
);
const [customInput, setCustomInput] = React.useState(settings.singleColor);
const [customColors, setCustomColors] = React.useState(settings.customColors);
const [showPicker, setShowPicker] = React.useState(false);
const [isAnimatingIn, setIsAnimatingIn] = React.useState(false);
const [shouldRender, setShouldRender] = React.useState(false);
const [excludeInactive, setExcludeInactive] = React.useState(settings.excludeInactive);
const [activeEndpoint, setActiveEndpoint] = React.useState<'single' | 'start' | 'end'>('single');
const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType<any>;
const [excludeInactive, setExcludeInactive] = React.useState(
settings.excludeInactive,
);
const [activeEndpoint, setActiveEndpoint] = React.useState<
"single" | "start" | "end"
>("single");
const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType<{
title: string;
desc?: string;
checked: boolean;
onChange: SwitchChangeHandler;
}>;
// Helper for HEX normalization
const normalizeToRGB = (hex: string, fallback: string = "#FFFFFF"): string => {
const normalizeToRGB = (
hex: string,
fallback: string = "#FFFFFF",
): string => {
let v = hex.trim().toLowerCase();
if (!v.startsWith('#')) v = `#${v}`;
if (!v.startsWith("#")) v = `#${v}`;
// #rgb or #rgba -> expand
if (/^#([0-9a-f]{3,4})$/.test(v)) {
const m = v.slice(1);
@@ -62,12 +100,28 @@ export const Settings = () => {
};
const colorPresets = [
"#FFFFFF", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF",
"#FF8800", "#8800FF", "#0088FF", "#88FF00", "#FF0088", "#00FF88",
"#444444", "#888888", "#CCCCCC", "#1DB954", "#E22134", "#1976D2"
"#FFFFFF",
"#FF0000",
"#00FF00",
"#0000FF",
"#FFFF00",
"#FF00FF",
"#00FFFF",
"#FF8800",
"#8800FF",
"#0088FF",
"#88FF00",
"#FF0088",
"#00FF88",
"#444444",
"#888888",
"#CCCCCC",
"#1DB954",
"#E22134",
"#1976D2",
];
const openPicker = (endpoint: 'single' | 'start' | 'end' = 'single') => {
const openPicker = (endpoint: "single" | "start" | "end" = "single") => {
setActiveEndpoint(endpoint);
setShowPicker(true);
setShouldRender(true);
@@ -88,16 +142,19 @@ export const Settings = () => {
if (!hexColorRegex.test(trimmed)) return;
if (mode === "single") {
const next = normalizeToRGB(trimmed);
setSingleColor((settings.singleColor = next));
settings.singleColor = next;
setSingleColor(next);
if (updateInput) setCustomInput(next);
} else if (mode === "gradient-experimental") {
const norm = normalizeToRGB(trimmed);
if (activeEndpoint === 'end') {
setGradientEnd((settings.gradientEnd = norm));
const next = normalizeToRGB(trimmed);
if (activeEndpoint === "end") {
settings.gradientEnd = next;
setGradientEnd(next);
} else {
setGradientStart((settings.gradientStart = norm));
settings.gradientStart = next;
setGradientStart(next);
}
if (updateInput) setCustomInput(norm);
if (updateInput) setCustomInput(next);
}
requestApply();
};
@@ -115,32 +172,41 @@ export const Settings = () => {
}
};
const removeCustomColor = (color: string) => {
const updated = customColors.filter(c => c !== color);
setCustomColors(updated);
settings.customColors = updated;
};
// const removeCustomColor = (color: string) => {
// const updated = customColors.filter((c) => c !== color);
// setCustomColors(updated);
// settings.customColors = updated;
// };
const allColors = [...colorPresets, ...customColors];
const requestApply = () => {
(window as any).applyColoramaLyrics?.();
window.applyColoramaLyrics?.();
};
return (
<LunaSettings>
{/* Mode selection via dropdown (aligned right) */}
<div style={{ padding: "8px 0", display: "flex", alignItems: "center", gap: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div
style={{
padding: "8px 0",
display: "flex",
alignItems: "center",
gap: 12,
}}
>
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ fontWeight: "normal", fontSize: "1.075rem" }}>Mode</div>
<div style={{ opacity: 0.7, fontSize: 14 }}>Choose how lyrics are colored</div>
<div style={{ opacity: 0.7, fontSize: 14 }}>
Choose how lyrics are colored
</div>
</div>
<select
value={mode}
onChange={(e) => {
const next = e.target.value as ColoramaMode;
setMode((settings.mode = next));
settings.mode = next;
setMode(next);
requestApply();
}}
style={{
@@ -151,53 +217,108 @@ export const Settings = () => {
color: "#fff",
cursor: "pointer",
marginLeft: "auto",
minWidth: 180
minWidth: 180,
}}
>
<option value="single" style={{ color: '#000', background: '#fff' }}>Single</option>
<option value="gradient-experimental" style={{ color: '#000', background: '#fff' }}>Gradient - Experimental</option>
<option value="cover" style={{ color: '#000', background: '#fff' }}>Cover - Experimental</option>
<option value="cover-gradient" style={{ color: '#000', background: '#fff' }}>Cover (Gradient) - Experimental</option>
<option value="single" style={{ color: "#000", background: "#fff" }}>
Single
</option>
<option
value="gradient-experimental"
style={{ color: "#000", background: "#fff" }}
>
Gradient - Experimental
</option>
<option value="cover" style={{ color: "#000", background: "#fff" }}>
Cover - Experimental
</option>
<option
value="cover-gradient"
style={{ color: "#000", background: "#fff" }}
>
Cover (Gradient) - Experimental
</option>
</select>
</div>
{/* Single color */}
<div style={{ padding: "8px 0", display: mode === "single" ? "flex" : "none", justifyContent: "space-between", alignItems: "center" }}>
<div
style={{
padding: "8px 0",
display: mode === "single" ? "flex" : "none",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div>
<div style={{ fontWeight: "normal", fontSize: "1.075rem", marginBottom: 4 }}>Lyrics Color</div>
<div
style={{
fontWeight: "normal",
fontSize: "1.075rem",
marginBottom: 4,
}}
>
Lyrics Color
</div>
<div style={{ opacity: 0.7, fontSize: 14 }}>Set lyrics color</div>
</div>
<div style={{ display: "flex", gap: 8, alignItems: "center", position: "relative" }}>
<div
style={{
display: "flex",
gap: 8,
alignItems: "center",
position: "relative",
}}
>
<button
onClick={() => (showPicker ? closePicker() : openPicker('single'))}
type="button"
onClick={() => (showPicker ? closePicker() : openPicker("single"))}
style={{
width: 32,
height: 32,
border: "1px solid rgba(255,255,255,0.15)",
borderRadius: 6,
cursor: "pointer",
background: normalizeToRGB(singleColor)
background: normalizeToRGB(singleColor),
}}
/>
</div>
</div>
{/* Gradient controls (open picker) */}
<div style={{ padding: "8px 0", display: mode === "gradient-experimental" ? "flex" : "none", justifyContent: 'space-between', alignItems: 'center' }}>
<div
style={{
padding: "8px 0",
display: mode === "gradient-experimental" ? "flex" : "none",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div>
<div style={{ fontWeight: "normal", fontSize: "1.075rem", marginBottom: 4 }}>Gradient (Experimental)</div>
<div
style={{
fontWeight: "normal",
fontSize: "1.075rem",
marginBottom: 4,
}}
>
Gradient (Experimental)
</div>
<div style={{ opacity: 0.7, fontSize: 14 }}>Set colors & angle</div>
</div>
<button
onClick={() => { setCustomInput(gradientStart); openPicker('start'); }}
type="button"
onClick={() => {
setCustomInput(gradientStart);
openPicker("start");
}}
style={{
padding: '8px 12px',
padding: "8px 12px",
borderRadius: 8,
border: '1px solid rgba(255,255,255,0.2)',
background: 'rgba(255,255,255,0.08)',
color: '#fff',
cursor: 'pointer'
border: "1px solid rgba(255,255,255,0.2)",
background: "rgba(255,255,255,0.08)",
color: "#fff",
cursor: "pointer",
}}
>
Configure
@@ -205,20 +326,36 @@ export const Settings = () => {
</div>
{/* Cover gradient controls (open picker for angle) */}
<div style={{ padding: "8px 0", display: mode === "cover-gradient" ? "flex" : "none", justifyContent: 'space-between', alignItems: 'center' }}>
<div
style={{
padding: "8px 0",
display: mode === "cover-gradient" ? "flex" : "none",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div>
<div style={{ fontWeight: "normal", fontSize: "1.075rem", marginBottom: 4 }}>Cover (Gradient) - Experimental</div>
<div
style={{
fontWeight: "normal",
fontSize: "1.075rem",
marginBottom: 4,
}}
>
Cover (Gradient) - Experimental
</div>
<div style={{ opacity: 0.7, fontSize: 14 }}>Set angle</div>
</div>
<button
onClick={() => openPicker('start')}
type="button"
onClick={() => openPicker("start")}
style={{
padding: '8px 12px',
padding: "8px 12px",
borderRadius: 8,
border: '1px solid rgba(255,255,255,0.2)',
background: 'rgba(255,255,255,0.08)',
color: '#fff',
cursor: 'pointer'
border: "1px solid rgba(255,255,255,0.2)",
background: "rgba(255,255,255,0.08)",
color: "#fff",
cursor: "pointer",
}}
>
Configure
@@ -228,7 +365,7 @@ export const Settings = () => {
{/* Modal for picking and managing colors (reused) */}
{shouldRender && (
<>
<div
<button
style={{
position: "fixed",
top: 0,
@@ -238,9 +375,14 @@ export const Settings = () => {
background: "rgba(0,0,0,0.6)",
zIndex: 1000,
opacity: isAnimatingIn ? 1 : 0,
transition: "opacity 0.2s ease"
transition: "opacity 0.2s ease",
}}
type="button"
aria-label="Close color picker"
onClick={closePicker}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === "Escape") closePicker();
}}
/>
<div
style={{
@@ -259,59 +401,128 @@ export const Settings = () => {
zIndex: 1001,
boxShadow: "0 20px 40px rgba(0,0,0,0.7)",
opacity: isAnimatingIn ? 1 : 0,
transform: isAnimatingIn ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0.9)",
transition: "all 0.2s ease"
transform: isAnimatingIn
? "translate(-50%, -50%) scale(1)"
: "translate(-50%, -50%) scale(0.9)",
transition: "all 0.2s ease",
}}
>
<div style={{ marginBottom: 12, color: "#fff", fontWeight: "bold", fontSize: 14 }}>
{mode === 'single' ? 'Single Color' : 'Gradient Colors'}
</div>
{mode === 'gradient-experimental' && (
<div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 12 }}>
<div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12 }}>Editing</div>
<button
onClick={() => { setActiveEndpoint('start'); setCustomInput(gradientStart); }}
<div
style={{
display: 'flex', alignItems: 'center', gap: 8,
padding: '6px 10px', borderRadius: 8,
border: activeEndpoint === 'start' ? '1px solid rgba(255,255,255,0.5)' : '1px solid rgba(255,255,255,0.2)',
background: 'rgba(255,255,255,0.05)', color: '#fff', cursor: 'pointer'
marginBottom: 12,
color: "#fff",
fontWeight: "bold",
fontSize: 14,
}}
>
<span style={{ width: 14, height: 14, borderRadius: 3, background: normalizeToRGB(gradientStart), border: '1px solid rgba(255,255,255,0.3)' }} />
{mode === "single" ? "Single Color" : "Gradient Colors"}
</div>
{mode === "gradient-experimental" && (
<div
style={{
display: "flex",
gap: 8,
alignItems: "center",
marginBottom: 12,
}}
>
<div style={{ color: "rgba(255,255,255,0.7)", fontSize: 12 }}>
Editing
</div>
<button
onClick={() => {
setActiveEndpoint("start");
setCustomInput(gradientStart);
}}
style={{
display: "flex",
alignItems: "center",
gap: 8,
padding: "6px 10px",
borderRadius: 8,
border:
activeEndpoint === "start"
? "1px solid rgba(255,255,255,0.5)"
: "1px solid rgba(255,255,255,0.2)",
background: "rgba(255,255,255,0.05)",
color: "#fff",
cursor: "pointer",
}}
type="button"
>
<span
style={{
width: 14,
height: 14,
borderRadius: 3,
background: normalizeToRGB(gradientStart),
border: "1px solid rgba(255,255,255,0.3)",
}}
/>
<span style={{ fontSize: 12 }}>Start</span>
</button>
<button
onClick={() => { setActiveEndpoint('end'); setCustomInput(gradientEnd); }}
type="button"
onClick={() => {
setActiveEndpoint("end");
setCustomInput(gradientEnd);
}}
style={{
display: 'flex', alignItems: 'center', gap: 8,
padding: '6px 10px', borderRadius: 8,
border: activeEndpoint === 'end' ? '1px solid rgba(255,255,255,0.5)' : '1px solid rgba(255,255,255,0.2)',
background: 'rgba(255,255,255,0.05)', color: '#fff', cursor: 'pointer'
display: "flex",
alignItems: "center",
gap: 8,
padding: "6px 10px",
borderRadius: 8,
border:
activeEndpoint === "end"
? "1px solid rgba(255,255,255,0.5)"
: "1px solid rgba(255,255,255,0.2)",
background: "rgba(255,255,255,0.05)",
color: "#fff",
cursor: "pointer",
}}
>
<span style={{ width: 14, height: 14, borderRadius: 3, background: normalizeToRGB(gradientEnd), border: '1px solid rgba(255,255,255,0.3)' }} />
<span
style={{
width: 14,
height: 14,
borderRadius: 3,
background: normalizeToRGB(gradientEnd),
border: "1px solid rgba(255,255,255,0.3)",
}}
/>
<span style={{ fontSize: 12 }}>End</span>
</button>
</div>
)}
{mode !== 'cover-gradient' && (
<div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 8, marginBottom: 16 }}>
{allColors.map((color, index) => (
{mode !== "cover-gradient" && (
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)",
gap: 8,
marginBottom: 16,
}}
>
{allColors.map((color) => (
<button
key={index}
key={color}
type="button"
onClick={() => {
if (mode === "single") {
const next = normalizeToRGB(color);
setSingleColor((settings.singleColor = next));
if (mode === "single") {
settings.singleColor = next;
setSingleColor(next);
} else if (mode === "gradient-experimental") {
if (activeEndpoint === 'end') {
setGradientEnd((settings.gradientEnd = normalizeToRGB(color)));
if (activeEndpoint === "end") {
settings.gradientEnd = next;
setGradientEnd(next);
} else {
setGradientStart((settings.gradientStart = normalizeToRGB(color)));
settings.gradientStart = next;
setGradientStart(next);
}
}
setCustomInput(normalizeToRGB(color));
setCustomInput(next);
requestApply();
}}
style={{
@@ -320,22 +531,30 @@ export const Settings = () => {
borderRadius: 6,
border: "1px solid rgba(255,255,255,0.2)",
background: normalizeToRGB(color),
cursor: "pointer"
cursor: "pointer",
}}
/>
))}
</div>
)}
{mode !== 'cover-gradient' && (
{mode !== "cover-gradient" && (
<div style={{ marginBottom: 12 }}>
<div style={{ color: "rgba(255,255,255,0.7)", fontSize: 12, marginBottom: 6 }}>Custom Hex (#RRGGBB)</div>
<div
style={{
color: "rgba(255,255,255,0.7)",
fontSize: 12,
marginBottom: 6,
}}
>
Custom Hex (#RRGGBB)
</div>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<input
type="text"
value={customInput}
onChange={(e) => setCustomInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
if (e.key === "Enter") {
applyCustomInputColor(customInput, true);
addCustomColor();
}
@@ -350,7 +569,7 @@ export const Settings = () => {
color: "#fff",
fontSize: 14,
fontFamily: "monospace",
boxSizing: "border-box"
boxSizing: "border-box",
}}
/>
<button
@@ -370,8 +589,9 @@ export const Settings = () => {
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.2s ease"
transition: "all 0.2s ease",
}}
type="button"
>
+
</button>
@@ -379,9 +599,17 @@ export const Settings = () => {
</div>
)}
{/* Sliders inside picker based on mode */}
{mode === 'single' && (
{mode === "single" && (
<div style={{ marginBottom: 16 }}>
<div style={{ color: "rgba(255,255,255,0.8)", fontSize: 12, marginBottom: 6 }}>Alpha</div>
<div
style={{
color: "rgba(255,255,255,0.8)",
fontSize: 12,
marginBottom: 6,
}}
>
Alpha
</div>
<input
type="range"
min={0}
@@ -390,20 +618,40 @@ export const Settings = () => {
value={singleAlpha}
onChange={(e) => {
const value = Number(e.target.value);
setSingleAlpha((settings.singleAlpha = value));
settings.singleAlpha = value;
setSingleAlpha(value);
requestApply();
}}
style={{ width: '100%' }}
style={{ width: "100%" }}
/>
</div>
)}
{mode === 'gradient-experimental' && (
<div style={{ marginBottom: 16, display: 'grid', gap: 16 }}>
{mode === "gradient-experimental" && (
<div style={{ marginBottom: 16, display: "grid", gap: 16 }}>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
<div style={{ width: 12, height: 12, borderRadius: 3, background: normalizeToRGB(gradientStart), border: '1px solid rgba(255,255,255,0.3)' }} />
<div style={{ color: 'rgba(255,255,255,0.8)', fontSize: 12 }}>Start Alpha</div>
<div
style={{
display: "flex",
alignItems: "center",
gap: 8,
marginBottom: 6,
}}
>
<div
style={{
width: 12,
height: 12,
borderRadius: 3,
background: normalizeToRGB(gradientStart),
border: "1px solid rgba(255,255,255,0.3)",
}}
/>
<div
style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}
>
Start Alpha
</div>
</div>
<input
type="range"
@@ -413,16 +661,36 @@ export const Settings = () => {
value={gradientStartAlpha}
onChange={(e) => {
const value = Number(e.target.value);
setGradientStartAlpha((settings.gradientStartAlpha = value));
settings.gradientStartAlpha = value;
setGradientStartAlpha(value);
requestApply();
}}
style={{ width: '100%' }}
style={{ width: "100%" }}
/>
</div>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
<div style={{ width: 12, height: 12, borderRadius: 3, background: normalizeToRGB(gradientEnd), border: '1px solid rgba(255,255,255,0.3)' }} />
<div style={{ color: 'rgba(255,255,255,0.8)', fontSize: 12 }}>End Alpha</div>
<div
style={{
display: "flex",
alignItems: "center",
gap: 8,
marginBottom: 6,
}}
>
<div
style={{
width: 12,
height: 12,
borderRadius: 3,
background: normalizeToRGB(gradientEnd),
border: "1px solid rgba(255,255,255,0.3)",
}}
/>
<div
style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}
>
End Alpha
</div>
</div>
<input
type="range"
@@ -432,16 +700,32 @@ export const Settings = () => {
value={gradientEndAlpha}
onChange={(e) => {
const value = Number(e.target.value);
setGradientEndAlpha((settings.gradientEndAlpha = value));
settings.gradientEndAlpha = value;
setGradientEndAlpha(value);
requestApply();
}}
style={{ width: '100%' }}
style={{ width: "100%" }}
/>
</div>
<div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
<div style={{ color: 'rgba(255,255,255,0.8)', fontSize: 12 }}>Angle</div>
<div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>{gradientAngle}°</div>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 6,
}}
>
<div
style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}
>
Angle
</div>
<div
style={{ color: "rgba(255,255,255,0.6)", fontSize: 12 }}
>
{gradientAngle}°
</div>
</div>
<input
type="range"
@@ -451,20 +735,32 @@ export const Settings = () => {
value={gradientAngle}
onChange={(e) => {
const value = Number(e.target.value);
setGradientAngle((settings.gradientAngle = value));
settings.gradientAngle = value;
setGradientAngle(value);
requestApply();
}}
style={{ width: '100%' }}
style={{ width: "100%" }}
/>
</div>
</div>
)}
{mode === 'cover-gradient' && (
{mode === "cover-gradient" && (
<div style={{ marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
<div style={{ color: 'rgba(255,255,255,0.8)', fontSize: 12 }}>Angle</div>
<div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>{gradientAngle}°</div>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 6,
}}
>
<div style={{ color: "rgba(255,255,255,0.8)", fontSize: 12 }}>
Angle
</div>
<div style={{ color: "rgba(255,255,255,0.6)", fontSize: 12 }}>
{gradientAngle}°
</div>
</div>
<input
type="range"
@@ -474,10 +770,11 @@ export const Settings = () => {
value={gradientAngle}
onChange={(e) => {
const value = Number(e.target.value);
setGradientAngle((settings.gradientAngle = value));
settings.gradientAngle = value;
setGradientAngle(value);
requestApply();
}}
style={{ width: '100%' }}
style={{ width: "100%" }}
/>
</div>
)}
@@ -492,8 +789,9 @@ export const Settings = () => {
background: "rgba(255,255,255,0.1)",
color: "#fff",
cursor: "pointer",
fontSize: 12
fontSize: 12,
}}
type="button"
>
Done
</button>
@@ -504,13 +802,12 @@ export const Settings = () => {
title="Exclude Inactive"
desc="Apply color/gradient only to the currently active lyric line"
checked={excludeInactive}
onChange={(_: unknown, checked: boolean) => {
setExcludeInactive((settings.excludeInactive = checked));
onChange={(_event: React.ChangeEvent<HTMLInputElement> | null, checked: boolean) => {
settings.excludeInactive = checked;
setExcludeInactive(checked);
requestApply();
}}
/>
</LunaSettings>
);
};
plugins/colorama-lyrics-luna/src/index.ts
+53 -39
View File
@@ -13,9 +13,13 @@ new StyleTag("ColoramaLyrics", unloads, styles);
// Simple dominant color extraction from current cover art
async function getCoverArtElement(): Promise<HTMLImageElement | null> {
const img = document.querySelector('figure[class*="_albumImage"] > div > div > div > img') as HTMLImageElement | null;
const img = document.querySelector(
'figure[class*="_albumImage"] > div > div > div > img',
) as HTMLImageElement | null;
if (img) return img;
const video = document.querySelector('figure[class*="_albumImage"] > div > div > div > video') as HTMLVideoElement | null;
const video = document.querySelector(
'figure[class*="_albumImage"] > div > div > div > video',
) as HTMLVideoElement | null;
if (video) {
const poster = video.getAttribute("poster");
if (!poster) return null;
@@ -31,10 +35,13 @@ async function getCoverArtElement(): Promise<HTMLImageElement | null> {
return null;
}
function getDominantColorsFromImage(img: HTMLImageElement, count: number = 2): string[] {
function getDominantColorsFromImage(
img: HTMLImageElement,
count: number = 2,
): string[] {
try {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return ["#ffffff", "#88aaff"]; // fallback
const w = 64;
const h = 64;
@@ -49,13 +56,13 @@ function getDominantColorsFromImage(img: HTMLImageElement, count: number = 2): s
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const key = `${Math.round(r/16)},${Math.round(g/16)},${Math.round(b/16)}`;
const key = `${Math.round(r / 16)},${Math.round(g / 16)},${Math.round(b / 16)}`;
buckets.set(key, (buckets.get(key) ?? 0) + 1);
}
const sorted = [...buckets.entries()].sort((a, b) => b[1] - a[1]);
const picked = sorted.slice(0, Math.max(1, count)).map(([key]) => {
const [r, g, b] = key.split(',').map(v => parseInt(v, 10) * 16);
return `#${[r, g, b].map(v => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0')).join('')}`;
const [r, g, b] = key.split(",").map((v) => parseInt(v, 10) * 16);
return `#${[r, g, b].map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("")}`;
});
return picked;
} catch {
@@ -66,7 +73,7 @@ function getDominantColorsFromImage(img: HTMLImageElement, count: number = 2): s
// build rgba() from hex + alpha percentage
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
let v = hex.trim();
if (!v.startsWith('#')) v = `#${v}`;
if (!v.startsWith("#")) v = `#${v}`;
if (/^#([0-9a-fA-F]{3})$/.test(v)) {
const r = parseInt(v[1] + v[1], 16);
const g = parseInt(v[2] + v[2], 16);
@@ -90,7 +97,10 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
return null;
}
function rgbaFromHexAndAlpha(hex: string, alphaPercent: number | undefined): string {
function rgbaFromHexAndAlpha(
hex: string,
alphaPercent: number | undefined,
): string {
const rgb = hexToRgb(hex);
const a = Math.max(0.05, Math.min(100, alphaPercent ?? 100)) / 100;
if (!rgb) return `rgba(255,255,255,${a})`;
@@ -100,14 +110,14 @@ function rgbaFromHexAndAlpha(hex: string, alphaPercent: number | undefined): str
function applySingleColor(color: string) {
const alpha = (settings as any).singleAlpha ?? 100;
const rgba = rgbaFromHexAndAlpha(color, alpha);
document.documentElement.style.setProperty('--cl-lyrics-color', rgba);
document.documentElement.style.setProperty('--cl-glow1', rgba);
document.documentElement.style.setProperty('--cl-glow2', rgba);
document.documentElement.style.removeProperty('--cl-grad-start');
document.documentElement.style.removeProperty('--cl-grad-end');
document.documentElement.style.removeProperty('--cl-grad-angle');
document.body.classList.remove('colorama-gradient');
document.body.classList.add('colorama-single');
document.documentElement.style.setProperty("--cl-lyrics-color", rgba);
document.documentElement.style.setProperty("--cl-glow1", rgba);
document.documentElement.style.setProperty("--cl-glow2", rgba);
document.documentElement.style.removeProperty("--cl-grad-start");
document.documentElement.style.removeProperty("--cl-grad-end");
document.documentElement.style.removeProperty("--cl-grad-angle");
document.body.classList.remove("colorama-gradient");
document.body.classList.add("colorama-single");
}
function applyGradient(start: string, end: string, angle: number) {
@@ -115,17 +125,17 @@ function applyGradient(start: string, end: string, angle: number) {
const endAlpha = (settings as any).gradientEndAlpha ?? 100;
const startRgba = rgbaFromHexAndAlpha(start, startAlpha);
const endRgba = rgbaFromHexAndAlpha(end, endAlpha);
document.documentElement.style.setProperty('--cl-grad-start', startRgba);
document.documentElement.style.setProperty('--cl-grad-end', endRgba);
document.documentElement.style.setProperty('--cl-grad-angle', `${angle}deg`);
document.documentElement.style.setProperty('--cl-glow1', startRgba);
document.documentElement.style.setProperty('--cl-glow2', endRgba);
document.body.classList.remove('colorama-single');
document.body.classList.add('colorama-gradient');
document.documentElement.style.setProperty("--cl-grad-start", startRgba);
document.documentElement.style.setProperty("--cl-grad-end", endRgba);
document.documentElement.style.setProperty("--cl-grad-angle", `${angle}deg`);
document.documentElement.style.setProperty("--cl-glow1", startRgba);
document.documentElement.style.setProperty("--cl-glow2", endRgba);
document.body.classList.remove("colorama-single");
document.body.classList.add("colorama-gradient");
}
function resetModeClasses(): void {
document.body.classList.remove('colorama-single', 'colorama-gradient');
document.body.classList.remove("colorama-single", "colorama-gradient");
}
async function applyCoverColors(gradient: boolean) {
@@ -144,15 +154,15 @@ async function applyCoverColors(gradient: boolean) {
function applyColoramaLyrics(): void {
if (!settings.enabled) {
document.body.classList.remove('colorama-single', 'colorama-gradient');
document.body.classList.remove("colorama-single", "colorama-gradient");
return;
}
// Toggle only-active-line mode class
if (settings.excludeInactive) {
document.body.classList.add('colorama-only-active');
document.body.classList.add("colorama-only-active");
} else {
document.body.classList.remove('colorama-only-active');
document.body.classList.remove("colorama-only-active");
}
resetModeClasses();
switch (settings.mode) {
@@ -160,7 +170,11 @@ function applyColoramaLyrics(): void {
applySingleColor(settings.singleColor);
break;
case "gradient-experimental":
applyGradient(settings.gradientStart, settings.gradientEnd, settings.gradientAngle);
applyGradient(
settings.gradientStart,
settings.gradientEnd,
settings.gradientAngle,
);
break;
case "cover":
applyCoverColors(false);
@@ -180,7 +194,7 @@ function observeTrackChanges(): void {
const currentTrackId = PlayState.playbackContext?.actualProductId;
if (currentTrackId && currentTrackId !== lastTrackId) {
lastTrackId = currentTrackId;
if (settings.mode === 'cover' || settings.mode === 'cover-gradient') {
if (settings.mode === "cover" || settings.mode === "cover-gradient") {
setTimeout(() => applyColoramaLyrics(), 200);
}
}
@@ -199,23 +213,23 @@ function hookRadiantUpdates(): void {
const w = window as any;
const wrap = (name: string) => {
const fn = w[name];
if (typeof fn === 'function' && !fn.__coloramaPatched) {
if (typeof fn === "function" && !fn.__coloramaPatched) {
const orig = fn.bind(w);
const patched = (...args: unknown[]) => {
const result = orig(...args);
try { applyColoramaLyrics(); } catch {}
try {
applyColoramaLyrics();
} catch {}
return result;
};
(patched as any).__coloramaPatched = true;
w[name] = patched;
}
};
wrap('updateRadiantLyricsStyles');
wrap('updateRadiantLyricsNowPlayingBackground');
wrap('updateRadiantLyricsGlobalBackground');
wrap('updateRadiantLyricsTextGlow');
wrap("updateRadiantLyricsStyles");
wrap("updateRadiantLyricsNowPlayingBackground");
wrap("updateRadiantLyricsGlobalBackground");
wrap("updateRadiantLyricsTextGlow");
}
setTimeout(() => hookRadiantUpdates(), 0);
plugins/colorama-lyrics-luna/src/styles.css
+60 -16
View File
@@ -12,7 +12,11 @@
.colorama-single [class*="_lyricsText"] > div > span,
.colorama-single [class*="_lyricsText"] > div > span[data-current="true"],
.colorama-single [class^="_lyricsContainer"] > div > div > span,
.colorama-single [class^="_lyricsContainer"] > div > div > span[data-current="true"] {
.colorama-single
[class^="_lyricsContainer"]
> div
> div
> span[data-current="true"] {
color: var(--cl-lyrics-color) !important;
background: none !important;
-webkit-background-clip: initial !important;
@@ -24,8 +28,16 @@
.colorama-gradient [class*="_lyricsText"] > div > span,
.colorama-gradient [class*="_lyricsText"] > div > span[data-current="true"],
.colorama-gradient [class^="_lyricsContainer"] > div > div > span,
.colorama-gradient [class^="_lyricsContainer"] > div > div > span[data-current="true"] {
background: linear-gradient(var(--cl-grad-angle), var(--cl-grad-start), var(--cl-grad-end)) !important;
.colorama-gradient
[class^="_lyricsContainer"]
> div
> div
> span[data-current="true"] {
background: linear-gradient(
var(--cl-grad-angle),
var(--cl-grad-start),
var(--cl-grad-end)
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
@@ -36,7 +48,11 @@
/* Slight emphasis on current line (uniform to single mode) */
.colorama-gradient [class*="_lyricsText"] > div > span[data-current="true"],
.colorama-gradient [class^="_lyricsContainer"] > div > div > span[data-current="true"] {
.colorama-gradient
[class^="_lyricsContainer"]
> div
> div
> span[data-current="true"] {
filter: brightness(1.1) !important;
}
@@ -44,23 +60,43 @@
/* Color Radiant glow shadows using Colorama colors (respect RL sizes) */
.colorama-single [class*="_lyricsText"] > div > span[data-current="true"],
.colorama-single [class^="_lyricsContainer"] > div > div > span[data-current="true"],
.colorama-single
[class^="_lyricsContainer"]
> div
> div
> span[data-current="true"],
.colorama-gradient [class*="_lyricsText"] > div > span[data-current="true"],
.colorama-gradient [class^="_lyricsContainer"] > div > div > span[data-current="true"],
.colorama-gradient [class^="_lyricsContainer"] > div > div > span[data-current="true"] {
text-shadow: 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff), 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
.colorama-gradient
[class^="_lyricsContainer"]
> div
> div
> span[data-current="true"],
.colorama-gradient
[class^="_lyricsContainer"]
> div
> div
> span[data-current="true"] {
text-shadow:
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff),
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
}
/* Hover: force glow color to match Colorama settings for inactive lines */
.colorama-single [class*="_lyricsText"] > div > span:hover,
.colorama-single [class^="_lyricsContainer"] > div > div > span:hover {
color: var(--cl-lyrics-color) !important;
text-shadow: 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff), 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
text-shadow:
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #ffffff),
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
}
.colorama-gradient [class*="_lyricsText"] > div > span:hover,
.colorama-gradient [class^="_lyricsContainer"] > div > div > span:hover {
background: linear-gradient(var(--cl-grad-angle), var(--cl-grad-start), var(--cl-grad-end)) !important;
background: linear-gradient(
var(--cl-grad-angle),
var(--cl-grad-start),
var(--cl-grad-end)
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
@@ -69,8 +105,13 @@
}
/* Only color active line mode */
body.colorama-only-active.colorama-single [class*="_lyricsText"] > div > span:not([data-current="true"]),
body.colorama-only-active.colorama-gradient [class*="_lyricsText"] > div > span:not([data-current="true"]) {
body.colorama-only-active.colorama-single [class*="_lyricsText"]
> div
> span:not([data-current="true"]),
body.colorama-only-active.colorama-gradient
[class*="_lyricsText"]
> div
> span:not([data-current="true"]) {
/* Match Radiant inactive styling */
color: rgba(128, 128, 128, 0.4) !important;
background: none !important;
@@ -81,8 +122,13 @@ body.colorama-only-active.colorama-gradient [class*="_lyricsText"] > div > span:
}
/* In only-active mode, keep TIDAL defaults even on hover for inactive lines */
body.colorama-only-active.colorama-single [class*="_lyricsText"] > div > span:not([data-current="true"]):hover,
body.colorama-only-active.colorama-gradient [class*="_lyricsText"] > div > span:not([data-current="true"]):hover {
body.colorama-only-active.colorama-single [class*="_lyricsText"]
> div
> span:not([data-current="true"]):hover,
body.colorama-only-active.colorama-gradient
[class*="_lyricsText"]
> div
> span:not([data-current="true"]):hover {
color: lightgray !important;
background: none !important;
-webkit-background-clip: initial !important;
@@ -90,5 +136,3 @@ body.colorama-only-active.colorama-gradient [class*="_lyricsText"] > div > span:
-webkit-text-fill-color: initial !important;
text-shadow: initial !important;
}
plugins/copy-lyrics-luna/src/index.ts
+45 -20
View File
@@ -1,4 +1,4 @@
import { LunaUnload, Tracer } from "@luna/core";
import { type LunaUnload, Tracer } from "@luna/core";
import { StyleTag } from "@luna/lib";
// Import CSS directly using Luna's file:// syntax - Took me a while to figure out <3
@@ -9,8 +9,8 @@ export const { trace } = Tracer("[Copy Lyrics]");
// clean up resources
export const unloads = new Set<LunaUnload>();
// StyleTag for lyrics selection styling
const lyricsStyleTag = new StyleTag("Copy-Lyrics", unloads, unlockSelection);
// Style injection via side effect
new StyleTag("Copy-Lyrics", unloads, unlockSelection);
function SetClipboard(text: string): void {
const textarea = document.createElement("textarea");
@@ -31,36 +31,50 @@ function SetClipboard(text: string): void {
let isSelecting = false;
const onMouseDown = function (): void {
const onMouseDown = (): void => {
isSelecting = true;
};
const onMouseUp = function (event: MouseEvent): void {
const onMouseUp = (): void => {
if (isSelecting) {
const selection = window.getSelection();
if (selection && selection.toString().length > 0) {
if (selection?.toString().length > 0) {
const selectedSpans: HTMLSpanElement[] = [];
const range = selection.getRangeAt(0);
let container = range.commonAncestorContainer;
let container: Node | null = range.commonAncestorContainer;
// If the container is NOT an element and a document, adjust it.
// Normalize container: if it's a text node, use its parent element/node
if (container && container.nodeType === Node.TEXT_NODE) {
container = (container.parentElement ?? container.parentNode) as Node | null;
}
// If parent has data-current, treat as single-line copy case
if (
container.nodeType !== Node.ELEMENT_NODE &&
container.nodeType !== Node.DOCUMENT_NODE
container &&
container.nodeType === Node.ELEMENT_NODE &&
(container as Element).hasAttribute("data-current")
) {
// Get the parent element if it's a text node
const parentElement = container.parentElement;
if (parentElement && parentElement.hasAttribute("data-current")) {
let text_ = selection.toString().trim();
const text_ = selection.toString().trim();
SetClipboard(text_);
trace.msg.log("Copied to clipboard!");
return;
}
// Ensure we have an Element or Document before querying
if (
!container ||
(container.nodeType !== Node.ELEMENT_NODE &&
container.nodeType !== Node.DOCUMENT_NODE)
) {
isSelecting = false;
return;
}
// Get all the spans inside the container.
const spans = (container as Element).getElementsByTagName("span");
for (let span of spans) {
const spans = (container as Element | Document).getElementsByTagName(
"span",
);
for (const span of spans) {
if (selection.containsNode(span, true)) {
selectedSpans.push(span as HTMLSpanElement);
}
@@ -73,7 +87,11 @@ const onMouseUp = function (event: MouseEvent): void {
if (span.hasAttribute("data-current")) {
hasCorrectAttribute = true;
text += span.textContent + "\n";
if ([...span.classList].some((className) => className.startsWith("endOfStanza--"))) {
if (
[...span.classList].some((className) =>
className.startsWith("endOfStanza--"),
)
) {
text += "\n";
}
}
@@ -91,26 +109,33 @@ const onMouseUp = function (event: MouseEvent): void {
}
};
const onClickHooked = function (event: MouseEvent): boolean | void {
const onClickHooked = (event: MouseEvent): boolean | undefined => {
if (!isSelecting) return;
const target = event.target as HTMLElement;
if (target.tagName.toLowerCase() === "span" && target.hasAttribute("data-current")) {
if (
target.tagName.toLowerCase() === "span" &&
target.hasAttribute("data-current")
) {
// Prevent default behavior and stop event propagation
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
return false;
}
return undefined;
};
// Add event listener with capture phase to intercept events before they reach other handlers
document.addEventListener("click", onClickHooked, true);
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
// Add cleanup to unloads
unloads.add(() => {
unloads.add((): void => {
// Remove event listeners
document.removeEventListener("click", onClickHooked, true);
document.removeEventListener("mousedown", onMouseDown);
plugins/copy-lyrics-luna/src/styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
[class^="_lyricsText"]>div>span {
[class^="_lyricsText"] > div > span {
user-select: text;
cursor: text;
}
plugins/element-hider-luna/src/Settings.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export const settings = await ReactiveStore.getPluginStorage("ElementHider", {
className: string;
textContent: string;
timestamp: number;
}>
}>,
});
export const Settings = () => {
plugins/element-hider-luna/src/index.ts
+156 -89
View File
@@ -1,5 +1,5 @@
import { LunaUnload, Tracer } from "@luna/core";
import { StyleTag, ContextMenu } from "@luna/lib";
import { type LunaUnload, Tracer } from "@luna/core";
import { StyleTag } from "@luna/lib";
import { settings, Settings } from "./Settings";
// Import CSS directly using Luna's file:// syntax
@@ -13,8 +13,8 @@ export { Settings };
// Clean up resources
export const unloads = new Set<LunaUnload>();
// StyleTag for element hider
const styleTag = new StyleTag("Element-Hider", unloads, styles);
// StyleTag for element hider (side-effect)
new StyleTag("Element-Hider", unloads, styles);
// State management
let targetElement: HTMLElement | null = null;
@@ -32,7 +32,7 @@ function generateElementSelector(element: HTMLElement): string {
}
// Priority 2: data-test attribute (very specific for Tidal <3)
const dataTest = element.getAttribute('data-test');
const dataTest = element.getAttribute("data-test");
if (dataTest) {
return `[data-test="${dataTest}"]`;
}
@@ -41,28 +41,43 @@ function generateElementSelector(element: HTMLElement): string {
let selector = element.tagName.toLowerCase();
// Get filtered classes (exclude our temporary classes)
const classes = element.className ? element.className.trim().split(/\s+/).filter(cls => {
return cls.length > 0 &&
!cls.startsWith('element-hider-') &&
cls !== 'element-hider-target' &&
cls !== 'element-hider-hiding' &&
cls !== 'element-hider-hidden';
}) : [];
const classes = element.className
? element.className
.trim()
.split(/\s+/)
.filter((cls) => {
return (
cls.length > 0 &&
!cls.startsWith("element-hider-") &&
cls !== "element-hider-target" &&
cls !== "element-hider-hiding" &&
cls !== "element-hider-hidden"
);
})
: [];
// Only use classes if we have them and they're not generic and dumb
if (classes.length > 0) {
// Use ALL classes to be very specific
selector += '.' + classes.join('.');
selector += "." + classes.join(".");
// Add parent context for extra specificity (for when the element is inside another element)
const parent = element.parentElement;
if (parent && parent.tagName !== 'BODY' && parent.tagName !== 'HTML') {
const parentClasses = parent.className ? parent.className.trim().split(/\s+/).filter(cls => {
return cls.length > 0 && !cls.startsWith('element-hider-');
}) : [];
if (parent && parent.tagName !== "BODY" && parent.tagName !== "HTML") {
const parentClasses = parent.className
? parent.className
.trim()
.split(/\s+/)
.filter((cls) => {
return cls.length > 0 && !cls.startsWith("element-hider-");
})
: [];
if (parentClasses.length > 0) {
const parentSelector = parent.tagName.toLowerCase() + '.' + parentClasses.slice(0, 2).join('.');
const parentSelector =
parent.tagName.toLowerCase() +
"." +
parentClasses.slice(0, 2).join(".");
selector = `${parentSelector} > ${selector}`;
}
}
@@ -70,19 +85,29 @@ function generateElementSelector(element: HTMLElement): string {
// If no useful classes, use position-based selector with parent context
const parent = element.parentElement;
if (parent) {
const siblings = Array.from(parent.children).filter(child => child.tagName === element.tagName);
const siblings = Array.from(parent.children).filter(
(child) => child.tagName === element.tagName,
);
const index = siblings.indexOf(element);
if (index >= 0) {
selector += `:nth-of-type(${index + 1})`;
// Add parent context
if (parent.tagName !== 'BODY' && parent.tagName !== 'HTML') {
const parentClasses = parent.className ? parent.className.trim().split(/\s+/).filter(cls => {
return cls.length > 0 && !cls.startsWith('element-hider-');
}) : [];
if (parent.tagName !== "BODY" && parent.tagName !== "HTML") {
const parentClasses = parent.className
? parent.className
.trim()
.split(/\s+/)
.filter((cls) => {
return cls.length > 0 && !cls.startsWith("element-hider-");
})
: [];
if (parentClasses.length > 0) {
const parentSelector = parent.tagName.toLowerCase() + '.' + parentClasses.slice(0, 2).join('.');
const parentSelector =
parent.tagName.toLowerCase() +
"." +
parentClasses.slice(0, 2).join(".");
selector = `${parentSelector} > ${selector}`;
}
}
@@ -100,14 +125,14 @@ function saveHiddenElement(element: HTMLElement): void {
const elementInfo = {
selector: selector,
tagName: element.tagName,
className: element.className || '',
textContent: element.textContent?.substring(0, 100) || '',
timestamp: Date.now()
className: element.className || "",
textContent: element.textContent?.substring(0, 100) || "",
timestamp: Date.now(),
};
// Check if element is already saved
const existingIndex = settings.hiddenElements.findIndex(
stored => stored.selector === elementInfo.selector
(stored) => stored.selector === elementInfo.selector,
);
if (existingIndex === -1) {
@@ -119,17 +144,18 @@ function saveHiddenElement(element: HTMLElement): void {
}
}
// Remove hidden element from persistent storage (for unhiding)
function removeSavedElement(element: HTMLElement): void {
const selector = generateElementSelector(element);
const index = settings.hiddenElements.findIndex(stored => stored.selector === selector);
if (index !== -1) {
settings.hiddenElements.splice(index, 1);
trace.log(`Permanently removed: ${selector}`);
trace.log(`Remaining stored: ${settings.hiddenElements.length}`);
}
}
// Remove hidden element from persistent storage (for unhiding) - currently unused
// function removeSavedElement(element: HTMLElement): void {
// const selector = generateElementSelector(element);
// const index = settings.hiddenElements.findIndex(
// (stored) => stored.selector === selector,
// );
// if (index !== -1) {
// settings.hiddenElements.splice(index, 1);
// trace.log(`Permanently removed: ${selector}`);
// trace.log(`Remaining stored: ${settings.hiddenElements.length}`);
// }
// }
// Check if an element matches any stored selector (EXACT match only)
function matchesStoredSelector(element: HTMLElement): boolean {
@@ -154,14 +180,18 @@ function hideElementDirectly(element: HTMLElement): void {
element.classList.add("element-hider-hidden");
hiddenElements.add(element);
hiddenElementsArray.push(element);
trace.log(`Hidden element: ${element.tagName}${element.className ? '.' + element.className.split(' ')[0] : ''}`);
trace.log(
`Hidden element: ${element.tagName}${element.className ? "." + element.className.split(" ")[0] : ""}`,
);
}
// Hide the target element with animation
function hideTargetElement(): void {
if (!targetElement) return;
trace.log(`Hiding with animation: ${targetElement.tagName}${targetElement.className ? '.' + targetElement.className.split(' ')[0] : ''}`);
trace.log(
`Hiding with animation: ${targetElement.tagName}${targetElement.className ? "." + targetElement.className.split(" ")[0] : ""}`,
);
// Add hiding animation class
targetElement.classList.add("element-hider-hiding");
@@ -175,7 +205,10 @@ function hideTargetElement(): void {
// Wait for animation to complete, then hide
setTimeout(() => {
elementToHide.classList.add("element-hider-hidden");
elementToHide.classList.remove("element-hider-hiding", "element-hider-target");
elementToHide.classList.remove(
"element-hider-hiding",
"element-hider-target",
);
hiddenElements.add(elementToHide);
hiddenElementsArray.push(elementToHide);
}, 300);
@@ -186,10 +219,12 @@ function hideTargetElement(): void {
// Unhide all elements permanently (remove from storage)
function unhideAllElements(): void {
trace.log(`Permanently unhiding ${settings.hiddenElements.length} saved elements`);
trace.log(
`Permanently unhiding ${settings.hiddenElements.length} saved elements`,
);
// Show all currently hidden elements
hiddenElementsArray.forEach(element => {
hiddenElementsArray.forEach((element) => {
if (document.body.contains(element)) {
element.classList.remove("element-hider-hidden", "element-hider-hiding");
}
@@ -205,7 +240,9 @@ function unhideAllElements(): void {
function processAllElements(): void {
if (settings.hiddenElements.length === 0) return;
trace.log(`Scanning document for ${settings.hiddenElements.length} stored selectors`);
trace.log(
`Scanning document for ${settings.hiddenElements.length} stored selectors`,
);
let hiddenCount = 0;
// Use querySelectorAll for each stored selector with validation
@@ -217,7 +254,9 @@ function processAllElements(): void {
// Limit to prevent over-hiding (safety check)
if (elements.length > 10) {
trace.warn(`Selector too broad (${elements.length} matches), skipping: ${storedElement.selector}`);
trace.warn(
`Selector too broad (${elements.length} matches), skipping: ${storedElement.selector}`,
);
return;
}
@@ -226,7 +265,9 @@ function processAllElements(): void {
if (!hiddenElements.has(htmlElement)) {
hideElementDirectly(htmlElement);
hiddenCount++;
trace.log(`Hid element ${elemIndex + 1}/${elements.length} for selector ${index + 1}`);
trace.log(
`Hid element ${elemIndex + 1}/${elements.length} for selector ${index + 1}`,
);
}
});
} catch (error) {
@@ -241,7 +282,7 @@ function processAllElements(): void {
// Process new elements that are added to the DOM
function processNewElements(addedNodes: NodeList): void {
addedNodes.forEach(node => {
addedNodes.forEach((node) => {
if (node.nodeType !== Node.ELEMENT_NODE) return;
const element = node as HTMLElement;
@@ -252,8 +293,8 @@ function processNewElements(addedNodes: NodeList): void {
}
// Check all descendant elements
const descendants = element.querySelectorAll('*');
descendants.forEach(descendant => {
const descendants = element.querySelectorAll("*");
descendants.forEach((descendant) => {
if (matchesStoredSelector(descendant as HTMLElement)) {
hideElementDirectly(descendant as HTMLElement);
}
@@ -267,7 +308,7 @@ function setupElementObserver(): void {
elementObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
processNewElements(mutation.addedNodes);
}
});
@@ -275,15 +316,22 @@ function setupElementObserver(): void {
elementObserver.observe(document.body, {
childList: true,
subtree: true
subtree: true,
});
trace.log(`Set up reactive element observer`);
}
// Global functions
(window as any).showAllElementsFromSettings = unhideAllElements;
(window as any).debugElementHider = () => {
declare global {
interface Window {
showAllElementsFromSettings?: () => void;
debugElementHider?: () => void;
}
}
window.showAllElementsFromSettings = unhideAllElements;
window.debugElementHider = () => {
trace.log(`=== Element Hider Debug Info ===`);
trace.log(`Stored elements: ${settings.hiddenElements.length}`);
trace.log(`Currently hidden elements: ${hiddenElementsArray.length}`);
@@ -297,19 +345,19 @@ function setupElementObserver(): void {
// Handle highlighting target element
function highlightElement(element: HTMLElement): void {
// Remove previous highlights
document.querySelectorAll('.element-hider-target').forEach(el => {
el.classList.remove('element-hider-target');
document.querySelectorAll(".element-hider-target").forEach((el) => {
el.classList.remove("element-hider-target");
});
// Highlight current element
element.classList.add('element-hider-target');
element.classList.add("element-hider-target");
targetElement = element;
}
// Remove highlight
function removeHighlight(): void {
if (targetElement) {
targetElement.classList.remove('element-hider-target');
targetElement.classList.remove("element-hider-target");
targetElement = null;
}
}
@@ -321,11 +369,17 @@ let contextMenuTimeout: number | null = null;
let waitingForBuiltInMenu = false;
// Listen for right-click events to capture the target for context menu
document.addEventListener('contextmenu', (event: MouseEvent) => {
document.addEventListener(
"contextmenu",
(event: MouseEvent) => {
const target = event.target as HTMLElement;
// Don't interfere with native context menus on inputs, textareas, etc.
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
if (
target.tagName === "INPUT" ||
target.tagName === "TEXTAREA" ||
target.isContentEditable
) {
currentContextElement = null;
return;
}
@@ -346,8 +400,7 @@ document.addEventListener('contextmenu', (event: MouseEvent) => {
const eventX = event.clientX;
const eventY = event.clientY;
// Prevent default immediately if we plan to handle it
event.preventDefault();
// Allow native context menu by default; we'll show our custom menu only if needed
// Wait to see if the built-in context menu appears
contextMenuTimeout = window.setTimeout(() => {
@@ -359,10 +412,14 @@ document.addEventListener('contextmenu', (event: MouseEvent) => {
}, 150); // Wait 150ms for built-in menu
// Don't prevent default initially - let Luna try to handle the context menu
}, true);
},
true,
);
// Listen for clicks to close custom menu
document.addEventListener('click', (event: MouseEvent) => {
document.addEventListener(
"click",
(event: MouseEvent) => {
const target = event.target as HTMLElement;
// If clicking outside our custom menu, close it
@@ -370,10 +427,12 @@ document.addEventListener('click', (event: MouseEvent) => {
closeCustomMenu();
removeHighlight();
}
}, true);
},
true,
);
// Handle escape key to close custom menu and remove highlights
document.addEventListener('keydown', (event: KeyboardEvent) => {
document.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.key === "Escape") {
if (customMenu) {
closeCustomMenu();
@@ -464,8 +523,15 @@ const contextMenuObserver = new MutationObserver((mutations) => {
const element = node as HTMLElement;
// Look for Tidal's context menu
if (element.matches('[data-test="contextmenu"]') || element.querySelector('[data-test="contextmenu"]')) {
const contextMenu = element.matches('[data-test="contextmenu"]') ? element : element.querySelector('[data-test="contextmenu"]') as HTMLElement;
if (
element.matches('[data-test="contextmenu"]') ||
element.querySelector('[data-test="contextmenu"]')
) {
const contextMenu = element.matches('[data-test="contextmenu"]')
? element
: (element.querySelector(
'[data-test="contextmenu"]',
) as HTMLElement);
if (contextMenu && currentContextElement && waitingForBuiltInMenu) {
// Built-in menu appeared, cancel custom menu timeout
@@ -485,8 +551,8 @@ const contextMenuObserver = new MutationObserver((mutations) => {
// Add our options to the existing context menu
function addElementHiderOptions(contextMenu: HTMLElement): void {
// Create hide element button
const hideButton = document.createElement('button');
hideButton.className = 'element-hider-menu-item';
const hideButton = document.createElement("button");
hideButton.className = "element-hider-menu-item";
hideButton.style.cssText = `
display: flex;
align-items: center;
@@ -503,7 +569,7 @@ function addElementHiderOptions(contextMenu: HTMLElement): void {
`;
hideButton.innerHTML = `Hide This Element`;
hideButton.addEventListener('click', () => {
hideButton.addEventListener("click", () => {
if (currentContextElement) {
targetElement = currentContextElement;
hideTargetElement();
@@ -511,37 +577,38 @@ function addElementHiderOptions(contextMenu: HTMLElement): void {
});
// Add hover effects for highlighting
hideButton.addEventListener('mouseenter', () => {
hideButton.style.background = 'var(--wave-color-background-hover, #3a3a3a)';
hideButton.addEventListener("mouseenter", () => {
hideButton.style.background = "var(--wave-color-background-hover, #3a3a3a)";
if (currentContextElement) {
highlightElement(currentContextElement);
}
});
hideButton.addEventListener('mouseleave', () => {
hideButton.style.background = 'transparent';
hideButton.addEventListener("mouseleave", () => {
hideButton.style.background = "transparent";
removeHighlight();
});
// Create unhide all button
const unhideAllButton = document.createElement('button');
unhideAllButton.className = 'element-hider-menu-item';
const unhideAllButton = document.createElement("button");
unhideAllButton.className = "element-hider-menu-item";
unhideAllButton.style.cssText = hideButton.style.cssText;
unhideAllButton.innerHTML = `Unhide All Elements (${hiddenElementsArray.length})`;
unhideAllButton.addEventListener('click', unhideAllElements);
unhideAllButton.addEventListener("click", unhideAllElements);
// Add hover effects for unhide all button
unhideAllButton.addEventListener('mouseenter', () => {
unhideAllButton.style.background = 'var(--wave-color-background-hover, #3a3a3a)';
unhideAllButton.addEventListener("mouseenter", () => {
unhideAllButton.style.background =
"var(--wave-color-background-hover, #3a3a3a)";
});
unhideAllButton.addEventListener('mouseleave', () => {
unhideAllButton.style.background = 'transparent';
unhideAllButton.addEventListener("mouseleave", () => {
unhideAllButton.style.background = "transparent";
});
// Add a separator if the menu has other items
if (contextMenu.children.length > 0) {
const separator = document.createElement('div');
const separator = document.createElement("div");
separator.style.cssText = `
height: 1px;
background: var(--wave-color-border, #444);
@@ -558,10 +625,10 @@ function addElementHiderOptions(contextMenu: HTMLElement): void {
// Start observing for context menus
contextMenuObserver.observe(document.body, {
childList: true,
subtree: true
subtree: true,
});
// Initialize plugin
// Initialize plugin
function initializePlugin() {
trace.log("Initializing plugin...");
@@ -578,8 +645,8 @@ function initializePlugin() {
}
// Run initialization when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializePlugin);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initializePlugin);
} else {
initializePlugin();
}
@@ -600,8 +667,8 @@ unloads.add(() => {
removeHighlight();
// Clean up global functions
(window as any).showAllElementsFromSettings = undefined;
(window as any).debugElementHider = undefined;
window.showAllElementsFromSettings = undefined;
window.debugElementHider = undefined;
trace.log("Plugin unloaded");
});
plugins/element-hider-luna/src/styles.css
+3 -1
View File
@@ -57,7 +57,9 @@
/* Animation for hiding */
.element-hider-hiding {
transition: opacity 0.3s ease, transform 0.3s ease;
transition:
opacity 0.3s ease,
transform 0.3s ease;
opacity: 0;
transform: scale(0.95);
}
plugins/oled-theme-luna/src/Settings.tsx
+16 -5
View File
@@ -9,8 +9,11 @@ export const settings = await ReactiveStore.getPluginStorage("OLEDTheme", {
});
export const Settings = () => {
const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] = React.useState(settings.qualityColorMatchedSeekBar);
const [oledFriendlyButtons, setOledFriendlyButtons] = React.useState(settings.oledFriendlyButtons);
const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] =
React.useState(settings.qualityColorMatchedSeekBar);
const [oledFriendlyButtons, setOledFriendlyButtons] = React.useState(
settings.oledFriendlyButtons,
);
const [lightMode, setLightMode] = React.useState(settings.lightMode);
return (
@@ -20,8 +23,13 @@ export const Settings = () => {
desc="Color the Seek/Progress Bar based on audio quality"
checked={qualityColorMatchedSeekBar}
onChange={(_, checked) => {
console.log("Quality Color Matched Seek Bar:", checked ? "enabled" : "disabled");
setQualityColorMatchedSeekBar((settings.qualityColorMatchedSeekBar = checked));
console.log(
"Quality Color Matched Seek Bar:",
checked ? "enabled" : "disabled",
);
setQualityColorMatchedSeekBar(
(settings.qualityColorMatchedSeekBar = checked),
);
// Update styles immediately when setting changes
if ((window as any).updateOLEDThemeStyles) {
(window as any).updateOLEDThemeStyles();
@@ -33,7 +41,10 @@ export const Settings = () => {
desc="Remove button styling from OLED theme to keep buttons with original Tidal appearance"
checked={oledFriendlyButtons}
onChange={(_, checked) => {
console.log("OLED Friendly Buttons:", checked ? "enabled" : "disabled");
console.log(
"OLED Friendly Buttons:",
checked ? "enabled" : "disabled",
);
setOledFriendlyButtons((settings.oledFriendlyButtons = checked));
// Update styles immediately when setting changes
if ((window as any).updateOLEDThemeStyles) {
plugins/oled-theme-luna/src/dark-theme.css
+31 -28
View File
@@ -26,32 +26,36 @@
@font-face {
font-family: "AbyssFont";
font-weight: 400;
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 500;
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 600;
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 700;
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2")
format("woff2");
}
[class^="followingButton"],
[title="Unfollow"],
[title="Follow"],
[title="Unfollow"]>span,
[title="Follow"]>span {
[title="Unfollow"] > span,
[title="Follow"] > span {
background-color: var(--wave-color-solid-rainbow-yellow-fill) !important;
color: var(--wave-color-solid-base-brighter);
}
@@ -76,7 +80,7 @@
color: var(--wave-color-solid-accent-fill) !important;
}
[class^="_sidebarItem"]>span {
[class^="_sidebarItem"] > span {
color: var(--wave-color-solid-accent-dark);
}
@@ -88,7 +92,7 @@
color: var(--wave-color-solid-contrast-fill);
}
[class^="_sidebarItem"] [class^="active"]>span {
[class^="_sidebarItem"] [class^="active"] > span {
color: var(--wave-color-solid-accent-dark) !important;
}
@@ -101,7 +105,7 @@
margin: 5px;
}
[data-test="media-table"]>div>div>div {
[data-test="media-table"] > div > div > div {
border: 1px solid rgb(25, 25, 25) !important;
}
@@ -110,7 +114,7 @@
margin: 5px;
}
[class^="button"]>span {
[class^="button"] > span {
color: black;
}
@@ -133,28 +137,27 @@
display: none;
}
[class^="_headerButtons"]>button,
[class^="_headerButtons"]>button>span,
[class^="_headerButtons"] > button,
[class^="_headerButtons"] > button > span,
[data-test="toggle-picture-in-picture"] {
background-color: var(--wave-color-solid-accent-fill) !important;
color: black;
}
[class^="_container"]>[class^="_navigationArrows"] {
[class^="_container"] > [class^="_navigationArrows"] {
color: black;
background-color: var(--wave-color-solid-accent-fill) !important;
border-radius: 4px;
}
[class^="_buttons"]>button>span {
[class^="_buttons"] > button > span {
color: black !important;
}
[class^="_container"]>button {
[class^="_container"] > button {
border: 0px none;
}
[data-test="feed-sidebar"] {
margin-top: 10px;
}
@@ -168,22 +171,22 @@
position: absolute !important;
}
[class^="_tooltipContainer"]>button {
[class^="_tooltipContainer"] > button {
background-color: var(--wave-color-solid-accent-fill);
color: black;
}
[class^="_tooltipContainer"]>button:hover {
[class^="_tooltipContainer"] > button:hover {
background-color: lightgray !important;
}
[class^="_tableRow"]:hover>*,
[data-test-is-playing="true"]>* {
[class^="_tableRow"]:hover > *,
[data-test-is-playing="true"] > * {
color: var(--wave-color-solid-accent-fill) !important;
}
[class^="_tableRow"]>*,
[data-test-is-playing="false"]>* {
[class^="_tableRow"] > *,
[data-test-is-playing="false"] > * {
color: lightgray !important;
}
@@ -212,17 +215,17 @@ button[data-test="close-now-playing"]:hover {
background-color: lightgray !important;
}
.neptune-switch-checkbox:checked+.neptune-switch {
.neptune-switch-checkbox:checked + .neptune-switch {
background-color: rgba(255, 255, 255, 0.1);
}
[data-test="navigation-arrows"]>button {
[data-test="navigation-arrows"] > button {
background-color: var(--wave-color-solid-accent-fill) !important;
color: black !important;
border-radius: 5px;
}
[data-test="navigation-arrows"]>button:disabled {
[data-test="navigation-arrows"] > button:disabled {
background-color: lightgray !important;
opacity: 1;
}
@@ -236,7 +239,7 @@ button[data-test="close-now-playing"]:hover {
border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important;
}
[data-wave-color=textUrl] {
[data-wave-color="textUrl"] {
color: var(--wave-color-solid-accent-fill);
}
@@ -244,8 +247,8 @@ button[data-test="close-now-playing"]:hover {
margin-top: 7.5px;
}
[data-test="play-all"]>div>*,
[data-test="shuffle-all"]>div>*,
[data-test="play-all"] > div > *,
[data-test="shuffle-all"] > div > *,
[data-test="play-all"],
[data-test="shuffle-all"] {
color: var(--wave-color-solid-accent-fill) !important;
plugins/oled-theme-luna/src/index.ts
+59 -22
View File
@@ -1,5 +1,5 @@
import { LunaUnload, Tracer } from "@luna/core";
import { StyleTag, observePromise, PlayState, Quality, type MediaItem } from "@luna/lib";
import { type LunaUnload, Tracer } from "@luna/core";
import { StyleTag, observePromise, PlayState } from "@luna/lib";
import { settings, Settings } from "./Settings";
// Import CSS files directly using Luna's file:// syntax - Took me a while to figure out <3
@@ -21,7 +21,7 @@ const themeStyleTag = new StyleTag("OLED-Theme", unloads);
const QUALITY_COLORS = {
MAX: "#FED330", // Max/HiFi
HIGH: "#31FFEE", // High
LOW: "#FFFFFE" // Low
LOW: "#FFFFFE", // Low
};
// Function to get quality color based on audio quality
@@ -31,19 +31,30 @@ const getQualityColor = (audioQuality: string): string => {
return QUALITY_COLORS.MAX;
} else if (quality?.includes("LOSSLESS")) {
return QUALITY_COLORS.HIGH;
} else {
} else if (quality?.includes("HIGH")) {
return QUALITY_COLORS.HIGH;
} else if (quality?.includes("LOW")) {
return QUALITY_COLORS.LOW;
}
return QUALITY_COLORS.LOW;
};
// Interval tracking for quality monitoring
let qualityMonitoringIntervalId: number | null = null;
// Function to Reset Seek Bar Color (if setting gets disabled while playing)
const resetSeekBarColor = async (): Promise<void> => {
try {
const progressBarWrapper = await observePromise<HTMLElement>(unloads, `[class^="_progressBarWrapper"]`);
const progressBarWrapper = await observePromise<HTMLElement>(
unloads,
`[class^="_progressBarWrapper"]`,
);
if (!progressBarWrapper) return;
progressBarWrapper.style.removeProperty('color');
progressBarWrapper.querySelectorAll('[class*="progress"], [class*="bar"]').forEach(el => {
if (el instanceof HTMLElement) el.style.removeProperty('color');
progressBarWrapper.style.removeProperty("color");
progressBarWrapper
.querySelectorAll('[class*="progress"], [class*="bar"]')
.forEach((el) => {
if (el instanceof HTMLElement) el.style.removeProperty("color");
});
} catch (error) {
trace.msg.err(`Failed to reset seek bar color: ${error}`);
@@ -54,14 +65,20 @@ const resetSeekBarColor = async (): Promise<void> => {
const applyQualityColors = async (): Promise<void> => {
if (!settings.qualityColorMatchedSeekBar) return;
try {
const progressBarWrapper = await observePromise<HTMLElement>(unloads, `[class^="_progressBarWrapper"]`);
const progressBarWrapper = await observePromise<HTMLElement>(
unloads,
`[class^="_progressBarWrapper"]`,
);
if (!progressBarWrapper) return;
const audioQuality = PlayState.playbackContext?.actualAudioQuality;
if (!audioQuality) return;
const qualityColor = getQualityColor(audioQuality);
progressBarWrapper.style.setProperty('color', qualityColor, 'important');
progressBarWrapper.querySelectorAll('[class*="progress"], [class*="bar"]').forEach(el => {
if (el instanceof HTMLElement) el.style.setProperty('color', qualityColor, 'important');
progressBarWrapper.style.setProperty("color", qualityColor, "important");
progressBarWrapper
.querySelectorAll('[class*="progress"], [class*="bar"]')
.forEach((el) => {
if (el instanceof HTMLElement)
el.style.setProperty("color", qualityColor, "important");
});
//trace.msg.log(`Applied quality color ${qualityColor}`);
} catch (error) {
@@ -71,17 +88,16 @@ const applyQualityColors = async (): Promise<void> => {
// Function to monitor track changes using track ID
const setupQualityMonitoring = (): void => {
if (qualityMonitoringIntervalId != null) return;
let lastTrackId: string | null = null;
const interval = setInterval(() => {
qualityMonitoringIntervalId = window.setInterval(() => {
if (!settings.qualityColorMatchedSeekBar) return;
const currentTrackId = PlayState.playbackContext?.actualProductId;
if (currentTrackId && currentTrackId !== lastTrackId) {
//trace.msg.log(`[OLED Theme] Track ID changed: ${lastTrackId} -> ${currentTrackId}`);
lastTrackId = currentTrackId;
applyQualityColors();
}
}, 250);
unloads.add(() => clearInterval(interval));
// Initial color application (if a track is already loaded)
const currentTrackId = PlayState.playbackContext?.actualProductId;
@@ -91,8 +107,15 @@ const setupQualityMonitoring = (): void => {
}
};
const stopQualityMonitoring = (): void => {
if (qualityMonitoringIntervalId != null) {
window.clearInterval(qualityMonitoringIntervalId);
qualityMonitoringIntervalId = null;
}
};
// Function to apply theme styles based on current settings
const applyThemeStyles = function(): void {
const applyThemeStyles = (): void => {
// Choose the appropriate CSS file based on settings
let selectedStyle: string;
@@ -101,28 +124,42 @@ const applyThemeStyles = function(): void {
selectedStyle = lightTheme;
} else {
// Dark mode
selectedStyle = settings.oledFriendlyButtons ? oledFriendlyTheme : darkTheme;
selectedStyle = settings.oledFriendlyButtons
? oledFriendlyTheme
: darkTheme;
}
// Remove SeekBar coloring if Quality Color Matched Seek Bar is enabled
// This allows our manual coloring to take precedence
if (settings.qualityColorMatchedSeekBar) {
selectedStyle = selectedStyle.replace(/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g, '');
selectedStyle = selectedStyle.replace(
/\[class\^="_progressBarWrapper"\]\s*\{[^}]*\}/g,
"",
);
setupQualityMonitoring();
} else {
// If disabling, reset the seek bar color
// If disabling, reset the seek bar color and stop monitoring
resetSeekBarColor();
stopQualityMonitoring();
}
// Apply the selected theme using StyleTag
themeStyleTag.css = selectedStyle;
};
// Make this function available globally so Settings can call it
(window as any).updateOLEDThemeStyles = applyThemeStyles;
declare global {
interface Window {
updateOLEDThemeStyles?: () => void;
}
}
window.updateOLEDThemeStyles = applyThemeStyles;
// Apply the OLED theme initially
applyThemeStyles();
// Ensure interval is cleared on unload
unloads.add(() => {
stopQualityMonitoring();
});
plugins/oled-theme-luna/src/light-theme.css
+30 -29
View File
@@ -26,32 +26,36 @@
@font-face {
font-family: "AbyssFont";
font-weight: 400;
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 500;
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 600;
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 700;
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2")
format("woff2");
}
[class^="followingButton"],
[title="Unfollow"],
[title="Follow"],
[title="Unfollow"]>span,
[title="Follow"]>span {
[title="Unfollow"] > span,
[title="Follow"] > span {
background-color: var(--wave-color-solid-rainbow-yellow-fill) !important;
color: var(--wave-color-solid-base-brighter);
}
@@ -77,7 +81,7 @@
color: var(--wave-color-solid-accent-fill) !important;
}
[class^="_sidebarItem"]>span {
[class^="_sidebarItem"] > span {
color: #666666;
}
@@ -89,7 +93,7 @@
color: #333333;
}
[class^="_sidebarItem"] [class^="active"]>span {
[class^="_sidebarItem"] [class^="active"] > span {
color: #333333 !important;
}
@@ -116,7 +120,7 @@
margin: 5px;
}
[data-test="media-table"]>div>div>div {
[data-test="media-table"] > div > div > div {
border: 1px solid rgb(230, 230, 230) !important;
}
@@ -125,12 +129,10 @@
margin: 5px;
}
[class^="button"]>span {
[class^="button"] > span {
color: #333333;
}
[class^="_explicitBadge"] {
color: var(--wave-color-solid-accent-fill);
}
@@ -143,35 +145,34 @@
[data-test="current-media-imagery"] {
border: 0 !important;
margin: none;
margin: 0;
}
[class^="_imageBorder"] {
display: none;
}
[class^="_headerButtons"]>button,
[class^="_headerButtons"]>button>span,
[class^="_headerButtons"] > button,
[class^="_headerButtons"] > button > span,
[data-test="toggle-picture-in-picture"] {
background-color: var(--wave-color-solid-accent-fill) !important;
color: #333333;
}
[class^="_container"]>[class^="_navigationArrows"] {
[class^="_container"] > [class^="_navigationArrows"] {
color: #333333;
background-color: var(--wave-color-solid-accent-fill) !important;
border-radius: 4px;
}
[class^="_buttons"]>button>span {
[class^="_buttons"] > button > span {
color: #333333 !important;
}
[class^="_container"]>button {
[class^="_container"] > button {
border: 0px none;
}
[data-test="feed-sidebar"] {
margin-top: 10px;
}
@@ -185,22 +186,22 @@
position: absolute !important;
}
[class^="_tooltipContainer"]>button {
[class^="_tooltipContainer"] > button {
background-color: var(--wave-color-solid-accent-fill);
color: #333333;
}
[class^="_tooltipContainer"]>button:hover {
[class^="_tooltipContainer"] > button:hover {
background-color: #555555 !important;
}
[class^="_tableRow"]:hover>*,
[data-test-is-playing="true"]>* {
[class^="_tableRow"]:hover > *,
[data-test-is-playing="true"] > * {
color: #333333 !important;
}
[class^="_tableRow"]>*,
[data-test-is-playing="false"]>* {
[class^="_tableRow"] > *,
[data-test-is-playing="false"] > * {
color: #333333 !important;
}
@@ -239,17 +240,17 @@ button[data-test="close-now-playing"]:hover {
background-color: #aaaaaa !important;
}
.neptune-switch-checkbox:checked+.neptune-switch {
.neptune-switch-checkbox:checked + .neptune-switch {
background-color: rgba(0, 0, 0, 0.1);
}
[data-test="navigation-arrows"]>button {
[data-test="navigation-arrows"] > button {
background-color: var(--wave-color-solid-accent-fill) !important;
color: #333333 !important;
border-radius: 5px;
}
[data-test="navigation-arrows"]>button:disabled {
[data-test="navigation-arrows"] > button:disabled {
background-color: #cccccc !important;
opacity: 1;
}
@@ -278,7 +279,7 @@ button[data-test="close-now-playing"]:hover {
border: 1px solid rgba(200, 200, 200, 0.7) !important;
}
[data-wave-color=textUrl] {
[data-wave-color="textUrl"] {
color: var(--wave-color-solid-accent-fill);
}
plugins/oled-theme-luna/src/oled-friendly.css
+20 -16
View File
@@ -26,32 +26,36 @@
@font-face {
font-family: "AbyssFont";
font-weight: 400;
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 500;
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 600;
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2")
format("woff2");
}
@font-face {
font-family: "AbyssFont";
font-weight: 700;
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2")
format("woff2");
}
[class^="followingButton"],
[title="Unfollow"],
[title="Follow"],
[title="Unfollow"]>span,
[title="Follow"]>span {
[title="Unfollow"] > span,
[title="Follow"] > span {
background-color: var(--wave-color-solid-rainbow-yellow-fill) !important;
color: var(--wave-color-solid-base-brighter);
}
@@ -76,7 +80,7 @@
color: var(--wave-color-solid-accent-fill) !important;
}
[class^="_sidebarItem"]>span {
[class^="_sidebarItem"] > span {
color: var(--wave-color-solid-accent-dark);
}
@@ -88,7 +92,7 @@
color: var(--wave-color-solid-contrast-fill);
}
[class^="_sidebarItem"] [class^="active"]>span {
[class^="_sidebarItem"] [class^="active"] > span {
color: var(--wave-color-solid-accent-dark) !important;
}
@@ -101,7 +105,7 @@
margin: 5px;
}
[data-test="media-table"]>div>div>div {
[data-test="media-table"] > div > div > div {
border: 1px solid rgb(25, 25, 25) !important;
}
@@ -116,7 +120,7 @@
[data-test="current-media-imagery"] {
border: 0 !important;
margin: none;
margin: 0;
}
[class^="_imageBorder"] {
@@ -136,13 +140,13 @@
position: absolute !important;
}
[class^="_tableRow"]:hover>*,
[data-test-is-playing="true"]>* {
[class^="_tableRow"]:hover > *,
[data-test-is-playing="true"] > * {
color: var(--wave-color-solid-accent-fill) !important;
}
[class^="_tableRow"]>*,
[data-test-is-playing="false"]>* {
[class^="_tableRow"] > *,
[data-test-is-playing="false"] > * {
color: lightgray !important;
}
@@ -156,7 +160,7 @@
border-radius: 5px;
}
.neptune-switch-checkbox:checked+.neptune-switch {
.neptune-switch-checkbox:checked + .neptune-switch {
background-color: rgba(255, 255, 255, 0.1);
}
@@ -169,7 +173,7 @@
border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important;
}
[data-wave-color=textUrl] {
[data-wave-color="textUrl"] {
color: var(--wave-color-solid-accent-fill);
}
plugins/radiant-lyrics-luna/src/Settings.tsx
+154 -47
View File
@@ -3,43 +3,82 @@ import { LunaSettings, LunaSwitchSetting, LunaNumberSetting } from "@luna/ui";
import React from "react";
export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
hideUIEnabled: true,
trackTitleGlow: false,
playerBarVisible: false,
lyricsGlowEnabled: true,
textGlow: 20,
spinningCoverEverywhere: true,
trackTitleGlow: false,
hideUIEnabled: true,
playerBarVisible: false,
CoverEverywhere: true,
performanceMode: false,
spinningArtEnabled: true,
spinningArt: true,
textGlow: 20,
backgroundScale: 15,
backgroundRadius: 25,
backgroundContrast: 120,
backgroundBlur: 80,
backgroundBrightness: 40,
spinSpeed: 45,
settingsAffectNowPlaying: true
settingsAffectNowPlaying: true,
});
export const Settings = () => {
const [hideUIEnabled, setHideUIEnabled] = React.useState(settings.hideUIEnabled);
const [playerBarVisible, setPlayerBarVisible] = React.useState(settings.playerBarVisible);
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(settings.lyricsGlowEnabled);
const [hideUIEnabled, setHideUIEnabled] = React.useState(
settings.hideUIEnabled,
);
const [playerBarVisible, setPlayerBarVisible] = React.useState(
settings.playerBarVisible,
);
const [lyricsGlowEnabled, setLyricsGlowEnabled] = React.useState(
settings.lyricsGlowEnabled,
);
const [textGlow, setTextGlow] = React.useState(settings.textGlow);
const [spinningCoverEverywhere, setSpinningCoverEverywhere] = React.useState(settings.spinningCoverEverywhere);
const [performanceMode, setPerformanceMode] = React.useState(settings.performanceMode);
const [spinningArtEnabled, setSpinningArtEnabled] = React.useState(settings.spinningArtEnabled);
const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
const [CoverEverywhere, setCoverEverywhere] = React.useState(
settings.CoverEverywhere,
);
const [performanceMode, setPerformanceMode] = React.useState(
settings.performanceMode,
);
const [spinningArt, setspinningArt] = React.useState(
settings.spinningArt,
);
const [backgroundContrast, setBackgroundContrast] = React.useState(
settings.backgroundContrast,
);
const [backgroundBlur, setBackgroundBlur] = React.useState(
settings.backgroundBlur,
);
const [backgroundBrightness, setBackgroundBrightness] = React.useState(
settings.backgroundBrightness,
);
const [spinSpeed, setSpinSpeed] = React.useState(settings.spinSpeed);
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] = React.useState(settings.settingsAffectNowPlaying);
const [trackTitleGlow, setTrackTitleGlow] = React.useState(settings.trackTitleGlow);
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] =
React.useState(settings.settingsAffectNowPlaying);
const [trackTitleGlow, setTrackTitleGlow] = React.useState(
settings.trackTitleGlow,
);
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>;
type AnySwitchProps = Omit<BaseSwitchProps, "onChange"> & {
onChange: (_: unknown, checked: boolean) => void;
checked: boolean;
};
const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType<
AnySwitchProps
>;
return (
<LunaSettings>
<LunaSwitchSetting
<AnySwitch
title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Stytling Changes"
desc="Enable glowing effect for lyrics & Font Styling Changes"
checked={lyricsGlowEnabled}
onChange={(_, checked: boolean) => {
onChange={(_: unknown, checked: boolean) => {
setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
// Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsStyles) {
@@ -47,7 +86,7 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Track Title Glow"
desc="Apply glow to the track title"
checked={trackTitleGlow}
@@ -58,19 +97,19 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Hide UI Feature"
desc="Enable hide/unhide UI functionality with toggle buttons"
checked={hideUIEnabled}
onChange={(_, checked: boolean) => {
onChange={(_: unknown, checked: boolean) => {
setHideUIEnabled((settings.hideUIEnabled = checked));
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Player Bar Visibility in Hide UI Mode"
desc="Keep player bar visible when UI is hidden"
checked={playerBarVisible}
onChange={(_, checked: boolean) => {
onChange={(_: unknown, checked: boolean) => {
console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
setPlayerBarVisible((settings.playerBarVisible = checked));
// Update styles immediately when setting changes
@@ -79,24 +118,29 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Cover Everywhere"
desc="Apply the spinning Cover Art background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
checked={spinningCoverEverywhere}
onChange={(_, checked: boolean) => {
console.log("Spinning Cover Everywhere:", checked ? "enabled" : "disabled");
setSpinningCoverEverywhere((settings.spinningCoverEverywhere = checked));
checked={CoverEverywhere}
onChange={(_: unknown, checked: boolean) => {
console.log(
"Spinning Cover Everywhere:",
checked ? "enabled" : "disabled",
);
setCoverEverywhere(
(settings.CoverEverywhere = checked),
);
// Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Performance Mode | Experimental"
desc="Performance mode: Reduces blur effects & uses smaller image sizes, to optimize GPU usage"
checked={performanceMode}
onChange={(_, checked: boolean) => {
onChange={(_: unknown, checked: boolean) => {
console.log("Performance Mode:", checked ? "enabled" : "disabled");
setPerformanceMode((settings.performanceMode = checked));
// Update background animations immediately when setting changes
@@ -108,17 +152,23 @@ export const Settings = () => {
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Background Cover Spin" // Cheers @Max/n0201 for the idea <3
desc="Enable the spinning cover art background animation"
checked={spinningArtEnabled}
onChange={(_, checked: boolean) => {
console.log("Background Cover Spin:", checked ? "enabled" : "disabled");
setSpinningArtEnabled((settings.spinningArtEnabled = checked));
checked={spinningArt}
onChange={(_: unknown, checked: boolean) => {
console.log(
"Background Cover Spin:",
checked ? "enabled" : "disabled",
);
setspinningArt((settings.spinningArt = checked));
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
@@ -137,6 +187,46 @@ export const Settings = () => {
(window as any).updateRadiantLyricsTextGlow();
}
}}
/>
<LunaNumberSetting
title="Background Scale"
desc="Adjust the scale of the background cover (1=10% - 50=500%)"
min={1}
max={50}
step={1}
value={backgroundScale}
onNumber={(value: number) => {
setBackgroundScale((settings.backgroundScale = value));
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
title="Background Radius"
desc="Adjust the cover art corner radius (0-100%, 100% = circle)"
min={0}
max={100}
step={1}
value={backgroundRadius}
onNumber={(value: number) => {
setBackgroundRadius((settings.backgroundRadius = value));
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
title="Background Contrast"
@@ -150,7 +240,10 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
@@ -168,7 +261,10 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
@@ -186,7 +282,10 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
@@ -204,18 +303,26 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
if (
settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground
) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaSwitchSetting
<AnySwitch
title="Settings Affect Now Playing"
desc="Apply background settings to Now Playing view"
checked={settingsAffectNowPlaying}
onChange={(_, checked: boolean) => {
console.log("Settings Affect Now Playing:", checked ? "enabled" : "disabled");
setSettingsAffectNowPlaying((settings.settingsAffectNowPlaying = checked));
onChange={(_: unknown, checked: boolean) => {
console.log(
"Settings Affect Now Playing:",
checked ? "enabled" : "disabled",
);
setSettingsAffectNowPlaying(
(settings.settingsAffectNowPlaying = checked),
);
// Update Now Playing background immediately when setting changes
if ((window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
plugins/radiant-lyrics-luna/src/cover-everywhere.css
+23 -1
View File
@@ -47,16 +47,21 @@
.global-spinning-image.performance-mode-static {
/* Keep animation enabled in performance mode */
/* Lighter blur for performance */
/* biome-ignore lint: Required to override app styles in performance mode */
filter: blur(20px) brightness(0.4) contrast(1.2) saturate(1) !important;
/* Smaller size for performance */
/* biome-ignore lint: Required to override app layout sizes */
width: 120vw !important;
/* biome-ignore lint: Required to override app layout sizes */
height: 120vh !important;
}
.now-playing-background-image.performance-mode-static {
/* Keep animation enabled in performance mode */
/* Optimized size and effects for performance */
/* biome-ignore lint: Required to override inline sizes in performance mode */
width: 80vw !important;
/* biome-ignore lint: Required to override inline sizes in performance mode */
height: 80vh !important;
}
@@ -89,8 +94,11 @@
@media (prefers-reduced-motion: reduce) {
.global-spinning-image,
.now-playing-background-image {
/* biome-ignore lint: Accessibility override needs priority */
animation: none !important;
/* biome-ignore lint: Accessibility override needs priority */
transform: translate(-50%, -50%) !important;
/* biome-ignore lint: Accessibility override needs priority */
will-change: auto !important;
}
}
@@ -99,6 +107,7 @@
.performance-mode .global-spinning-image,
.performance-mode .now-playing-background-image {
/* Keep animations but optimize filter effects */
/* biome-ignore lint: Intentional override of runtime styles */
filter: blur(10px) brightness(0.4) contrast(1.1) !important;
}
@@ -115,12 +124,13 @@ main,
[data-test="stream-metadata"],
[data-test="footer-player"],
/* Notification Feed sidebar specific container */
[class^="_feedSidebarVStack"],
[class^="_feedSidebarVStack"],
[class^="_feedSidebarSpacer"],
[class^="_feedSidebarItem"],
[class^="_feedSidebarItemDiv"],
[class^="_cellContainer"],
[class^="_cellTextContainer"] {
/* biome-ignore lint: Ensure background is fully cleared under theme CSS */
background: unset !important;
}
@@ -129,8 +139,11 @@ main,
[data-test="main-layout-sidebar-wrapper"],
[class^="_bar"],
[class^="_sidebarItem"]:hover {
/* biome-ignore lint: Must beat app inline styles for translucency */
background-color: rgba(0, 0, 0, 0.3) !important;
/* biome-ignore lint: Must beat app inline styles for translucency */
backdrop-filter: blur(10px) !important;
/* biome-ignore lint: Must beat app inline styles for translucency */
-webkit-backdrop-filter: blur(10px) !important;
}
@@ -139,20 +152,27 @@ main,
.performance-mode [data-test="main-layout-sidebar-wrapper"],
.performance-mode [class^="_bar"],
.performance-mode [class^="_sidebarItem"]:hover {
/* biome-ignore lint: Performance mode style requires priority */
backdrop-filter: blur(5px) !important;
/* biome-ignore lint: Performance mode style requires priority */
-webkit-backdrop-filter: blur(5px) !important;
}
/* Feed sidebar panel - black tint background for readability */
[data-test="feed-sidebar"] {
/* biome-ignore lint: Ensure readability over media */
background-color: rgba(0, 0, 0, 0.5) !important;
/* biome-ignore lint: Ensure readability over media */
backdrop-filter: blur(10px) !important;
/* biome-ignore lint: Ensure readability over media */
-webkit-backdrop-filter: blur(10px) !important;
}
/* Performance mode: reduce sidebar backdrop blur */
.performance-mode [data-test="feed-sidebar"] {
/* biome-ignore lint: Performance mode style requires priority */
backdrop-filter: blur(5px) !important;
/* biome-ignore lint: Performance mode style requires priority */
-webkit-backdrop-filter: blur(5px) !important;
}
@@ -162,10 +182,12 @@ main,
[class*="_cellContainer"],
[data-test="feed-interval"],
[data-test="feed-item"] {
/* biome-ignore lint: Match theme transparency */
background-color: transparent !important;
}
/* Remove bottom gradient */
[class^="_bottomGradient"] {
/* biome-ignore lint: Explicitly remove conflicting gradient */
display: none !important;
}
plugins/radiant-lyrics-luna/src/index.ts
+406 -242
View File
File diff suppressed because it is too large Load Diff
plugins/radiant-lyrics-luna/src/lyrics-glow.css
+48 -9
View File
@@ -2,7 +2,8 @@
@font-face {
font-family: "AbyssFont";
font-weight: 400;
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2");
src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2")
format("woff2");
}
@font-face {
@@ -25,26 +26,40 @@
/* Enhanced lyrics styling with glow effects */
[class*="_lyricsText"] > div > span[data-current="true"] {
text-shadow: 0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff), 0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
text-shadow:
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
/* biome-ignore lint: Required to override app glow strength */
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #fff) !important;
padding-left: 20px;
transition-duration: 0.7s;
font-size: 55px;
/* biome-ignore lint: Needs priority for active lyric color */
color: white !important;
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
}
[class*="_lyricsText"] > div > span {
text-shadow: 0 0 0px transparent, 0 0 0px transparent;
text-shadow:
0 0 0px transparent,
0 0 0px transparent;
transition-duration: 0.25s;
color: rgba(128, 128, 128, 0.4);
font-size: 40px;
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
}
[class*="_lyricsText"] > div > span:hover {
text-shadow: 0 0 var(--rl-glow-inner, 2px) lightgray, 0 0 var(--rl-glow-outer, 20px) lightgray !important;
text-shadow:
0 0 var(--rl-glow-inner, 2px) lightgray,
/* biome-ignore lint: Hover glow should override defaults */
0 0 var(--rl-glow-outer, 20px) lightgray !important;
/* biome-ignore lint: Hover color override */
color: lightgray !important;
padding-left: 20px;
transition-duration: 0.7s;
@@ -53,29 +68,44 @@
/* Track title glow */
[data-test="now-playing-track-title"] {
/* Title text color/gradient is left to default app styling; only glow is customized. */
text-shadow: 0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff), 0 0 var(--rl-glow-outer, 30px) #fff !important;
text-shadow:
0 0 var(--rl-glow-inner, 1px) var(--cl-glow1, #fff),
/* biome-ignore lint: Title glow needs priority */
0 0 var(--rl-glow-outer, 30px) #fff !important;
/* biome-ignore lint: Reset vendor background clip */
-webkit-background-clip: initial !important;
/* biome-ignore lint: Reset background clip */
background-clip: initial !important;
/* biome-ignore lint: Reset vendor text fill */
-webkit-text-fill-color: initial !important;
/* biome-ignore lint: Ensure inherited color takes precedence */
color: inherit !important;
}
/* When track title glow setting is disabled, remove glow regardless of Colorama */
.rl-title-glow-disabled[data-test="now-playing-track-title"] {
/* biome-ignore lint: Full reset required */
text-shadow: none !important;
}
/* Current line transitions */
[class*="_lyricsText"] > div > span {
transition: text-shadow 0.7s ease-in-out, color 0.7s ease-in-out, padding 0.7s ease-in-out !important;
transition:
text-shadow 0.7s ease-in-out,
color 0.7s ease-in-out,
/* biome-ignore lint: Transition priority needed */
padding 0.7s ease-in-out !important;
}
/* Lyrics container styling */
[class^="_lyricsContainer"] > div > div > span {
margin-bottom: 2rem;
opacity: 1;
font-family: "AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family:
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
/* biome-ignore lint: Typography override for readability */
font-size: 38px !important;
}
@@ -85,13 +115,22 @@
.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 */
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;
}
plugins/radiant-lyrics-luna/src/styles.css
+79 -31
View File
@@ -11,13 +11,15 @@
/* Tab items stay hidden - no hover functionality (if the song changes and it doesnt have lyrics.. and ya want them back.. you can unhide the UI <3) */
.radiant-lyrics-ui-hidden [data-test="header-container"]:not(.rl-header-has-hide-btn) {
.radiant-lyrics-ui-hidden
[data-test="header-container"]:not(.rl-header-has-hide-btn) {
opacity: 0 !important;
transition: opacity 0.4s ease-in-out;
}
/* Keep header visible if it contains the Hide UI button, but hide its other children */
.radiant-lyrics-ui-hidden [data-test="header-container"].rl-header-has-hide-btn > *:not(.hide-ui-button) {
.radiant-lyrics-ui-hidden [data-test="header-container"].rl-header-has-hide-btn
> *:not(.hide-ui-button) {
opacity: 0 !important;
transition: opacity 0.4s ease-in-out;
}
@@ -47,14 +49,14 @@
background-color: transparent;
}
.radiant-lyrics-ui-hidden [class^="_bar"]>*:not(.hide-ui-button) {
.radiant-lyrics-ui-hidden [class^="_bar"] > *:not(.hide-ui-button) {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.4s ease-in-out;
}
/* Default state for bar elements */
[class^="_bar"]>* {
[class^="_bar"] > * {
transition: opacity 0.4s ease-in-out;
}
@@ -80,37 +82,64 @@
/* Hide bottom left controls completely - no hover functionality */
/* Exclude heart button in player bar and make sure hidden buttons can't be clicked */
.radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [data-test="like-toggle"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [data-test="dislike-toggle"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [data-test="favorite-toggle"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [data-test="heart-button"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [data-test="playlist-add"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="add-to-playlist"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="remove-from-playlist"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="like-toggle"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="dislike-toggle"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="favorite-toggle"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="heart-button"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[data-test="playlist-add"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [class*="_trackActions"],
.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"],
.radiant-lyrics-ui-hidden [class*="_actionButtons"],
.radiant-lyrics-ui-hidden [class*="_favoriteButton"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
[class*="_favoriteButton"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden [class*="_addToPlaylist"],
.radiant-lyrics-ui-hidden [class*="_lowerLeft"],
.radiant-lyrics-ui-hidden [class*="_bottomActions"],
.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child,
.radiant-lyrics-ui-hidden button[title*="Add to"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[title*="Remove from"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[title*="Like"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[title*="Favorite"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[title*="Heart"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[aria-label*="Add to"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[aria-label*="Remove from"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[aria-label*="Like"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[aria-label*="Favorite"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden button[aria-label*="Heart"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[title*="Add to"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[title*="Remove from"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[title*="Like"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[title*="Favorite"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[title*="Heart"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[aria-label*="Add to"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[aria-label*="Remove from"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[aria-label*="Like"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[aria-label*="Favorite"]:not([data-test="footer-player"] *),
.radiant-lyrics-ui-hidden
button[aria-label*="Heart"]:not([data-test="footer-player"] *),
/* Target buttons in bottom left area specifically - (idk if this is needed.. but it's here) */
.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button),
.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button),
.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]
button[class*="_button"]:not(.unhide-ui-button),
.radiant-lyrics-ui-hidden
[class*="_nowPlayingContainer"]
[class*="_iconButton"]:not(.unhide-ui-button),
/* Additional catch-all for bottom left area buttons - (idk if this is needed.. but it's here) */
.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button),
.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) {
.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]
> div
> div:first-child
button:not(.unhide-ui-button),
.radiant-lyrics-ui-hidden
[class*="_nowPlayingContainer"]
> div:first-child
button:not(.unhide-ui-button) {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.5s ease-in-out !important;
@@ -146,8 +175,13 @@ button[aria-label*="Favorite"],
button[aria-label*="Heart"],
[class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button),
[class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button),
[class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button),
[class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) {
[class*="_nowPlayingContainer"]
> div
> div:first-child
button:not(.unhide-ui-button),
[class*="_nowPlayingContainer"]
> div:first-child
button:not(.unhide-ui-button) {
transition: opacity 0.5s ease-in-out;
}
@@ -198,7 +232,11 @@ figure[class*="_albumImage"] {
/* Hide UI button base styling - just the transition */
.hide-ui-button {
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out !important;
transition:
opacity 0.5s ease-in-out,
visibility 0.5s ease-in-out,
background-color 0.2s ease-in-out,
transform 0.2s ease-in-out !important;
}
/* Auto-fade styling for unhide button - (Keeps Text Visible, just not full opacity) | Cheers @Zyhn for the idea*/
@@ -209,7 +247,12 @@ figure[class*="_albumImage"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: rgba(255, 255, 255, 0.8) !important;
transition: background-color 0.8s ease-in-out, border-color 0.8s ease-in-out, box-shadow 0.8s ease-in-out, backdrop-filter 0.8s ease-in-out, color 0.8s ease-in-out;
transition:
background-color 0.8s ease-in-out,
border-color 0.8s ease-in-out,
box-shadow 0.8s ease-in-out,
backdrop-filter 0.8s ease-in-out,
color 0.8s ease-in-out;
}
/* Restore button styling on hover */
@@ -220,5 +263,10 @@ figure[class*="_albumImage"] {
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
color: white !important;
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, color 0.3s ease-in-out;
transition:
background-color 0.3s ease-in-out,
border-color 0.3s ease-in-out,
box-shadow 0.3s ease-in-out,
backdrop-filter 0.3s ease-in-out,
color 0.3s ease-in-out;
}