feat: pdf viewer swap & flicker problem fix

package.json

@@ -14,6 +14,14 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@embedpdf/core": "^2.14.0",
+    "@embedpdf/engines": "^2.14.0",
+    "@embedpdf/plugin-document-manager": "^2.14.0",
+    "@embedpdf/plugin-export": "^2.14.0",
+    "@embedpdf/plugin-render": "^2.14.0",
+    "@embedpdf/plugin-scroll": "^2.14.0",
+    "@embedpdf/plugin-viewport": "^2.14.0",
+    "@embedpdf/plugin-zoom": "^2.14.0",
     "@google-cloud/storage": "^7.17.1",
     "@google/genai": "^0.7.0",
     "@radix-ui/react-accordion": "^1.2.4",
@@ -56,7 +64,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "raw-loader": "^4.0.2",
-    "react": "^18.3.1",
+    "react": "link:@embedpdf/plugin-viewport/react",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.8",

src/app/paper/[id]/page.tsx

@@ -1,5 +1,4 @@
 import { fetchPaperID } from "@/app/actions/get-papers-by-id";
-import PdfViewer from "@/components/pdfViewer";
 import RelatedPapers from "@/components/RelatedPaper";
 import Loader from "@/components/ui/loader";
 import { type ErrorResponse, type PaperResponse } from "@/interface";
@@ -8,6 +7,7 @@ import axios, { type AxiosResponse } from "axios";
 import { type Metadata } from "next";
 import { redirect } from "next/navigation";
 import { PaperProvider } from "@/context/PaperContext";
+import PDFViewer from "@/components/newPdfViewer";
 
 export async function generateMetadata({
   params,
@@ -174,10 +174,16 @@ const PaperPage = async ({ params }: { params: { id: string } }) => {
                   year: paper.year,
                 }}
               >
-            <PdfViewer
+
+            <PDFViewer
+              url={paper.file_url}
+              name={`${extractBracketContent(paper.subject)}-${paper.exam}-${paper.slot}-${paper.year}`}/>
+
+            {/* <PdfViewer
               url={paper.file_url}
               name={`${extractBracketContent(paper.subject)}-${paper.exam}-${paper.slot}-${paper.year}`}
-            ></PdfViewer>
+            ></PdfViewer> */}
+
             </PaperProvider>
           </center>
           <RelatedPapers />

src/components/ReportButton.tsx

@@ -13,7 +13,7 @@ export default function ReportButton(){
     <>
       <Button
         onClick={() => setOpen(true)}
-        className="h-10 w-10 rounded p-0 text-white transition hover:bg-red-600 bg-red-500"
+        className="h-12 w-12 rounded p-0 text-white transition hover:bg-red-600 bg-red-500"
       >
         <FaFlag className="text-sm" />
       </Button>

src/components/ShareButton.tsx

@@ -30,7 +30,7 @@ export default function ShareButton() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button className="aspect-square h-10 w-10 p-0">
+        <Button className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]">
           <FaShare />
         </Button>
       </DialogTrigger>