pdfjs-reader-core 0.2.10 → 0.2.12

package/dist/index.cjs

@@ -86,16 +86,28 @@ async function loadDocument(options) {
     onProgress,
     enableRangeRequests = true,
     enableStreaming = true,
-    cacheDocument = true
+    cacheDocument = true,
+    signal
   } = options;
+  if (signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
   await initializePDFJS({ workerSrc });
+  if (signal?.aborted) {
+    throw new DOMException("Aborted", "AbortError");
+  }
   const cacheKey = typeof src === "string" ? src : null;
   if (cacheKey && cacheDocument && documentCache.has(cacheKey)) {
     const cachedDoc = documentCache.get(cacheKey);
-    return {
-      document: cachedDoc,
-      numPages: cachedDoc.numPages
-    };
+    try {
+      const numPages = cachedDoc.numPages;
+      return {
+        document: cachedDoc,
+        numPages
+      };
+    } catch {
+      documentCache.delete(cacheKey);
+    }
   }
   const loadingParams = {
     password,
@@ -116,12 +128,37 @@ async function loadDocument(options) {
     loadingParams.data = src;
   }
   const loadingTask = pdfjsLib.getDocument(loadingParams);
+  let abortHandler = null;
+  if (signal) {
+    abortHandler = () => {
+      loadingTask.destroy();
+    };
+    signal.addEventListener("abort", abortHandler);
+  }
   if (onProgress) {
     loadingTask.onProgress = ({ loaded, total }) => {
       onProgress({ loaded, total });
     };
   }
-  const document2 = await loadingTask.promise;
+  let document2;
+  try {
+    document2 = await loadingTask.promise;
+  } catch (error) {
+    if (signal && abortHandler) {
+      signal.removeEventListener("abort", abortHandler);
+    }
+    if (signal?.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    throw error;
+  }
+  if (signal && abortHandler) {
+    signal.removeEventListener("abort", abortHandler);
+  }
+  if (signal?.aborted) {
+    document2.destroy();
+    throw new DOMException("Aborted", "AbortError");
+  }
   if (cacheKey && cacheDocument) {
     documentCache.set(cacheKey, document2);
   }
@@ -7734,7 +7771,7 @@ function formatBytes(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-var import_react33, import_jsx_runtime19, phaseMessages, PDFLoadingScreen;
+var import_react33, import_jsx_runtime19, phaseMessages, phaseIcons, PDFLoadingScreen;
 var init_PDFLoadingScreen = __esm({
   "src/components/PDFLoadingScreen/PDFLoadingScreen.tsx"() {
     "use strict";
@@ -7742,10 +7779,16 @@ var init_PDFLoadingScreen = __esm({
     init_utils();
     import_jsx_runtime19 = require("react/jsx-runtime");
     phaseMessages = {
-      initializing: "Initializing...",
+      initializing: "Preparing viewer...",
       fetching: "Loading document...",
       parsing: "Processing pages...",
-      rendering: "Preparing view..."
+      rendering: "Almost ready..."
+    };
+    phaseIcons = {
+      initializing: "\u2699\uFE0F",
+      fetching: "\u{1F4C4}",
+      parsing: "\u{1F4D1}",
+      rendering: "\u2728"
     };
     PDFLoadingScreen = (0, import_react33.memo)(function PDFLoadingScreen2({
       progress,
@@ -7757,70 +7800,102 @@ var init_PDFLoadingScreen = __esm({
     }) {
       const hasProgress = progress !== void 0 && progress >= 0;
       const hasBytes = bytesLoaded !== void 0 && totalBytes !== void 0 && totalBytes > 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           className: cn(
             "pdf-loading-screen",
             "flex flex-col items-center justify-center",
             "w-full h-full min-h-[400px]",
-            "bg-slate-50 dark:bg-slate-800",
+            "bg-gradient-to-b from-slate-50 to-slate-100",
+            "dark:from-slate-900 dark:to-slate-800",
             className
           ),
           role: "status",
           "aria-live": "polite",
           "aria-label": phaseMessages[phase],
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-skeleton", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-card", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-icon-wrapper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-loading-icon-glow" }),
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "svg",
                 {
-                  width: "48",
-                  height: "56",
-                  viewBox: "0 0 48 56",
+                  width: "64",
+                  height: "80",
+                  viewBox: "0 0 64 80",
                   fill: "none",
                   xmlns: "http://www.w3.org/2000/svg",
                   className: "pdf-document-icon",
                   children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "ellipse",
+                      {
+                        cx: "32",
+                        cy: "76",
+                        rx: "24",
+                        ry: "4",
+                        className: "fill-slate-200 dark:fill-slate-700",
+                        opacity: "0.5"
+                      }
+                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "path",
                       {
-                        d: "M4 4C4 1.79086 5.79086 0 8 0H30L44 14V52C44 54.2091 42.2091 56 40 56H8C5.79086 56 4 54.2091 4 52V4Z",
+                        d: "M8 4C8 1.79086 9.79086 0 12 0H40L56 16V72C56 74.2091 54.2091 76 52 76H12C9.79086 76 8 74.2091 8 72V4Z",
                         className: "fill-white dark:fill-slate-700"
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "path",
                       {
-                        d: "M30 0L44 14H34C31.7909 14 30 12.2091 30 10V0Z",
-                        className: "fill-slate-200 dark:fill-slate-600"
+                        d: "M40 0L56 16H44C41.7909 16 40 14.2091 40 12V0Z",
+                        className: "fill-blue-100 dark:fill-blue-900"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "22", width: "24", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "28", width: "20", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "34", width: "22", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "40", width: "16", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "rect",
+                      {
+                        x: "14",
+                        y: "28",
+                        width: "28",
+                        height: "12",
+                        rx: "2",
+                        className: "fill-blue-500 dark:fill-blue-400"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "text",
+                      {
+                        x: "28",
+                        y: "37",
+                        textAnchor: "middle",
+                        className: "fill-white text-[8px] font-bold",
+                        style: { fontSize: "8px", fontWeight: 700 },
+                        children: "PDF"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "14", y: "48", width: "28", height: "3", rx: "1.5", className: "pdf-line-1 fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "14", y: "54", width: "22", height: "3", rx: "1.5", className: "pdf-line-2 fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "14", y: "60", width: "18", height: "3", rx: "1.5", className: "pdf-line-3 fill-slate-200 dark:fill-slate-600" }),
                     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       "path",
                       {
-                        d: "M4 4C4 1.79086 5.79086 0 8 0H30L44 14V52C44 54.2091 42.2091 56 40 56H8C5.79086 56 4 54.2091 4 52V4Z",
-                        className: "stroke-slate-300 dark:stroke-slate-500",
-                        strokeWidth: "1",
+                        d: "M8 4C8 1.79086 9.79086 0 12 0H40L56 16V72C56 74.2091 54.2091 76 52 76H12C9.79086 76 8 74.2091 8 72V4Z",
+                        className: "stroke-slate-200 dark:stroke-slate-600",
+                        strokeWidth: "1.5",
                         fill: "none"
                       }
                     )
                   ]
                 }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-skeleton-lines", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-1" }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-2" }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-3" })
-              ] })
+              ) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-info", children: [
               documentName && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "pdf-loading-document-name", children: documentName }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "pdf-loading-message", children: phaseMessages[phase] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-message-wrapper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pdf-loading-phase-icon", children: phaseIcons[phase] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "pdf-loading-message", children: phaseMessages[phase] })
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-progress-container", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-loading-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "div",
@@ -7832,7 +7907,7 @@ var init_PDFLoadingScreen = __esm({
                     style: hasProgress ? { width: `${Math.min(100, progress)}%` } : void 0
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-progress-details", children: [
+                (hasProgress || hasBytes) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-progress-details", children: [
                   hasProgress && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "pdf-loading-progress-percent", children: [
                     Math.round(progress),
                     "%"
@@ -7845,7 +7920,7 @@ var init_PDFLoadingScreen = __esm({
                 ] })
               ] })
             ] })
-          ]
+          ] })
         }
       );
     });
