Merge pull request #495 from YOGESH-08/staging

YOGESH-08 · web-flow · commit 8087d9204c3d · 2026-04-18T02:54:12.000+05:30
Replace iframe preview with new PDF viewer modal
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -3,8 +3,7 @@
 import React from "react";
 import { type IPaper } from "@/interface";
 import Image from "next/image";
-import { X } from "lucide-react";
-import { Eye, Download, Check } from "lucide-react";
+import { X, Eye, Download, Check } from "lucide-react";
 import {
   extractBracketContent,
   extractWithoutBracketContent,
@@ -16,6 +15,8 @@ import {
 } from "@/lib/utils/download";
 import { Capsule } from "@/components/ui/capsule";
 import { cn } from "@/lib/utils";
+import PDFViewer from "@/components/newPdfViewer";
+import { PaperProvider } from "@/context/PaperContext";
 
 interface CardProps {
   paper: IPaper;
@@ -26,7 +27,18 @@ interface CardProps {
 
 const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
   const [previewOpen, setPreviewOpen] = React.useState(false);
-  const [iframeLoading, setIframeLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!previewOpen) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [previewOpen]);
+
   const handleDownload = async (paper: IPaper) => {
     await downloadFile(getSecureUrl(paper.file_url), generateFileName(paper));
   };
@@ -86,7 +98,6 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
            className="cursor-pointer transition-all duration-200 ease-out hover:scale-110"
               onClick={(e) => {
                 e.stopPropagation();
-                setIframeLoading(true); 
                 setPreviewOpen(true);
               }}
             />
@@ -127,31 +138,42 @@ const Card = ({ paper, onSelect, isSelected, isShow=true }: CardProps) => {
 
       {previewOpen && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-6 py-8"
           onClick={() => setPreviewOpen(false)}
         >
           <div
-            className="relative w-[95%] max-w-5xl h-[90vh] rounded-lg bg-white p-2 dark:bg-[#171720]"
-            onClick={(e) => e.stopPropagation()}
+            className="relative h-full w-full max-w-5xl"
           >
             <div
-              className={`absolute inset-0 z-50 flex items-center justify-center bg-[#070114] transition-opacity duration-300 ${
-                iframeLoading ? "opacity-100" : "opacity-0 pointer-events-none"
-              }`}
+              className="relative mx-auto h-full max-w-[760px]"
             >
-      <div className="w-7 h-7 rounded-full border-2 border-white/20 border-t-white animate-spin" />
-    </div>
-          <button
-            className="absolute top-3 left-6 z-50 p-2 rounded-full bg-black/60 text-white hover:bg-black transition"
-            onClick={() => setPreviewOpen(false)}
-          >
-            <X size={18} />
-          </button>
-            <iframe
-              src={`${getSecureUrl(paper.file_url)}#toolbar=0`}
-              className="w-full h-full rounded-md"
-              onLoad={() => setIframeLoading(false)}
-            />
+              <PaperProvider
+                value={{
+                  paperId: paper._id,
+                  subject: paper.subject,
+                  exam: paper.exam,
+                  slot: paper.slot,
+                  year: paper.year,
+                }}
+              >
+              <button
+                className="fixed right-4 top-4 z-[60] rounded-full border border-black/10 bg-white/95 p-2 text-black shadow-md transition hover:bg-white"
+                onClick={() => setPreviewOpen(false)}
+                aria-label="Close preview"
+              >
+                <X size={18} />
+              </button>
+                <PDFViewer
+                  url={getSecureUrl(paper.file_url)}
+                  name={generateFileName(paper).replace(/\.[^.]+$/, "")}
+                  className="h-full overflow-hidden"
+                  height="100%"
+                  hideControls={true}
+                  backgroundColor="transparent"
+                  hideScrollbar={true}
+                />
+              </PaperProvider>
+            </div>
           </div>
         </div>
       )}
diff --git a/src/components/newPdfViewer.tsx b/src/components/newPdfViewer.tsx
@@ -15,6 +15,7 @@ import { downloadFile } from "../lib/utils/download";
 import { Button } from "./ui/button";
 import ShareButton from "./ShareButton";
 import ReportButton from "./ReportButton";
+import { useTheme } from "next-themes";
 
 interface ControlProps {
   documentId: string;
@@ -29,6 +30,12 @@ interface ControlProps {
 interface PdfViewerProps {
   url: string;
   name: string;
+  className?: string;
+  height?: string;
+  hideControls?: boolean;
+  backgroundColor?: string;
+  hideScrollbar?: boolean;
+  isolateFromTheme?: boolean;
 }
 
 interface WheelZoomProps {
@@ -328,25 +335,48 @@ const LOADING_MESSAGES = [
   "Almost there",
 ];
 
-export function Loader() {
+export function Loader({
+  backgroundColor = "#070114",
+  textColor = "rgba(255,255,255,0.5)",
+}: {
+  backgroundColor?: string;
+  textColor?: string;
+}) {
   const { message, visible } = useLoadingMessage(LOADING_MESSAGES);
   return (
-    <div className="flex flex-col items-center justify-center gap-3 h-dvh w-full bg-[#070114]">
+    <div
+      className="flex h-dvh w-full flex-col items-center justify-center gap-3"
+      style={{ backgroundColor }}
+    >
       <div className="w-7 h-7 rounded-full border-2 border-white/10 border-t-white animate-spin" />
       <span
-        className="text-white/50 text-sm tracking-wide transition-opacity duration-400"
-        style={{ opacity: visible ? 1 : 0 }}
+        className="text-sm tracking-wide transition-opacity duration-400"
+        style={{ opacity: visible ? 1 : 0, color: textColor }}
       >
         {message}
       </span>
     </div>
   );
 }
-export default function PDFViewer({ url, name }: PdfViewerProps) {
+export default function PDFViewer({
+  url,
+  name,
+  className,
+  height = "100dvh",
+  hideControls = false,
+  backgroundColor,
+  hideScrollbar = false,
+  isolateFromTheme = true,
+}: PdfViewerProps) {
   const { engine, isLoading } = usePdfiumEngine();
-  const {isMobile, isSmall} = useBreakpoint();
+  const { isMobile, isSmall } = useBreakpoint();
+  const { resolvedTheme } = useTheme();
   const [isFullscreen, setIsFullscreen] = useState(false);
   const viewerRef = useRef<HTMLDivElement>(null);
+  const effectiveBackgroundColor =
+    backgroundColor ?? (resolvedTheme === "light" ? "#F3F5FF" : "#070114");
+  const loaderTextColor =
+    resolvedTheme === "light" ? "rgba(17,24,39,0.6)" : "rgba(255,255,255,0.5)";
 
   const handleDownload = useCallback(async () => {
     window.dataLayer?.push({
@@ -389,21 +419,67 @@ export default function PDFViewer({ url, name }: PdfViewerProps) {
 
 if (isLoading || !engine) {
   return (
-<Loader />
+<Loader
+  backgroundColor={effectiveBackgroundColor}
+  textColor={loaderTextColor}
+/>
   );
 }
 
   return (
-    <div
-      ref={viewerRef}
-      style={{ height: "100dvh", width: "100%", position: "relative", backgroundColor: "#070114", display: "flex", flexDirection: "column" }}
-    >
-      <EmbedPDF engine={engine} plugins={plugins}>
+    <>
+      {hideScrollbar && (
+        <style jsx global>{`
+          [data-pdf-viewer-scrollbars="hidden"] *,
+          [data-pdf-viewer-scrollbars="hidden"] {
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+
+          [data-pdf-viewer-scrollbars="hidden"] ::-webkit-scrollbar {
+            display: none;
+            width: 0;
+            height: 0;
+          }
+        `}</style>
+      )}
+      {isolateFromTheme && (
+        <style jsx global>{`
+          [data-pdf-viewer-theme="light"] {
+            color-scheme: light;
+            forced-color-adjust: none;
+          }
+
+          [data-pdf-viewer-theme="light"] canvas,
+          [data-pdf-viewer-theme="light"] img,
+          [data-pdf-viewer-theme="light"] svg {
+            filter: none !important;
+            forced-color-adjust: none;
+          }
+        `}</style>
+      )}
+      <div
+        ref={viewerRef}
+        data-pdf-viewer-theme={isolateFromTheme ? "light" : "inherited"}
+        data-pdf-viewer-scrollbars={hideScrollbar ? "hidden" : "visible"}
+        className={className}
+        style={{
+          height,
+          width: "100%",
+          position: "relative",
+          backgroundColor: effectiveBackgroundColor,
+          display: "flex",
+          flexDirection: "column",
+          colorScheme: isolateFromTheme ? "light" : undefined,
+          forcedColorAdjust: isolateFromTheme ? "none" : undefined,
+        }}
+      >
+        <EmbedPDF engine={engine} plugins={plugins}>
         {({ activeDocumentId }) =>
           activeDocumentId && (
             <>
               <WheelZoom documentId={activeDocumentId} viewerRef={viewerRef} />
-              {(isMobile && !isFullscreen) && 
+              {!hideControls && (isMobile && !isFullscreen) && 
               <Controls
                 documentId={activeDocumentId}
                 toggleFullscreen={toggleFullscreen}
@@ -421,19 +497,29 @@ if (isLoading || !engine) {
             style={{
             opacity: isLoaded ? 0 : 1,
             pointerEvents: isLoaded ? "none" : "auto",
-            transition: "opacity 0.3s"
+            transition: "opacity 0.3s",
+            backgroundColor: effectiveBackgroundColor,
           }}
           >
-            <Loader />
+            <Loader
+              backgroundColor={effectiveBackgroundColor}
+              textColor={loaderTextColor}
+            />
           </div>
       <Viewport
         documentId={activeDocumentId}
-        style={{ backgroundColor: "#070114", visibility: isLoaded ? "visible" : "hidden" }}
+        style={{
+          backgroundColor: effectiveBackgroundColor,
+          visibility: isLoaded ? "visible" : "hidden",
+        }}
       >
         <Scroller
           documentId={activeDocumentId}
           renderPage={({ width, height, pageIndex }) => (
-            <div style={{ width, height }}>
+            <div
+              style={{ width, height }}
+              onClick={(e) => e.stopPropagation()}
+            >
               <RenderLayer documentId={activeDocumentId} pageIndex={pageIndex} />
             </div>
           )}
@@ -443,7 +529,7 @@ if (isLoading || !engine) {
   )}
 </DocumentContent>
               
-              {(!isMobile || isFullscreen) && (
+              {!hideControls && (!isMobile || isFullscreen) && (
                 <Controls
                   documentId={activeDocumentId}
                   toggleFullscreen={toggleFullscreen}
@@ -457,7 +543,8 @@ if (isLoading || !engine) {
             </>
           )
         }
-      </EmbedPDF>
-    </div>
+        </EmbedPDF>
+      </div>
+    </>
   );
-}
+}
