mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 06:25:41 +00:00
feat(fs-player): adaptive dynamic accent color from album cover
Extracts the most vibrant pixel from an 8×8 downscaled album cover via the Canvas API and applies it as --dynamic-fs-accent on the .fs-player root element. All accent-colored FS player elements use var(--dynamic-fs-accent, var(--accent)) as fallback so the theme accent is restored automatically when the FS player closes. Elements updated: - .fs-track-title (color + text-shadow) - .fs-btn.active, .fs-btn-heart.active/:hover - .fs-btn-play and :hover (background + box-shadow) - .fs-seekbar-played (background + box-shadow) - .fs-mesh-blob-a/-b (radial-gradient via color-mix at 14%/8% opacity) - .fs-art-wrap box-shadow glow (color-mix at 70% opacity) - MicVocal lyrics-toggle inline style Color safety: WCAG 4.5:1 contrast against near-black FS background enforced by progressively lightening in HSL space (ensureContrast). Pure math functions unit-tested with vitest (28 tests, 0 deps beyond vitest itself). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
@@ -0,0 +1,151 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
srgbToLinear,
|
||||
relativeLuminance,
|
||||
contrastRatio,
|
||||
rgbToHsl,
|
||||
hslToRgb,
|
||||
ensureContrast,
|
||||
} from './dynamicColors';
|
||||
|
||||
// ─── srgbToLinear ─────────────────────────────────────────────────────────────
|
||||
|
||||
describe('srgbToLinear', () => {
|
||||
it('maps 0 to 0', () => expect(srgbToLinear(0)).toBe(0));
|
||||
it('maps 1 to 1', () => expect(srgbToLinear(1)).toBeCloseTo(1));
|
||||
it('uses the low-end linear formula below 0.04045', () => {
|
||||
expect(srgbToLinear(0.04)).toBeCloseTo(0.04 / 12.92, 6);
|
||||
});
|
||||
it('uses the gamma formula above 0.04045', () => {
|
||||
expect(srgbToLinear(0.5)).toBeCloseTo(Math.pow((0.5 + 0.055) / 1.055, 2.4), 6);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── relativeLuminance ────────────────────────────────────────────────────────
|
||||
|
||||
describe('relativeLuminance', () => {
|
||||
it('returns 0 for black (0,0,0)', () => expect(relativeLuminance(0, 0, 0)).toBe(0));
|
||||
it('returns 1 for white (1,1,1)', () => expect(relativeLuminance(1, 1, 1)).toBeCloseTo(1, 5));
|
||||
it('weights green highest (0.7152)', () => {
|
||||
const greenOnly = relativeLuminance(0, 1, 0);
|
||||
const redOnly = relativeLuminance(1, 0, 0);
|
||||
const blueOnly = relativeLuminance(0, 0, 1);
|
||||
expect(greenOnly).toBeGreaterThan(redOnly);
|
||||
expect(redOnly).toBeGreaterThan(blueOnly);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── contrastRatio ────────────────────────────────────────────────────────────
|
||||
|
||||
describe('contrastRatio', () => {
|
||||
it('returns 21 for pure black on white', () => {
|
||||
expect(contrastRatio(0, 1)).toBeCloseTo(21, 1);
|
||||
});
|
||||
it('returns 1 when both luminances are equal', () => {
|
||||
expect(contrastRatio(0.2, 0.2)).toBeCloseTo(1, 5);
|
||||
});
|
||||
it('is symmetric', () => {
|
||||
expect(contrastRatio(0.1, 0.5)).toBeCloseTo(contrastRatio(0.5, 0.1), 10);
|
||||
});
|
||||
it('returns ≥ 4.5 for a light accent on near-black (FS bg)', () => {
|
||||
const accent = relativeLuminance(200 / 255, 160 / 255, 60 / 255);
|
||||
expect(contrastRatio(accent, 0.01)).toBeGreaterThanOrEqual(4.5);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── rgbToHsl / hslToRgb round-trip ──────────────────────────────────────────
|
||||
|
||||
describe('rgbToHsl / hslToRgb', () => {
|
||||
const cases: Array<[number, number, number]> = [
|
||||
[255, 0, 0],
|
||||
[0, 255, 0],
|
||||
[0, 0, 255],
|
||||
[128, 128, 128],
|
||||
[255, 255, 255],
|
||||
[0, 0, 0],
|
||||
[200, 100, 50],
|
||||
];
|
||||
it.each(cases)('round-trips rgb(%i,%i,%i)', (r, g, b) => {
|
||||
const [h, s, l] = rgbToHsl(r, g, b);
|
||||
const [rr, gg, bb] = hslToRgb(h, s, l);
|
||||
expect(rr).toBeCloseTo(r, -1); // within ±1 due to rounding
|
||||
expect(gg).toBeCloseTo(g, -1);
|
||||
expect(bb).toBeCloseTo(b, -1);
|
||||
});
|
||||
|
||||
it('pure grey has saturation 0', () => {
|
||||
const [, s] = rgbToHsl(128, 128, 128);
|
||||
expect(s).toBe(0);
|
||||
});
|
||||
it('pure red has hue 0°', () => {
|
||||
const [h] = rgbToHsl(255, 0, 0);
|
||||
expect(h).toBeCloseTo(0, 0);
|
||||
});
|
||||
it('pure green has hue 120°', () => {
|
||||
const [h] = rgbToHsl(0, 255, 0);
|
||||
expect(h).toBeCloseTo(120, 0);
|
||||
});
|
||||
it('pure blue has hue 240°', () => {
|
||||
const [h] = rgbToHsl(0, 0, 255);
|
||||
expect(h).toBeCloseTo(240, 0);
|
||||
});
|
||||
});
|
||||
|
||||
// ─── ensureContrast ───────────────────────────────────────────────────────────
|
||||
|
||||
describe('ensureContrast', () => {
|
||||
const BG_LUMINANCE = 0.010; // near-black FS player background
|
||||
const MIN_RATIO = 4.5;
|
||||
|
||||
function meetsContrast(rgb: [number, number, number]): boolean {
|
||||
const l = relativeLuminance(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255);
|
||||
return contrastRatio(l, BG_LUMINANCE) >= MIN_RATIO;
|
||||
}
|
||||
|
||||
it('returns input unchanged if already sufficient', () => {
|
||||
// White is always sufficient
|
||||
const result = ensureContrast([255, 255, 255], BG_LUMINANCE, MIN_RATIO);
|
||||
expect(result).toEqual([255, 255, 255]);
|
||||
});
|
||||
|
||||
it('lightens a very dark color until contrast is met', () => {
|
||||
const result = ensureContrast([10, 10, 10], BG_LUMINANCE, MIN_RATIO);
|
||||
expect(meetsContrast(result)).toBe(true);
|
||||
});
|
||||
|
||||
it('lightens a dark saturated color until contrast is met', () => {
|
||||
// Dark blue — typical for dark album covers
|
||||
const result = ensureContrast([20, 20, 80], BG_LUMINANCE, MIN_RATIO);
|
||||
expect(meetsContrast(result)).toBe(true);
|
||||
});
|
||||
|
||||
it('preserves a mid-tone color that already meets the ratio', () => {
|
||||
// Yellow-ish, high luminance — should already pass
|
||||
const input: [number, number, number] = [255, 230, 50];
|
||||
const result = ensureContrast(input, BG_LUMINANCE, MIN_RATIO);
|
||||
expect(meetsContrast(result)).toBe(true);
|
||||
});
|
||||
|
||||
it('always produces a result with contrast ≥ MIN_RATIO', () => {
|
||||
// Stress-test with a range of dark, saturated colors
|
||||
const darkColors: Array<[number, number, number]> = [
|
||||
[5, 30, 60],
|
||||
[60, 5, 30],
|
||||
[30, 60, 5],
|
||||
[80, 0, 120],
|
||||
[0, 0, 0],
|
||||
];
|
||||
for (const c of darkColors) {
|
||||
const result = ensureContrast(c, BG_LUMINANCE, MIN_RATIO);
|
||||
expect(meetsContrast(result)).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it('handles a very demanding minRatio gracefully (returns white)', () => {
|
||||
// 21:1 is the theoretical maximum — only black-on-white achieves it.
|
||||
// Any input should at least not throw and produce some output.
|
||||
const result = ensureContrast([10, 10, 10], BG_LUMINANCE, 21);
|
||||
expect(result.length).toBe(3);
|
||||
result.forEach(c => { expect(c).toBeGreaterThanOrEqual(0); expect(c).toBeLessThanOrEqual(255); });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,163 @@
|
||||
// ─── Dynamic Cover Colors ─────────────────────────────────────────────────────
|
||||
//
|
||||
// Extracts a vibrant accent color from an album cover URL using the Canvas API.
|
||||
// Designed exclusively for the Fullscreen Player — applied as a CSS custom
|
||||
// property on the .fs-player root, inheriting down to all children.
|
||||
//
|
||||
// Guarantees WCAG 4.5:1 contrast against the FS player's near-black background
|
||||
// by progressively lightening the extracted color in HSL space until the ratio
|
||||
// is met. Falls back to an empty string (→ CSS falls back to var(--accent)).
|
||||
|
||||
export interface CoverColors {
|
||||
/** CSS color string, e.g. "rgb(200,120,60)". Empty string = use fallback. */
|
||||
accent: string;
|
||||
}
|
||||
|
||||
// ─── WCAG math (pure — unit-testable) ─────────────────────────────────────────
|
||||
|
||||
/** Convert a sRGB channel [0, 1] to linear light. */
|
||||
export function srgbToLinear(c: number): number {
|
||||
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
||||
}
|
||||
|
||||
/** WCAG relative luminance for linear-light RGB channels [0, 1]. */
|
||||
export function relativeLuminance(r: number, g: number, b: number): number {
|
||||
return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
|
||||
}
|
||||
|
||||
/** WCAG contrast ratio given two relative luminances. Always ≥ 1. */
|
||||
export function contrastRatio(l1: number, l2: number): number {
|
||||
const lighter = Math.max(l1, l2);
|
||||
const darker = Math.min(l1, l2);
|
||||
return (lighter + 0.05) / (darker + 0.05);
|
||||
}
|
||||
|
||||
// ─── HSL helpers (pure) ───────────────────────────────────────────────────────
|
||||
|
||||
/** RGB [0–255] → HSL [0–360, 0–1, 0–1]. */
|
||||
export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
|
||||
const rn = r / 255, gn = g / 255, bn = b / 255;
|
||||
const max = Math.max(rn, gn, bn);
|
||||
const min = Math.min(rn, gn, bn);
|
||||
const l = (max + min) / 2;
|
||||
if (max === min) return [0, 0, l];
|
||||
const d = max - min;
|
||||
const s = l < 0.5 ? d / (max + min) : d / (2 - max - min);
|
||||
let h: number;
|
||||
switch (max) {
|
||||
case rn: h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6; break;
|
||||
case gn: h = ((bn - rn) / d + 2) / 6; break;
|
||||
default: h = ((rn - gn) / d + 4) / 6;
|
||||
}
|
||||
return [h * 360, s, l];
|
||||
}
|
||||
|
||||
function hue2rgb(p: number, q: number, t: number): number {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||||
if (t < 1 / 2) return q;
|
||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
|
||||
/** HSL [0–360, 0–1, 0–1] → RGB [0–255]. */
|
||||
export function hslToRgb(h: number, s: number, l: number): [number, number, number] {
|
||||
h = h / 360;
|
||||
if (s === 0) {
|
||||
const v = Math.round(l * 255);
|
||||
return [v, v, v];
|
||||
}
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
return [
|
||||
Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
|
||||
Math.round(hue2rgb(p, q, h) * 255),
|
||||
Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
|
||||
];
|
||||
}
|
||||
|
||||
// ─── Contrast enforcement (pure — unit-testable) ──────────────────────────────
|
||||
|
||||
/**
|
||||
* Given an RGB color [0–255] and the luminance of the background it will sit
|
||||
* on, progressively increases HSL lightness in 0.04 steps until the contrast
|
||||
* ratio reaches `minRatio`. Returns white [255,255,255] as the ultimate
|
||||
* fallback if even L=1 doesn't suffice (can only happen at extreme minRatio
|
||||
* values, e.g. 21:1).
|
||||
*/
|
||||
export function ensureContrast(
|
||||
rgb: [number, number, number],
|
||||
bgLuminance: number,
|
||||
minRatio: number,
|
||||
): [number, number, number] {
|
||||
const [h, s, l] = rgbToHsl(rgb[0], rgb[1], rgb[2]);
|
||||
|
||||
// Already meeting the requirement?
|
||||
const initialLum = relativeLuminance(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255);
|
||||
if (contrastRatio(initialLum, bgLuminance) >= minRatio) return [...rgb];
|
||||
|
||||
// Lighten in steps of 4 % (25 iterations max → terminates)
|
||||
for (let step = 1; step <= 25; step++) {
|
||||
const newL = Math.min(1, l + step * 0.04);
|
||||
const newRgb = hslToRgb(h, s, newL);
|
||||
const newLum = relativeLuminance(newRgb[0] / 255, newRgb[1] / 255, newRgb[2] / 255);
|
||||
if (contrastRatio(newLum, bgLuminance) >= minRatio) return newRgb;
|
||||
}
|
||||
return [255, 255, 255];
|
||||
}
|
||||
|
||||
// ─── Canvas extraction (requires DOM) ─────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* The FS player mesh background is a very dark near-black.
|
||||
* luminance ≈ 0.010 is a conservative upper bound — the color contrast will be
|
||||
* at least this good.
|
||||
*/
|
||||
const FS_BG_LUMINANCE = 0.010;
|
||||
const MIN_CONTRAST = 4.5;
|
||||
|
||||
/**
|
||||
* Loads `imageUrl` into an 8×8 canvas and finds the most vibrant pixel
|
||||
* (highest HSL saturation). Applies `ensureContrast` to guarantee
|
||||
* WCAG AA readability against the FS player background.
|
||||
*
|
||||
* Resolves with `{ accent: '' }` on any error — the caller's CSS
|
||||
* `var(--dynamic-fs-accent, var(--accent))` then falls back to the theme accent.
|
||||
*/
|
||||
export function extractCoverColors(imageUrl: string): Promise<CoverColors> {
|
||||
if (!imageUrl) return Promise.resolve({ accent: '' });
|
||||
|
||||
return new Promise(resolve => {
|
||||
const img = new Image();
|
||||
// Blob URLs are same-origin in Tauri WebKit — no crossOrigin needed.
|
||||
img.onload = () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 8;
|
||||
canvas.height = 8;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) { resolve({ accent: '' }); return; }
|
||||
|
||||
ctx.drawImage(img, 0, 0, 8, 8);
|
||||
const { data } = ctx.getImageData(0, 0, 8, 8);
|
||||
|
||||
// Pick pixel with highest HSL saturation (most vibrant).
|
||||
let bestSat = -1;
|
||||
let bestR = 180, bestG = 100, bestB = 50; // warm orange fallback
|
||||
for (let i = 0; i < data.length; i += 4) {
|
||||
const r = data[i], g = data[i + 1], b = data[i + 2];
|
||||
const [, s] = rgbToHsl(r, g, b);
|
||||
if (s > bestSat) { bestSat = s; bestR = r; bestG = g; bestB = b; }
|
||||
}
|
||||
|
||||
const [fr, fg, fb] = ensureContrast([bestR, bestG, bestB], FS_BG_LUMINANCE, MIN_CONTRAST);
|
||||
resolve({ accent: `rgb(${fr},${fg},${fb})` });
|
||||
} catch {
|
||||
resolve({ accent: '' });
|
||||
}
|
||||
};
|
||||
img.onerror = () => resolve({ accent: '' });
|
||||
img.src = imageUrl;
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user