8cbd4f7558
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
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-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
|
|
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
|
|
<h3 className="font-bold text-foreground flex items-center gap-2 text-sm">
|
|
<Gauge className="w-4 h-4 text-warning" /> Playback Speed
|
|
</h3>
|
|
<button onClick={onClose}>
|
|
<X className="w-4 h-4 text-muted-foreground hover:text-foreground" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
{/* Slider */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>0.5x</span>
|
|
<span className="font-bold text-warning 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-muted 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-warning [&::-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-warning text-warning-foreground' : 'bg-muted text-muted-foreground hover:text-foreground'}`}
|
|
>
|
|
{rate}x
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Pitch Correction */}
|
|
<div className="flex items-center justify-between p-4 bg-muted rounded-lg border border-border/50">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-bold text-foreground">
|
|
Pitch Correction
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
Maintain key when changing speed
|
|
</span>
|
|
</div>
|
|
<div
|
|
onClick={togglePitchCorrection}
|
|
className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-warning' : 'bg-muted'}`}
|
|
>
|
|
<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>
|
|
);
|
|
};
|