feat: Camelot wheel key colors + BPM gradient for all badges

New musicColors.ts utility: - getKeyColor(): Maps musical key to Camelot wheel position → hue. 12 positions × 30° = full color wheel. Major = brighter/more saturated. Minor = slightly darker/less saturated. Returns {bg, text, border}. - getBPMColor(): Gradient from slow (blue, 240°) to fast (red, 0°). Default range: 60 BPM → 180 BPM. Configurable via BPMRange. Clamps outside range. Returns {bg, text, border}. Gallery.tsx: - Ribbons: BPM and key badges now use dynamic HSL colors - Tiles: Same colored badges in tile footer - Both use inline styles for bg/text/border DetailPanel.tsx: - BPM and key metadata items now show as colored badges - Same color system as gallery badges All badges: subtle translucent background, colored text, thin colored border. Consistent visual language across ribbon, tile, and detail views.
2026-05-29 21:16:47 -04:00
1 parent 1e21b7dcc8
commit 2dcb297087
@@ -1,4 +1,5 @@
 import { useRef, useState, useEffect } from 'react'
+import { getKeyColor, getBPMColor } from '../utils/musicColors'

 interface Clip {
  id: string
@@ -260,18 +261,34 @@ export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploa
                <p className="text-sm text-white">{(clip.file_size_bytes / 1024).toFixed(0)} KB</p>
              </div>
            )}
-            {clip.bpm && (
-              <div>
-                <label className="text-xs text-lyria-muted uppercase tracking-wider block">BPM</label>
-                <p className="text-sm text-white">{Math.round(clip.bpm)}</p>
-              </div>
-            )}
-            {clip.key && (
-              <div>
-                <label className="text-xs text-lyria-muted uppercase tracking-wider block">Key</label>
-                <p className="text-sm text-white">{clip.key}</p>
-              </div>
-            )}
+            {clip.bpm && (() => {
+              const c = getBPMColor(clip.bpm)
+              return c ? (
+                <div>
+                  <label className="text-xs text-lyria-muted uppercase tracking-wider block">BPM</label>
+                  <span
+                    className="text-sm px-2 py-0.5 rounded font-medium inline-block"
+                    style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                  >
+                    {Math.round(clip.bpm)}
+                  </span>
+                </div>
+              ) : null
+            })()}
+            {clip.key && (() => {
+              const c = getKeyColor(clip.key)
+              return c ? (
+                <div>
+                  <label className="text-xs text-lyria-muted uppercase tracking-wider block">Key</label>
+                  <span
+                    className="text-sm px-2 py-0.5 rounded font-medium inline-block"
+                    style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                  >
+                    {clip.key}
+                  </span>
+                </div>
+              ) : null
+            })()}
            <div>
              <label className="text-xs text-lyria-muted uppercase tracking-wider block">Created</label>
              <p className="text-sm text-white">{formatDate(clip.created_at)}</p>
@@ -1,4 +1,5 @@
 import { useState, useMemo, useRef } from 'react'
+import { getKeyColor, getBPMColor } from '../utils/musicColors'

 const PAGE_SIZE = 10

@@ -246,16 +247,28 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                  <span className="text-xs text-lyria-muted">{clip.duration_seconds}s</span>
                  <span className="text-xs text-lyria-muted">{modelName(clip.model)}</span>
                  <span className="text-xs text-lyria-muted">{formatDate(clip.created_at)}</span>
