File size: 3,525 Bytes
0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 a5359f9 0dfd298 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | /**
* Multi-instrument selector for choosing which instruments to transcribe.
*/
import { useState } from 'react';
import './InstrumentSelector.css';
export interface Instrument {
id: string;
label: string;
icon: string;
}
const INSTRUMENTS: Instrument[] = [
{ id: 'piano', label: 'Piano', icon: '🎹' },
{ id: 'vocals', label: 'Vocals', icon: '🎤' },
{ id: 'drums', label: 'Drums', icon: '🥁' },
{ id: 'bass', label: 'Bass', icon: '🎸' },
{ id: 'guitar', label: 'Guitar', icon: '🎸' },
{ id: 'other', label: 'Other Instruments', icon: '🎵' }
];
export const VOCAL_INSTRUMENTS = [
{ id: 'violin', label: 'Violin', program: 40 },
{ id: 'flute', label: 'Flute', program: 73 },
{ id: 'clarinet', label: 'Clarinet', program: 71 },
{ id: 'saxophone', label: 'Saxophone', program: 64 },
{ id: 'trumpet', label: 'Trumpet', program: 56 },
{ id: 'voice', label: 'Singing Voice', program: 65 },
];
interface InstrumentSelectorProps {
selectedInstruments: string[];
onChange: (instruments: string[]) => void;
vocalInstrument?: string;
onVocalInstrumentChange?: (instrument: string) => void;
}
export function InstrumentSelector({
selectedInstruments,
onChange,
vocalInstrument = 'violin',
onVocalInstrumentChange
}: InstrumentSelectorProps) {
const handleToggle = (instrumentId: string) => {
const isSelected = selectedInstruments.includes(instrumentId);
if (isSelected) {
// Don't allow deselecting if it's the only selected instrument
if (selectedInstruments.length === 1) {
return;
}
const newInstruments = selectedInstruments.filter(id => id !== instrumentId);
console.log('[DEBUG] InstrumentSelector: Removing', instrumentId, '-> New list:', newInstruments);
onChange(newInstruments);
} else {
const newInstruments = [...selectedInstruments, instrumentId];
console.log('[DEBUG] InstrumentSelector: Adding', instrumentId, '-> New list:', newInstruments);
onChange(newInstruments);
}
};
const vocalsSelected = selectedInstruments.includes('vocals');
return (
<div className="instrument-selector">
<label className="selector-label">Select Instruments:</label>
<div className="instrument-grid">
{INSTRUMENTS.map(instrument => (
<button
key={instrument.id}
type="button"
className={`instrument-button ${selectedInstruments.includes(instrument.id) ? 'selected' : ''}`}
onClick={() => handleToggle(instrument.id)}
aria-pressed={selectedInstruments.includes(instrument.id)}
>
<span className="instrument-icon">{instrument.icon}</span>
<span className="instrument-label">{instrument.label}</span>
</button>
))}
</div>
{vocalsSelected && onVocalInstrumentChange && (
<div className="vocal-instrument-selector">
<label htmlFor="vocal-instrument">Transcribe vocals as:</label>
<select
id="vocal-instrument"
value={vocalInstrument}
onChange={(e) => onVocalInstrumentChange(e.target.value)}
>
{VOCAL_INSTRUMENTS.map(inst => (
<option key={inst.id} value={inst.id}>
{inst.label}
</option>
))}
</select>
</div>
)}
<p className="selector-hint">
Select at least one instrument to transcribe
</p>
</div>
);
}
export default InstrumentSelector;
|