feat: enable vertical mode for all

components/documents/document-header.tsx

@@ -27,8 +27,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 import { DocumentWithLinksAndLinkCountAndViewCount } from "@/lib/types";
-import { getExtension } from "@/lib/utils";
+import { cn, getExtension } from "@/lib/utils";
 
+import PortraitLandscape from "../shared/icons/portrait-landscape";
 import { AddDocumentModal } from "./add-document-modal";
 
 export default function DocumentHeader({
@@ -168,6 +169,36 @@ export default function DocumentHeader({
     });
   };
 
+  const changeDocumentOrientation = async () => {
+    const response = await fetch(
+      "/api/teams/" +
+        teamId +
+        "/documents/" +
+        prismaDocument.id +
+        "/change-orientation",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          versionId: primaryVersion.id,
+          isVertical: primaryVersion.isVertical ? false : true,
+        }),
+      },
+    );
+
+    if (response.ok) {
+      const { message } = await response.json();
+      toast.success(message);
+
+      mutate(`/api/teams/${teamId}/documents/${prismaDocument.id}`);
+    } else {
+      const { message } = await response.json();
+      toast.error(message);
+    }
+  };
+
   useEffect(() => {
     function handleClickOutside(event: { target: any }) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -278,6 +309,19 @@ export default function DocumentHeader({
       </div>
 
       <div className="flex items-center gap-x-4 md:gap-x-2 lg:gap-x-4">
+        <button
+          className="hidden md:flex"
+          onClick={changeDocumentOrientation}
+          title={`Change document orientation to ${primaryVersion.isVertical ? "landscape" : "portrait"}`}
+        >
+          <PortraitLandscape
+            className={cn(
+              "h-6 w-6",
+              !primaryVersion.isVertical && "-rotate-90 transform",
+            )}
+          />
+        </button>
+
         {primaryVersion.type !== "notion" && (
           <AddDocumentModal newVersion>
             <button title="Upload a new version" className="hidden md:flex">
@@ -341,6 +385,16 @@ export default function DocumentHeader({
                 </AddDocumentModal>
               </DropdownMenuItem>
 
+              <DropdownMenuItem onClick={() => changeDocumentOrientation()}>
+                <PortraitLandscape
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    !primaryVersion.isVertical && "-rotate-90 transform",
+                  )}
+                />
+                {" Change orientation"}
+              </DropdownMenuItem>
+
               {prismaDocument.type !== "notion" && (
                 <DropdownMenuItem
                   onClick={() => activateOrRedirectAssistant(prismaDocument)}

components/shared/icons/portrait-landscape.tsx

@@ -0,0 +1,26 @@
+export default function PortraitLandscape({
+  className,
+  fill,
+}: {
+  className?: string;
+  fill?: string;
+}) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill={fill || "none"}
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M19 11L19 4.25C19 3.65326 18.7893 3.08097 18.4142 2.65901C18.0391 2.23705 17.5304 2 17 2L14 2" />
+      <path d="M16 8L19 11L22 8" />
+      <path d="M10 2L6 2C5.46957 2 4.96086 2.26339 4.58579 2.73223C4.21072 3.20107 4 3.83696 4 4.5L4 19.5C4 20.163 4.21071 20.7989 4.58579 21.2678C4.96086 21.7366 5.46957 22 6 22L17 22C17.5304 22 18.0391 21.7366 18.4142 21.2678C18.7893 20.7989 19 20.163 19 19.5L19 15" />
+    </svg>
+  );
+}

components/view/DataroomViewer.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 import { useEffect, useState } from "react";
 import React from "react";
@@ -32,7 +33,6 @@ import DocumentCard from "./dataroom/document-card";
 import FolderCard from "./dataroom/folder-card";
 import DataroomNav from "./dataroom/nav-dataroom";
 import Nav from "./nav";
-import { useRouter } from "next/router";
 
 type DataroomDocument = {
   dataroomDocumentId: string;
@@ -44,6 +44,7 @@ type DataroomDocument = {
     type: string;
     versionNumber: number;
     hasPages: boolean;
+    isVertical: boolean;
   }[];
 };
 
@@ -71,6 +72,7 @@ export default function DataroomViewer({
       documentType: "pdf" | "notion";
       documentVersionId: string;
       documentVersionNumber: number;
+      isVertical: boolean;
     } | null>
   >;
   setDataroomVerified: React.Dispatch<React.SetStateAction<boolean>>;

components/view/PagesViewerNew.tsx

@@ -544,6 +544,7 @@ export default function PagesViewer({
                   key={index}
                   initialScale={scale}
                   panning={{ disabled: scale === 1, velocityDisabled: true }}
+                  wheel={{ disabled: scale === 1 }}
                   onZoom={(ref) => {
                     setScale(ref.state.scale);
                   }}

components/view/dataroom/dataroom-view.tsx

@@ -75,6 +75,7 @@ export default function DataroomView({
     documentType: "pdf" | "notion";
     documentVersionId: string;
     documentVersionNumber: number;
+    isVertical: boolean;
   } | null>(null);
 
   const [viewType, setViewType] = useState<"DOCUMENT_VIEW" | "DATAROOM_VIEW">(
@@ -264,6 +265,7 @@ export default function DataroomView({
           brand={brand}
           dataroomId={dataroom.id}
           setDocumentData={setDocumentData}
+          isVertical={documentData.isVertical}
         />
       </div>
     ) : null;

components/view/dataroom/document-card.tsx

@@ -38,6 +38,7 @@ type DRDocument = {
     type: string;
     versionNumber: number;
     hasPages: boolean;
+    isVertical: boolean;
   }[];
 };
 
@@ -51,6 +52,7 @@ type DocumentsCardProps = {
     documentType: "pdf" | "notion";
     documentVersionId: string;
     documentVersionNumber: number;
+    isVertical: boolean;
   }) => void;
 };
 export default function DocumentCard({
@@ -94,6 +96,7 @@ export default function DocumentCard({
                         | "notion",
                       documentVersionId: document.versions[0].id,
                       documentVersionNumber: document.versions[0].versionNumber,
+                      isVertical: document.versions[0].isVertical,
                     });
                   }}
                   className="w-full truncate"

components/view/view-data.tsx

@@ -53,6 +53,7 @@ export default function ViewData({
       showPoweredByBanner={showPoweredByBanner}
       enableQuestion={link.enableQuestion}
       feedback={link.feedback}
+      isVertical={document.versions[0].isVertical}
     />
   ) : (
     <PDFViewer

lib/types.ts

@@ -49,6 +49,7 @@ export interface LinkWithDocument extends Link {
       type: string;
       hasPages: boolean;
       file: string;
+      isVertical: boolean;
     }[];
     team: {
       plan: string;
@@ -80,6 +81,7 @@ export interface LinkWithDataroom extends Link {
           type: string;
           hasPages: boolean;
           file: string;
+          isVertical: boolean;
         }[];
       };
     }[];

pages/api/links/[id]/index.ts

@@ -87,6 +87,7 @@ export default async function handle(
                     type: true,
                     hasPages: true,
                     file: true,
+                    isVertical: true,
                   },
                   take: 1,
                 },
@@ -130,6 +131,7 @@ export default async function handle(
                             type: true,
                             hasPages: true,
                             file: true,
+                            isVertical: true,
                           },
                           take: 1,
                         },

pages/api/links/domains/[...domainSlug].ts

@@ -136,6 +136,7 @@ export default async function handle(
                     hasPages: true,
                     type: true,
                     file: true,
+                    isVertical: true,
                   },
                   take: 1,
                 },
@@ -179,6 +180,7 @@ export default async function handle(
                             type: true,
                             hasPages: true,
                             file: true,
+                            isVertical: true,
                           },
                           take: 1,
                         },

pages/api/teams/[teamId]/documents/[id]/change-orientation.ts

@@ -0,0 +1,81 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
+import { getServerSession } from "next-auth/next";
+import { version } from "os";
+
+import { errorhandler } from "@/lib/errorHandler";
+import prisma from "@/lib/prisma";
+import { getTeamWithUsersAndDocument } from "@/lib/team/helper";
+import { CustomUser } from "@/lib/types";
+
+export default async function handle(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === "POST") {
+    // GET /api/teams/:teamId/documents/:id/update-name
+    const session = await getServerSession(req, res, authOptions);
+    if (!session) {
+      return res.status(401).end("Unauthorized");
+    }
+
+    const { teamId, id: docId } = req.query as { teamId: string; id: string };
+    const { versionId, isVertical } = req.body as {
+      versionId: string;
+      isVertical: boolean;
+    };
+
+    const userId = (session.user as CustomUser).id;
+
+    try {
+      const team = await prisma.team.findUnique({
+        where: {
+          id: teamId,
+          users: {
+            some: {
+              userId,
+            },
+          },
+          documents: {
+            some: {
+              id: {
+                equals: docId,
+              },
+            },
+          },
+        },
+        select: {
+          id: true,
+        },
+      });
+
+      if (!team) {
+        return res.status(401).end("Unauthorized");
+      }
+
+      await prisma.documentVersion.update({
+        where: {
+          id: versionId,
+        },
+        data: {
+          isVertical,
+        },
+      });
+
+      await fetch(
+        `${process.env.NEXTAUTH_URL}/api/revalidate?secret=${process.env.REVALIDATE_TOKEN}&documentId=${docId}`,
+      );
+
+      return res.status(200).json({
+        message: `Document orientation changed to ${isVertical ? "portrait" : "landscape"}!`,
+      });
+    } catch (error) {
+      errorhandler(error, res);
+    }
+  } else {
+    // We only allow POST requests
+    res.setHeader("Allow", ["POST"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}