mirror of
https://github.com/meowarex/TidaLuna-Plugins.git
synced 2026-06-18 03:43:10 +10:00
Merge pull request #91 from meowarex/player-market-ui-rewrite
Player market UI rewrite
This commit is contained in:
Meow Meow
@@ -7,17 +7,11 @@ import visualizerStyles from "file://styles.css?minify";
|
||||
|
||||
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}`);
|
||||
export { Settings };
|
||||
|
||||
// Basic config with settings
|
||||
const config = {
|
||||
enabled: true,
|
||||
position: "left" as "left" | "right",
|
||||
width: 200,
|
||||
height: 40,
|
||||
get barCount() {
|
||||
@@ -31,7 +25,6 @@ const config = {
|
||||
},
|
||||
sensitivity: 1.5,
|
||||
smoothing: 0.8,
|
||||
visualizerType: "bars" as "bars" | "waveform" | "circular",
|
||||
};
|
||||
|
||||
// Clean up resources
|
||||
@@ -49,10 +42,15 @@ let animationId: number | null = null;
|
||||
let currentAudioElement: HTMLAudioElement | null = null;
|
||||
let isSourceConnected: boolean = false;
|
||||
|
||||
// Canvas and container elements
|
||||
let visualizerContainer: HTMLDivElement | null = null;
|
||||
let canvas: HTMLCanvasElement | null = null;
|
||||
let canvasContext: CanvasRenderingContext2D | null = null;
|
||||
// Each placement gets its own container/canvas/context
|
||||
interface VisualizerSlot {
|
||||
container: HTMLDivElement | null;
|
||||
canvas: HTMLCanvasElement | null;
|
||||
ctx: CanvasRenderingContext2D | null;
|
||||
}
|
||||
|
||||
const navSlot: VisualizerSlot = { container: null, canvas: null, ctx: null };
|
||||
const npSlot: VisualizerSlot = { container: null, canvas: null, ctx: null };
|
||||
|
||||
// Find the audio element - this is a bit of a hack but it works
|
||||
const findAudioElement = (): HTMLAudioElement | null => {
|
||||
@@ -140,10 +138,7 @@ const initializeAudioVisualizer = async (): Promise<void> => {
|
||||
audioContext.resume().catch(() => {}); // Fire and forget
|
||||
}
|
||||
|
||||
// Create UI only if it doesn't exist
|
||||
if (!visualizerContainer) {
|
||||
createVisualizerUI();
|
||||
}
|
||||
|
||||
// Start animation only if not already running
|
||||
if (!animationId) {
|
||||
@@ -155,36 +150,13 @@ const initializeAudioVisualizer = async (): Promise<void> => {
|
||||
}
|
||||
};
|
||||
|
||||
// Create the visualizer UI container and canvas
|
||||
const createVisualizerUI = (): void => {
|
||||
// Remove existing visualizer if it exists
|
||||
removeVisualizerUI();
|
||||
|
||||
if (!config.enabled) return;
|
||||
|
||||
// Find the search bar
|
||||
const searchField = document.querySelector(
|
||||
'input[class*="_searchField"]',
|
||||
) as HTMLInputElement;
|
||||
if (!searchField) {
|
||||
warn("Search field not found");
|
||||
return;
|
||||
}
|
||||
|
||||
const searchContainer = searchField.parentElement;
|
||||
if (!searchContainer) {
|
||||
warn("Search container not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Create visualizer container
|
||||
visualizerContainer = document.createElement("div");
|
||||
visualizerContainer.id = "audio-visualizer-container";
|
||||
visualizerContainer.style.cssText = `
|
||||
const makeSlotElements = (): { container: HTMLDivElement; canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D } | null => {
|
||||
const container = document.createElement("div");
|
||||
container.className = "audio-visualizer-container";
|
||||
container.style.cssText = `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-${config.position === "left" ? "right" : "left"}: 12px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
@@ -192,83 +164,102 @@ const createVisualizerUI = (): void => {
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
`;
|
||||
|
||||
// Create canvas
|
||||
canvas = document.createElement("canvas");
|
||||
canvas.width = config.width;
|
||||
canvas.height = config.height;
|
||||
canvas.style.cssText = `
|
||||
const cvs = document.createElement("canvas");
|
||||
cvs.width = config.width;
|
||||
cvs.height = config.height;
|
||||
cvs.style.cssText = `
|
||||
width: ${config.width}px;
|
||||
height: ${config.height}px;
|
||||
border-radius: 4px;
|
||||
`;
|
||||
|
||||
visualizerContainer.appendChild(canvas);
|
||||
canvasContext = canvas.getContext("2d");
|
||||
|
||||
// Insert visualizer next to search bar
|
||||
if (config.position === "left") {
|
||||
searchContainer.parentElement?.insertBefore(
|
||||
visualizerContainer,
|
||||
searchContainer,
|
||||
);
|
||||
} else {
|
||||
searchContainer.parentElement?.insertBefore(
|
||||
visualizerContainer,
|
||||
searchContainer.nextSibling,
|
||||
);
|
||||
}
|
||||
container.appendChild(cvs);
|
||||
const ctx = cvs.getContext("2d");
|
||||
if (!ctx) return null;
|
||||
return { container, canvas: cvs, ctx };
|
||||
};
|
||||
|
||||
const clearSlot = (slot: VisualizerSlot): void => {
|
||||
slot.container?.remove();
|
||||
slot.container = null;
|
||||
slot.canvas = null;
|
||||
slot.ctx = null;
|
||||
};
|
||||
|
||||
const ensureNavSlot = (): void => {
|
||||
if (navSlot.container?.isConnected) return;
|
||||
clearSlot(navSlot);
|
||||
|
||||
const searchField = document.querySelector('input[class*="_searchField"]') as HTMLInputElement;
|
||||
if (!searchField) return;
|
||||
const searchContainer = searchField.parentElement;
|
||||
if (!searchContainer?.parentElement) return;
|
||||
|
||||
const els = makeSlotElements();
|
||||
if (!els) return;
|
||||
els.container.style.marginRight = "12px";
|
||||
Object.assign(navSlot, els);
|
||||
searchContainer.parentElement.insertBefore(els.container, searchContainer);
|
||||
};
|
||||
|
||||
const ensureNpSlot = (): void => {
|
||||
if (npSlot.container?.isConnected) return;
|
||||
clearSlot(npSlot);
|
||||
|
||||
const artistInfo = document.querySelector('[data-test="artist-info"]');
|
||||
if (!artistInfo) return;
|
||||
const leftContent = artistInfo.parentElement;
|
||||
if (!leftContent) return;
|
||||
|
||||
const els = makeSlotElements();
|
||||
if (!els) return;
|
||||
els.container.style.marginLeft = "12px";
|
||||
Object.assign(npSlot, els);
|
||||
leftContent.insertBefore(els.container, artistInfo.nextSibling);
|
||||
};
|
||||
|
||||
const createVisualizerUI = (): void => {
|
||||
if (!config.enabled) return;
|
||||
ensureNavSlot();
|
||||
ensureNpSlot();
|
||||
};
|
||||
|
||||
// Remove visualizer UI
|
||||
const removeVisualizerUI = (): void => {
|
||||
if (visualizerContainer) {
|
||||
visualizerContainer.remove();
|
||||
visualizerContainer = null;
|
||||
canvas = null;
|
||||
canvasContext = null;
|
||||
}
|
||||
clearSlot(navSlot);
|
||||
clearSlot(npSlot);
|
||||
};
|
||||
|
||||
// Animation loop for rendering visualizer
|
||||
const animate = (): void => {
|
||||
if (!canvasContext || !canvas) {
|
||||
animationId = null;
|
||||
// Re-attach slots that got disconnected from the DOM
|
||||
createVisualizerUI();
|
||||
|
||||
const slots = [navSlot, npSlot].filter(s => s.ctx && s.canvas);
|
||||
if (slots.length === 0) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
return;
|
||||
}
|
||||
|
||||
// Update canvas color in case it changed
|
||||
canvasContext.fillStyle = config.color;
|
||||
canvasContext.strokeStyle = config.color;
|
||||
|
||||
// Check if we have real audio data - this might not be needed but its a good idea
|
||||
let hasRealAudio = false;
|
||||
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;
|
||||
hasRealAudio = avgVolume > 5; // Threshold for detecting actual audio
|
||||
hasRealAudio = avgVolume > 5;
|
||||
}
|
||||
|
||||
// Clear canvas
|
||||
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
|
||||
for (const slot of slots) {
|
||||
const ctx = slot.ctx!;
|
||||
const cvs = slot.canvas!;
|
||||
ctx.fillStyle = config.color;
|
||||
ctx.strokeStyle = config.color;
|
||||
ctx.clearRect(0, 0, cvs.width, cvs.height);
|
||||
|
||||
if (hasRealAudio && analyser && dataArray) {
|
||||
// Draw real audio visualization
|
||||
switch (config.visualizerType) {
|
||||
case "bars": // Is implemented YAYYY (default)
|
||||
drawBars();
|
||||
break;
|
||||
case "waveform": // Not implemented yet
|
||||
drawWaveform();
|
||||
break;
|
||||
case "circular": // Not implemented yet
|
||||
drawCircular();
|
||||
break;
|
||||
}
|
||||
drawBars(ctx, cvs);
|
||||
} else {
|
||||
// Draw cool scrolling wave effect when no audio
|
||||
drawScrollingWave();
|
||||
drawScrollingWave(ctx, cvs);
|
||||
}
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
@@ -291,67 +282,54 @@ const drawRoundedRect = (
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
// Draw scrolling wave effect when no audio is detected
|
||||
const drawScrollingWave = (): void => {
|
||||
if (!canvasContext || !canvas) return;
|
||||
|
||||
waveTime += 0.05; // Speed of wave animation
|
||||
const drawScrollingWave = (ctx: CanvasRenderingContext2D, cvs: HTMLCanvasElement): void => {
|
||||
waveTime += 0.05 / [navSlot, npSlot].filter(s => s.ctx).length;
|
||||
|
||||
const barCount = config.barCount;
|
||||
const barWidth = canvas.width / barCount;
|
||||
const maxHeight = canvas.height * 0.6;
|
||||
const barWidth = cvs.width / barCount;
|
||||
const maxHeight = cvs.height * 0.6;
|
||||
|
||||
canvasContext.fillStyle = config.color;
|
||||
ctx.fillStyle = config.color;
|
||||
|
||||
for (let i = 0; i < barCount; i++) {
|
||||
// Create a sine wave that scrolls back and forth
|
||||
const x = i / barCount;
|
||||
const wave1 = Math.sin(x * Math.PI * 2 + waveTime) * 0.3;
|
||||
const wave2 = Math.sin(x * Math.PI * 4 + waveTime * 1.3) * 0.2;
|
||||
const wave3 = Math.sin(x * Math.PI * 6 + waveTime * 0.7) * 0.1;
|
||||
|
||||
// Combine waves for complex pattern
|
||||
const combinedWave = (wave1 + wave2 + wave3 + 1) / 2; // Normalize to 0-1
|
||||
|
||||
// Add a traveling wave effect
|
||||
const combinedWave = (wave1 + wave2 + wave3 + 1) / 2;
|
||||
const travelWave = Math.sin(x * Math.PI * 3 - waveTime * 2) * 0.5 + 0.5;
|
||||
|
||||
// Final height calculation
|
||||
const barHeight = maxHeight * combinedWave * travelWave * 0.8 + 2; // Minimum height of 2px
|
||||
const barHeight = maxHeight * combinedWave * travelWave * 0.8 + 2;
|
||||
|
||||
const xPos = i * barWidth;
|
||||
const yPos = (canvas.height - barHeight) / 2;
|
||||
const yPos = (cvs.height - barHeight) / 2;
|
||||
|
||||
// Draw rounded or square bars based on setting
|
||||
if (config.barRounding) {
|
||||
drawRoundedRect(canvasContext, xPos, yPos, barWidth - 1, barHeight, 2);
|
||||
drawRoundedRect(ctx, xPos, yPos, barWidth - 1, barHeight, 2);
|
||||
} else {
|
||||
canvasContext.fillRect(xPos, yPos, barWidth - 1, barHeight);
|
||||
ctx.fillRect(xPos, yPos, barWidth - 1, barHeight);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw frequency bars - default
|
||||
const drawBars = (): void => {
|
||||
if (!canvasContext || !dataArray || !canvas) return;
|
||||
const drawBars = (ctx: CanvasRenderingContext2D, cvs: HTMLCanvasElement): void => {
|
||||
if (!dataArray) return;
|
||||
|
||||
const barWidth = canvas.width / config.barCount;
|
||||
const heightScale = canvas.height / 255;
|
||||
const barWidth = cvs.width / config.barCount;
|
||||
const heightScale = cvs.height / 255;
|
||||
|
||||
canvasContext.fillStyle = config.color;
|
||||
ctx.fillStyle = config.color;
|
||||
|
||||
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 x = i * barWidth;
|
||||
const y = canvas.height - barHeight;
|
||||
const y = cvs.height - barHeight;
|
||||
|
||||
// Draw rounded or square bars based on setting
|
||||
if (config.barRounding) {
|
||||
drawRoundedRect(canvasContext, x, y, barWidth - 1, barHeight, 2);
|
||||
drawRoundedRect(ctx, x, y, barWidth - 1, barHeight, 2);
|
||||
} else {
|
||||
canvasContext.fillRect(x, y, barWidth - 1, barHeight);
|
||||
ctx.fillRect(x, y, barWidth - 1, barHeight);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -412,23 +390,23 @@ const drawBars = (): void => {
|
||||
// }
|
||||
// };
|
||||
|
||||
// Update visualizer settings
|
||||
const updateAudioVisualizer = (): void => {
|
||||
if (analyser) {
|
||||
// use a fixed size that provides enough frequency bins
|
||||
analyser.fftSize = 512; // Fixed power of 2 - important
|
||||
analyser.fftSize = 512;
|
||||
analyser.smoothingTimeConstant = config.smoothing;
|
||||
dataArray = new Uint8Array(analyser.frequencyBinCount);
|
||||
}
|
||||
|
||||
if (canvas) {
|
||||
canvas.width = config.width;
|
||||
canvas.height = config.height;
|
||||
canvas.style.width = `${config.width}px`;
|
||||
canvas.style.height = `${config.height}px`;
|
||||
for (const slot of [navSlot, npSlot]) {
|
||||
if (slot.canvas) {
|
||||
slot.canvas.width = config.width;
|
||||
slot.canvas.height = config.height;
|
||||
slot.canvas.style.width = `${config.width}px`;
|
||||
slot.canvas.style.height = `${config.height}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Recreate UI if position changed
|
||||
removeVisualizerUI();
|
||||
createVisualizerUI();
|
||||
};
|
||||
|
||||
|
||||
@@ -1,50 +1,40 @@
|
||||
/* Audio Visualizer CSS - Only applies to the Visualizer */
|
||||
/* Audio Visualizer CSS */
|
||||
|
||||
#audio-visualizer-container {
|
||||
.audio-visualizer-container {
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
animation: av-fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
#audio-visualizer-container:hover {
|
||||
.audio-visualizer-container:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
#audio-visualizer-container canvas {
|
||||
.audio-visualizer-container canvas {
|
||||
display: block;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
#audio-visualizer-container {
|
||||
.audio-visualizer-container {
|
||||
margin: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#audio-visualizer-container canvas {
|
||||
.audio-visualizer-container canvas {
|
||||
max-width: 150px;
|
||||
max-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Where to put the thingy */
|
||||
[class*="_searchField"] {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
[data-type="search-field"] {
|
||||
min-width: 220px !important;
|
||||
}
|
||||
|
||||
/* Shadow when active - doesnt seem to only apply when active but thats better */
|
||||
#audio-visualizer-container.active {
|
||||
.audio-visualizer-container.active {
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Fade in animation */
|
||||
@keyframes fadeIn {
|
||||
@keyframes av-fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
@@ -55,6 +45,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
#audio-visualizer-container {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
[data-type="search-field"] {
|
||||
min-width: 220px !important;
|
||||
}
|
||||
|
||||
@@ -8,53 +8,24 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
// 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,
|
||||
mode: "single" as ColoramaMode,
|
||||
// Store colors as RGB hex (#RRGGBB) and opacity separately (0-100)
|
||||
singleColor: "#FFFFFF",
|
||||
singleAlpha: 100,
|
||||
gradientStart: "#FFFFFF",
|
||||
gradientStartAlpha: 100,
|
||||
gradientEnd: "#AAFFFF",
|
||||
gradientEndAlpha: 100,
|
||||
gradientAngle: 0,
|
||||
customColors: [] as string[],
|
||||
excludeInactive: false,
|
||||
});
|
||||
|
||||
export const Settings = () => {
|
||||
// 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 [gradientEnd, setGradientEnd] = React.useState(settings.gradientEnd);
|
||||
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);
|
||||
@@ -63,9 +34,6 @@ export const Settings = () => {
|
||||
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;
|
||||
@@ -73,28 +41,23 @@ export const Settings = () => {
|
||||
onChange: SwitchChangeHandler;
|
||||
}>;
|
||||
|
||||
// Helper for HEX normalization
|
||||
const normalizeToRGB = (
|
||||
hex: string,
|
||||
fallback: string = "#FFFFFF",
|
||||
): string => {
|
||||
let v = hex.trim().toLowerCase();
|
||||
if (!v.startsWith("#")) v = `#${v}`;
|
||||
// #rgb or #rgba -> expand
|
||||
if (/^#([0-9a-f]{3,4})$/.test(v)) {
|
||||
const m = v.slice(1);
|
||||
const r = m[0];
|
||||
const g = m[1];
|
||||
const b = m[2];
|
||||
// ignore alpha if provided (#rgba)
|
||||
return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
|
||||
}
|
||||
// #aarrggbb -> strip alpha
|
||||
if (/^#([0-9a-f]{8})$/.test(v)) {
|
||||
const rrggbb = v.slice(3);
|
||||
return `#${rrggbb}`.toUpperCase();
|
||||
}
|
||||
// #rrggbb
|
||||
if (/^#([0-9a-f]{6})$/.test(v)) return v.toUpperCase();
|
||||
return fallback;
|
||||
};
|
||||
@@ -121,8 +84,7 @@ export const Settings = () => {
|
||||
"#1976D2",
|
||||
];
|
||||
|
||||
const openPicker = (endpoint: "single" | "start" | "end" = "single") => {
|
||||
setActiveEndpoint(endpoint);
|
||||
const openPicker = () => {
|
||||
setShowPicker(true);
|
||||
setShouldRender(true);
|
||||
setTimeout(() => setIsAnimatingIn(true), 10);
|
||||
@@ -140,22 +102,10 @@ export const Settings = () => {
|
||||
const applyCustomInputColor = (raw: string, updateInput: boolean): void => {
|
||||
const trimmed = raw.trim();
|
||||
if (!hexColorRegex.test(trimmed)) return;
|
||||
if (mode === "single") {
|
||||
const next = normalizeToRGB(trimmed);
|
||||
settings.singleColor = next;
|
||||
setSingleColor(next);
|
||||
if (updateInput) setCustomInput(next);
|
||||
} else if (mode === "gradient-experimental") {
|
||||
const next = normalizeToRGB(trimmed);
|
||||
if (activeEndpoint === "end") {
|
||||
settings.gradientEnd = next;
|
||||
setGradientEnd(next);
|
||||
} else {
|
||||
settings.gradientStart = next;
|
||||
setGradientStart(next);
|
||||
}
|
||||
if (updateInput) setCustomInput(next);
|
||||
}
|
||||
requestApply();
|
||||
};
|
||||
|
||||
@@ -172,12 +122,6 @@ export const Settings = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// const removeCustomColor = (color: string) => {
|
||||
// const updated = customColors.filter((c) => c !== color);
|
||||
// setCustomColors(updated);
|
||||
// settings.customColors = updated;
|
||||
// };
|
||||
|
||||
const allColors = [...colorPresets, ...customColors];
|
||||
|
||||
const requestApply = () => {
|
||||
@@ -186,66 +130,11 @@ export const Settings = () => {
|
||||
|
||||
return (
|
||||
<LunaSettings>
|
||||
{/* Mode selection via dropdown (aligned right) */}
|
||||
{/* Single color picker button */}
|
||||
<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>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as ColoramaMode;
|
||||
settings.mode = next;
|
||||
setMode(next);
|
||||
requestApply();
|
||||
}}
|
||||
style={{
|
||||
padding: "6px 10px",
|
||||
borderRadius: 6,
|
||||
border: "1px solid rgba(255,255,255,0.2)",
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
marginLeft: "auto",
|
||||
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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Single color */}
|
||||
<div
|
||||
style={{
|
||||
padding: "8px 0",
|
||||
display: mode === "single" ? "flex" : "none",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
@@ -272,7 +161,7 @@ export const Settings = () => {
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (showPicker ? closePicker() : openPicker("single"))}
|
||||
onClick={() => (showPicker ? closePicker() : openPicker())}
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
@@ -285,84 +174,7 @@ export const Settings = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gradient controls (open picker) */}
|
||||
<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={{ opacity: 0.7, fontSize: 14 }}>Set colors & angle</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCustomInput(gradientStart);
|
||||
openPicker("start");
|
||||
}}
|
||||
style={{
|
||||
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",
|
||||
}}
|
||||
>
|
||||
Configure
|
||||
</button>
|
||||
</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>
|
||||
<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
|
||||
type="button"
|
||||
onClick={() => openPicker("start")}
|
||||
style={{
|
||||
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",
|
||||
}}
|
||||
>
|
||||
Configure
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal for picking and managing colors (reused) */}
|
||||
{/* Color picker modal */}
|
||||
{shouldRender && (
|
||||
<>
|
||||
<button
|
||||
@@ -415,87 +227,8 @@ export const Settings = () => {
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{mode === "single" ? "Single Color" : "Gradient Colors"}
|
||||
Lyrics Color
|
||||
</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
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<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",
|
||||
@@ -510,18 +243,8 @@ export const Settings = () => {
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = normalizeToRGB(color);
|
||||
if (mode === "single") {
|
||||
settings.singleColor = next;
|
||||
setSingleColor(next);
|
||||
} else if (mode === "gradient-experimental") {
|
||||
if (activeEndpoint === "end") {
|
||||
settings.gradientEnd = next;
|
||||
setGradientEnd(next);
|
||||
} else {
|
||||
settings.gradientStart = next;
|
||||
setGradientStart(next);
|
||||
}
|
||||
}
|
||||
setCustomInput(next);
|
||||
requestApply();
|
||||
}}
|
||||
@@ -536,8 +259,6 @@ export const Settings = () => {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{mode !== "cover-gradient" && (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<div
|
||||
style={{
|
||||
@@ -597,9 +318,6 @@ export const Settings = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Sliders inside picker based on mode */}
|
||||
{mode === "single" && (
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div
|
||||
style={{
|
||||
@@ -612,7 +330,7 @@ export const Settings = () => {
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
min={5}
|
||||
max={100}
|
||||
step={1}
|
||||
value={singleAlpha}
|
||||
@@ -625,159 +343,6 @@ export const Settings = () => {
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={gradientStartAlpha}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
settings.gradientStartAlpha = value;
|
||||
setGradientStartAlpha(value);
|
||||
requestApply();
|
||||
}}
|
||||
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>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
value={gradientEndAlpha}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
settings.gradientEndAlpha = value;
|
||||
setGradientEndAlpha(value);
|
||||
requestApply();
|
||||
}}
|
||||
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>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={360}
|
||||
step={1}
|
||||
value={gradientAngle}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
settings.gradientAngle = value;
|
||||
setGradientAngle(value);
|
||||
requestApply();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={360}
|
||||
step={1}
|
||||
value={gradientAngle}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
settings.gradientAngle = value;
|
||||
setGradientAngle(value);
|
||||
requestApply();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={closePicker}
|
||||
@@ -800,7 +365,7 @@ export const Settings = () => {
|
||||
)}
|
||||
<AnySwitch
|
||||
title="Exclude Inactive"
|
||||
desc="Apply color/gradient only to the currently active lyric line"
|
||||
desc="Apply color only to the currently active lyric line"
|
||||
checked={excludeInactive}
|
||||
onChange={(_event: React.ChangeEvent<HTMLInputElement> | null, checked: boolean) => {
|
||||
settings.excludeInactive = checked;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { LunaUnload, Tracer } from "@luna/core";
|
||||
import { StyleTag, PlayState } from "@luna/lib";
|
||||
import { StyleTag } from "@luna/lib";
|
||||
import { settings, Settings } from "./Settings";
|
||||
|
||||
import styles from "file://styles.css?minify";
|
||||
@@ -11,66 +11,6 @@ export const unloads = new Set<LunaUnload>();
|
||||
|
||||
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;
|
||||
if (img) return img;
|
||||
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;
|
||||
const tempImg = new Image();
|
||||
tempImg.crossOrigin = "anonymous";
|
||||
tempImg.src = poster;
|
||||
await new Promise<void>((resolve) => {
|
||||
tempImg.onload = () => resolve();
|
||||
tempImg.onerror = () => resolve();
|
||||
});
|
||||
return tempImg as unknown as HTMLImageElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getDominantColorsFromImage(
|
||||
img: HTMLImageElement,
|
||||
count: number = 2,
|
||||
): string[] {
|
||||
try {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return ["#ffffff", "#88aaff"]; // fallback
|
||||
const w = 64;
|
||||
const h = 64;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
const data = ctx.getImageData(0, 0, w, h).data;
|
||||
|
||||
// Simple k-means-ish binning into 16 buckets per channel
|
||||
const buckets = new Map<string, number>();
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
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)}`;
|
||||
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("")}`;
|
||||
});
|
||||
return picked;
|
||||
} catch {
|
||||
return ["#ffffff", "#88aaff"]; // fallback
|
||||
}
|
||||
}
|
||||
|
||||
// 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}`;
|
||||
@@ -86,8 +26,6 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
|
||||
const b = parseInt(v.slice(5, 7), 16);
|
||||
return { r, g, b };
|
||||
}
|
||||
// 8-digit hex expects #AARRGGBB. Indices 1-3 are the alpha byte (ignored here),
|
||||
// so r/g/b are extracted from v.slice(3,5), v.slice(5,7), v.slice(7,9) respectively.
|
||||
if (/^#([0-9a-fA-F]{8})$/.test(v)) {
|
||||
const r = parseInt(v.slice(3, 5), 16);
|
||||
const g = parseInt(v.slice(5, 7), 16);
|
||||
@@ -113,102 +51,28 @@ function applySingleColor(color: string) {
|
||||
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) {
|
||||
const startAlpha = (settings as any).gradientStartAlpha ?? 100;
|
||||
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");
|
||||
}
|
||||
|
||||
function resetModeClasses(): void {
|
||||
document.body.classList.remove("colorama-single", "colorama-gradient");
|
||||
}
|
||||
|
||||
async function applyCoverColors(gradient: boolean) {
|
||||
const img = await getCoverArtElement();
|
||||
if (!img) return;
|
||||
const colors = getDominantColorsFromImage(img, gradient ? 2 : 1);
|
||||
if (gradient) {
|
||||
const start = colors[0] ?? settings.gradientStart;
|
||||
const end = colors[1] ?? settings.gradientEnd;
|
||||
applyGradient(start, end, settings.gradientAngle);
|
||||
} else {
|
||||
const color = colors[0] ?? settings.singleColor;
|
||||
applySingleColor(color);
|
||||
}
|
||||
}
|
||||
|
||||
function applyColoramaLyrics(): void {
|
||||
if (!settings.enabled) {
|
||||
document.body.classList.remove("colorama-single", "colorama-gradient");
|
||||
document.body.classList.remove("colorama-single");
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle only-active-line mode class
|
||||
if (settings.excludeInactive) {
|
||||
document.body.classList.add("colorama-only-active");
|
||||
} else {
|
||||
document.body.classList.remove("colorama-only-active");
|
||||
}
|
||||
resetModeClasses();
|
||||
switch (settings.mode) {
|
||||
case "single":
|
||||
|
||||
applySingleColor(settings.singleColor);
|
||||
break;
|
||||
case "gradient-experimental":
|
||||
applyGradient(
|
||||
settings.gradientStart,
|
||||
settings.gradientEnd,
|
||||
settings.gradientAngle,
|
||||
);
|
||||
break;
|
||||
case "cover":
|
||||
applyCoverColors(false);
|
||||
break;
|
||||
case "cover-gradient":
|
||||
applyCoverColors(true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
(window as any).applyColoramaLyrics = applyColoramaLyrics;
|
||||
|
||||
// Re-apply on track changes (for auto modes)
|
||||
function observeTrackChanges(): void {
|
||||
let lastTrackId: string | null = null;
|
||||
const check = () => {
|
||||
const currentTrackId = PlayState.playbackContext?.actualProductId;
|
||||
if (currentTrackId && currentTrackId !== lastTrackId) {
|
||||
lastTrackId = currentTrackId;
|
||||
if (settings.mode === "cover" || settings.mode === "cover-gradient") {
|
||||
setTimeout(() => applyColoramaLyrics(), 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
const interval = setInterval(check, 500);
|
||||
unloads.add(() => clearInterval(interval));
|
||||
check();
|
||||
}
|
||||
|
||||
// Initial apply and observers
|
||||
setTimeout(() => applyColoramaLyrics(), 200);
|
||||
observeTrackChanges();
|
||||
|
||||
// for some reason, re-apply after Radiant updates its styles/backgrounds
|
||||
function hookRadiantUpdates(): void {
|
||||
const w = window as any;
|
||||
const wrap = (name: string) => {
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
/* Variables used by Colorama Lyrics */
|
||||
:root {
|
||||
--cl-lyrics-color: #ffffff;
|
||||
--cl-grad-start: #ffffff;
|
||||
--cl-grad-end: #88aaff;
|
||||
--cl-grad-angle: 0deg;
|
||||
--cl-glow1: #ffffff;
|
||||
--cl-glow2: #ffffff;
|
||||
}
|
||||
@@ -24,54 +21,9 @@
|
||||
-webkit-text-fill-color: initial !important;
|
||||
}
|
||||
|
||||
/* Apply gradient to lyrics text */
|
||||
.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;
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Only-active: apply container class only on the active line via JS */
|
||||
|
||||
/* 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"] {
|
||||
filter: brightness(1.1) !important;
|
||||
}
|
||||
|
||||
/* Keep song title color unchanged; its glow is controlled in Radiant CSS */
|
||||
|
||||
/* 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-gradient [class*="_lyricsText"] > div > span[data-current="true"],
|
||||
.colorama-gradient
|
||||
[class^="_lyricsContainer"]
|
||||
> div
|
||||
> div
|
||||
> span[data-current="true"],
|
||||
.colorama-gradient
|
||||
[class^="_lyricsContainer"]
|
||||
> div
|
||||
> div
|
||||
@@ -90,20 +42,6 @@
|
||||
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;
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
/* Do not increase glow strength on hover for gradients */
|
||||
}
|
||||
|
||||
/* MARKER: Radiant WBW Lyrics Support */
|
||||
|
||||
/* Single color: active wbw words & syllable finished */
|
||||
@@ -123,31 +61,6 @@
|
||||
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
|
||||
}
|
||||
|
||||
/* Gradient: active wbw words */
|
||||
.colorama-gradient .rl-wbw-word.rl-wbw-active {
|
||||
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;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Gradient: syllable finished (solid color — gradient conflicts with sweep animation) */
|
||||
.colorama-gradient .rl-wbw-word.rl-syl-finished {
|
||||
color: var(--cl-glow1, #ffffff) !important;
|
||||
}
|
||||
|
||||
/* Gradient: active wbw word glow */
|
||||
.colorama-gradient .rl-wbw-word.rl-wbw-active {
|
||||
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: wbw words pick up Colorama colors */
|
||||
.colorama-single .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover,
|
||||
.colorama-single .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word.rl-wbw-word-hover {
|
||||
@@ -157,23 +70,8 @@
|
||||
0 0 var(--rl-glow-outer, 20px) var(--cl-glow2, #ffffff) !important;
|
||||
}
|
||||
|
||||
.colorama-gradient .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover,
|
||||
.colorama-gradient .rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word.rl-wbw-word-hover {
|
||||
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;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Only-active: wbw words on inactive lines stay default */
|
||||
body.colorama-only-active.colorama-single
|
||||
.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word,
|
||||
body.colorama-only-active.colorama-gradient
|
||||
.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word {
|
||||
color: rgba(128, 128, 128, 0.4) !important;
|
||||
background: none !important;
|
||||
@@ -185,8 +83,6 @@ body.colorama-only-active.colorama-gradient
|
||||
|
||||
/* Only-active: hover on inactive wbw lines keeps default */
|
||||
body.colorama-only-active.colorama-single
|
||||
.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover,
|
||||
body.colorama-only-active.colorama-gradient
|
||||
.rl-wbw-line:not(.rl-wbw-line-active) .rl-wbw-word:hover {
|
||||
color: lightgray !important;
|
||||
background: none !important;
|
||||
@@ -198,13 +94,8 @@ body.colorama-only-active.colorama-gradient
|
||||
|
||||
/* 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"]) {
|
||||
/* Match Radiant inactive styling */
|
||||
color: rgba(128, 128, 128, 0.4) !important;
|
||||
background: none !important;
|
||||
-webkit-background-clip: initial !important;
|
||||
@@ -215,10 +106,6 @@ body.colorama-only-active.colorama-gradient
|
||||
|
||||
/* 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 {
|
||||
color: lightgray !important;
|
||||
|
||||
@@ -21,7 +21,6 @@ declare global {
|
||||
|
||||
export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
|
||||
lyricsGlowEnabled: true,
|
||||
trackTitleGlow: false,
|
||||
hideUIEnabled: true,
|
||||
playerBarVisible: false,
|
||||
qualityProgressColor: true,
|
||||
@@ -84,9 +83,6 @@ export const Settings = () => {
|
||||
const [spinSpeed, setSpinSpeed] = React.useState(settings.spinSpeed);
|
||||
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] =
|
||||
React.useState(settings.settingsAffectNowPlaying);
|
||||
const [trackTitleGlow, setTrackTitleGlow] = React.useState(
|
||||
settings.trackTitleGlow,
|
||||
);
|
||||
const [backgroundScale, setBackgroundScale] = React.useState(
|
||||
settings.backgroundScale,
|
||||
);
|
||||
@@ -184,19 +180,7 @@ export const Settings = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Track Title Glow"
|
||||
desc="Apply glow to the track title"
|
||||
checked={trackTitleGlow}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.trackTitleGlow = checked;
|
||||
setTrackTitleGlow(checked);
|
||||
if (window.updateRadiantLyricsStyles) {
|
||||
window.updateRadiantLyricsStyles();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{(lyricsGlowEnabled || trackTitleGlow) && (
|
||||
{lyricsGlowEnabled && (
|
||||
<LunaNumberSetting
|
||||
title="Text Glow"
|
||||
desc="Adjust the glow size of lyrics (0-100, default: 20)"
|
||||
@@ -346,7 +330,7 @@ export const Settings = () => {
|
||||
/>
|
||||
<AnySwitch
|
||||
title="Floating Player Bar"
|
||||
desc="Floating rounded player bar with backdrop blur"
|
||||
desc="When disabled, the player bar becomes a square edge-to-edge bar"
|
||||
checked={floatingPlayerBar}
|
||||
onChange={(_: unknown, checked: boolean) => {
|
||||
settings.floatingPlayerBar = checked;
|
||||
|
||||
@@ -43,6 +43,18 @@
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Hide Tidal's native now-playing background color overlay */
|
||||
[data-test="new-now-playing"] > [class*="_background_"] {
|
||||
/* biome-ignore lint: Must override native album-art-derived background */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ensure the now-playing container itself is transparent */
|
||||
[class*="_nowPlayingContainer"] {
|
||||
/* biome-ignore lint: Must override any inline background styles */
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Now Playing Background Container Optimization */
|
||||
.now-playing-background-container {
|
||||
position: absolute;
|
||||
@@ -50,7 +62,7 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -3;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
/* Hardware acceleration */
|
||||
@@ -58,6 +70,14 @@
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Ensure now-playing content renders above the dynamic background */
|
||||
[data-test="new-now-playing"] > header,
|
||||
[data-test="new-now-playing"] > [class*="_content_"],
|
||||
[data-test="new-now-playing"] > .unhide-ui-button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Optimized keyframe animations with GPU acceleration */
|
||||
@keyframes spinGlobal {
|
||||
from {
|
||||
@@ -89,34 +109,27 @@
|
||||
filter: blur(10px) brightness(0.4) contrast(1.1) !important;
|
||||
}
|
||||
|
||||
/* Make Notification Feed sidebar transparent */
|
||||
/* Make app chrome transparent for cover-everywhere background */
|
||||
body,
|
||||
#wimp,
|
||||
main,
|
||||
[class^="_sidebarWrapper"],
|
||||
[class^="_mainContainer"],
|
||||
[class*="smallHeader"],
|
||||
[data-test="main-layout-sidebar-wrapper"],
|
||||
[data-test="main-layout-header"],
|
||||
[data-test="feed-sidebar"],
|
||||
[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"] {
|
||||
[class^="_cellContainer"] {
|
||||
/* biome-ignore lint: Ensure background is fully cleared under theme CSS */
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
/* Make sidebar and player bar semi-transparent with optimized backdrop-filter */
|
||||
[data-test="footer-player"],
|
||||
[data-test="main-layout-sidebar-wrapper"],
|
||||
[class^="_bar"],
|
||||
[class^="_sidebarItem"]:hover {
|
||||
/* Make sidebar semi-transparent with optimized backdrop-filter */
|
||||
[data-test="main-layout-sidebar-wrapper"] {
|
||||
/* 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 */
|
||||
@@ -126,10 +139,7 @@ main,
|
||||
}
|
||||
|
||||
/* Performance mode: reduce backdrop blur */
|
||||
.performance-mode [data-test="footer-player"],
|
||||
.performance-mode [data-test="main-layout-sidebar-wrapper"],
|
||||
.performance-mode [class^="_bar"],
|
||||
.performance-mode [class^="_sidebarItem"]:hover {
|
||||
.performance-mode [data-test="main-layout-sidebar-wrapper"] {
|
||||
/* biome-ignore lint: Performance mode style requires priority */
|
||||
backdrop-filter: blur(5px) !important;
|
||||
/* biome-ignore lint: Performance mode style requires priority */
|
||||
@@ -163,9 +173,3 @@ main,
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
/* Floating Rounded Player Bar from Obsidian <3 */
|
||||
/* Square Player Bar override — injected when floating is disabled */
|
||||
|
||||
/* MARKER: Floating Player Bar CSS */
|
||||
|
||||
[data-test="footer-player"] {
|
||||
position: absolute !important;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin, rgba(255, 255, 255, 0.1)) !important;
|
||||
/* biome-ignore lint: Override native floating position */
|
||||
bottom: 0 !important;
|
||||
/* biome-ignore lint: Override native floating position */
|
||||
left: 0 !important;
|
||||
/* biome-ignore lint: Override native floating position */
|
||||
right: 0 !important;
|
||||
/* biome-ignore lint: Override native floating position */
|
||||
width: 100% !important;
|
||||
/* biome-ignore lint: Override native floating position */
|
||||
margin: 0 !important;
|
||||
/* biome-ignore lint: Force square corners */
|
||||
border-radius: 0 !important;
|
||||
/* biome-ignore lint: Remove floating border */
|
||||
border: none !important;
|
||||
/* biome-ignore lint: Remove floating shadow */
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
/* Enhanced lyrics styling with glow effects */
|
||||
[class*="_lyricsText"] > div > span[data-current="true"] {
|
||||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"][class*="_current_"] {
|
||||
text-shadow:
|
||||
0 0 var(--rl-glow-inner, 2px) var(--cl-glow1, #fff),
|
||||
/* biome-ignore lint: Required to override app glow strength */
|
||||
@@ -44,12 +44,12 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[class*="_lyricsText"] > div > span {
|
||||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
|
||||
text-shadow:
|
||||
0 0 0px transparent,
|
||||
0 0 0px transparent;
|
||||
transition-duration: 0.25s;
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: calc(40px * var(--rl-font-scale, 1));
|
||||
font-family:
|
||||
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
@@ -57,7 +57,7 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[class*="_lyricsText"] > div > span:hover {
|
||||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"]:hover {
|
||||
text-shadow:
|
||||
0 0 var(--rl-glow-inner, 2px) lightgray,
|
||||
/* biome-ignore lint: Hover glow should override defaults */
|
||||
@@ -68,31 +68,8 @@
|
||||
transition-duration: 0.7s;
|
||||
}
|
||||
|
||||
/* 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),
|
||||
/* 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 {
|
||||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
|
||||
transition:
|
||||
text-shadow 0.7s ease-in-out,
|
||||
color 0.7s ease-in-out,
|
||||
@@ -105,14 +82,11 @@
|
||||
padding-left: var(--rl-glow-outer) !important;
|
||||
}
|
||||
|
||||
[data-rl-injected][role="tabpanel"] {
|
||||
transform: translateX(calc(var(--rl-glow-outer) * -1)) !important;
|
||||
}
|
||||
|
||||
/* Lyrics container styling */
|
||||
[class^="_lyricsContainer"] > div > div > span {
|
||||
[data-test="now-playing-lyrics"] span[data-test="lyrics-line"] {
|
||||
margin-bottom: 2rem;
|
||||
opacity: 1;
|
||||
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
|
||||
opacity: 1 !important;
|
||||
font-family:
|
||||
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
@@ -121,6 +95,11 @@
|
||||
font-size: calc(38px * var(--rl-font-scale, 1)) !important;
|
||||
}
|
||||
|
||||
/* Hide the old Musixmatch attribution footer in the lyrics panel */
|
||||
[data-test="now-playing-lyrics"] [class*="_footer_"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* MARKER: WBW lyrics CSS */
|
||||
|
||||
/* hide tidal spans for wbw */
|
||||
@@ -220,12 +199,14 @@
|
||||
animation-delay: var(--rl-line-delay, 0ms);
|
||||
}
|
||||
|
||||
/* Word span */
|
||||
/* Word span — opacity override needed to beat Tidal's ._hasCues_ span { opacity:.35 } */
|
||||
.rl-wbw-word {
|
||||
text-shadow:
|
||||
0 0 0px transparent,
|
||||
0 0 0px transparent;
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
|
||||
opacity: 1 !important;
|
||||
transition:
|
||||
text-shadow 0.15s ease-out,
|
||||
color 0.15s ease-out;
|
||||
@@ -302,7 +283,7 @@
|
||||
transparent 100%
|
||||
),
|
||||
linear-gradient(90deg, var(--cl-glow1, #fff) 100%, transparent 100%),
|
||||
linear-gradient(90deg, rgba(128, 128, 128, 0.4), rgba(128, 128, 128, 0.4));
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
|
||||
background-size:
|
||||
0.75em 100%,
|
||||
0% 100%,
|
||||
@@ -379,7 +360,9 @@
|
||||
"AbyssFont", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: 700;
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
/* biome-ignore lint: Must beat Tidal _hasCues_ opacity */
|
||||
opacity: 1 !important;
|
||||
text-shadow: 0 0 0px transparent;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -396,7 +379,7 @@
|
||||
transition:
|
||||
max-height 0.3s ease,
|
||||
opacity 0.5s ease;
|
||||
color: rgba(128, 128, 128, 0.4);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.rl-wbw-line.rl-wbw-line-active .rl-wbw-bg-container {
|
||||
@@ -434,8 +417,8 @@
|
||||
}
|
||||
|
||||
/* Reset glow when disabled */
|
||||
.lyrics-glow-disabled [class*="_lyricsText"] > div > span[data-current="true"],
|
||||
.lyrics-glow-disabled [class*="_lyricsText"] > div > span:hover {
|
||||
.lyrics-glow-disabled [data-test="now-playing-lyrics"] span[data-test="lyrics-line"][class*="_current_"],
|
||||
.lyrics-glow-disabled [data-test="now-playing-lyrics"] span[data-test="lyrics-line"]:hover {
|
||||
/* biome-ignore lint: Kill glow on active/hover lines */
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
@@ -11,8 +11,6 @@
|
||||
/* Rounded corners */
|
||||
[class*="_thumbnail_"],
|
||||
[class*="_imageWrapper_"],
|
||||
[class*="_coverImage_"],
|
||||
[class*="_overlayIconWrapperAlbum_"],
|
||||
[class*="_playButton_"] {
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
@@ -20,18 +18,22 @@
|
||||
|
||||
/* MARKER: HideUI CSS*/
|
||||
|
||||
/* Only apply styles when UI is hidden */
|
||||
.radiant-lyrics-ui-hidden [class*="tabItems"] {
|
||||
/* Only apply styles when UI is hidden — hide toggle buttons */
|
||||
.radiant-lyrics-ui-hidden [data-test="toggle-lyrics"],
|
||||
.radiant-lyrics-ui-hidden [data-test="toggle-credits"],
|
||||
.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"] {
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.radiant-lyrics-ui-hidden [class*="tabItems"]:hover {
|
||||
.radiant-lyrics-ui-hidden [data-test="toggle-lyrics"]:hover,
|
||||
.radiant-lyrics-ui-hidden [data-test="toggle-credits"]:hover,
|
||||
.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Hide header container (search, minimize, fullscreen) when UI is hidden */
|
||||
.radiant-lyrics-ui-hidden [data-test="header-container"] {
|
||||
.radiant-lyrics-ui-hidden [data-test="header"] {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
|
||||
@@ -79,8 +81,8 @@
|
||||
|
||||
/* MARKER: Sticky Lyrics CSS */
|
||||
|
||||
/* Lyrics tab */
|
||||
[data-test="tabs-lyrics"]:has(.sticky-lyrics-trigger) {
|
||||
/* Lyrics toggle button */
|
||||
[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
|
||||
position: relative !important;
|
||||
padding-right: 38px !important;
|
||||
}
|
||||
@@ -115,35 +117,41 @@
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
/* When Lyrics tab is active — show divider & make icon black*/
|
||||
[data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger {
|
||||
color: black;
|
||||
/* When Lyrics toggle is pressed — show divider & adjust icon */
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger {
|
||||
color: rgb(30, 30, 30);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger::before {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger::before {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
[data-test="tabs-lyrics"][aria-selected="true"] .sticky-lyrics-trigger:hover {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
[data-test="toggle-lyrics"][aria-pressed="true"] .sticky-lyrics-trigger:hover {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Square the Lyrics button bottom corners when dropdown is open */
|
||||
[data-test="tabs-lyrics"].sticky-lyrics-open {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
/* Animate widening when dropdown opens */
|
||||
[data-test="toggle-lyrics"]:has(.sticky-lyrics-trigger) {
|
||||
transition: min-width 0.12s ease-out;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
/* Reduce top rounding, square bottom, and kill hover tint when dropdown is open */
|
||||
body.rl-dropdown-open [data-test="toggle-lyrics"] {
|
||||
border-radius: 12px 12px 0 0 !important;
|
||||
background-color: rgb(255, 255, 255) !important;
|
||||
min-width: 150px !important;
|
||||
}
|
||||
|
||||
/* Dropdown — right-aligned under the Lyrics button */
|
||||
.sticky-lyrics-dropdown {
|
||||
position: fixed;
|
||||
background: white;
|
||||
border-radius: 0 0 16px 16px;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 8px 12px 10px;
|
||||
box-sizing: border-box;
|
||||
z-index: 10000;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
|
||||
clip-path: inset(0 -20px -20px -20px);
|
||||
animation: stickyLyricsDropdownIn 0.12s ease-out;
|
||||
}
|
||||
@@ -151,11 +159,11 @@
|
||||
@keyframes stickyLyricsDropdownIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
clip-path: inset(0 0 100% 0);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
clip-path: inset(0 0 0 0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -170,7 +178,7 @@
|
||||
.sticky-lyrics-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -196,7 +204,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
transition: 0.3s;
|
||||
border-radius: 18px;
|
||||
}
|
||||
@@ -211,15 +219,16 @@
|
||||
background-color: white;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider {
|
||||
background-color: black;
|
||||
background-color: rgb(30, 30, 30);
|
||||
}
|
||||
|
||||
.sticky-lyrics-switch input:checked + .sticky-lyrics-slider::before {
|
||||
transform: translateX(16px);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* Segmented control (Line | Word | Syllable) */
|
||||
@@ -230,7 +239,7 @@
|
||||
|
||||
.rl-seg-control {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
padding: 2px;
|
||||
gap: 2px;
|
||||
@@ -241,7 +250,7 @@
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 5px 0;
|
||||
@@ -253,99 +262,32 @@
|
||||
|
||||
.rl-seg-btn:hover {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.rl-seg-btn.rl-seg-active {
|
||||
background: white;
|
||||
color: black;
|
||||
background: rgb(30, 30, 30);
|
||||
color: rgb(255, 255, 255);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
/* MARKER: PATCHES (Random Fixes for Tidals Changes) */
|
||||
/* These change allot so i gave them their own section */
|
||||
|
||||
/* Fixes the new Sticky Header Tidal added.. in the shittest jankiest way possible */
|
||||
/* [class*="_stickyHeader"] {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(50px);
|
||||
background-color: transparent !important;
|
||||
width: fit-content !important;
|
||||
padding-right: 3.5% !important;
|
||||
-webkit-mask-image:
|
||||
linear-gradient(to bottom, black 60%, transparent),
|
||||
linear-gradient(to right, black 85%, transparent) !important;
|
||||
mask-image:
|
||||
linear-gradient(to bottom, black 60%, transparent),
|
||||
linear-gradient(to right, black 85%, transparent) !important;
|
||||
-webkit-mask-composite: source-in !important;
|
||||
mask-composite: intersect !important;
|
||||
padding-bottom: 5px !important;
|
||||
/* Remove max-width cap on now-playing content */
|
||||
[class*="_contentInner"] {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
[class*="_playQueueItems"]{
|
||||
border-radius: 2.5px 0 0 0 !important;
|
||||
/* Round now-playing artwork corners */
|
||||
[data-test="now-playing-artwork"] {
|
||||
/* biome-ignore lint: Override flat corners */
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
[data-test="playqueue-sticky-clear-active-items"] {
|
||||
visibility: collapse !important;
|
||||
width: 0px !important;
|
||||
}
|
||||
|
||||
[data-test="playqueue-sticky-clear-source-items"] {
|
||||
visibility: collapse !important;
|
||||
width: 0px !important;
|
||||
} */
|
||||
|
||||
|
||||
/* Remove the background color from the small header */
|
||||
[class*="_smallHeader"]::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* fixes Tidals broken mini cover art padding | Cheers Aya <3*/
|
||||
._imageBorder_110890a {
|
||||
filter: opacity(0);
|
||||
}
|
||||
._container_14bcbd4._playingFrom_79b167e {
|
||||
transform: scale(1.01) translatex(.1em);
|
||||
}
|
||||
._leftColumn_aaf28de {
|
||||
min-height: 110%;
|
||||
transform: translatey(-.23em);
|
||||
}
|
||||
._imageryContainer_f99fc07.image {
|
||||
transform: scale(1.03) translatey(.2em) translatex(.1em);
|
||||
background-color: #00000000;
|
||||
padding: 0em !important;
|
||||
}
|
||||
._image_145331a._cellImage_0ef8dd3 {
|
||||
border-radius: .7em !important;
|
||||
}
|
||||
|
||||
[data-test="footer-player"] {
|
||||
._container_14bcbd4._playingFrom_79b167e > ._text_15008b2._medium20_1lyag_192._marketText_1lyag_1 {
|
||||
transform: translatey(-.2em);
|
||||
}
|
||||
[class="image _imageryContainer_f99fc07"] {
|
||||
transform: translatey(.3em) !important;
|
||||
}
|
||||
._image_145331a._cellImage_0ef8dd3 {
|
||||
border-radius: .25em !important;
|
||||
}
|
||||
._toggleButton_809eee8 {
|
||||
transform: translateY(-.22em);
|
||||
}
|
||||
[class="image _imageryContainer_f99fc07"]:hover {
|
||||
[class="_cellImage_0ef8dd3 _image_145331a"] {
|
||||
filter: brightness(.3);
|
||||
}
|
||||
}
|
||||
._notFullscreenOverlay_1442d60 {
|
||||
background: none !important;
|
||||
transition: 0ms;
|
||||
}
|
||||
._notFullscreenOverlay_1442d60 ._nowPlayingButton_c1a86fa {
|
||||
background-color: rgba(245, 245, 220, 0);
|
||||
}
|
||||
/* Hide the Overlay Scrollbar (people just use mouse scroll) */
|
||||
.os-scrollbar {
|
||||
display: none !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user