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

View File

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