Image Viewer

1"use client";
2 
3import * as React from "react";
4 
5import {
6  createFrameSource,
7  isTiffBytes,
8  type FrameDescriptor,
9  type FrameSource,
10} from "@/lib/image-frame-source";
11import {
12  createViewerResource,
13  type ViewerResource,
14} from "@/lib/viewer-resource";
15import { ImageViewerFallback } from "@/components/ui/image-viewer-chrome";
16import {
17  getImageSource,
18  ImageViewerContent,
19  resetImageSourceCacheForTests,
20} from "@/components/ui/image-viewer-content";
21import type {
22  ImageViewerHandle,
23  ImageViewerProps,
24} from "@/components/ui/image-viewer-types";
25import { useIsClient } from "@/components/ui/use-is-client";
26import { ViewerErrorBoundary } from "@/components/ui/viewer-error";
27 
28export type {
29  ImageDocumentSource,
30  ImageFrameOverlayProps,
31  ImageFrameRenderTiming,
32  ImageViewerHandle,
33  ImageViewerProps,
34} from "@/components/ui/image-viewer-types";
35export type { FrameDescriptor, FrameSource };
36export { getImageSource, resetImageSourceCacheForTests };
37 
38export type ImageResourceContentProps = Omit<ImageViewerProps, "source"> & {
39  resource: ViewerResource;
40};
41 
42export type ImageViewerProviderProps = {
43  children: React.ReactNode;
44  resource: ViewerResource;
45};
46 
47export type ImageViewerFramesProps = Omit<
48  ImageResourceContentProps,
49  "resource"
50>;
51 
52export const ImageViewer = React.forwardRef<
53  ImageViewerHandle,
54  ImageViewerProps
55>(function ImageViewer(props, ref) {
56  const { source, ...resourceProps } = props;
57  const resource = React.useMemo(() => createViewerResource(source), [source]);
58  return (
59    <ImageResourceContent {...resourceProps} ref={ref} resource={resource} />
60  );
61});
62 
63export const ImageResourceContent = React.forwardRef<
64  ImageViewerHandle,
65  ImageResourceContentProps
66>(function ImageResourceContent(props, ref) {
67  const isClient = useIsClient();
68  const resource = props.resource;
69  if (!isClient) {
70    return (
71      <ImageViewerFallback
72        bare={props.bare}
73        className={props.className}
74        fallbackFrameSize={props.fallbackFrameSize}
75        scale={props.scale ?? props.defaultScale}
76        controls={props.controls}
77      />
78    );
79  }
80  return (
81    <ViewerErrorBoundary
82      className={props.className}
83      download={
84        props.controls === false || props.download === false
85          ? null
86          : resource.originalDownload
87      }
88      format="image"
89      resetKey={resource.keys.resource}
90      sourceKind={resource.sourceKind}
91    >
92      <React.Suspense
93        fallback={
94// … truncated