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

Merge pull request #66 from richardr1126/v1.0.1

Browse source 
v1.0.1
This commit is contained in:
Richard Roberson 2025-11-21 10:15:40 -07:00 committed by GitHub
commit eb2fc4eb0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 139 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.github/workflows/playwright.yml vendored
View file

@ -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:

2
src/components/AudiobookExportModal.tsx
View file

@ -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>

17
src/components/DocumentSettings.tsx
View file

@ -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">

15
src/components/EPUBViewer.tsx
View file

@ -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 />;
}

9
src/contexts/ConfigContext.tsx
View file

@ -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>

75
src/contexts/EPUBContext.tsx
View file

@ -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,
]
);

2
src/types/config.ts
View file

@ -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',

4
tests/export.spec.ts
View file

@ -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