Fix PDF thumbnails (ghostscript), 3MF viewer (official loader), PDF viewer (blob fetch)

frontend/src/components/PdfViewer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import { ZoomIn, ZoomOut, Loader2 } from 'lucide-react';
 import { useInView } from 'react-intersection-observer';
@@ -11,24 +11,44 @@ if (typeof window !== 'undefined') {
   pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 }
 
-function VirtualPage({ pageNumber, scale }: { pageNumber: number; scale: number }) {
+function LazyPage({ pageNumber, scale, containerWidth }: { pageNumber: number; scale: number; containerWidth: number }) {
   const { ref, inView } = useInView({
     triggerOnce: false,
-    rootMargin: '200% 0px', // load pages 2 screens ahead/behind
+    rootMargin: '150% 0px',
   });
 
+  // Estimate the page height based on typical A4 ratio (1:1.414)
+  const estimatedWidth = Math.min(containerWidth * 0.9, 900) * scale;
+  const estimatedHeight = estimatedWidth * 1.414;
+
   return (
-    <div ref={ref} className="min-h-[800px] flex justify-center mb-6 w-full" style={{ minHeight: `${800 * scale}px` }}>
+    <div 
+      ref={ref} 
+      className="flex justify-center w-full mb-4"
+      style={{ minHeight: inView ? undefined : `${estimatedHeight}px` }}
+    >
       {inView ? (
         <Page
           pageNumber={pageNumber}
           scale={scale}
+          width={Math.min(containerWidth * 0.9, 900)}
           renderTextLayer={true}
           renderAnnotationLayer={true}
           className="bg-white shadow-xl"
+          loading={
+            <div 
+              className="bg-white shadow-xl flex items-center justify-center" 
+              style={{ width: `${estimatedWidth}px`, height: `${estimatedHeight}px` }}
+            >
+              <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            </div>
+          }
         />
       ) : (
-        <div className="bg-white shadow-xl w-[600px]" style={{ width: `${600 * scale}px` }} />
+        <div 
+          className="bg-gray-100 shadow-xl rounded" 
+          style={{ width: `${estimatedWidth}px`, height: `${estimatedHeight}px` }} 
+        />
       )}
     </div>
   );
@@ -36,24 +56,96 @@ function VirtualPage({ pageNumber, scale }: { pageNumber: number; scale: number
 
 export default function PdfViewer({ url }: { url: string }) {
   const [numPages, setNumPages] = useState<number>();
-  const [scale, setScale] = useState<number>(1.2);
+  const [scale, setScale] = useState<number>(1.0);
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [fetchingPdf, setFetchingPdf] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(800);
+
+  // Measure container width for responsive page sizing
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setContainerWidth(entry.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Fetch the PDF as a blob to avoid Next.js proxy streaming issues with large files
+  useEffect(() => {
+    let cancelled = false;
+    setFetchingPdf(true);
+    setFetchError(null);
+
+    fetch(url)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.blob();
+      })
+      .then((blob) => {
+        if (cancelled) return;
+        const objectUrl = URL.createObjectURL(blob);
+        setBlobUrl(objectUrl);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setFetchError(`Failed to load PDF: ${err.message}`);
+      })
+      .finally(() => {
+        if (!cancelled) setFetchingPdf(false);
+      });
+
+    return () => {
+      cancelled = true;
+      if (blobUrl) URL.revokeObjectURL(blobUrl);
+    };
+  }, [url]); // eslint-disable-line react-hooks/exhaustive-deps
 
   function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
     setNumPages(numPages);
   }
 
+  if (fetchingPdf) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-3">
+        <Loader2 className="w-8 h-8 animate-spin" style={{ color: 'var(--color-accent)' }} />
+        <span className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>Loading PDF...</span>
+      </div>
+    );
+  }
+
+  if (fetchError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-2">
+        <span className="text-sm font-medium" style={{ color: 'var(--color-danger, #ef4444)' }}>{fetchError}</span>
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          className="px-4 py-2 mt-2 rounded-lg text-sm font-medium transition-opacity hover:opacity-90"
+          style={{ backgroundColor: 'var(--color-accent)', color: 'white' }}
+        >
+          Download Instead
+        </a>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col w-full h-full">
       {/* PDF Toolbar */}
       <div className="flex items-center justify-between p-2 border-b" style={{ borderColor: 'var(--color-border-subtle)', backgroundColor: 'var(--color-bg-elevated)' }}>
         <div className="flex items-center gap-2">
           <span className="text-sm font-medium min-w-[80px] text-center" style={{ color: 'var(--color-text-secondary)' }}>
-            {numPages ? `${numPages} Pages` : 'Loading...'}
+            {numPages ? `${numPages} page${numPages !== 1 ? 's' : ''}` : 'Loading...'}
           </span>
         </div>
         <div className="flex items-center gap-2">
           <button
-            onClick={() => setScale(s => Math.max(0.5, s - 0.25))}
+            onClick={() => setScale(s => Math.max(0.5, +(s - 0.25).toFixed(2)))}
             className="p-1 rounded hover:bg-white/10"
             style={{ color: 'var(--color-text-primary)' }}
           >
@@ -63,7 +155,7 @@ export default function PdfViewer({ url }: { url: string }) {
             {Math.round(scale * 100)}%
           </span>
           <button
-            onClick={() => setScale(s => Math.min(3, s + 0.25))}
+            onClick={() => setScale(s => Math.min(3, +(s + 0.25).toFixed(2)))}
             className="p-1 rounded hover:bg-white/10"
             style={{ color: 'var(--color-text-primary)' }}
           >
@@ -73,9 +165,9 @@ export default function PdfViewer({ url }: { url: string }) {
       </div>
       
       {/* PDF Content */}
-      <div className="flex-1 overflow-auto bg-neutral-100 dark:bg-neutral-900 py-4 flex flex-col items-center">
+      <div ref={containerRef} className="flex-1 overflow-auto bg-neutral-100 dark:bg-neutral-900 py-4 flex flex-col items-center">
         <Document
-          file={url}
+          file={blobUrl!}
           onLoadSuccess={onDocumentLoadSuccess}
           onLoadError={(error) => console.error('Failed to load PDF:', error)}
           loading={
@@ -85,8 +177,13 @@ export default function PdfViewer({ url }: { url: string }) {
           }
           className="flex flex-col items-center gap-2 w-full"
         >
-          {numPages && Array.from(new Array(numPages), (el, index) => (
-            <VirtualPage key={`page_${index + 1}`} pageNumber={index + 1} scale={scale} />
+          {numPages && Array.from(new Array(numPages), (_, index) => (
+            <LazyPage 
+              key={`page_${index + 1}`} 
+              pageNumber={index + 1} 
+              scale={scale}
+              containerWidth={containerWidth}
+            />
           ))}
         </Document>
       </div>