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

[ePub only] First working export audiobook

Browse source
This commit is contained in:
Richard Roberson 2025-02-24 22:41:38 -07:00
parent 61953a761a
commit 1db906f8bc
3 changed files with 408 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/components/DocumentSettings.tsx
View file

@ -1,9 +1,10 @@
'use client';
import { Fragment } from 'react';
import { Fragment, useState, useRef } from 'react';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, Listbox, ListboxButton, ListboxOptions, ListboxOption, Button } from '@headlessui/react';
import { useConfig, ViewType } from '@/contexts/ConfigContext';
import { ChevronUpDownIcon, CheckIcon } from '@/components/icons/Icons';
import { useEPUB } from '@/contexts/EPUBContext';
interface DocViewSettingsProps {
isOpen: boolean;
@ -19,8 +20,52 @@ const viewTypes = [
export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsProps) {
const { viewType, skipBlank, epubTheme, updateConfigKey } = useConfig();
const { createFullAudioBook } = useEPUB();
const [progress, setProgress] = useState(0);
const [isGenerating, setIsGenerating] = useState(false);
const abortControllerRef = useRef<AbortController | null>(null);
const selectedView = viewTypes.find(v => v.id === viewType) || viewTypes[0];
const handleStartGeneration = async () => {
setIsGenerating(true);
setProgress(0);
abortControllerRef.current = new AbortController();
try {
const audioBuffer = await createFullAudioBook(
(progress) => setProgress(progress),
abortControllerRef.current.signal
);
// Create and trigger download
const blob = new Blob([audioBuffer], { type: 'audio/mp3' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'audiobook.mp3';
document.body.appendChild(a);
a.click();
// Clean up
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
} catch (error) {
console.error('Error generating audiobook:', error);
} finally {
setIsGenerating(false);
setProgress(0);
abortControllerRef.current = null;
}
};
const handleCancel = () => {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
};
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
@ -58,8 +103,8 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
<div className="space-y-4">
{!epub && <div className="space-y-2">
<label className="block text-sm font-medium text-foreground">Mode</label>
<Listbox
value={selectedView}
<Listbox
value={selectedView}
onChange={(newView) => updateConfigKey('viewType', newView.id as ViewType)}
>
<div className="relative z-10">
@ -80,8 +125,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
<ListboxOption
key={view.id}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
active ? 'bg-accent/10 text-accent' : 'text-foreground'
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-accent/10 text-accent' : 'text-foreground'
}`
}
value={view}
@ -125,20 +169,58 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
</p>
</div>
{epub && (
<div className="space-y-2">
<label className="flex items-center space-x-2">
<input
type="checkbox"
checked={epubTheme}
onChange={(e) => updateConfigKey('epubTheme', e.target.checked)}
className="form-checkbox h-4 w-4 text-accent rounded border-muted"
/>
<span className="text-sm font-medium text-foreground">Use theme (experimental)</span>
</label>
<p className="text-sm text-muted pl-6">
Apply the current app theme to the EPUB viewer
</p>
</div>
<>
<div className="space-y-2">
<label className="flex items-center space-x-2">
<input
type="checkbox"
checked={epubTheme}
onChange={(e) => updateConfigKey('epubTheme', e.target.checked)}
className="form-checkbox h-4 w-4 text-accent rounded border-muted"
/>
<span className="text-sm font-medium text-foreground">Use theme (experimental)</span>
</label>
<p className="text-sm text-muted pl-6">
Apply the current app theme to the EPUB viewer
</p>
</div>
<div className="mt-4 space-y-2">
{!isGenerating ? (
<Button
type="button"
className="w-full inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm
font-medium text-background hover:opacity-95 focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.04]"
onClick={handleStartGeneration}
>
Export to Audiobook (.mp3)
</Button>
) : (
<div className="space-y-2">
<div className="w-full bg-background rounded-lg overflow-hidden">
<div
className="h-2 bg-accent transition-all duration-300 ease-in-out"
style={{ width: `${progress}%` }}
/>
</div>
<div className="flex justify-between items-center text-sm text-muted">
<span>{Math.round(progress)}% complete</span>
<Button
type="button"
className="inline-flex justify-center rounded-lg px-2.5 py-1 text-sm
font-medium text-foreground hover:text-accent focus:outline-none
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
transform transition-transform duration-200 ease-in-out hover:scale-[1.02]"
onClick={handleCancel}
>
Cancel and download
</Button>
</div>
</div>
)}
</div>
</>
)}
</div>
</div>

92
src/components/EPUBViewer.tsx
View file

@ -1,15 +1,12 @@
'use client';
import { useEffect, useRef, useCallback } from 'react';
import { useParams } from 'next/navigation';
import dynamic from 'next/dynamic';
import { useEPUB } from '@/contexts/EPUBContext';
import { useTTS } from '@/contexts/TTSContext';
import { useConfig } from '@/contexts/ConfigContext';
import { DocumentSkeleton } from '@/components/DocumentSkeleton';
import TTSPlayer from '@/components/player/TTSPlayer';
import { setLastDocumentLocation } from '@/utils/indexedDB';
import type { Rendition, Book, NavItem } from 'epubjs';
import { useEPUBTheme, getThemeStyles } from '@/hooks/epub/useEPUBTheme';
import { useEPUBResize } from '@/hooks/epub/useEPUBResize';
@ -23,88 +20,40 @@ interface EPUBViewerProps {
}
export function EPUBViewer({ className = '' }: EPUBViewerProps) {
const { id } = useParams();
const { currDocData, currDocName, currDocPage, extractPageText } = useEPUB();
const { skipToLocation, registerLocationChangeHandler, setIsEPUB, pause } = useTTS();
const {
currDocData,
currDocName,
locationRef,
handleLocationChanged,
bookRef,
renditionRef,
tocRef,
setRendition,
extractPageText
} = useEPUB();
const { registerLocationChangeHandler, pause } = 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 { updateTheme } = useEPUBTheme(epubTheme, rendition.current);
const { updateTheme } = useEPUBTheme(epubTheme, renditionRef.current);
const containerRef = useRef<HTMLDivElement>(null);
const isEPUBSetOnce = useRef(false);
const { isResizing, setIsResizing, dimensions } = useEPUBResize(containerRef);
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
if (location === 'next' && rendition.current) {
rendition.current.next();
return;
}
if (location === 'prev' && rendition.current) {
rendition.current.prev();
return;
}
// Save the location to IndexedDB if not initial
if (id && locationRef.current !== 1) {
console.log('Saving location:', location);
setLastDocumentLocation(id as string, location.toString());
}
skipToLocation(location);
locationRef.current = location;
extractPageText(bookRef.current, rendition.current);
}, [id, skipToLocation, extractPageText, setIsEPUB]);
const initialExtract = useCallback(() => {
if (!bookRef.current || !rendition.current?.location || isEPUBSetOnce.current) return;
extractPageText(bookRef.current, rendition.current, false);
}, [extractPageText]);
const checkResize = useCallback(() => {
if (isResizing && dimensions && bookRef.current?.isOpen && rendition.current && isEPUBSetOnce.current) {
if (isResizing && dimensions && bookRef.current?.isOpen && renditionRef.current) {
pause();
// Only extract text when we have dimensions, ensuring the resize is complete
extractPageText(bookRef.current, rendition.current, true);
extractPageText(bookRef.current, renditionRef.current, true);
setIsResizing(false);
return true;
} else {
return false;
}
}, [isResizing, setIsResizing, dimensions, pause, extractPageText]);
}, [isResizing, setIsResizing, dimensions, pause, bookRef, renditionRef, extractPageText]);
// Check for isResizing to pause TTS and re-extract text
useEffect(() => {
if (checkResize()) return;
// Load initial location when not resizing
initialExtract();
}, [checkResize, initialExtract]);
// Load the initial location
// useEffect(() => {
// if (!bookRef.current || !rendition.current || isEPUBSetOnce.current) return;
// extractPageText(bookRef.current, rendition.current, false);
// }, [extractPageText]);
}, [checkResize]);
// Register the location change handler
useEffect(() => {
@ -127,12 +76,11 @@ export function EPUBViewer({ className = '' }: EPUBViewerProps) {
locationChanged={handleLocationChanged}
url={currDocData}
title={currDocName}
tocChanged={(_toc) => (toc.current = _toc)}
tocChanged={(_toc) => (tocRef.current = _toc)}
showToc={true}
readerStyles={epubTheme && getThemeStyles() || undefined}
getRendition={(_rendition: Rendition) => {
bookRef.current = _rendition.book;
rendition.current = _rendition;
getRendition={(_rendition) => {
setRendition(_rendition);
updateTheme();
}}
/>

294
src/contexts/EPUBContext.tsx
View file

@ -7,11 +7,18 @@ import {
ReactNode,
useCallback,
useMemo,
useRef,
RefObject,
} from 'react';
import { indexedDBService } from '@/utils/indexedDB';
import { useTTS } from '@/contexts/TTSContext';
import { Book, Rendition } from 'epubjs';
import { createRangeCfi } from '@/utils/epub';
import type { NavItem } from 'epubjs';
import { setLastDocumentLocation } from '@/utils/indexedDB';
import { SpineItem } from 'epubjs/types/section';
import { useParams } from 'next/navigation';
import { useConfig } from './ConfigContext';
interface EPUBContextType {
currDocData: ArrayBuffer | undefined;
@ -22,6 +29,13 @@ interface EPUBContextType {
setCurrentDocument: (id: string) => Promise<void>;
clearCurrDoc: () => void;
extractPageText: (book: Book, rendition: Rendition, shouldPause?: boolean) => Promise<string>;
createFullAudioBook: (onProgress: (progress: number) => void, signal?: AbortSignal) => Promise<ArrayBuffer>;
bookRef: RefObject<Book | null>;
renditionRef: RefObject<Rendition | undefined>;
tocRef: RefObject<NavItem[]>;
locationRef: RefObject<string | number>;
handleLocationChanged: (location: string | number) => void;
setRendition: (rendition: Rendition) => void;
}
const EPUBContext = createContext<EPUBContextType | undefined>(undefined);
@ -33,13 +47,27 @@ const EPUBContext = createContext<EPUBContextType | undefined>(undefined);
* @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();
const { setText: setTTSText, currDocPage, currDocPages, setCurrDocPages, stop, skipToLocation, setIsEPUB } = useTTS();
const { id } = useParams();
// Configuration context to get TTS settings
const {
apiKey,
baseUrl,
voiceSpeed,
voice,
} = useConfig();
// Current document state
const [currDocData, setCurrDocData] = useState<ArrayBuffer>();
const [currDocName, setCurrDocName] = useState<string>();
const [currDocText, setCurrDocText] = useState<string>();
// Add new refs
const bookRef = useRef<Book | null>(null);
const renditionRef = useRef<Rendition | undefined>(undefined);
const tocRef = useRef<NavItem[]>([]);
const locationRef = useRef<string | number>(currDocPage);
const isEPUBSetOnce = useRef(false);
/**
* Clears all current document state and stops any active TTS
*/
@ -62,7 +90,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
if (doc) {
console.log('Retrieved document size:', doc.size);
console.log('Retrieved ArrayBuffer size:', doc.data.byteLength);
if (doc.data.byteLength === 0) {
console.error('Retrieved ArrayBuffer is empty');
throw new Error('Empty document data');
@ -87,18 +115,18 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
* @returns {Promise<string>} The extracted text content
*/
const extractPageText = useCallback(async (book: Book, rendition: Rendition, shouldPause = false): Promise<string> => {
try {
try {
const { start, end } = rendition?.location;
if (!start?.cfi || !end?.cfi || !book || !book.isOpen || !rendition) return '';
const rangeCfi = createRangeCfi(start.cfi, end.cfi);
const range = await book.getRange(rangeCfi);
const textContent = range.toString().trim();
setTTSText(textContent, shouldPause);
setCurrDocText(textContent);
return textContent;
} catch (error) {
console.error('Error extracting EPUB text:', error);
@ -106,6 +134,248 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
}
}, [setTTSText]);
/**
* Extracts text content from the entire EPUB book
* @returns {Promise<string[]>} Array of text content from each section
*/
const extractBookText = useCallback(async (): Promise<string[]> => {
try {
if (!bookRef.current || !bookRef.current.isOpen) return [''];
const book = bookRef.current;
const spine = book.spine;
const promises: Promise<string>[] = [];
spine.each((item: SpineItem) => {
const url = item.href || '';
if (!url) return;
const promise = book.load(url)
.then((section) => (section as Document))
.then((section) => {
const textContent = section.body.textContent || '';
return textContent;
})
.catch((err) => {
console.error(`Error loading section ${url}:`, err);
return '';
});
promises.push(promise);
});
const textArray = await Promise.all(promises);
const filteredArray = textArray.filter(text => text.trim() !== '');
console.log('Extracted entire EPUB text array:', filteredArray);
return filteredArray;
} catch (error) {
console.error('Error extracting EPUB text:', error);
return [''];
}
}, []);
/**
* Creates a complete audiobook by processing all text through NLP and TTS
* @param {string} voice - The voice to use for TTS
* @param {number} speed - The speed to use for TTS
* @returns {Promise<ArrayBuffer>} The complete audiobook as an ArrayBuffer
*/
const createFullAudioBook = useCallback(async (
onProgress: (progress: number) => void,
signal?: AbortSignal
): Promise<ArrayBuffer> => {
try {
// Get all text content from the book
const textArray = await extractBookText();
if (!textArray.length) throw new Error('No text content found in book');
// Create an array to store all audio chunks
const audioChunks: ArrayBuffer[] = [];
let processedSentences = 0;
let totalSentences = 0;
// First, count total sentences
for (const text of textArray) {
if (!text.trim()) continue;
const nlpResponse = await fetch('/api/nlp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text }),
});
if (!nlpResponse.ok) {
throw new Error(`NLP processing failed with status ${nlpResponse.status}`);
}
const nlpData = await nlpResponse.json();
const sentences = nlpData?.sentences;
if (sentences && Array.isArray(sentences)) {
totalSentences += sentences.length;
}
}
// Process each section of text
for (const text of textArray) {
if (!text.trim()) continue;
// Check for cancellation
if (signal?.aborted) {
// If cancelled, return what we have so far
const partialBuffer = combineAudioChunks(audioChunks);
return partialBuffer;
}
const nlpResponse = await fetch('/api/nlp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text }),
});
if (!nlpResponse.ok) {
throw new Error(`NLP processing failed with status ${nlpResponse.status}`);
}
const nlpData = await nlpResponse.json();
const sentences = nlpData?.sentences;
if (!sentences || !Array.isArray(sentences) || sentences.length === 0) {
console.warn('No valid sentences returned from NLP, processing text block as single sentence');
continue;
}
// Process each sentence through TTS with retries
for (const sentence of sentences) {
// Check for cancellation
if (signal?.aborted) {
const partialBuffer = combineAudioChunks(audioChunks);
return partialBuffer;
}
if (!sentence || typeof sentence !== 'string' || !sentence.trim()) {
processedSentences++;
continue;
}
let retryCount = 0;
const maxRetries = 2;
let success = false;
while (retryCount <= maxRetries && !success) {
try {
const ttsResponse = await fetch('/api/tts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-openai-key': apiKey || '',
'x-openai-base-url': baseUrl || 'https://api.openai.com/v1',
},
body: JSON.stringify({
text: sentence.trim(),
voice: voice,
speed: voiceSpeed,
}),
});
if (!ttsResponse.ok) {
throw new Error(`TTS processing failed with status ${ttsResponse.status}`);
}
const audioBuffer = await ttsResponse.arrayBuffer();
if (audioBuffer.byteLength === 0) {
throw new Error('Received empty audio buffer from TTS');
}
audioChunks.push(audioBuffer);
success = true;
} catch (error) {
retryCount++;
if (retryCount <= maxRetries) {
console.warn(`TTS generation failed, attempt ${retryCount} of ${maxRetries}:`, error);
await new Promise(resolve => setTimeout(resolve, 1000));
} else {
console.error(`Failed to generate audio after ${maxRetries} retries, skipping sentence:`, sentence);
}
}
}
if (success) {
// Add a small pause between sentences (500ms of silence)
const silenceBuffer = new ArrayBuffer(24000);
audioChunks.push(silenceBuffer);
}
processedSentences++;
onProgress((processedSentences / totalSentences) * 100);
}
}
if (audioChunks.length === 0) {
throw new Error('No audio was generated from the book content');
}
return combineAudioChunks(audioChunks);
} catch (error) {
console.error('Error creating audiobook:', error);
throw error;
}
}, [extractBookText, apiKey, baseUrl, voice, voiceSpeed]);
// Helper function to combine audio chunks
const combineAudioChunks = (audioChunks: ArrayBuffer[]): ArrayBuffer => {
const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.byteLength, 0);
const combinedBuffer = new Uint8Array(totalLength);
let offset = 0;
for (const chunk of audioChunks) {
combinedBuffer.set(new Uint8Array(chunk), offset);
offset += chunk.byteLength;
}
return combinedBuffer.buffer;
};
const setRendition = useCallback((rendition: Rendition) => {
bookRef.current = rendition.book;
renditionRef.current = rendition;
}, []);
const handleLocationChanged = useCallback((location: string | number) => {
// Set the EPUB flag once the location changes
if (!isEPUBSetOnce.current) {
setIsEPUB(true);
isEPUBSetOnce.current = true;
renditionRef.current?.display(location.toString());
return;
}
if (!bookRef.current?.isOpen || !renditionRef.current) return;
// Handle special 'next' and 'prev' cases
if (location === 'next' && renditionRef.current) {
renditionRef.current.next();
return;
}
if (location === 'prev' && renditionRef.current) {
renditionRef.current.prev();
return;
}
// Save the location to IndexedDB if not initial
if (id && locationRef.current !== 1) {
console.log('Saving location:', location);
setLastDocumentLocation(id as string, location.toString());
}
skipToLocation(location);
locationRef.current = location;
if (bookRef.current && renditionRef.current) {
extractPageText(bookRef.current, renditionRef.current);
}
}, [id, skipToLocation, extractPageText, setIsEPUB]);
// Context value memoization
const contextValue = useMemo(
() => ({
@ -117,6 +387,13 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
currDocText,
clearCurrDoc,
extractPageText,
createFullAudioBook,
bookRef,
renditionRef,
tocRef,
locationRef,
handleLocationChanged,
setRendition,
}),
[
setCurrentDocument,
@ -127,6 +404,9 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
currDocText,
clearCurrDoc,
extractPageText,
createFullAudioBook,
handleLocationChanged,
setRendition,
]
);