-                  {clip.bpm && (
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-lyria-accent/10 text-lyria-accent">
-                      {Math.round(clip.bpm)} BPM
-                    </span>
-                  )}
-                  {clip.key && (
-                    <span className="text-xs px-1.5 py-0.5 rounded bg-white/5 text-lyria-muted">
-                      {clip.key}
-                    </span>
-                  )}
+                  {clip.bpm && (() => {
+                    const c = getBPMColor(clip.bpm)
+                    return c ? (
+                      <span
+                        className="text-xs px-1.5 py-0.5 rounded font-medium"
+                        style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                      >
+                        {Math.round(clip.bpm)} BPM
+                      </span>
+                    ) : null
+                  })()}
+                  {clip.key && (() => {
+                    const c = getKeyColor(clip.key)
+                    return c ? (
+                      <span
+                        className="text-xs px-1.5 py-0.5 rounded font-medium"
+                        style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                      >
+                        {clip.key}
+                      </span>
+                    ) : null
+                  })()}
                </div>
                {clip.status === 'failed' && clip.error_message && (
                  <p className="text-xs text-red-400/80 mt-1 break-words">
@@ -386,16 +399,28 @@ export default function Gallery({ clips, onPlay, onDelete, onRename, onSelect, o
                </span>
                <span className="text-[10px] text-lyria-muted">{clip.duration_seconds}s</span>
                <span className="text-[10px] text-lyria-muted">{modelName(clip.model)}</span>
-                {clip.bpm && (
-                  <span className="text-[10px] px-1 py-0.5 rounded bg-lyria-accent/10 text-lyria-accent">
-                    {Math.round(clip.bpm)} BPM
-                  </span>
-                )}
-                {clip.key && (
-                  <span className="text-[10px] px-1 py-0.5 rounded bg-white/5 text-lyria-muted">
-                    {clip.key}
-                  </span>
-                )}
+                {clip.bpm && (() => {
+                  const c = getBPMColor(clip.bpm)
+                  return c ? (
+                    <span
+                      className="text-[10px] px-1 py-0.5 rounded font-medium"
+                      style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                    >
+                      {Math.round(clip.bpm)} BPM
+                    </span>
+                  ) : null
+                })()}
+                {clip.key && (() => {
+                  const c = getKeyColor(clip.key)
+                  return c ? (
+                    <span
+                      className="text-[10px] px-1 py-0.5 rounded font-medium"
+                      style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                    >
+                      {clip.key}
+                    </span>
+                  ) : null
+                })()}
              </div>

              {/* Error */}
@@ -0,0 +1,128 @@
+/**
+ * Music color utilities — Camelot wheel key colors + BPM gradient.
+ *
+ * Key colors: Each key maps to a hue based on its Camelot wheel position.
+ *   12 positions × 30° = full color wheel. Major = bright, minor = slightly darker.
+ *
+ * BPM gradient: Two root tempos define the hue range.
+ *   Default: 60 BPM (blue, calm) → 180 BPM (red, intense).
+ *   Anything outside the range clamps to the nearest edge.
+ */
+
+// ─── Camelot Wheel Mapping ───────────────────────────────────────
+
+// Standard Camelot wheel: position → key name (as returned by librosa)
+const CAMELOT_MAJOR: Record<number, string[]> = {
+  1: ['B major'],
+  2: ['F# major', 'Gb major'],
+  3: ['Db major', 'C# major'],
+  4: ['Ab major', 'G# major'],
+  5: ['Eb major', 'D# major'],
+  6: ['Bb major', 'A# major'],
+  7: ['F major'],
+  8: ['C major'],
+  9: ['G major'],
+  10: ['D major'],
+  11: ['A major'],
+  12: ['E major'],
+}
+
+const CAMELOT_MINOR: Record<number, string[]> = {
+  1: ['Ab minor', 'G# minor'],
+  2: ['Eb minor', 'D# minor'],
+  3: ['Bb minor', 'A# minor'],
+  4: ['F minor'],
+  5: ['C minor'],
+  6: ['G minor'],
+  7: ['D minor'],
+  8: ['A minor'],
+  9: ['E minor'],
+  10: ['B minor'],
+  11: ['F# minor', 'Gb minor'],
+  12: ['C# minor', 'Db minor'],
+}
+
+// Build reverse lookup: key name (lowercase) → { position, isMajor }
+const keyToCamelot = new Map<string, { position: number; isMajor: boolean }>()
+
+for (const [pos, keys] of Object.entries(CAMELOT_MAJOR)) {
+  for (const key of keys) {
+    keyToCamelot.set(key.toLowerCase(), { position: parseInt(pos), isMajor: true })
+  }
+}
+for (const [pos, keys] of Object.entries(CAMELOT_MINOR)) {
+  for (const key of keys) {
+    keyToCamelot.set(key.toLowerCase(), { position: parseInt(pos), isMajor: false })
+  }
+}
+
+// ─── Key Color ───────────────────────────────────────────────────
+
+export function getKeyColor(key: string | null | undefined): { bg: string; text: string; border: string } | null {
+  if (!key) return null
+
+  const normalized = key.trim().toLowerCase()
+  const camelot = keyToCamelot.get(normalized)
+  if (!camelot) return null
+
+  // Hue: position 1 = 0° (red), each step +30°
+  const hue = ((camelot.position - 1) * 30) % 360
+
+  // Major: brighter, more saturated. Minor: slightly darker, less saturated.
+  const saturation = camelot.isMajor ? 85 : 70
+  const lightness = camelot.isMajor ? 55 : 50
+
+  return {
+    bg: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.15)`,
+    text: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+    border: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`,
+  }
+}
+
+// ─── BPM Color ─────────────────────────────────────────────────────
+
+export interface BPMRange {
+  min: number   // slow edge BPM
+  max: number   // fast edge BPM
+  minHue: number  // hue for slow (default: 240 = blue)
+  maxHue: number  // hue for fast (default: 0 = red)
+}
+
+const DEFAULT_BPM_RANGE: BPMRange = {
+  min: 60,
+  max: 180,
+  minHue: 240,  // blue — calm, slow
+  maxHue: 0,    // red — intense, fast
+}
+
+export function getBPMColor(
+  bpm: number | null | undefined,
+  range: Partial<BPMRange> = {}
+): { bg: string; text: string; border: string } | null {
+  if (bpm == null) return null
+
+  const { min, max, minHue, maxHue } = { ...DEFAULT_BPM_RANGE, ...range }
+
+  // Clamp BPM to range
+  const clamped = Math.max(min, Math.min(max, bpm))
+
+  // Interpolate hue (handle wrap-around if minHue > maxHue)
+  let t = (clamped - min) / (max - min)
+  let hue: number
+  if (minHue > maxHue) {
+    // Going across the 0° boundary (e.g., 240 → 0)
+    const span = (360 - minHue) + maxHue
+    hue = (minHue + t * span) % 360
+  } else {
+    hue = minHue + t * (maxHue - minHue)
+  }
+
+  const saturation = 85
+  const lightness = 55
+
+  return {
+    bg: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.15)`,
+    text: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+    border: `hsla(${hue}, ${saturation}%, ${lightness}%, 0.3)`,
+  }
+}