79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { X, Activity } from 'lucide-react';
|
||
|
|
import { useAudio, VisualizerSettings } from '../../context/AudioContext';
|
||
|
|
|
||
|
|
interface VisualizerSettingsModalProps {
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const VisualizerSettingsModal: React.FC<VisualizerSettingsModalProps> = ({ onClose }) => {
|
||
|
|
const { visualizerSettings, setVisualizerSettings } = useAudio();
|
||
|
|
|
||
|
|
const updateSetting = (key: keyof VisualizerSettings, value: any) => {
|
||
|
|
setVisualizerSettings({ ...visualizerSettings, [key]: value });
|
||
|
|
};
|
||
|
|
|
||
|
|
const colors = ['#66FCF1', '#8A7EA4', '#36E5D1', '#E4B314', '#E63946'];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-72 bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
|
||
|
|
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
||
|
|
<h3 className="font-bold text-white flex items-center gap-2 text-sm">
|
||
|
|
<Activity className="w-4 h-4 text-kodo-cyan" /> Visualizer
|
||
|
|
</h3>
|
||
|
|
<button onClick={onClose}><X className="w-4 h-4 text-gray-400 hover:text-white" /></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-5 space-y-5">
|
||
|
|
{/* Mode */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Display Mode</label>
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
{['waveform', 'spectrogram', 'bars', 'off'].map(mode => (
|
||
|
|
<button
|
||
|
|
key={mode}
|
||
|
|
onClick={() => updateSetting('mode', mode)}
|
||
|
|
className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-slate border-transparent text-gray-400 hover:text-white'}`}
|
||
|
|
>
|
||
|
|
{mode}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Sensitivity */}
|
||
|
|
<div>
|
||
|
|
<div className="flex justify-between text-xs text-gray-400 mb-1">
|
||
|
|
<span>Sensitivity</span>
|
||
|
|
<span>{visualizerSettings.sensitivity}%</span>
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
min="0"
|
||
|
|
max="100"
|
||
|
|
value={visualizerSettings.sensitivity}
|
||
|
|
onChange={(e) => updateSetting('sensitivity', Number(e.target.value))}
|
||
|
|
className="w-full h-1 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Color */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Accent Color</label>
|
||
|
|
<div className="flex gap-3">
|
||
|
|
{colors.map(c => (
|
||
|
|
<div
|
||
|
|
key={c}
|
||
|
|
onClick={() => updateSetting('color', c)}
|
||
|
|
className={`w-6 h-6 rounded-full cursor-pointer transition-transform hover:scale-110 ${visualizerSettings.color === c ? 'ring-2 ring-white ring-offset-2 ring-offset-kodo-graphite' : ''}`}
|
||
|
|
style={{ backgroundColor: c }}
|
||
|
|
></div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|