87 lines
3.2 KiB
TypeScript
87 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { X, Gauge } from 'lucide-react';
|
|
import { useAudio } from '../../context/AudioContext';
|
|
|
|
interface PlaybackSpeedModalProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
|
|
onClose,
|
|
}) => {
|
|
const {
|
|
playbackRate,
|
|
setPlaybackRate,
|
|
pitchCorrection,
|
|
togglePitchCorrection,
|
|
} = useAudio();
|
|
const presets = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
|
|
|
|
return (
|
|
<div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 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">
|
|
<Gauge className="w-4 h-4 text-kodo-gold" /> Playback Speed
|
|
</h3>
|
|
<button onClick={onClose}>
|
|
<X className="w-4 h-4 text-gray-400 hover:text-white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
{/* Slider */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>0.5x</span>
|
|
<span className="font-bold text-kodo-gold text-lg">
|
|
{playbackRate}x
|
|
</span>
|
|
<span>2.0x</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0.5"
|
|
max="2.0"
|
|
step="0.05"
|
|
value={playbackRate}
|
|
onChange={(e) => setPlaybackRate(parseFloat(e.target.value))}
|
|
className="w-full h-1.5 bg-kodo-steel rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
|
|
/>
|
|
</div>
|
|
|
|
{/* Presets */}
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{presets.map((rate) => (
|
|
<button
|
|
key={rate}
|
|
onClick={() => setPlaybackRate(rate)}
|
|
className={`px-2 py-1.5 rounded text-xs font-bold transition-all ${playbackRate === rate ? 'bg-kodo-gold text-black' : 'bg-kodo-slate text-gray-400 hover:text-white'}`}
|
|
>
|
|
{rate}x
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pitch Correction */}
|
|
<div className="flex items-center justify-between p-3 bg-kodo-ink rounded-lg border border-kodo-steel/50">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-bold text-white">
|
|
Pitch Correction
|
|
</span>
|
|
<span className="text-[10px] text-gray-500">
|
|
Maintain key when changing speed
|
|
</span>
|
|
</div>
|
|
<div
|
|
onClick={togglePitchCorrection}
|
|
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-kodo-gold' : 'bg-gray-600'}`}
|
|
>
|
|
<div
|
|
className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${pitchCorrection ? 'left-6' : 'left-1'}`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|