Merge pull request #66 from richardr1126/v1.0.1

v1.0.1

.github/workflows/playwright.yml

@@ -1,7 +1,7 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master, version1.0.0 ]
+    branches: [ main, master, 'v*.*.*' ]  
   pull_request:
     branches: [ main, master ]
 jobs:

src/components/AudiobookExportModal.tsx

@@ -688,7 +688,7 @@ export function AudiobookExportModal({
                         {chapters.length === 0 && !isGenerating && !isLoadingExisting && (
                           <div className="text-center py-8">
                             <p className="text-sm text-muted">
-                              Click &quot;Start Generation&quot; to begin creating your audiobook.
+                              Generation will use current TTS playback options.
                               <br />
                               Individual chapters will appear here as they are generated.
                             </p>

src/components/DocumentSettings.tsx

@@ -34,6 +34,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
     rightMargin,
     updateConfigKey,
     pdfHighlightEnabled,
+    epubHighlightEnabled,
   } = useConfig();
   const { createFullAudioBook: createEPUBAudioBook, regenerateChapter: regenerateEPUBChapter } = useEPUB();
   const { createFullAudioBook: createPDFAudioBook, regenerateChapter: regeneratePDFChapter } = usePDF();
@@ -343,6 +344,22 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
                         </p>
                       </div>
                     )}
+                    {epub && (
+                      <div className="space-y-1">
+                        <label className="flex items-center space-x-2">
+                          <input
+                            type="checkbox"
+                            checked={epubHighlightEnabled}
+                            onChange={(e) => updateConfigKey('epubHighlightEnabled', e.target.checked)}
+                            className="form-checkbox h-4 w-4 text-accent rounded border-muted"
+                          />
+                          <span className="text-sm font-medium text-foreground">Highlight text during playback</span>
+                        </label>
+                        <p className="text-sm text-muted pl-6">
+                          Show visual highlighting in the EPUB viewer while TTS is reading.
+                        </p>
+                      </div>
+                    )}
                     {epub && (
                       <div className="space-y-1">
                         <label className="flex items-center space-x-2">

src/components/EPUBViewer.tsx

@@ -28,9 +28,11 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
     renditionRef,
     tocRef,
     setRendition,
-    extractPageText 
+    extractPageText,
+    highlightPattern,
+    clearHighlights
   } = useEPUB();
-  const { registerLocationChangeHandler, pause } = useTTS();
+  const { registerLocationChangeHandler, pause, currentSentence } = useTTS();
   const { epubTheme } = useConfig();
   const { updateTheme } = useEPUBTheme(epubTheme, renditionRef.current);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -59,6 +61,15 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
     registerLocationChangeHandler(handleLocationChanged);
   }, [registerLocationChangeHandler, handleLocationChanged]);
 
+  // Handle highlighting
+  useEffect(() => {
+    if (currentSentence) {
+      highlightPattern(currentSentence);
+    } else {
+      clearHighlights();
+    }
+  }, [currentSentence, highlightPattern, clearHighlights]);
+
   if (!currDocData) {
     return <DocumentSkeleton />;
   }

src/contexts/ConfigContext.tsx

@@ -32,6 +32,7 @@ interface ConfigContextType {
   isLoading: boolean;
   isDBReady: boolean;
   pdfHighlightEnabled: boolean;
+  epubHighlightEnabled: boolean;
 }
 
 const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
@@ -79,7 +80,7 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
     if (!appConfig) return null;
     const { id, ...rest } = appConfig;
     void id;
-    return rest;
+    return { ...APP_CONFIG_DEFAULTS, ...rest };
   }, [appConfig]);
 
   // Destructure for convenience and to match context shape
@@ -101,7 +102,8 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
     ttsInstructions,
     savedVoices,
     smartSentenceSplitting,
