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

Auto select navigation

Browse source
This commit is contained in:
RobbyV2 2025-07-19 12:40:01 -07:00
parent 6b03d9c946
commit 41ea2cdc52
1 changed files with 50 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/components/player/Navigator.tsx
View file

@ -9,12 +9,25 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
skipToLocation: (location: string | number, shouldPause?: boolean) => void; skipToLocation: (location: string | number, shouldPause?: boolean) => void;
}) => { }) => {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => { useEffect(() => {
setInputValue(currentPage.toString()); setInputValue(currentPage.toString());
}, [currentPage]); }, [currentPage]);
// Auto-focus and select input when popover opens
useEffect(() => {
if (isPopoverOpen && inputRef.current) {
// Small delay to ensure the popover is fully rendered
const timer = setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, 50);
return () => clearTimeout(timer);
}
}, [isPopoverOpen]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Only allow numbers // Only allow numbers
const value = e.target.value.replace(/[^0-9]/g, ''); const value = e.target.value.replace(/[^0-9]/g, '');
@ -61,33 +74,43 @@ export const Navigator = ({ currentPage, numPages, skipToLocation }: {
{/* Page number popup */} {/* Page number popup */}
<Popover className="relative"> <Popover className="relative">
<PopoverButton {({ open }) => {
className="bg-offbase px-2 py-0.5 rounded-full focus:outline-none cursor-pointer hover:bg-offbase/80" if (open !== isPopoverOpen) {
onClick={handlePopoverOpen} setIsPopoverOpen(open);
> }
<p className="text-xs whitespace-nowrap">
{currentPage} / {numPages || 1} return (
</p> <>
</PopoverButton> <PopoverButton
<PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase"> className="bg-offbase px-2 py-0.5 rounded-full focus:outline-none cursor-pointer hover:bg-offbase/80"
<div className="flex flex-col space-y-2"> onClick={handlePopoverOpen}
<div className="text-xs font-medium text-foreground">Go to page</div> >
<input <p className="text-xs whitespace-nowrap">
ref={inputRef} {currentPage} / {numPages || 1}
type="text" </p>
inputMode="numeric" </PopoverButton>
pattern="[0-9]*" <PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
className="w-20 px-2 py-1 text-xs text-accent bg-offbase rounded border-none outline-none appearance-none text-center" <div className="flex flex-col space-y-2">
value={inputValue} <div className="text-xs font-medium text-foreground">Go to page</div>
onChange={handleInputChange} <input
onBlur={handleInputConfirm} ref={inputRef}
onKeyDown={handleInputKeyDown} type="text"
placeholder={currentPage.toString()} inputMode="numeric"
aria-label="Page number" pattern="[0-9]*"
/> className="w-20 px-2 py-1 text-xs text-accent bg-offbase rounded border-none outline-none appearance-none text-center"
<div className="text-xs text-foreground/70 text-center">of {numPages || 1}</div> value={inputValue}
</div> onChange={handleInputChange}
</PopoverPanel> onBlur={handleInputConfirm}
onKeyDown={handleInputKeyDown}
placeholder={currentPage.toString()}
aria-label="Page number"
/>
<div className="text-xs text-foreground/70 text-center">of {numPages || 1}</div>
</div>
</PopoverPanel>
</>
);
}}
</Popover> </Popover>
{/* Page forward */} {/* Page forward */}