feat: PdfPickerModal — page selection grid with lazy thumbnail loading
This commit is contained in:
Hiren Kangad
@@ -0,0 +1,292 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import api from '../api';
|
||||
import { getSocket } from '../socket';
|
||||
|
||||
interface PdfPickerModalProps {
|
||||
imageId: string;
|
||||
fileName: string;
|
||||
pageCount: number;
|
||||
dimensions: Array<{ w: number; h: number }>;
|
||||
boardId: string;
|
||||
onPlace: (selectedPages: number[]) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const MAX_SELECTIONS = 50;
|
||||
const THUMB_BATCH = 20;
|
||||
const GRID_COLS = 5;
|
||||
|
||||
export default function PdfPickerModal({
|
||||
imageId, fileName, pageCount, dimensions, boardId, onPlace, onCancel,
|
||||
}: PdfPickerModalProps) {
|
||||
const [selected, setSelected] = useState<Set<number>>(new Set());
|
||||
const [thumbs, setThumbs] = useState<Map<number, string>>(new Map());
|
||||
const [thumbsLoaded, setThumbsLoaded] = useState(0);
|
||||
const [requestedUpTo, setRequestedUpTo] = useState(0);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const requestingRef = useRef(false);
|
||||
|
||||
// Request first batch of thumbnails on mount
|
||||
useEffect(() => {
|
||||
requestThumbnails(1, Math.min(THUMB_BATCH, pageCount));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Listen for socket thumbnail events
|
||||
useEffect(() => {
|
||||
const socket = getSocket();
|
||||
if (!socket) return;
|
||||
|
||||
const handler = (data: any) => {
|
||||
if (!data || data.imageId !== imageId) return;
|
||||
if (data.type === 'pdf-thumbnail' && data.status === 'done') {
|
||||
const page: number = data.pageNumber;
|
||||
const key: string = data.thumbAssetKey;
|
||||
if (page && key) {
|
||||
setThumbs(prev => {
|
||||
const next = new Map(prev);
|
||||
next.set(page, key);
|
||||
return next;
|
||||
});
|
||||
setThumbsLoaded(prev => prev + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
socket.on('media:job:update', handler);
|
||||
return () => { socket.off('media:job:update', handler); };
|
||||
}, [imageId]);
|
||||
|
||||
const requestThumbnails = useCallback(async (from: number, to: number) => {
|
||||
if (requestingRef.current) return;
|
||||
if (from > pageCount) return;
|
||||
const clampedTo = Math.min(to, pageCount);
|
||||
if (clampedTo <= requestedUpTo) return;
|
||||
|
||||
requestingRef.current = true;
|
||||
const pages: number[] = [];
|
||||
for (let p = Math.max(from, requestedUpTo + 1); p <= clampedTo; p++) pages.push(p);
|
||||
|
||||
if (pages.length > 0) {
|
||||
try {
|
||||
await api.post(`/api/boards/${boardId}/pdf-thumbnails`, {
|
||||
imageId,
|
||||
pages,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[PdfPickerModal] thumbnail request failed:', err);
|
||||
}
|
||||
}
|
||||
setRequestedUpTo(clampedTo);
|
||||
requestingRef.current = false;
|
||||
}, [boardId, imageId, pageCount, requestedUpTo]);
|
||||
|
||||
// Lazy scroll loading — request next batch when near bottom
|
||||
const handleScroll = useCallback(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 200;
|
||||
if (nearBottom && requestedUpTo < pageCount) {
|
||||
requestThumbnails(requestedUpTo + 1, requestedUpTo + THUMB_BATCH);
|
||||
}
|
||||
}, [requestThumbnails, requestedUpTo, pageCount]);
|
||||
|
||||
const togglePage = (page: number) => {
|
||||
setSelected(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(page)) {
|
||||
next.delete(page);
|
||||
} else if (next.size < MAX_SELECTIONS) {
|
||||
next.add(page);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const selectAll = () => {
|
||||
const all = new Set<number>();
|
||||
const max = Math.min(pageCount, MAX_SELECTIONS);
|
||||
for (let i = 1; i <= max; i++) all.add(i);
|
||||
setSelected(all);
|
||||
};
|
||||
|
||||
const deselectAll = () => {
|
||||
setSelected(new Set());
|
||||
};
|
||||
|
||||
const handlePlace = () => {
|
||||
if (selected.size === 0) return;
|
||||
const sorted = Array.from(selected).sort((a, b) => a - b);
|
||||
onPlace(sorted);
|
||||
};
|
||||
|
||||
// Build asset URL from key
|
||||
const thumbUrl = (key: string) => `/api/assets/${key}`;
|
||||
|
||||
return (
|
||||
<div style={overlayStyle} onClick={onCancel}>
|
||||
<div style={panelStyle} onClick={e => e.stopPropagation()}>
|
||||
{/* Header */}
|
||||
<div style={headerStyle}>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 16, fontWeight: 600, color: '#e0e0e0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{fileName}
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#888', marginTop: 2 }}>
|
||||
{pageCount} page{pageCount !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button style={smallBtnStyle} onClick={selectAll}>Select all</button>
|
||||
<button style={smallBtnStyle} onClick={deselectAll}>Deselect all</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sub-header: loading counter */}
|
||||
<div style={{ padding: '4px 20px 8px', fontSize: 12, color: '#666' }}>
|
||||
Loading thumbnails... ({thumbsLoaded}/{pageCount})
|
||||
</div>
|
||||
|
||||
{/* Scrollable thumbnail grid */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
style={gridContainerStyle}
|
||||
>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: `repeat(${GRID_COLS}, 1fr)`, gap: 8 }}>
|
||||
{Array.from({ length: pageCount }, (_, i) => {
|
||||
const page = i + 1;
|
||||
const dim = dimensions[i] || { w: 612, h: 792 };
|
||||
const aspect = dim.h / dim.w;
|
||||
const isSelected = selected.has(page);
|
||||
const thumbKey = thumbs.get(page);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={page}
|
||||
onClick={() => togglePage(page)}
|
||||
style={{
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
border: isSelected ? '2px solid #4a9eff' : '2px solid transparent',
|
||||
background: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
<div style={{ paddingTop: `${aspect * 100}%`, position: 'relative' }}>
|
||||
{thumbKey ? (
|
||||
<img
|
||||
src={thumbUrl(thumbKey)}
|
||||
alt={`Page ${page}`}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0, left: 0, width: '100%', height: '100%',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 0, left: 0, width: '100%', height: '100%',
|
||||
background: '#2a2a2a',
|
||||
animation: 'pdfPickerPulse 1.5s ease-in-out infinite',
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
{/* Page number badge */}
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 4, right: 4,
|
||||
background: 'rgba(0,0,0,0.7)', color: '#ccc',
|
||||
fontSize: 10, padding: '1px 5px', borderRadius: 3,
|
||||
}}>
|
||||
{page}
|
||||
</div>
|
||||
{/* Selection checkmark */}
|
||||
{isSelected && (
|
||||
<div style={{
|
||||
position: 'absolute', top: 4, right: 4,
|
||||
width: 20, height: 20, borderRadius: '50%',
|
||||
background: '#4a9eff', display: 'flex',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 12, color: '#fff',
|
||||
}}>
|
||||
✓
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={footerStyle}>
|
||||
<button style={cancelBtnStyle} onClick={onCancel}>Cancel</button>
|
||||
<button
|
||||
style={{
|
||||
...placeBtnStyle,
|
||||
opacity: selected.size === 0 ? 0.4 : 1,
|
||||
cursor: selected.size === 0 ? 'default' : 'pointer',
|
||||
}}
|
||||
disabled={selected.size === 0}
|
||||
onClick={handlePlace}
|
||||
>
|
||||
Place {selected.size} page{selected.size !== 1 ? 's' : ''}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keyframe animation for pulsing placeholder */}
|
||||
<style>{`
|
||||
@keyframes pdfPickerPulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Styles
|
||||
const overlayStyle: React.CSSProperties = {
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
background: 'rgba(0,0,0,0.6)', zIndex: 10000,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
};
|
||||
|
||||
const panelStyle: React.CSSProperties = {
|
||||
width: 700, maxHeight: '80vh', background: '#242424',
|
||||
borderRadius: 8, display: 'flex', flexDirection: 'column',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
|
||||
};
|
||||
|
||||
const headerStyle: React.CSSProperties = {
|
||||
padding: '16px 20px 8px', display: 'flex', alignItems: 'center', gap: 12,
|
||||
borderBottom: '1px solid #333',
|
||||
};
|
||||
|
||||
const smallBtnStyle: React.CSSProperties = {
|
||||
background: '#333', border: 'none', color: '#ccc',
|
||||
padding: '4px 10px', borderRadius: 4, fontSize: 12, cursor: 'pointer',
|
||||
};
|
||||
|
||||
const gridContainerStyle: React.CSSProperties = {
|
||||
flex: 1, overflowY: 'auto', padding: '8px 20px',
|
||||
minHeight: 0,
|
||||
};
|
||||
|
||||
const footerStyle: React.CSSProperties = {
|
||||
padding: '12px 20px', borderTop: '1px solid #333',
|
||||
display: 'flex', justifyContent: 'flex-end', gap: 10,
|
||||
};
|
||||
|
||||
const cancelBtnStyle: React.CSSProperties = {
|
||||
background: 'transparent', border: '1px solid #555', color: '#aaa',
|
||||
padding: '8px 16px', borderRadius: 4, cursor: 'pointer', fontSize: 13,
|
||||
};
|
||||
|
||||
const placeBtnStyle: React.CSSProperties = {
|
||||
background: '#4a9eff', border: 'none', color: '#fff',
|
||||
padding: '8px 20px', borderRadius: 4, fontSize: 13, fontWeight: 600,
|
||||
};
|
||||
Reference in New Issue
Block a user