-  pdfHighlightEnabled,
+    pdfHighlightEnabled,
+    epubHighlightEnabled,
   } = config || APP_CONFIG_DEFAULTS;
 
   /**
@@ -198,7 +200,8 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
       updateConfigKey,
       isLoading,
       isDBReady,
-      pdfHighlightEnabled
+      pdfHighlightEnabled,
+      epubHighlightEnabled
     }}>
       {children}
     </ConfigContext.Provider>

src/contexts/EPUBContext.tsx

@@ -8,7 +8,8 @@ import {
   useCallback,
   useMemo,
   useRef,
-  RefObject
+  RefObject,
+  useEffect
 } from 'react';
 
 import type { NavItem } from 'epubjs';
@@ -41,6 +42,8 @@ interface EPUBContextType {
   handleLocationChanged: (location: string | number) => void;
   setRendition: (rendition: Rendition) => void;
   isAudioCombining: boolean;
+  highlightPattern: (text: string) => void;
+  clearHighlights: () => void;
 }
 
 const EPUBContext = createContext<EPUBContextType | undefined>(undefined);
@@ -139,6 +142,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
     ttsModel,
     ttsInstructions,
     smartSentenceSplitting,
+    epubHighlightEnabled,
   } = useConfig();
   // Current document state
   const [currDocData, setCurrDocData] = useState<ArrayBuffer>();
@@ -154,6 +158,8 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
   const isEPUBSetOnce = useRef(false);
   // Should pause ref
   const shouldPauseRef = useRef(true);
+  // Track current highlight CFI for removal
+  const currentHighlightCfi = useRef<string | null>(null);
 
   /**
    * Clears all current document state and stops any active TTS
@@ -705,6 +711,69 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
     }
   }, [id, skipToLocation, extractPageText, setIsEPUB]);
 
+  const clearHighlights = useCallback(() => {
+    if (renditionRef.current) {
+      if (currentHighlightCfi.current) {
+        renditionRef.current.annotations.remove(currentHighlightCfi.current, 'highlight');
+        currentHighlightCfi.current = null;
+      }
+    }
+  }, []);
+
+  const highlightPattern = useCallback(async (text: string) => {
+    if (!renditionRef.current) return;
+
+    // Clear existing highlights first
+    clearHighlights();
+
+    if (!epubHighlightEnabled) return;
+
+    if (!text || !text.trim()) return;
+
+    try {
+      const contents = renditionRef.current.getContents();
+      const contentsArray = Array.isArray(contents) ? contents : [contents];
+      for (const content of contentsArray) {
+        const win = content.window;
+        if (win && win.find) {
+          // Reset selection to start of document to ensure full search
+          const sel = win.getSelection();
+          sel?.removeAllRanges();
+
+          // Attempt to find the text
+          // window.find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog);
+          // Note: We search for the trimmed text.
+          if (win.find(text.trim(), false, false, true, false, false, false)) {
+            const range = sel?.getRangeAt(0);
+            if (range) {
+              const cfi = content.cfiFromRange(range);
+              // Store CFI for removal
+              currentHighlightCfi.current = cfi;
+              renditionRef.current.annotations.add('highlight', cfi, {}, (e: MouseEvent) => {
+                console.log('Highlight clicked', e);
+              }, '', { fill: 'grey', 'fill-opacity': '0.4', 'mix-blend-mode': 'multiply' });
+
+              // Clear the browser selection so it doesn't look like user selected text
+              sel?.removeAllRanges();
+              return; // Stop after first match
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error highlighting text:', error);
+    }
+  }, [clearHighlights, epubHighlightEnabled]);
+
+  // Effect to clear highlights when disabled
+  useEffect(() => {
+    if (!epubHighlightEnabled) {
+      clearHighlights();
+    }
+  }, [epubHighlightEnabled, clearHighlights]);
+
+
+
   // Context value memoization
   const contextValue = useMemo(
     () => ({
@@ -725,6 +794,8 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
       handleLocationChanged,
       setRendition,
       isAudioCombining,
+      highlightPattern,
+      clearHighlights,
     }),
     [
       setCurrentDocument,
@@ -740,6 +811,8 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
       handleLocationChanged,
       setRendition,
       isAudioCombining,
+      highlightPattern,
+      clearHighlights,
     ]
   );
 

src/types/config.ts

@@ -23,6 +23,7 @@ export interface AppConfigValues {
   savedVoices: SavedVoices;
   smartSentenceSplitting: boolean;
   pdfHighlightEnabled: boolean;
+  epubHighlightEnabled: boolean;
   firstVisit: boolean;
   documentListState: DocumentListState;
 }
@@ -46,6 +47,7 @@ export const APP_CONFIG_DEFAULTS: AppConfigValues = {
   savedVoices: {},
   smartSentenceSplitting: true,
   pdfHighlightEnabled: true,
+  epubHighlightEnabled: true,
   firstVisit: false,
   documentListState: {
     sortBy: 'name',

tests/export.spec.ts

@@ -89,7 +89,7 @@ async function resetAudiobookIfPresent(page: Page) {
   await confirmReset.click();
 
   await expect(
-    page.getByText(/Click "Start Generation" to begin creating your audiobook/i)
+    page.getByText(/Generation will use current TTS playback options./i)
   ).toBeVisible({ timeout: 60_000 });
 }
 
@@ -267,7 +267,7 @@ test.describe('Audiobook export', () => {
 
     // After reset, the hint text for starting generation should re-appear
     await expect(
-      page.getByText(/Click "Start Generation" to begin creating your audiobook/i)
+      page.getByText(/Generation will use current TTS playback options./i)
     ).toBeVisible({ timeout: 60_000 });
 
     // Backend should report no existing chapters for this bookId