Spaces:
Sleeping
Sleeping
| import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react' | |
| const ALL_KEYS_WITH_MODES = [ | |
| 'C major', 'C minor', 'C# major', 'C# minor', | |
| 'D major', 'D minor', 'D# major', 'D# minor', | |
| 'E major', 'E minor', 'F major', 'F minor', | |
| 'F# major', 'F# minor', 'G major', 'G minor', | |
| 'G# major', 'G# minor', 'A major', 'A minor', | |
| 'A# major', 'A# minor', 'B major', 'B minor' | |
| ] | |
| const KEY_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'] | |
| const MIN_BPM = 20 | |
| const MAX_BPM = 400 | |
| function clampBpm(value) { | |
| return Math.max(MIN_BPM, Math.min(MAX_BPM, value)) | |
| } | |
| function formatBpm(value) { | |
| if (!Number.isFinite(value)) return '' | |
| return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(2))) | |
| } | |
| function AnalysisDisplay({ | |
| detection, | |
| loading, | |
| onReady, | |
| onLiveTransform | |
| }) { | |
| const [targetKeyWithMode, setTargetKeyWithMode] = useState('C major') | |
| const [targetBpm, setTargetBpm] = useState(120) | |
| const [targetBpmInput, setTargetBpmInput] = useState('120') | |
| const readyDetectionRef = useRef(null) | |
| const setBpmValue = useCallback((value) => { | |
| const parsed = Number(value) | |
| if (!Number.isFinite(parsed)) return | |
| const next = clampBpm(parsed) | |
| setTargetBpm(next) | |
| setTargetBpmInput(formatBpm(next)) | |
| }, []) | |
| useEffect(() => { | |
| if (detection && onReady && readyDetectionRef.current !== detection) { | |
| readyDetectionRef.current = detection | |
| onReady() | |
| } | |
| }, [detection, onReady]) | |
| useEffect(() => { | |
| if (detection) { | |
| setTargetKeyWithMode(`${detection.key} ${detection.mode}`) | |
| setBpmValue(detection.bpm) | |
| } | |
| }, [detection, setBpmValue]) | |
| const targetKey = targetKeyWithMode.split(' ')[0] | |
| const semitones = useMemo(() => { | |
| if (!detection || !targetKey) return 0 | |
| const fromIdx = KEY_NAMES.indexOf(detection.key) | |
| const toIdx = KEY_NAMES.indexOf(targetKey) | |
| let diff = toIdx - fromIdx | |
| if (diff > 6) diff -= 12 | |
| if (diff < -6) diff += 12 | |
| return diff | |
| }, [detection, targetKey]) | |
| const handleKeyShift = useCallback((shift) => { | |
| const currentIdx = KEY_NAMES.indexOf(targetKey) | |
| const newIdx = (currentIdx + shift + 12) % 12 | |
| const mode = targetKeyWithMode.split(' ')[1] | |
| setTargetKeyWithMode(`${KEY_NAMES[newIdx]} ${mode}`) | |
| }, [targetKey, targetKeyWithMode]) | |
| const handleBpmInputChange = useCallback((event) => { | |
| const rawValue = event.target.value | |
| setTargetBpmInput(rawValue) | |
| if (rawValue.trim() === '') return | |
| const parsed = Number(rawValue) | |
| if (Number.isFinite(parsed) && parsed >= MIN_BPM && parsed <= MAX_BPM) { | |
| setTargetBpm(parsed) | |
| } | |
| }, []) | |
| const handleBpmInputBlur = useCallback(() => { | |
| const trimmedValue = targetBpmInput.trim() | |
| const parsed = trimmedValue === '' ? NaN : Number(trimmedValue) | |
| setBpmValue(Number.isFinite(parsed) ? parsed : targetBpm) | |
| }, [setBpmValue, targetBpm, targetBpmInput]) | |
| const handleBpmStep = useCallback((delta) => { | |
| setBpmValue(targetBpm + delta) | |
| }, [setBpmValue, targetBpm]) | |
| useEffect(() => { | |
| if (!detection || !onLiveTransform) return | |
| onLiveTransform({ | |
| semitones, | |
| originalBpm: detection.bpm, | |
| targetBpm, | |
| highQuality: true | |
| }) | |
| }, [detection, onLiveTransform, semitones, targetBpm]) | |
| const hasChanges = detection && (semitones !== 0 || Math.abs(targetBpm - detection.bpm) > 0.1) | |
| if (loading) { | |
| return ( | |
| <div className="card rounded-xl p-5 animate-pulse"> | |
| <div className="flex gap-6"> | |
| <div className="h-12 bg-white/5 rounded-lg w-40"></div> | |
| <div className="h-12 bg-white/5 rounded-lg w-40"></div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| if (!detection) return null | |
| const btnClass = 'w-8 h-8 rounded-lg font-bold text-sm transition-all bg-white/[0.06] hover:bg-white/[0.12] text-gray-300 border border-white/[0.08] flex items-center justify-center flex-shrink-0' | |
| const inputClass = 'bg-surface-elevated border border-white/[0.08] rounded-lg text-white text-sm text-center focus:outline-none focus:border-accent-500 transition-colors' | |
| return ( | |
| <div className="card rounded-xl p-5 animate-fade-in"> | |
| <div className="flex items-center gap-6 flex-wrap"> | |
| {/* BPM Control: - [editable input] + */} | |
| <div className="flex items-center gap-1.5"> | |
| <span className="text-[10px] uppercase tracking-widest text-accent-500 font-medium mr-2">BPM</span> | |
| <button onClick={() => handleBpmStep(-1)} className={btnClass}>-</button> | |
| <input | |
| type="number" | |
| value={targetBpmInput} | |
| onChange={handleBpmInputChange} | |
| onBlur={handleBpmInputBlur} | |
| onKeyDown={(event) => { | |
| if (event.key === 'Enter') event.currentTarget.blur() | |
| }} | |
| min={MIN_BPM} | |
| max={MAX_BPM} | |
| className={`${inputClass} w-20 px-2 py-1.5 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`} | |
| /> | |
| <button onClick={() => handleBpmStep(1)} className={btnClass}>+</button> | |
| {Math.abs(targetBpm - detection.bpm) > 0.1 && ( | |
| <button | |
| onClick={() => setBpmValue(detection.bpm)} | |
| className="text-[10px] text-gray-400 hover:text-gray-200 transition-colors ml-1" | |
| > | |
| Reset | |
| </button> | |
| )} | |
| </div> | |
| {/* Divider */} | |
| <div className="w-px h-10 bg-white/[0.08]"></div> | |
| {/* Key Control: - [dropdown] + */} | |
| <div className="flex items-center gap-1.5"> | |
| <span className="text-[10px] uppercase tracking-widest text-accent-500 font-medium mr-2">Key</span> | |
| <button onClick={() => handleKeyShift(-1)} className={btnClass}>-</button> | |
| <select | |
| value={targetKeyWithMode} | |
| onChange={(e) => setTargetKeyWithMode(e.target.value)} | |
| className={`${inputClass} w-28 px-2 py-1.5 cursor-pointer`} | |
| > | |
| {ALL_KEYS_WITH_MODES.map(k => ( | |
| <option key={k} value={k}>{k}</option> | |
| ))} | |
| </select> | |
| <button onClick={() => handleKeyShift(1)} className={btnClass}>+</button> | |
| {semitones !== 0 && ( | |
| <span className="text-xs text-gray-400 font-mono ml-1"> | |
| {semitones > 0 ? '+' : ''}{semitones}st | |
| </span> | |
| )} | |
| {semitones !== 0 && ( | |
| <button | |
| onClick={() => setTargetKeyWithMode(`${detection.key} ${detection.mode}`)} | |
| className="text-[10px] text-gray-400 hover:text-gray-200 transition-colors ml-1" | |
| > | |
| Reset | |
| </button> | |
| )} | |
| </div> | |
| <div className="w-px h-10 bg-white/[0.08]"></div> | |
| <div className="px-3 py-1.5 rounded-lg border border-emerald-400/30 bg-emerald-400/10 text-emerald-300 text-[10px] uppercase tracking-widest font-semibold"> | |
| Live | |
| </div> | |
| {/* Original values */} | |
| {(semitones !== 0 || Math.abs(targetBpm - detection.bpm) > 0.1) && ( | |
| <span className="text-[10px] text-gray-400 ml-auto"> | |
| Original: {detection.key} {detection.mode} / {detection.bpm.toFixed(1)} BPM | |
| </span> | |
| )} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| export default AnalysisDisplay | |