@@ -10002,18 +10077,36 @@ var init_PDFViewerClient = __esm({
         viewerStore.getState().setError(null);
         setLoadState("idle");
       }, [viewerStore]);
+      const abortControllerRef = (0, import_react41.useRef)(null);
       (0, import_react41.useEffect)(() => {
         mountedRef.current = true;
         return () => {
           mountedRef.current = false;
+          if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+          }
+          srcIdRef.current = null;
+          const currentDoc = viewerStore.getState().document;
+          if (currentDoc) {
+            currentDoc.destroy();
+          }
+          viewerStore.getState().setDocument(null);
+          viewerStore.getState().setLoading(false);
+          viewerStore.getState().setError(null);
         };
-      }, []);
+      }, [viewerStore]);
       (0, import_react41.useEffect)(() => {
         if (srcIdRef.current === srcId && viewerStore.getState().document) {
           return;
         }
         const loadId = srcId;
         srcIdRef.current = srcId;
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+        }
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
         const currentDoc = viewerStore.getState().document;
         if (currentDoc) {
           currentDoc.destroy();
@@ -10023,14 +10116,15 @@ var init_PDFViewerClient = __esm({
         viewerStore.getState().setError(null);
         setLoadState("loading");
         const loadDoc = async () => {
-          if (!mountedRef.current) return;
+          if (!mountedRef.current || abortController.signal.aborted) return;
           try {
             viewerStore.getState().setLoadingProgress({ phase: "fetching" });
             const { document: document2, numPages } = await loadDocument({
               src,
               workerSrc,
+              signal: abortController.signal,
               onProgress: ({ loaded, total }) => {
-                if (mountedRef.current && srcIdRef.current === loadId) {
+                if (mountedRef.current && srcIdRef.current === loadId && !abortController.signal.aborted) {
                   const percent = total > 0 ? Math.round(loaded / total * 100) : void 0;
                   viewerStore.getState().setLoadingProgress({
                     phase: "fetching",
@@ -10041,10 +10135,10 @@ var init_PDFViewerClient = __esm({
                 }
               }
             });
-            if (mountedRef.current && srcIdRef.current === loadId) {
+            if (mountedRef.current && srcIdRef.current === loadId && !abortController.signal.aborted) {
               viewerStore.getState().setLoadingProgress({ phase: "parsing", percent: 100 });
             }
-            if (mountedRef.current && srcIdRef.current === loadId) {
+            if (mountedRef.current && srcIdRef.current === loadId && !abortController.signal.aborted) {
               viewerStore.getState().setDocument(document2);
               setLoadState("loaded");
               if (initialPage !== 1) {
@@ -10062,6 +10156,13 @@ var init_PDFViewerClient = __esm({
               document2.destroy();
             }
           } catch (err) {
+            if (err instanceof DOMException && err.name === "AbortError") {
+              return;
+            }
+            const errorMessage = err instanceof Error ? err.message : String(err);
+            if (abortController.signal.aborted || errorMessage.includes("network error") || errorMessage.includes("aborted")) {
+              return;
+            }
             if (mountedRef.current && srcIdRef.current === loadId) {
               const error2 = err instanceof Error ? err : new Error("Failed to load document");
               viewerStore.getState().setError(error2);
@@ -10073,6 +10174,7 @@ var init_PDFViewerClient = __esm({
         };
         loadDoc();
         return () => {
+          abortController.abort();
         };
       }, [srcId, src, workerSrc, initialPage, initialScale, viewerStore]);
       const prevPageRef = (0, import_react41.useRef)(currentPage);