This commit is contained in:
Reece Browne 2025-09-18 08:44:57 +01:00
parent 312fc2d615
commit 1598057ed0
2 changed files with 27 additions and 52 deletions

View File

@ -20,6 +20,8 @@ import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
import { Rotation } from '@embedpdf/models';
import { CustomSearchLayer } from './CustomSearchLayer';
import { ZoomAPIBridge } from './ZoomAPIBridge';
import ToolLoadingFallback from '../tools/ToolLoadingFallback';
import { Center, Stack, Text } from '@mantine/core';
import { ScrollAPIBridge } from './ScrollAPIBridge';
import { SelectionAPIBridge } from './SelectionAPIBridge';
import { PanAPIBridge } from './PanAPIBridge';
@ -121,55 +123,31 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
// Early return if no file or URL provided
if (!file && !url) {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
background: 'var(--bg-surface)',
color: 'var(--text-secondary)',
}}>
<div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '24px', marginBottom: '16px' }}>📄</div>
<div>No PDF provided</div>
</div>
</div>
<Center h="100%" w="100%">
<Stack align="center" gap="md">
<div style={{ fontSize: '24px' }}>📄</div>
<Text c="dimmed" size="sm">
No PDF provided
</Text>
</Stack>
</Center>
);
}
if (isLoading || !engine || !pdfUrl) {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
background: 'var(--bg-surface)',
color: 'var(--text-secondary)',
}}>
<div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '24px', marginBottom: '16px' }}></div>
<div>Loading PDF Engine...</div>
</div>
</div>
);
return <ToolLoadingFallback toolName="PDF Engine" />;
}
if (error) {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
background: 'var(--bg-surface)',
color: 'var(--color-red-500)',
}}>
<div style={{ textAlign: 'center' }}>
<div style={{ fontSize: '24px', marginBottom: '16px' }}></div>
<div>Error loading PDF engine: {error.message}</div>
</div>
</div>
<Center h="100%" w="100%">
<Stack align="center" gap="md">
<div style={{ fontSize: '24px' }}></div>
<Text c="red" size="sm" style={{ textAlign: 'center' }}>
Error loading PDF engine: {error.message}
</Text>
</Stack>
</Center>
);
}

View File

@ -15,6 +15,13 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
const scrollState = getScrollState();
const thumbnailAPI = getThumbnailAPI();
// Clear thumbnails when sidebar closes
useEffect(() => {
if (!visible) {
setThumbnails({});
}
}, [visible]);
// Generate thumbnails when sidebar becomes visible
useEffect(() => {
if (!visible || scrollState.totalPages === 0) return;
@ -45,7 +52,6 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
} catch (error) {
console.error('Failed to generate thumbnail for page', pageIndex + 1, error);
// Set a placeholder or error state
setThumbnails(prev => ({
...prev,
[pageIndex]: 'error'
@ -55,16 +61,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
};
generateThumbnails();
// Cleanup blob URLs when component unmounts
return () => {
Object.values(thumbnails).forEach(url => {
if (url.startsWith('blob:')) {
URL.revokeObjectURL(url);
}
});
};
}, [visible, scrollState.totalPages, thumbnailAPI]);
}, [visible, scrollState.totalPages, thumbnailAPI, thumbnails]);
const handlePageClick = (pageIndex: number) => {
const pageNumber = pageIndex + 1; // Convert to 1-based