Implement page forward and back

src/components/PDFViewer.tsx

@@ -159,7 +159,6 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
       <TTSPlayer 
         currentPage={currDocPage}
         numPages={currDocPages}
-        onPageChange={() => {}}
       />
     </div>
   );

src/components/player/Navigator.tsx

@@ -1,15 +1,15 @@
 import { Button } from '@headlessui/react';
 
-export const Navigator = ({ currentPage, numPages, onPageChange }: {
+export const Navigator = ({ currentPage, numPages, skipToPage }: {
   currentPage: number;
   numPages: number | undefined;
-  onPageChange: (page: number) => void;
+  skipToPage: (page: number) => void;
 }) => {
   return (
     <div className="flex items-center space-x-1">
       {/* Page back */}
       <Button
-        onClick={() => onPageChange(currentPage - 1)}
+        onClick={() => skipToPage(currentPage - 1)}
         disabled={currentPage <= 1}
         className="relative p-2 rounded-full text-foreground hover:bg-offbase data-[hover]:bg-offbase data-[active]:bg-offbase/80 transition-colors duration-200 focus:outline-none disabled:opacity-50"
         aria-label="Previous page"
@@ -21,14 +21,14 @@ export const Navigator = ({ currentPage, numPages, onPageChange }: {
 
       {/* Page number */}
       <div className="bg-offbase px-2 py-0.5 rounded-full">
-        <p className="text-xs">
+        <p className="text-xs whitespace-nowrap">
           {currentPage} / {numPages || 1}
         </p>
       </div>
 
       {/* Page forward */}
       <Button
-        onClick={() => onPageChange(currentPage + 1)}
+        onClick={() => skipToPage(currentPage + 1)}
         disabled={currentPage >= (numPages || 1)}
         className="relative p-2 rounded-full text-foreground hover:bg-offbase data-[hover]:bg-offbase data-[active]:bg-offbase/80 transition-colors duration-200 focus:outline-none disabled:opacity-50"
         aria-label="Next page"

src/components/player/TTSPlayer.tsx

@@ -13,10 +13,9 @@ import { VoicesControl } from '@/components/player/VoicesControl';
 import { SpeedControl } from '@/components/player/SpeedControl';
 import { Navigator } from '@/components/player/Navigator';
 
-export default function TTSPlayer({ currentPage, numPages, onPageChange }: {
+export default function TTSPlayer({ currentPage, numPages }: {
   currentPage: number;
   numPages: number | undefined;
-  onPageChange: (page: number) => void;
 }) {
   const {
     isPlaying,
@@ -29,6 +28,7 @@ export default function TTSPlayer({ currentPage, numPages, onPageChange }: {
     voice,
     setVoiceAndRestart,
     availableVoices,
+    skipToPage,
   } = useTTS();
 
   return (
@@ -38,7 +38,7 @@ export default function TTSPlayer({ currentPage, numPages, onPageChange }: {
         <SpeedControl speed={speed} setSpeedAndRestart={setSpeedAndRestart} />
 
         {/* Page Navigation */}
-        <Navigator currentPage={currentPage} numPages={numPages} onPageChange={onPageChange} />
+        <Navigator currentPage={currentPage} numPages={numPages} skipToPage={skipToPage} />
 
         {/* Playback Controls */}
         <Button

src/contexts/TTSContext.tsx

@@ -53,7 +53,9 @@ interface TTSContextType {
   setCurrentIndex: (index: number) => void;
   currDocPage: number;
   currDocPages: number | undefined;
-  setCurrDocPages: (pages: number) => void;
+  setCurrDocPages: (num: number) => void;
+  incrementPage: (num?: number) => void;
+  skipToPage: (page: number) => void;
 }
 
 const TTSContext = createContext<TTSContextType | undefined>(undefined);
@@ -114,6 +116,19 @@ export function TTSProvider({ children }: { children: React.ReactNode }) {
     });
   }, [abortAudio]);
 
+  const skipToPage = useCallback((page: number) => {
+    abortAudio();
+    setIsPlaying(false);
+    setNextPageLoading(true);
+    setCurrentIndex(0);
+    setCurrDocPage(page);
+  }, [abortAudio]);
+
+  const incrementPage = useCallback((num = 1) => {
+    setNextPageLoading(true);
+    setCurrDocPage((prev) => prev + num);
+  }, []);
+
   const advance = useCallback(async (backwards = false) => {
     setCurrentIndex((prev) => {
       const nextIndex = prev + (backwards ? -1 : 1);
@@ -123,15 +138,13 @@ export function TTSProvider({ children }: { children: React.ReactNode }) {
       } else if (nextIndex >= sentences.length && currDocPage < currDocPages!) {
         console.log('Advancing to next page:', currDocPage + 1);
 
-        setNextPageLoading(true);
+        incrementPage();
-        setCurrDocPage(currDocPage + 1);
 
         return 0;
       } else if (nextIndex < 0 && currDocPage > 1) {
         console.log('Advancing to previous page:', currDocPage - 1);
 
-        setNextPageLoading(true);
+        incrementPage(-1);
-        setCurrDocPage(currDocPage - 1);
 
         return 0;
       } else if (nextIndex >= sentences.length && currDocPage >= currDocPages!) {
@@ -475,6 +488,8 @@ export function TTSProvider({ children }: { children: React.ReactNode }) {
     currDocPage,
     currDocPages,
     setCurrDocPages,
+    incrementPage,
+    skipToPage,
   };
 
   if (configIsLoading) {