PDF Viewer Thumbnails

1"use client";
2 
3import * as React from "react";
4 
5import { clearPdfDocumentResource } from "@/lib/pdf-document-resource";
6import { cn } from "@/lib/utils";
7import type { ViewerResource } from "@/lib/viewer-resource";
8import { Spinner } from "@/components/ui/spinner";
9 
10import {
11  buildPdfThumbnailLayout,
12  PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT,
13  PDF_THUMBNAIL_OVERSCAN_PX,
14  type PdfThumbnailShape,
15} from "./pdf-thumbnail-layout";
16import {
17  useOptionalFileViewerSidebarMotion,
18  type FileViewerSidebarMotion,
19} from "./file-viewer-renderer-frame";
20import { PdfThumbnailRailViewport } from "./pdf-thumbnail-rail";
21import { usePdfViewerThumbnails } from "./pdf-viewer-context";
22import { useIsClient } from "./use-is-client";
23import { usePdfThumbnailDocument } from "./use-pdf-thumbnail-document";
24import { usePdfThumbnailPageMetrics } from "./use-pdf-thumbnail-page-metrics";
25import { usePdfThumbnailWindow } from "./use-pdf-thumbnail-window";
26import { useThumbnailRailFollow } from "./use-thumbnail-rail-follow";
27import { usePdfRenderedPageCache } from "./pdf-viewer-render-cache";
28import { ViewerErrorBoundary } from "./viewer-error";
29import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
30import { joinEffectKey } from "@/lib/effect-key";
31 
32const PDF_THUMBNAIL_RENDER_RESUME_DELAY_MS = 1400;
33const PDF_THUMBNAIL_CLOSED_WARM_DELAY_MS = 2200;
34 
35export interface PdfViewerThumbnailsProps {
36  /** Thumbnail image width in CSS pixels. The sidebar shell owns rail width. */
37  thumbnailWidth?: number;
38  /** Preserve page aspect or crop each page preview into a square frame. */
39  thumbnailShape?: PdfThumbnailShape;
40  className?: string;
41}
42 
43export interface PdfThumbnailRailProps {
44  /** Same resource object passed to PdfResourceContent. */
45  resource: ViewerResource;
46  /** 1-based current page; its thumbnail is highlighted. */
47  currentPage?: number | null;
48  /** Click a thumbnail to jump the document to that page. */
49  onSelectPage?: (page: number) => void;
50  /** Thumbnail image width in CSS pixels. The sidebar shell owns rail width. */
51  thumbnailWidth?: number;
52  /** Preserve page aspect or crop each page preview into a square frame. */
53  thumbnailShape?: PdfThumbnailShape;
54  className?: string;
55}
56 
57export function PdfViewerThumbnails({
58  className,
59  thumbnailShape,
60  thumbnailWidth,
61}: PdfViewerThumbnailsProps) {
62  const thumbnails = usePdfViewerThumbnails();
63  const sidebarMotion = useOptionalFileViewerSidebarMotion();
64// … truncated