danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change speed menu to slider

Browse source
This commit is contained in:
Richard Roberson 2025-02-23 19:03:52 -07:00
parent 0da77fffbf
commit 61953a761a
1 changed files with 46 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/components/player/SpeedControl.tsx
View file

@ -1,55 +1,60 @@
'use client';
import {
Listbox,
ListboxButton,
ListboxOption,
ListboxOptions,
} from '@headlessui/react';
import { Input, Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
import { ChevronUpDownIcon } from '@/components/icons/Icons';
import { useConfig } from '@/contexts/ConfigContext';
const speedOptions = [
{ value: 0.5, label: '0.5x' },
{ value: 0.75, label: '0.75x' },
{ value: 1, label: '1x' },
{ value: 1.25, label: '1.25x' },
{ value: 1.5, label: '1.5x' },
{ value: 1.75, label: '1.75x' },
{ value: 2, label: '2x' },
{ value: 2.5, label: '2.5x' },
{ value: 3, label: '3x' },
];
import { useCallback, useEffect, useState } from 'react';
export const SpeedControl = ({ setSpeedAndRestart }: {
setSpeedAndRestart: (speed: number) => void;
}) => {
const { voiceSpeed } = useConfig();
const [localSpeed, setLocalSpeed] = useState(voiceSpeed);
// Use voiceSpeed as the source of truth
const currentSpeed = voiceSpeed;
// Sync local speed with global state
useEffect(() => {
setLocalSpeed(voiceSpeed);
}, [voiceSpeed]);
// Handler for slider change (updates local state only)
const handleSpeedChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setLocalSpeed(parseFloat(event.target.value));
}, []);
// Handler for slider release
const handleSpeedChangeComplete = useCallback(() => {
if (localSpeed !== voiceSpeed) {
setSpeedAndRestart(localSpeed);
}
}, [localSpeed, voiceSpeed, setSpeedAndRestart]);
return (
<div className="relative">
<Listbox value={currentSpeed} onChange={setSpeedAndRestart}>
<ListboxButton className="flex items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-offbase rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1">
<span>{currentSpeed}x</span>
<ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
</ListboxButton>
<ListboxOptions anchor='top start' className="absolute z-50 w-20 sm:w-24 overflow-auto rounded-lg bg-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{speedOptions.map((option) => (
<ListboxOption
key={option.value}
value={option.value}
className={({ active, selected }) =>
`relative cursor-pointer select-none py-0.5 px-1.5 sm:py-2 sm:px-3 ${active ? 'bg-offbase' : ''} ${selected ? 'font-medium' : ''}`
}
>
<span className='text-xs sm:text-sm'>{option.label}</span>
</ListboxOption>
))}
</ListboxOptions>
</Listbox>
</div>
<Popover className="relative">
<PopoverButton className="flex items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-offbase rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1">
<span>{Number.isInteger(localSpeed) ? localSpeed.toString() : localSpeed.toFixed(1)}x</span>
<ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
</PopoverButton>
<PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
<div className="flex flex-col space-y-2">
<div className="flex justify-between">
<span className="text-xs">0.5x</span>
<span className="text-xs font-bold">{Number.isInteger(localSpeed) ? localSpeed.toString() : localSpeed.toFixed(1)}x</span>
<span className="text-xs">3x</span>
</div>
<Input
type="range"
min="0.5"
max="3"
step="0.1"
value={localSpeed}
onChange={handleSpeedChange}
onMouseUp={handleSpeedChangeComplete}
onKeyUp={handleSpeedChangeComplete}
onTouchEnd={handleSpeedChangeComplete}
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
/>
</div>
</PopoverPanel>
</Popover>
);
}