Fix for longer audiobooks
This commit is contained in:
Richard Roberson
parent
a937e0ee07
commit
b89d1700e9
6 changed files with 505 additions and 450 deletions
|
|
@ -1,18 +1,14 @@
|
|||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { spawn } from 'child_process';
|
||||
import { writeFile, mkdir, unlink, rmdir } from 'fs/promises';
|
||||
import { createReadStream } from 'fs';
|
||||
import { existsSync } from 'fs';
|
||||
import { writeFile, readFile, mkdir, unlink, rmdir, readdir } from 'fs/promises';
|
||||
import { existsSync, createReadStream } from 'fs';
|
||||
import { join } from 'path';
|
||||
import { randomUUID } from 'crypto';
|
||||
|
||||
interface Chapter {
|
||||
title: string;
|
||||
buffer: number[];
|
||||
}
|
||||
|
||||
interface ConversionRequest {
|
||||
chapters: Chapter[];
|
||||
chapterTitle: string;
|
||||
buffer: number[];
|
||||
bookId?: string;
|
||||
}
|
||||
|
||||
async function getAudioDuration(filePath: string): Promise<number> {
|
||||
|
|
@ -66,19 +62,9 @@ async function runFFmpeg(args: string[]): Promise<void> {
|
|||
});
|
||||
}
|
||||
|
||||
async function cleanup(files: string[], directories: string[]) {
|
||||
await Promise.all([
|
||||
...files.map(f => unlink(f).catch(console.error)),
|
||||
...directories.map(d => rmdir(d).catch(console.error))
|
||||
]);
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const tempFiles: string[] = [];
|
||||
const tempDirs: string[] = [];
|
||||
|
||||
try {
|
||||
// Parse the request body as a stream
|
||||
// Parse the request body
|
||||
const data: ConversionRequest = await request.json();
|
||||
|
||||
// Create temp directory if it doesn't exist
|
||||
|
|
@ -87,70 +73,100 @@ export async function POST(request: NextRequest) {
|
|||
await mkdir(tempDir);
|
||||
}
|
||||
|
||||
// Generate unique filenames
|
||||
const id = randomUUID();
|
||||
const outputPath = join(tempDir, `${id}.m4b`);
|
||||
const metadataPath = join(tempDir, `${id}.txt`);
|
||||
const intermediateDir = join(tempDir, `${id}-intermediate`);
|
||||
// Generate or use existing book ID
|
||||
const bookId = data.bookId || randomUUID();
|
||||
const intermediateDir = join(tempDir, `${bookId}-intermediate`);
|
||||
|
||||
tempFiles.push(outputPath, metadataPath);
|
||||
tempDirs.push(intermediateDir);
|
||||
|
||||
// Create intermediate directory
|
||||
if (!existsSync(intermediateDir)) {
|
||||
await mkdir(intermediateDir);
|
||||
}
|
||||
|
||||
// Process chapters sequentially to avoid memory issues
|
||||
const chapterFiles: { path: string; title: string; duration: number }[] = [];
|
||||
let currentTime = 0;
|
||||
// Count existing files to determine chapter index
|
||||
const files = await readdir(intermediateDir);
|
||||
const wavFiles = files.filter(f => f.endsWith('.wav'));
|
||||
const chapterIndex = wavFiles.length;
|
||||
|
||||
for (let i = 0; i < data.chapters.length; i++) {
|
||||
const chapter = data.chapters[i];
|
||||
const inputPath = join(intermediateDir, `${i}-input.mp3`);
|
||||
const outputPath = join(intermediateDir, `${i}.aac`);
|
||||
|
||||
tempFiles.push(inputPath, outputPath);
|
||||
// Write input file
|
||||
const inputPath = join(intermediateDir, `${chapterIndex}-input.aac`);
|
||||
const outputPath = join(intermediateDir, `${chapterIndex}.wav`);
|
||||
const metadataPath = join(intermediateDir, `${chapterIndex}.meta.json`);
|
||||
|
||||
// Write the chapter audio to a temp file
|
||||
await writeFile(inputPath, Buffer.from(new Uint8Array(data.buffer)));
|
||||
|
||||
// Convert to WAV from raw aac with consistent format
|
||||
await runFFmpeg([
|
||||
'-i', inputPath,
|
||||
'-f', 'wav',
|
||||
'-c:a', 'copy',
|
||||
'-preset', 'ultrafast',
|
||||
'-threads', '0',
|
||||
outputPath
|
||||
]);
|
||||
|
||||
// Write the chapter audio to a temp file using a Buffer chunk size of 64KB
|
||||
const chunkSize = 64 * 1024; // 64KB chunks
|
||||
const buffer = Buffer.from(new Uint8Array(chapter.buffer));
|
||||
const chunks: Buffer[] = [];
|
||||
|
||||
for (let offset = 0; offset < buffer.length; offset += chunkSize) {
|
||||
chunks.push(buffer.slice(offset, offset + chunkSize));
|
||||
}
|
||||
|
||||
await writeFile(inputPath, Buffer.concat(chunks));
|
||||
chunks.length = 0; // Clear chunks array
|
||||
// Get the duration and save metadata
|
||||
const duration = await getAudioDuration(outputPath);
|
||||
await writeFile(metadataPath, JSON.stringify({
|
||||
title: data.chapterTitle,
|
||||
duration,
|
||||
index: chapterIndex
|
||||
}));
|
||||
|
||||
// Copy to AAC format for compatibility with M4B
|
||||
await runFFmpeg([
|
||||
'-i', inputPath,
|
||||
'-c:a', 'copy', // Use copy instead of re-encoding
|
||||
outputPath
|
||||
]);
|
||||
|
||||
const duration = await getAudioDuration(outputPath);
|
||||
|
||||
chapterFiles.push({
|
||||
path: outputPath,
|
||||
title: chapter.title,
|
||||
duration
|
||||
});
|
||||
// Clean up input file
|
||||
await unlink(inputPath).catch(console.error);
|
||||
|
||||
// Clean up input file early
|
||||
await unlink(inputPath).catch(console.error);
|
||||
const index = tempFiles.indexOf(inputPath);
|
||||
if (index > -1) {
|
||||
tempFiles.splice(index, 1);
|
||||
}
|
||||
return NextResponse.json({
|
||||
bookId,
|
||||
chapterIndex,
|
||||
duration
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error processing audio chapter:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to process audio chapter' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const bookId = request.nextUrl.searchParams.get('bookId');
|
||||
if (!bookId) {
|
||||
return NextResponse.json({ error: 'Missing bookId parameter' }, { status: 400 });
|
||||
}
|
||||
|
||||
const tempDir = join(process.cwd(), 'temp');
|
||||
const intermediateDir = join(tempDir, `${bookId}-intermediate`);
|
||||
const outputPath = join(tempDir, `${bookId}.m4b`);
|
||||
const metadataPath = join(tempDir, `${bookId}-metadata.txt`);
|
||||
const listPath = join(tempDir, `${bookId}-list.txt`);
|
||||
|
||||
if (!existsSync(intermediateDir)) {
|
||||
return NextResponse.json({ error: 'Book not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Read all chapter metadata
|
||||
const files = await readdir(intermediateDir);
|
||||
const metaFiles = files.filter(f => f.endsWith('.meta.json'));
|
||||
const chapters: { title: string; duration: number; index: number }[] = [];
|
||||
|
||||
for (const metaFile of metaFiles) {
|
||||
const meta = JSON.parse(await readFile(join(intermediateDir, metaFile), 'utf-8'));
|
||||
chapters.push(meta);
|
||||
}
|
||||
|
||||
// Sort chapters by index
|
||||
chapters.sort((a, b) => a.index - b.index);
|
||||
|
||||
// Create chapter metadata file
|
||||
const metadata: string[] = [];
|
||||
let currentTime = 0;
|
||||
|
||||
chapterFiles.forEach((chapter) => {
|
||||
// Calculate chapter timings based on actual durations
|
||||
chapters.forEach((chapter) => {
|
||||
const startMs = Math.floor(currentTime * 1000);
|
||||
currentTime += chapter.duration;
|
||||
const endMs = Math.floor(currentTime * 1000);
|
||||
|
|
@ -167,72 +183,73 @@ export async function POST(request: NextRequest) {
|
|||
await writeFile(metadataPath, ';FFMETADATA1\n' + metadata.join('\n'));
|
||||
|
||||
// Create list file for concat
|
||||
const listPath = join(tempDir, `${id}-list.txt`);
|
||||
tempFiles.push(listPath);
|
||||
|
||||
await writeFile(
|
||||
listPath,
|
||||
chapterFiles.map(f => `file '${f.path}'`).join('\n')
|
||||
chapters.map(c => `file '${join(intermediateDir, `${c.index}.wav`)}'`).join('\n')
|
||||
);
|
||||
|
||||
// Combine all files into a single M4B with optimized settings
|
||||
// Combine all files into a single M4B
|
||||
await runFFmpeg([
|
||||
'-f', 'concat',
|
||||
'-safe', '0',
|
||||
'-i', listPath,
|
||||
'-i', metadataPath,
|
||||
'-map_metadata', '1',
|
||||
'-c:a', 'copy', // Use macOS AudioToolbox AAC encoder
|
||||
'-c:a', 'copy', // c:a is codec for audio and :a is stream specifier
|
||||
//'-codec', 'wav',
|
||||
//'-b:a', '192k',
|
||||
'-threads', '0', // Use maximum available threads
|
||||
'-movflags', '+faststart',
|
||||
'-preset', 'ultrafast', // Use fastest encoding preset
|
||||
//'-threads', '0', // Use maximum available threads
|
||||
//'-movflags', '+faststart',
|
||||
//'-preset', 'ultrafast', // Use fastest encoding preset
|
||||
outputPath
|
||||
]);
|
||||
|
||||
// Create a readable stream from the output file
|
||||
const fileStream = createReadStream(outputPath);
|
||||
// Stream the file back to the client
|
||||
const stream = createReadStream(outputPath);
|
||||
|
||||
// Clean up function
|
||||
const cleanup = async () => {
|
||||
try {
|
||||
await Promise.all([
|
||||
...chapters.map(c => unlink(join(intermediateDir, `${c.index}.wav`))),
|
||||
...chapters.map(c => unlink(join(intermediateDir, `${c.index}.meta.json`))),
|
||||
unlink(metadataPath),
|
||||
unlink(listPath),
|
||||
unlink(outputPath),
|
||||
rmdir(intermediateDir)
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Cleanup error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Create a web-compatible ReadableStream from the Node.js stream
|
||||
const webStream = new ReadableStream({
|
||||
// Clean up after streaming is complete
|
||||
stream.on('end', cleanup);
|
||||
|
||||
const readableWebStream = new ReadableStream({
|
||||
start(controller) {
|
||||
fileStream.on('data', (chunk) => {
|
||||
stream.on('data', (chunk) => {
|
||||
controller.enqueue(chunk);
|
||||
});
|
||||
|
||||
fileStream.on('end', () => {
|
||||
stream.on('end', () => {
|
||||
controller.close();
|
||||
// Clean up only after the stream has been fully sent
|
||||
cleanup(tempFiles, tempDirs).catch(console.error);
|
||||
});
|
||||
|
||||
fileStream.on('error', (error) => {
|
||||
console.error('Stream error:', error);
|
||||
controller.error(error);
|
||||
cleanup(tempFiles, tempDirs).catch(console.error);
|
||||
stream.on('error', (err) => {
|
||||
controller.error(err);
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
fileStream.destroy();
|
||||
cleanup(tempFiles, tempDirs).catch(console.error);
|
||||
}
|
||||
});
|
||||
|
||||
// Return the streaming response
|
||||
return new NextResponse(webStream, {
|
||||
return new NextResponse(readableWebStream, {
|
||||
headers: {
|
||||
'Content-Type': 'audio/mp4',
|
||||
'Transfer-Encoding': 'chunked'
|
||||
},
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
// Clean up in case of error
|
||||
await cleanup(tempFiles, tempDirs).catch(console.error);
|
||||
|
||||
console.error('Error converting audio:', error);
|
||||
console.error('Error creating M4B:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to convert audio format' },
|
||||
{ error: 'Failed to create M4B file' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { ChevronUpDownIcon, CheckIcon } from '@/components/icons/Icons';
|
|||
import { useEPUB } from '@/contexts/EPUBContext';
|
||||
import { usePDF } from '@/contexts/PDFContext';
|
||||
import { useTimeEstimation } from '@/hooks/useTimeEstimation';
|
||||
import { LoadingSpinner } from './Spinner';
|
||||
import { ProgressPopup } from '@/components/ProgressPopup';
|
||||
|
||||
const isDev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production' || process.env.NODE_ENV == null;
|
||||
|
||||
|
|
@ -127,48 +127,60 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
|
|||
};
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
<>
|
||||
<ProgressPopup
|
||||
isOpen={isGenerating}
|
||||
progress={progress}
|
||||
estimatedTimeRemaining={estimatedTimeRemaining || undefined}
|
||||
onCancel={handleCancel}
|
||||
isProcessing={epub ? isAudioCombining : isPDFAudioCombining}
|
||||
/>
|
||||
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-50" onClose={() => setIsOpen(false)}>
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm" />
|
||||
</TransitionChild>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
|
||||
{isDev && <div className="space-y-2">
|
||||
{!isGenerating ? (
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<TransitionChild
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel className="w-full max-w-md transform rounded-2xl bg-base p-6 text-left align-middle shadow-xl transition-all">
|
||||
{isDev && <div className="space-y-2">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<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]"
|
||||
disabled={isGenerating}
|
||||
className="w-full inline-flex justify-center rounded-lg bg-accent px-4 py-2 text-sm
|
||||
disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100
|
||||
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 {audioFormat.toUpperCase()} (experimental)
|
||||
</Button>
|
||||
<Listbox value={audioFormat} onChange={(format) => setAudioFormat(format as 'mp3' | 'm4b')}>
|
||||
<div className="relative flex self-end">
|
||||
<ListboxButton className="flex self-end justify-center items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-offbase rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1">
|
||||
<ListboxButton
|
||||
disabled={isGenerating}
|
||||
className="flex self-end justify-center items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-offbase rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent">
|
||||
<span>{audioFormat === 'mp3' ? 'MP3' : 'M4B (Audiobook)'}</span>
|
||||
<ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
|
||||
</ListboxButton>
|
||||
|
|
@ -188,233 +200,203 @@ export function DocumentSettings({ isOpen, setIsOpen, epub }: DocViewSettingsPro
|
|||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 mb-4">
|
||||
<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
|
||||
{estimatedTimeRemaining && ` • ${estimatedTimeRemaining} remaining`}
|
||||
</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}
|
||||
>
|
||||
{(epub ? isAudioCombining : isPDFAudioCombining) ? (
|
||||
<div className="w-full h-full flex items-center justify-end">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : (
|
||||
'Cancel and download'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>}
|
||||
<div className="space-y-4">
|
||||
{!epub && <div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Text extraction margins
|
||||
</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{/* Header Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Header</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.header * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.header}
|
||||
onChange={handleMarginChange('header')}
|
||||
onMouseUp={handleMarginChangeComplete('header')}
|
||||
onKeyUp={handleMarginChangeComplete('header')}
|
||||
onTouchEnd={handleMarginChangeComplete('header')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Footer</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.footer * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.footer}
|
||||
onChange={handleMarginChange('footer')}
|
||||
onMouseUp={handleMarginChangeComplete('footer')}
|
||||
onKeyUp={handleMarginChangeComplete('footer')}
|
||||
onTouchEnd={handleMarginChangeComplete('footer')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Left Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Left</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.left * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.left}
|
||||
onChange={handleMarginChange('left')}
|
||||
onMouseUp={handleMarginChangeComplete('left')}
|
||||
onKeyUp={handleMarginChangeComplete('left')}
|
||||
onTouchEnd={handleMarginChangeComplete('left')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Right</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.right * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.right}
|
||||
onChange={handleMarginChange('right')}
|
||||
onMouseUp={handleMarginChangeComplete('right')}
|
||||
onKeyUp={handleMarginChangeComplete('right')}
|
||||
onTouchEnd={handleMarginChangeComplete('right')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted mt-2">
|
||||
Adjust margins to exclude content from edges of the page during text extraction (experimental)
|
||||
</p>
|
||||
</div>
|
||||
<Listbox
|
||||
value={selectedView}
|
||||
onChange={(newView) => updateConfigKey('viewType', newView.id as ViewType)}
|
||||
>
|
||||
<div className="relative z-10 space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Mode</label>
|
||||
<ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-2 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.01] hover:text-accent">
|
||||
<span className="block truncate">{selectedView.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon className="h-5 w-5 text-muted" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
|
||||
{viewTypes.map((view) => (
|
||||
<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'
|
||||
}`
|
||||
}
|
||||
value={view}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
|
||||
{view.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-accent">
|
||||
<CheckIcon className="h-5 w-5" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</ListboxOption>
|
||||
))}
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
{selectedView.id === 'scroll' && (
|
||||
<p className="text-sm text-warning pt-2">
|
||||
Note: Continuous scroll may perform poorly for larger documents.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
</div>}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={skipBlank}
|
||||
onChange={(e) => updateConfigKey('skipBlank', e.target.checked)}
|
||||
className="form-checkbox h-4 w-4 text-accent rounded border-muted"
|
||||
/>
|
||||
<span className="text-sm font-medium text-foreground">Skip blank pages</span>
|
||||
</label>
|
||||
<p className="text-sm text-muted pl-6">
|
||||
Automatically skip pages with no text content
|
||||
</p>
|
||||
</div>
|
||||
{epub && (
|
||||
<div className="space-y-4">
|
||||
{!epub && <div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Text extraction margins
|
||||
</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{/* Header Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Header</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.header * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.header}
|
||||
onChange={handleMarginChange('header')}
|
||||
onMouseUp={handleMarginChangeComplete('header')}
|
||||
onKeyUp={handleMarginChangeComplete('header')}
|
||||
onTouchEnd={handleMarginChangeComplete('header')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Footer</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.footer * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.footer}
|
||||
onChange={handleMarginChange('footer')}
|
||||
onMouseUp={handleMarginChangeComplete('footer')}
|
||||
onKeyUp={handleMarginChangeComplete('footer')}
|
||||
onTouchEnd={handleMarginChangeComplete('footer')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Left Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Left</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.left * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.left}
|
||||
onChange={handleMarginChange('left')}
|
||||
onMouseUp={handleMarginChangeComplete('left')}
|
||||
onKeyUp={handleMarginChangeComplete('left')}
|
||||
onTouchEnd={handleMarginChangeComplete('left')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Margin */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-xs">Right</span>
|
||||
<span className="text-xs font-bold">{Math.round(localMargins.right * 100)}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.2"
|
||||
step="0.01"
|
||||
value={localMargins.right}
|
||||
onChange={handleMarginChange('right')}
|
||||
onMouseUp={handleMarginChangeComplete('right')}
|
||||
onKeyUp={handleMarginChangeComplete('right')}
|
||||
onTouchEnd={handleMarginChangeComplete('right')}
|
||||
className="w-full bg-offbase rounded-lg appearance-none cursor-pointer accent-accent [&::-webkit-slider-runnable-track]:bg-offbase [&::-webkit-slider-runnable-track]:rounded-lg [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-moz-range-track]:bg-offbase [&::-moz-range-track]:rounded-lg [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted mt-2">
|
||||
Adjust margins to exclude content from edges of the page during text extraction (experimental)
|
||||
</p>
|
||||
</div>
|
||||
<Listbox
|
||||
value={selectedView}
|
||||
onChange={(newView) => updateConfigKey('viewType', newView.id as ViewType)}
|
||||
>
|
||||
<div className="relative z-10 space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Mode</label>
|
||||
<ListboxButton className="relative w-full cursor-pointer rounded-lg bg-background py-2 pl-3 pr-10 text-left text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-accent transform transition-transform duration-200 ease-in-out hover:scale-[1.01] hover:text-accent">
|
||||
<span className="block truncate">{selectedView.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon className="h-5 w-5 text-muted" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 shadow-lg ring-1 ring-black/5 focus:outline-none">
|
||||
{viewTypes.map((view) => (
|
||||
<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'
|
||||
}`
|
||||
}
|
||||
value={view}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
|
||||
{view.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-accent">
|
||||
<CheckIcon className="h-5 w-5" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</ListboxOption>
|
||||
))}
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
{selectedView.id === 'scroll' && (
|
||||
<p className="text-sm text-warning pt-2">
|
||||
Note: Continuous scroll may perform poorly for larger documents.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Listbox>
|
||||
|
||||
</div>}
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={epubTheme}
|
||||
onChange={(e) => updateConfigKey('epubTheme', e.target.checked)}
|
||||
checked={skipBlank}
|
||||
onChange={(e) => updateConfigKey('skipBlank', 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>
|
||||
<span className="text-sm font-medium text-foreground">Skip blank pages</span>
|
||||
</label>
|
||||
<p className="text-sm text-muted pl-6">
|
||||
Apply the current app theme to the EPUB viewer
|
||||
Automatically skip pages with no text content
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{epub && (
|
||||
<div className="space-y-1">
|
||||
<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>
|
||||
|
||||
<div className="mt-3 flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm
|
||||
font-medium text-foreground hover:bg-background/90 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] hover:text-accent z-1"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
<div className="mt-3 flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-lg bg-background px-4 py-2 text-sm
|
||||
font-medium text-foreground hover:bg-background/90 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] hover:text-accent z-1"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
66
src/components/ProgressPopup.tsx
Normal file
66
src/components/ProgressPopup.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { Fragment } from 'react';
|
||||
import { Transition } from '@headlessui/react';
|
||||
import { LoadingSpinner } from './Spinner';
|
||||
|
||||
interface ProgressPopupProps {
|
||||
isOpen: boolean;
|
||||
progress: number;
|
||||
estimatedTimeRemaining?: string;
|
||||
onCancel: () => void;
|
||||
isProcessing: boolean;
|
||||
}
|
||||
|
||||
export function ProgressPopup({ isOpen, progress, estimatedTimeRemaining, onCancel, isProcessing }: ProgressPopupProps) {
|
||||
return (
|
||||
<Transition
|
||||
show={isOpen}
|
||||
as={Fragment}
|
||||
enter="transform transition ease-out duration-300"
|
||||
enterFrom="opacity-0 -translate-y-4"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transform transition ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 -translate-y-4"
|
||||
>
|
||||
<div className="fixed inset-x-0 top-2 z-50 pointer-events-none">
|
||||
<div className="w-full max-w-sm mx-auto">
|
||||
<div className="w-full transform rounded-lg bg-offbase p-4 shadow-xl pointer-events-auto">
|
||||
<div className="space-y-2 truncate">
|
||||
<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 text-xs sm:text-sm">
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<span>{Math.round(progress)}% complete</span>
|
||||
{estimatedTimeRemaining && <div>
|
||||
<span>•</span>
|
||||
<span>{` ~${estimatedTimeRemaining}`}</span>
|
||||
</div>}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-lg px-2.5 py-1
|
||||
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={onCancel}
|
||||
>
|
||||
{isProcessing ? (
|
||||
<div className="w-full h-full flex items-center justify-end">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : (
|
||||
'Cancel and download'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@ import { setLastDocumentLocation } from '@/utils/indexedDB';
|
|||
import { SpineItem } from 'epubjs/types/section';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useConfig } from './ConfigContext';
|
||||
import { combineAudioChunks } from '@/utils/audio';
|
||||
|
||||
interface EPUBContextType {
|
||||
currDocData: ArrayBuffer | undefined;
|
||||
|
|
@ -230,7 +231,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
|
|||
// Process each section
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
if (signal?.aborted) {
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format);
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format, setIsAudioCombining);
|
||||
return partialBuffer;
|
||||
}
|
||||
|
||||
|
|
@ -292,7 +293,7 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
|
|||
} catch (error) {
|
||||
if (error instanceof Error && error.name === 'AbortError') {
|
||||
console.log('TTS request aborted');
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format);
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format, setIsAudioCombining);
|
||||
return partialBuffer;
|
||||
}
|
||||
console.error('Error processing section:', error);
|
||||
|
|
@ -303,59 +304,13 @@ export function EPUBProvider({ children }: { children: ReactNode }) {
|
|||
throw new Error('No audio was generated from the book content');
|
||||
}
|
||||
|
||||
return combineAudioChunks(audioChunks, format);
|
||||
return combineAudioChunks(audioChunks, format, setIsAudioCombining);
|
||||
} catch (error) {
|
||||
console.error('Error creating audiobook:', error);
|
||||
throw error;
|
||||
}
|
||||
}, [extractBookText, apiKey, baseUrl, voice, voiceSpeed]);
|
||||
|
||||
const combineAudioChunks = async (
|
||||
audioChunks: { buffer: ArrayBuffer; title?: string; startTime: number }[],
|
||||
format: 'mp3' | 'm4b'
|
||||
): Promise<ArrayBuffer> => {
|
||||
setIsAudioCombining(true);
|
||||
try {
|
||||
if (format === 'm4b') {
|
||||
// Convert to M4B format using the audio conversion API
|
||||
const response = await fetch('/api/audio/convert', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
chapters: audioChunks
|
||||
.filter(chunk => chunk.title) // Only include chunks with titles
|
||||
.map(chunk => ({
|
||||
title: chunk.title,
|
||||
buffer: Array.from(new Uint8Array(chunk.buffer))
|
||||
}))
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to convert audio to M4B format');
|
||||
}
|
||||
|
||||
return response.arrayBuffer();
|
||||
}
|
||||
|
||||
// For MP3, just concatenate the buffers
|
||||
const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.buffer.byteLength, 0);
|
||||
const combinedBuffer = new Uint8Array(totalLength);
|
||||
|
||||
let offset = 0;
|
||||
for (const chunk of audioChunks) {
|
||||
combinedBuffer.set(new Uint8Array(chunk.buffer), offset);
|
||||
offset += chunk.buffer.byteLength;
|
||||
}
|
||||
|
||||
return combinedBuffer.buffer;
|
||||
} finally {
|
||||
setIsAudioCombining(false);
|
||||
}
|
||||
}
|
||||
|
||||
const setRendition = useCallback((rendition: Rendition) => {
|
||||
bookRef.current = rendition.book;
|
||||
renditionRef.current = rendition;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ import {
|
|||
} from '@/utils/pdf';
|
||||
|
||||
import type { PDFDocumentProxy } from 'pdfjs-dist';
|
||||
import { combineAudioChunks } from '@/utils/audio';
|
||||
|
||||
/**
|
||||
* Interface defining all available methods and properties in the PDF context
|
||||
|
|
@ -230,7 +231,7 @@ export function PDFProvider({ children }: { children: ReactNode }) {
|
|||
// Second pass: process text into audio
|
||||
for (let i = 0; i < textPerPage.length; i++) {
|
||||
if (signal?.aborted) {
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format);
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format, setIsAudioCombining);
|
||||
return partialBuffer;
|
||||
}
|
||||
|
||||
|
|
@ -282,7 +283,7 @@ export function PDFProvider({ children }: { children: ReactNode }) {
|
|||
} catch (error) {
|
||||
if (error instanceof Error && error.name === 'AbortError') {
|
||||
console.log('TTS request aborted');
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format);
|
||||
const partialBuffer = await combineAudioChunks(audioChunks, format, setIsAudioCombining);
|
||||
return partialBuffer;
|
||||
}
|
||||
console.error('Error processing page:', error);
|
||||
|
|
@ -293,59 +294,13 @@ export function PDFProvider({ children }: { children: ReactNode }) {
|
|||
throw new Error('No audio was generated from the PDF content');
|
||||
}
|
||||
|
||||
return combineAudioChunks(audioChunks, format);
|
||||
return combineAudioChunks(audioChunks, format, setIsAudioCombining);
|
||||
} catch (error) {
|
||||
console.error('Error creating audiobook:', error);
|
||||
throw error;
|
||||
}
|
||||
}, [pdfDocument, headerMargin, footerMargin, leftMargin, rightMargin, apiKey, baseUrl, voice, voiceSpeed]);
|
||||
|
||||
const combineAudioChunks = async (
|
||||
audioChunks: { buffer: ArrayBuffer; title?: string; startTime: number }[],
|
||||
format: 'mp3' | 'm4b'
|
||||
): Promise<ArrayBuffer> => {
|
||||
setIsAudioCombining(true);
|
||||
try {
|
||||
if (format === 'm4b') {
|
||||
// Convert to M4B format using the audio conversion API
|
||||
const response = await fetch('/api/audio/convert', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
chapters: audioChunks
|
||||
.filter(chunk => chunk.title) // Only include chunks with titles
|
||||
.map(chunk => ({
|
||||
title: chunk.title,
|
||||
buffer: Array.from(new Uint8Array(chunk.buffer))
|
||||
}))
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to convert audio to M4B format');
|
||||
}
|
||||
|
||||
return response.arrayBuffer();
|
||||
}
|
||||
|
||||
// For MP3, just concatenate the buffers
|
||||
const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.buffer.byteLength, 0);
|
||||
const combinedBuffer = new Uint8Array(totalLength);
|
||||
|
||||
let offset = 0;
|
||||
for (const chunk of audioChunks) {
|
||||
combinedBuffer.set(new Uint8Array(chunk.buffer), offset);
|
||||
offset += chunk.buffer.byteLength;
|
||||
}
|
||||
|
||||
return combinedBuffer.buffer;
|
||||
} finally {
|
||||
setIsAudioCombining(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Context value memoization
|
||||
const contextValue = useMemo(
|
||||
() => ({
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
* Utility functions for audio processing
|
||||
*/
|
||||
|
||||
interface AudioChunk {
|
||||
buffer: ArrayBuffer;
|
||||
title?: string;
|
||||
startTime: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a URL from an ArrayBuffer containing MP3 audio data
|
||||
* @param buffer The ArrayBuffer containing MP3 audio data
|
||||
|
|
@ -10,4 +16,78 @@
|
|||
export const audioBufferToURL = (buffer: ArrayBuffer): string => {
|
||||
const blob = new Blob([buffer], { type: 'audio/mp3' });
|
||||
return URL.createObjectURL(blob);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Combines audio chunks into a single audio file
|
||||
* @param audioChunks Array of audio chunks with metadata
|
||||
* @param format Output format ('mp3' or 'm4b')
|
||||
* @param setIsAudioCombining Optional callback to track combining state
|
||||
* @returns Promise resolving to the combined audio buffer
|
||||
*/
|
||||
export const combineAudioChunks = async (
|
||||
audioChunks: AudioChunk[],
|
||||
format: 'mp3' | 'm4b',
|
||||
setIsAudioCombining?: (state: boolean) => void
|
||||
): Promise<ArrayBuffer> => {
|
||||
if (setIsAudioCombining) {
|
||||
setIsAudioCombining(true);
|
||||
}
|
||||
|
||||
try {
|
||||
if (format === 'm4b') {
|
||||
// Filter out chunks without titles and silence buffers
|
||||
const titledChunks = audioChunks.filter(chunk => chunk.title && chunk.buffer.byteLength > 48000);
|
||||
|
||||
let bookId: string | undefined;
|
||||
|
||||
// Upload each chunk sequentially and get book ID
|
||||
for (const chunk of titledChunks) {
|
||||
const response = await fetch('/api/audio/convert', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
chapterTitle: chunk.title,
|
||||
buffer: Array.from(new Uint8Array(chunk.buffer)),
|
||||
bookId // Will be undefined for first chunk, then set for subsequent ones
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to upload audio chunk');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
bookId = result.bookId; // Save book ID for subsequent chunks
|
||||
}
|
||||
|
||||
if (!bookId) {
|
||||
throw new Error('No book ID received from server');
|
||||
}
|
||||
|
||||
// Get the final combined M4B file
|
||||
const m4bResponse = await fetch(`/api/audio/convert?bookId=${bookId}`);
|
||||
if (!m4bResponse.ok) {
|
||||
throw new Error('Failed to get combined M4B');
|
||||
}
|
||||
|
||||
return await m4bResponse.arrayBuffer();
|
||||
}
|
||||
|
||||
// For MP3, just concatenate the buffers
|
||||
const totalLength = audioChunks.reduce((acc, chunk) => acc + chunk.buffer.byteLength, 0);
|
||||
const combinedBuffer = new Uint8Array(totalLength);
|
||||
|
||||
let offset = 0;
|
||||
for (const chunk of audioChunks) {
|
||||
combinedBuffer.set(new Uint8Array(chunk.buffer), offset);
|
||||
offset += chunk.buffer.byteLength;
|
||||
}
|
||||
|
||||
return combinedBuffer.buffer;
|
||||
} finally {
|
||||
if (setIsAudioCombining) setIsAudioCombining(false);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue