mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-09-26 17:52:59 +02:00
Tweaks
This commit is contained in:
parent
312fc2d615
commit
1598057ed0
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user