| 1 | import { useEffect, useState } from 'react' |
| 2 | import { ScrollArea } from '@renderer/components/ui/ScrollArea' |
| 3 | import { GenerationThumbnail } from './GenerationThumbnail' |
| 4 | import type { GenerationPreviewPage } from './types' |
| 5 | import type { SlideSizePreset } from '@shared/slide-size' |
| 6 | |
| 7 | export function GenerationPreviewGrid({ |
| 8 | pages, |
| 9 | slideSize |
| 10 | }: { |
| 11 | pages: GenerationPreviewPage[] |
| 12 | slideSize: SlideSizePreset | null |
| 13 | }): React.JSX.Element { |
| 14 | const [previewEnabled, setPreviewEnabled] = useState( |
| 15 | () => typeof document === 'undefined' || document.visibilityState === 'visible' |
| 16 | ) |
| 17 | |
| 18 | useEffect(() => { |
| 19 | const updatePreviewVisibility = (): void => { |
| 20 | setPreviewEnabled(document.visibilityState === 'visible') |
| 21 | } |
| 22 | document.addEventListener('visibilitychange', updatePreviewVisibility) |
| 23 | return () => document.removeEventListener('visibilitychange', updatePreviewVisibility) |
| 24 | }, []) |
| 25 | |
| 26 | return ( |
| 27 | <ScrollArea className="min-h-0 flex-1" viewportClassName="pr-2 pb-2"> |
| 28 | <div className="grid grid-cols-[repeat(auto-fill,minmax(230px,1fr))] gap-4"> |
| 29 | {pages.map((page, index) => ( |
| 30 | <div |
| 31 | key={page.id} |
| 32 | className="min-w-0 w-full" |
| 33 | style={{ |
| 34 | animation: `gen-page-rise 420ms ease ${Math.min(index * 55, 440)}ms both` |
| 35 | }} |
| 36 | > |
| 37 | <GenerationThumbnail |
| 38 | page={page} |
| 39 | previewEnabled={previewEnabled} |
| 40 | slideSize={slideSize} |
| 41 | /> |
| 42 | </div> |
| 43 | ))} |
| 44 | </div> |
| 45 | </ScrollArea> |
| 46 | ) |
| 47 | } |
| 48 |