feat: new pages viewer

components/view/DataroomViewer.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import React from "react";
 
 import { DataroomBrand, DataroomFolder } from "@prisma/client";

components/view/PagesViewerNew.tsx

@@ -789,8 +789,8 @@ export default function PagesViewer({
         embeddedLinks={pages[pageNumber - 1]?.embeddedLinks}
         isDataroom={dataroomId ? true : false}
         setDocumentData={setDocumentData}
-        documentRefs={pinchRefs}
-        isVertical={isVertical}
+        // documentRefs={pinchRefs}
+        // isVertical={isVertical}
         isMobile={isMobile}
         isPreview={isPreview}
         hasWatermark={watermarkConfig ? true : false}

components/view/dataroom/dataroom-view.tsx

@@ -21,11 +21,12 @@ import { SUPPORTED_DOCUMENT_SIMPLE_TYPES } from "@/lib/constants";
 import { LinkWithDataroom, NotionTheme, WatermarkConfig } from "@/lib/types";
 
 import DataroomViewer from "../DataroomViewer";
-import PagesViewerNew from "../PagesViewerNew";
 import EmailVerificationMessage from "../email-verification-form";
 import AdvancedExcelViewer from "../viewer/advanced-excel-viewer";
 import DownloadOnlyViewer from "../viewer/download-only-viewer";
 import ImageViewer from "../viewer/image-viewer";
+import PagesHorizontalViewer from "../viewer/pages-horizontal-viewer";
+import PagesVerticalViewer from "../viewer/pages-vertical-viewer";
 import VideoViewer from "../viewer/video-viewer";
 
 const ExcelViewer = dynamic(
@@ -477,15 +478,48 @@ export default function DataroomView({
           isPreview={viewData.isPreview}
         />
       </div>
-    ) : viewData.pages ? (
+    ) : viewData.pages && !documentData.isVertical ? (
       <div
         className="bg-gray-950"
         style={{
           backgroundColor:
             brand && brand.accentColor ? brand.accentColor : "rgb(3, 7, 18)",
         }}
       >
-        <PagesViewerNew
+        <PagesHorizontalViewer
+          pages={viewData.pages}
+          viewId={viewData.viewId}
+          isPreview={viewData.isPreview}
+          linkId={link.id}
+          documentId={documentData.id}
+          documentName={documentData.name}
+          allowDownload={viewData.canDownload ?? link.allowDownload!}
+          feedbackEnabled={link.enableFeedback!}
+          screenshotProtectionEnabled={link.enableScreenshotProtection!}
+          screenShieldPercentage={link.screenShieldPercentage}
+          versionNumber={documentData.documentVersionNumber}
+          brand={brand}
+          dataroomId={dataroom.id}
+          setDocumentData={setDocumentData}
+          viewerEmail={data.email ?? verifiedEmail ?? userEmail ?? undefined}
+          watermarkConfig={
+            link.enableWatermark
+              ? (link.watermarkConfig as WatermarkConfig)
+              : null
+          }
+          ipAddress={viewData.ipAddress}
+          linkName={link.name ?? `Link #${link.id.slice(-5)}`}
+        />
+      </div>
+    ) : viewData.pages && documentData.isVertical ? (
+      <div
+        className="bg-gray-950"
+        style={{
+          backgroundColor:
+            brand && brand.accentColor ? brand.accentColor : "rgb(3, 7, 18)",
+        }}
+      >
+        <PagesVerticalViewer
           pages={viewData.pages}
           viewId={viewData.viewId}
           isPreview={viewData.isPreview}
@@ -500,7 +534,6 @@ export default function DataroomView({
           brand={brand}
           dataroomId={dataroom.id}
           setDocumentData={setDocumentData}
-          isVertical={documentData.isVertical}
           viewerEmail={data.email ?? verifiedEmail ?? userEmail ?? undefined}
           watermarkConfig={
             link.enableWatermark

components/view/nav.tsx

@@ -1,20 +1,15 @@
-import Image from "next/image";
 import Link from "next/link";
 
-import { MutableRefObject } from "react";
 import React from "react";
 
 import { Brand, DataroomBrand } from "@prisma/client";
 import {
   ArrowUpRight,
   Download,
-  Flag,
-  Minimize2Icon,
   Slash,
   ZoomInIcon,
   ZoomOutIcon,
 } from "lucide-react";
-import { ReactZoomPanPinchContentRef } from "react-zoom-pan-pinch";
 import { toast } from "sonner";
 
 import {
@@ -26,6 +21,12 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import { determineTextColor } from "@/lib/utils/determine-text-color";
 
@@ -39,7 +40,6 @@ import {
   BreadcrumbSeparator,
 } from "../ui/breadcrumb";
 import { Button } from "../ui/button";
-import { Separator } from "../ui/separator";
 import { TDocumentData } from "./dataroom/dataroom-view";
 import ReportForm from "./report-form";
 
@@ -56,12 +56,12 @@ export default function Nav({
   documentName,
   isDataroom,
   setDocumentData,
-  documentRefs,
-  isVertical,
   isMobile,
   isPreview,
   hasWatermark,
   documentId,
+  handleZoomIn,
+  handleZoomOut,
 }: {
   pageNumber?: number;
   numPages?: number;
@@ -75,12 +75,12 @@ export default function Nav({
   documentName?: string;
   isDataroom?: boolean;
   setDocumentData?: React.Dispatch<React.SetStateAction<TDocumentData | null>>;
-  documentRefs?: MutableRefObject<(ReactZoomPanPinchContentRef | null)[]>;
-  isVertical?: boolean;
   isMobile?: boolean;
   isPreview?: boolean;
   hasWatermark?: boolean;
   documentId?: string;
+  handleZoomIn?: () => void;
+  handleZoomOut?: () => void;
 }) {
   const downloadFile = async () => {
     if (isPreview) {
@@ -243,52 +243,50 @@ export default function Nav({
               </Button>
             ) : null}
 
-            {!isMobile && documentRefs ? (
+            {!isMobile && handleZoomIn && handleZoomOut && (
               <div className="flex gap-1">
-                <Button
-                  onClick={() => {
-                    if (isMobile) {
-                      documentRefs.current[pageNumber! - 1]?.zoomIn();
-                      return;
-                    }
-                    documentRefs.current.map((ref) => ref?.zoomIn());
-                  }}
-                  className="bg-gray-900 text-white hover:bg-gray-900/80"
-                  size="icon"
-                  title="Zoom in"
-                >
-                  <ZoomInIcon className="h-5 w-5" />
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (isMobile) {
-                      documentRefs.current[pageNumber! - 1]?.zoomOut();
-                      return;
-                    }
-                    documentRefs.current.map((ref) => ref?.zoomOut());
-                  }}
-                  className="bg-gray-900 text-white hover:bg-gray-900/80"
-                  size="icon"
-                  title="Zoom out"
-                >
-                  <ZoomOutIcon className="h-5 w-5" />
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (isMobile) {
-                      documentRefs.current[pageNumber! - 1]?.resetTransform();
-                      return;
-                    }
-                    documentRefs.current.map((ref) => ref?.resetTransform());
-                  }}
-                  className="bg-gray-900 text-white hover:bg-gray-900/80"
-                  size="icon"
-                  title="Reset zoom"
-                >
-                  <Minimize2Icon className="h-5 w-5" />
-                </Button>
+                <TooltipProvider delayDuration={50}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        onClick={handleZoomIn}
+                        className="bg-gray-900 text-white hover:bg-gray-900/80"
+                        size="icon"
+                      >
+                        <ZoomInIcon className="h-5 w-5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <span className="mr-2 text-xs">Zoom in</span>
+                      <span className="ml-auto rounded-sm border bg-muted p-0.5 text-xs tracking-widest text-muted-foreground">
+                        ⌘+
+                      </span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+
+                <TooltipProvider delayDuration={50}>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        onClick={handleZoomOut}
+                        className="bg-gray-900 text-white hover:bg-gray-900/80"
+                        size="icon"
+                      >
+                        <ZoomOutIcon className="h-5 w-5" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <span className="mr-2 text-xs">Zoom out</span>
+                      <span className="ml-auto rounded-sm border bg-muted p-0.5 text-xs tracking-widest text-muted-foreground">
+                        ⌘-
+                      </span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </div>
-            ) : null}
+            )}
+
             {pageNumber && numPages ? (
               <div className="flex h-8 items-center space-x-1 rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white sm:h-10 sm:px-4 sm:py-2 sm:text-sm">
                 <span style={{ fontVariantNumeric: "tabular-nums" }}>

components/view/view-data.tsx

@@ -13,6 +13,8 @@ import { LinkWithDocument, NotionTheme, WatermarkConfig } from "@/lib/types";
 import AdvancedExcelViewer from "./viewer/advanced-excel-viewer";
 import DownloadOnlyViewer from "./viewer/download-only-viewer";
 import ImageViewer from "./viewer/image-viewer";
+import PagesHorizontalViewer from "./viewer/pages-horizontal-viewer";
+import PagesVerticalViewer from "./viewer/pages-vertical-viewer";
 import VideoViewer from "./viewer/video-viewer";
 
 const ExcelViewer = dynamic(
@@ -112,7 +114,6 @@ export default function ViewData({
       showAccountCreationSlide={showAccountCreationSlide}
       enableQuestion={link.enableQuestion}
       feedback={link.feedback}
-      isVertical={document.versions[0].isVertical}
       viewerEmail={viewerEmail}
       watermarkConfig={
         link.enableWatermark ? (link.watermarkConfig as WatermarkConfig) : null
@@ -121,8 +122,33 @@ export default function ViewData({
       linkName={link.name ?? `Link #${link.id.slice(-5)}`}
       isPreview={viewData.isPreview}
     />
-  ) : viewData.pages ? (
-    <PagesViewerNew
+  ) : viewData.pages && !document.versions[0].isVertical ? (
+    <PagesHorizontalViewer
+      pages={viewData.pages}
+      viewId={viewData.viewId}
+      isPreview={viewData.isPreview}
+      linkId={link.id}
+      documentId={document.id}
+      assistantEnabled={document.assistantEnabled}
+      allowDownload={link.allowDownload!}
+      feedbackEnabled={link.enableFeedback!}
+      screenshotProtectionEnabled={link.enableScreenshotProtection!}
+      screenShieldPercentage={link.screenShieldPercentage}
+      versionNumber={document.versions[0].versionNumber}
+      brand={brand}
+      showPoweredByBanner={showPoweredByBanner}
+      showAccountCreationSlide={showAccountCreationSlide}
+      enableQuestion={link.enableQuestion}
+      feedback={link.feedback}
+      viewerEmail={viewerEmail}
+      watermarkConfig={
+        link.enableWatermark ? (link.watermarkConfig as WatermarkConfig) : null
+      }
+      ipAddress={viewData.ipAddress}
+      linkName={link.name ?? `Link #${link.id.slice(-5)}`}
+    />
+  ) : viewData.pages && document.versions[0].isVertical ? (
+    <PagesVerticalViewer
       pages={viewData.pages}
       viewId={viewData.viewId}
       isPreview={viewData.isPreview}
@@ -139,7 +165,6 @@ export default function ViewData({
       showAccountCreationSlide={showAccountCreationSlide}
       enableQuestion={link.enableQuestion}
       feedback={link.feedback}
-      isVertical={document.versions[0].isVertical}
       viewerEmail={viewerEmail}
       watermarkConfig={
         link.enableWatermark ? (link.watermarkConfig as WatermarkConfig) : null