This commit is contained in:
Reece Browne 2025-09-19 11:38:53 +01:00
parent 1174b6a4da
commit 0e1da982b6
3 changed files with 10 additions and 12 deletions

View File

@ -33,7 +33,6 @@ import { RotateAPIBridge } from './RotateAPIBridge';
interface LocalEmbedPDFProps { interface LocalEmbedPDFProps {
file?: File | Blob; file?: File | Blob;
url?: string | null; url?: string | null;
colorScheme?: 'light' | 'dark' | 'auto'; // Optional since we use CSS variables
} }
export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) { export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {

View File

@ -5,13 +5,12 @@ import { useViewer } from '../../contexts/ViewerContext';
interface ThumbnailSidebarProps { interface ThumbnailSidebarProps {
visible: boolean; visible: boolean;
onToggle: () => void; onToggle: () => void;
colorScheme?: 'light' | 'dark' | 'auto'; // Optional since we use CSS variables
} }
export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSidebarProps) { export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSidebarProps) {
const { getScrollState, scrollActions, getThumbnailAPI } = useViewer(); const { getScrollState, scrollActions, getThumbnailAPI } = useViewer();
const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({}); const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({});
const scrollState = getScrollState(); const scrollState = getScrollState();
const thumbnailAPI = getThumbnailAPI(); const thumbnailAPI = getThumbnailAPI();
@ -39,11 +38,11 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
try { try {
const thumbTask = thumbnailAPI.renderThumb(pageIndex, 1.0); const thumbTask = thumbnailAPI.renderThumb(pageIndex, 1.0);
// Convert Task to Promise and handle properly // Convert Task to Promise and handle properly
thumbTask.toPromise().then((thumbBlob: Blob) => { thumbTask.toPromise().then((thumbBlob: Blob) => {
const thumbUrl = URL.createObjectURL(thumbBlob); const thumbUrl = URL.createObjectURL(thumbBlob);
setThumbnails(prev => ({ setThumbnails(prev => ({
...prev, ...prev,
[pageIndex]: thumbUrl [pageIndex]: thumbUrl
@ -55,7 +54,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
[pageIndex]: 'error' [pageIndex]: 'error'
})); }));
}); });
} 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);
setThumbnails(prev => ({ setThumbnails(prev => ({
@ -96,7 +95,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
{/* Thumbnails Container */} {/* Thumbnails Container */}
<ScrollArea style={{ flex: 1 }}> <ScrollArea style={{ flex: 1 }}>
<Box p="sm"> <Box p="sm">
<div style={{ <div style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '12px' gap: '12px'
@ -112,7 +111,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
backgroundColor: scrollState.currentPage === pageIndex + 1 backgroundColor: scrollState.currentPage === pageIndex + 1
? 'var(--color-primary-100)' ? 'var(--color-primary-100)'
: 'transparent', : 'transparent',
border: scrollState.currentPage === pageIndex + 1 border: scrollState.currentPage === pageIndex + 1
? '2px solid var(--color-primary-500)' ? '2px solid var(--color-primary-500)'
: '2px solid transparent', : '2px solid transparent',
transition: 'all 0.2s ease', transition: 'all 0.2s ease',
@ -134,7 +133,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
> >
{/* Thumbnail Image */} {/* Thumbnail Image */}
{thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? ( {thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
<img <img
src={thumbnails[pageIndex]} src={thumbnails[pageIndex]}
alt={`Page ${pageIndex + 1} thumbnail`} alt={`Page ${pageIndex + 1} thumbnail`}
style={{ style={{
@ -176,7 +175,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
Loading... Loading...
</div> </div>
)} )}
{/* Page Number */} {/* Page Number */}
<div style={{ <div style={{
fontSize: '12px', fontSize: '12px',
@ -196,4 +195,4 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
)} )}
</> </>
); );
} }

View File

@ -12,5 +12,5 @@ export default defineConfig({
}, },
}, },
}, },
base: "http://localhost:8080", base: "./",
}); });