Refactors + epub location fixes

Author: richardr1126

src/app/api/nlp/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import nlp from 'compromise';
 
-const MAX_BLOCK_LENGTH = 350;
+const MAX_BLOCK_LENGTH = 300;
 
 const preprocessSentenceForAudio = (text: string): string => {
   return text

src/components/EPUBViewer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
+import { useEffect, useRef, useCallback, useMemo } from 'react';
 import { useParams } from 'next/navigation';
 import dynamic from 'next/dynamic';
 import { useEPUB } from '@/contexts/EPUBContext';
@@ -24,18 +24,29 @@ interface EPUBViewerProps {
 export function EPUBViewer({ className = '' }: EPUBViewerProps) {
   const { id } = useParams();
   const { currDocData, currDocName, currDocPage, extractPageText } = useEPUB();
-  const { setEPUBPageInChapter, registerLocationChangeHandler } = useTTS();
+  const { skipToLocation, registerLocationChangeHandler, setIsEPUB } = useTTS();
   const { epubTheme } = useConfig();
   const bookRef = useRef<Book | null>(null);
   const rendition = useRef<Rendition | undefined>(undefined);
   const toc = useRef<NavItem[]>([]);
   const locationRef = useRef<string | number>(currDocPage);
-  const [initialPrevLocLoad, setInitialPrevLocLoad] = useState(false);
   const { updateTheme } = useEPUBTheme(epubTheme, rendition.current);
 
-  const handleLocationChanged = useCallback((location: string | number, initial = false) => {
+  const isEPUBSetOnce = useRef(false);
+  const handleLocationChanged = useCallback((location: string | number) => {
+    // Set the EPUB flag once the location changes
+    if (!isEPUBSetOnce.current) {
+      setIsEPUB(true);
+      isEPUBSetOnce.current = true;
+
+      rendition.current?.display(location.toString());
+
+      return;
+    }
+
     if (!bookRef.current?.isOpen || !rendition.current) return;
-    // Handle special 'next' and 'prev' cases, which 
+
+    // Handle special 'next' and 'prev' cases
     if (location === 'next' && rendition.current) {
       rendition.current.next();
       return;
@@ -45,33 +56,18 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
       return;
     }
 
-
-    const { displayed, href } = rendition.current.location.start;
-    const chapter = toc.current.find((item) => item.href === href);
-
-    console.log('Displayed:', displayed, 'Chapter:', chapter);
-
-    if (locationRef.current !== 1) {
-      // Save the location to IndexedDB
-      if (id) {
-        console.log('Saving location:', location);
-        setLastDocumentLocation(id as string, location.toString());
-      }
+    // Save the location to IndexedDB if not initial
+    if (id && locationRef.current !== 1) {
+      console.log('Saving location:', location);
+      setLastDocumentLocation(id as string, location.toString());
     }
 
-    setEPUBPageInChapter(displayed.page, displayed.total, chapter?.label || '');
+    skipToLocation(location);
 
-    // Add a small delay for initial load to ensure rendition is ready
-    if (initial) {
-      rendition.current.display(location.toString()).then(() => {
-        setInitialPrevLocLoad(true);
-      });
-    } else {
-      locationRef.current = location;
-      extractPageText(bookRef.current, rendition.current);
-    }
+    locationRef.current = location;
+    extractPageText(bookRef.current, rendition.current);
 
-  }, [id, setEPUBPageInChapter, extractPageText]);
+  }, [id, skipToLocation, extractPageText, setIsEPUB]);
 
   // Replace the debounced text extraction with a proper implementation using useMemo
   const debouncedExtractText = useMemo(() => {
@@ -86,27 +82,27 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
 
   // Load the initial location and setup resize handler
   useEffect(() => {
-    if (bookRef.current && rendition.current) {
-      extractPageText(bookRef.current, rendition.current);
-
-      // Add resize observer
-      const resizeObserver = new ResizeObserver(() => {
-        if (bookRef.current && rendition.current) {
-          debouncedExtractText(bookRef.current, rendition.current);
-        }
-      });
-
-      // Observe the container element
-      const container = document.querySelector('.epub-container');
-      if (container) {
-        resizeObserver.observe(container);
+    if (!bookRef.current || !rendition.current || isEPUBSetOnce.current) return;
+
+    extractPageText(bookRef.current, rendition.current);
+
+    // Add resize observer
+    const resizeObserver = new ResizeObserver(() => {
+      if (bookRef.current && rendition.current) {
+        debouncedExtractText(bookRef.current, rendition.current);
       }
+    });
 
-      return () => {
-        resizeObserver.disconnect();
-      };
+    // Observe the container element
+    const container = document.querySelector('.epub-container');
+    if (container) {
+      resizeObserver.observe(container);
     }
-  }, [extractPageText, debouncedExtractText, initialPrevLocLoad]);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [extractPageText, debouncedExtractText]);
 
   // Register the location change handler
   useEffect(() => {

src/components/PDFViewer.tsx

@@ -27,7 +27,7 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) {
   const {
     currentSentence,
     stopAndPlayFromIndex,
-    isProcessing
+    isProcessing,
   } = useTTS();
 
   // PDF context

src/components/player/Navigator.tsx

@@ -2,16 +2,16 @@
 
 import { Button } from '@headlessui/react';
 
-export const Navigator = ({ currentPage, numPages, skipToPage }: {
+export const Navigator = ({ currentPage, numPages, skipToLocation }: {
   currentPage: number;
   numPages: number | undefined;
-  skipToPage: (page: number) => void;
+  skipToLocation: (location: string | number) => void;
 }) => {
   return (
     <div className="flex items-center space-x-1">
       {/* Page back */}
       <Button
-        onClick={() => skipToPage(currentPage - 1)}
+        onClick={() => skipToLocation(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"
@@ -30,7 +30,7 @@ export const Navigator = ({ currentPage, numPages, skipToPage }: {
 
       {/* Page forward */}
       <Button
-        onClick={() => skipToPage(currentPage + 1)}
+        onClick={() => skipToLocation(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

@@ -26,7 +26,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
     setSpeedAndRestart,
     setVoiceAndRestart,
     availableVoices,
-    skipToPage,
+    skipToLocation,
   } = useTTS();
 
   return (
@@ -36,8 +36,13 @@ export default function TTSPlayer({ currentPage, numPages }: {
         <SpeedControl setSpeedAndRestart={setSpeedAndRestart} />
 
         {/* Page Navigation */}
-        {currentPage && numPages
-         && <Navigator currentPage={currentPage} numPages={numPages} skipToPage={skipToPage} />}
+        {currentPage && numPages && (
+          <Navigator 
+            currentPage={currentPage} 
+            numPages={numPages} 
+            skipToLocation={skipToLocation}
+          />
+        )}
 
         {/* Playback Controls */}
         <Button

src/contexts/ConfigContext.tsx

@@ -3,34 +3,43 @@
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import { getItem, indexedDBService, setItem } from '@/utils/indexedDB';
 
+/** Represents the possible view types for document display */
 export type ViewType = 'single' | 'dual' | 'scroll';
-interface ConfigContextType {
+
+/** Configuration values for the application */
+type ConfigValues = {
   apiKey: string;
   baseUrl: string;
   viewType: ViewType;
   voiceSpeed: number;
   voice: string;
   skipBlank: boolean;
-  epubTheme: boolean;  // Add this line
-  updateConfig: (newConfig: Partial<{ apiKey: string; baseUrl: string; viewType: ViewType }>) => Promise<void>;
-  updateConfigKey: <K extends keyof ConfigValues>(key: K, value: ConfigValues[K]) => Promise<void>;
-  isLoading: boolean;
-  isDBReady: boolean;
-}
+  epubTheme: boolean;
+};
 
-// Add this type to help with type safety
-type ConfigValues = {
+/** Interface defining the configuration context shape and functionality */
+interface ConfigContextType {
   apiKey: string;
   baseUrl: string;
   viewType: ViewType;
   voiceSpeed: number;
   voice: string;
   skipBlank: boolean;
-  epubTheme: boolean;  // Add this line
-};
+  epubTheme: boolean;
+  updateConfig: (newConfig: Partial<{ apiKey: string; baseUrl: string; viewType: ViewType }>) => Promise<void>;
+  updateConfigKey: <K extends keyof ConfigValues>(key: K, value: ConfigValues[K]) => Promise<void>;
+  isLoading: boolean;
+  isDBReady: boolean;
+}
 
 const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
 
+/**
+ * Provider component for application configuration
+ * Manages global configuration state and persistence
+ * @param {Object} props - Component props
+ * @param {ReactNode} props.children - Child components to be wrapped by the provider
+ */
 export function ConfigProvider({ children }: { children: ReactNode }) {
   // Config state
   const [apiKey, setApiKey] = useState<string>('');
@@ -108,6 +117,10 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
     initializeDB();
   }, []);
 
+  /**
+   * Updates multiple configuration values simultaneously
+   * @param {Partial<{apiKey: string; baseUrl: string}>} newConfig - Object containing new config values
+   */
   const updateConfig = async (newConfig: Partial<{ apiKey: string; baseUrl: string }>) => {
     try {
       if (newConfig.apiKey !== undefined) {
@@ -124,6 +137,11 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
     }
   };
 
+  /**
+   * Updates a single configuration value by key
+   * @param {K} key - The configuration key to update
+   * @param {ConfigValues[K]} value - The new value for the configuration
+   */
   const updateConfigKey = async <K extends keyof ConfigValues>(key: K, value: ConfigValues[K]) => {
     try {
       await setItem(key, value.toString());
@@ -175,6 +193,11 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
   );
 }
 
+/**
+ * Custom hook to consume the configuration context
+ * @returns {ConfigContextType} The configuration context value
+ * @throws {Error} When used outside of ConfigProvider
+ */
 export function useConfig() {
   const context = useContext(ConfigContext);
   if (context === undefined) {

src/contexts/EPUBContext.tsx

@@ -26,6 +26,12 @@ interface EPUBContextType {
 
 const EPUBContext = createContext<EPUBContextType | undefined>(undefined);
 
+/**
+ * Provider component for EPUB functionality
+ * Manages the state and operations for EPUB document handling
+ * @param {Object} props - Component props
+ * @param {ReactNode} props.children - Child components to be wrapped by the provider
+ */
 export function EPUBProvider({ children }: { children: ReactNode }) {
   const { setText: setTTSText, currDocPage, currDocPages, setCurrDocPages, stop } = useTTS();
 
@@ -35,7 +41,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
   const [currDocText, setCurrDocText] = useState<string>();
 
   /**
-   * Clears the current document state
+   * Clears all current document state and stops any active TTS
    */
   const clearCurrDoc = useCallback(() => {
     setCurrDocData(undefined);
@@ -46,7 +52,9 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
   }, [setCurrDocPages, stop]);
 
   /**
-   * Sets the current document based on its ID
+   * Sets the current document based on its ID by fetching from IndexedDB
+   * @param {string} id - The unique identifier of the document
+   * @throws {Error} When document data is empty or retrieval fails
    */
   const setCurrentDocument = useCallback(async (id: string): Promise<void> => {
     try {
@@ -73,6 +81,9 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
 
   /**
    * Extracts text content from the current EPUB page/location
+   * @param {Book} book - The EPUB.js Book instance
+   * @param {Rendition} rendition - The EPUB.js Rendition instance
+   * @returns {Promise<string>} The extracted text content
    */
   const extractPageText = useCallback(async (book: Book, rendition: Rendition): Promise<string> => {
     try {      
@@ -127,7 +138,8 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
 
 /**
  * Custom hook to consume the EPUB context
- * Ensures the context is used within a provider
+ * @returns {EPUBContextType} The EPUB context value
+ * @throws {Error} When used outside of EPUBProvider
  */
 export function useEPUB() {
   const context = useContext(EPUBContext);