@vryzel/file-next-ui 0.6.0 → 0.6.2

package/dist/index.cjs

@@ -2773,6 +2773,15 @@ function clampPreviewZoom(scale) {
 function canPreviewFile(file) {
   return previewKind(file.mimeType, file.name) !== "none";
 }
+function pdfFrameMode(src, pageOrigin) {
+  try {
+    const url = new URL(src, pageOrigin);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return "blob";
+    return url.origin === new URL(pageOrigin).origin ? "blob" : "direct";
+  } catch {
+    return "blob";
+  }
+}
 function previewKind(mimeType, name) {
   const mime = mimeType.toLowerCase();
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
@@ -2788,6 +2797,74 @@ function previewKind(mimeType, name) {
   if (mime.startsWith("text/") || ["txt", "csv", "md"].includes(ext)) return "text";
   return "none";
 }
+function PreviewSpinner({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", "aria-label": label, className: "absolute inset-0 z-10 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "size-8 rounded-full border-2 border-white/25 border-t-white motion-safe:animate-spin"
+      }
+    )
+  ] });
+}
+function PdfFrame({
+  src,
+  title,
+  onClick
+}) {
+  const labels = useExplorerLabels();
+  const [frameSrc, setFrameSrc] = react.useState(null);
+  const [failed, setFailed] = react.useState(false);
+  const [painted, setPainted] = react.useState(false);
+  react.useEffect(() => {
+    setPainted(false);
+    if (pdfFrameMode(src, window.location.origin) === "direct") {
+      setFrameSrc(src);
+      setFailed(false);
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    let objectUrl = null;
+    setFrameSrc(null);
+    setFailed(false);
+    void fetch(src, { credentials: "same-origin", signal: controller.signal }).then(async (response) => {
+      if (!response.ok) throw new Error(String(response.status));
+      const blob = new Blob([await response.arrayBuffer()], { type: "application/pdf" });
+      if (cancelled) return;
+      objectUrl = URL.createObjectURL(blob);
+      setFrameSrc(objectUrl);
+    }).catch((error) => {
+      if (cancelled || error instanceof DOMException && error.name === "AbortError") return;
+      setFailed(true);
+    });
+    return () => {
+      cancelled = true;
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [src]);
+  if (failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70", children: labels.previewUnavailable });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full max-w-5xl", children: [
+    !painted ? /* @__PURE__ */ jsxRuntime.jsx(PreviewSpinner, { label: labels.loading }) : null,
+    frameSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        src: frameSrc,
+        title,
+        referrerPolicy: "no-referrer",
+        className: "h-full w-full bg-white",
+        onClick,
+        onLoad: () => setPainted(true),
+        onError: () => setPainted(true)
+      }
+    ) : null
+  ] });
+}
 function FilePreviewDialog({
   file,
   src,
@@ -2797,11 +2874,13 @@ function FilePreviewDialog({
   const labels = useExplorerLabels();
   const [scale, setScale] = react.useState(1);
   const [pan, setPan] = react.useState({ x: 0, y: 0 });
+  const [ready, setReady] = react.useState(false);
   const drag = react.useRef(null);
   const closeRef = react.useRef(null);
   react.useEffect(() => {
     setScale(1);
     setPan({ x: 0, y: 0 });
+    setReady(false);
     closeRef.current?.focus();
   }, [file?.id, src]);
   react.useEffect(() => {
@@ -2851,63 +2930,83 @@ function FilePreviewDialog({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-4 pt-12 pb-16", children: kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src,
-            alt: file.name,
-            draggable: false,
-            className: "max-h-full max-w-full cursor-zoom-in select-none object-contain",
-            style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})` },
-            onClick: stop,
-            onDoubleClick: (event) => {
-              stop(event);
-              zoom(scale === 1 ? 2 : 1);
-            },
-            onWheel: (event) => {
-              event.preventDefault();
-              stop(event);
-              zoom(scale + (event.deltaY < 0 ? 0.25 : -0.25));
-            },
-            onPointerDown: (event) => {
-              if (scale === 1) return;
-              stop(event);
-              event.currentTarget.setPointerCapture(event.pointerId);
-              drag.current = { x: event.clientX, y: event.clientY, px: pan.x, py: pan.y };
-            },
-            onPointerMove: (event) => {
-              if (!drag.current) return;
-              setPan({
-                x: drag.current.px + event.clientX - drag.current.x,
-                y: drag.current.py + event.clientY - drag.current.y
-              });
-            },
-            onPointerUp: () => {
-              drag.current = null;
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full w-full items-center justify-center px-4 pt-12 pb-16", children: [
+          kind !== "pdf" && !ready ? /* @__PURE__ */ jsxRuntime.jsx(PreviewSpinner, { label: labels.loading }) : null,
+          kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt: file.name,
+              draggable: false,
+              className: `max-h-full max-w-full cursor-zoom-in select-none object-contain ${ready ? "" : "absolute h-px w-px opacity-0"}`,
+              onLoad: () => setReady(true),
+              onError: () => setReady(true),
+              style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})` },
+              onClick: stop,
+              onDoubleClick: (event) => {
+                stop(event);
+                zoom(scale === 1 ? 2 : 1);
+              },
+              onWheel: (event) => {
+                event.preventDefault();
+                stop(event);
+                zoom(scale + (event.deltaY < 0 ? 0.25 : -0.25));
+              },
+              onPointerDown: (event) => {
+                if (scale === 1) return;
+                stop(event);
+                event.currentTarget.setPointerCapture(event.pointerId);
+                drag.current = { x: event.clientX, y: event.clientY, px: pan.x, py: pan.y };
+              },
+              onPointerMove: (event) => {
+                if (!drag.current) return;
+                setPan({
+                  x: drag.current.px + event.clientX - drag.current.x,
+                  y: drag.current.py + event.clientY - drag.current.y
+                });
+              },
+              onPointerUp: () => {
+                drag.current = null;
+              }
             }
-          }
-        ) : kind === "pdf" || kind === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "iframe",
-          {
-            src,
-            title: file.name,
-            sandbox: "",
-            referrerPolicy: "no-referrer",
-            className: "h-full w-full max-w-5xl bg-white",
-            onClick: stop
-          }
-        ) : kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "video",
-          {
-            controls: true,
-            playsInline: true,
-            preload: "metadata",
-            src,
-            className: "max-h-full max-w-full",
-            onClick: stop,
-            children: labels.previewUnavailable
-          }
-        ) : kind === "audio" ? /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: true, preload: "metadata", src, className: "w-full max-w-md", onClick: stop }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70", children: labels.previewUnavailable }) }),
+          ) : kind === "pdf" ? /* @__PURE__ */ jsxRuntime.jsx(PdfFrame, { src, title: file.name, onClick: stop }) : kind === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "iframe",
+            {
+              src,
+              title: file.name,
+              sandbox: "",
+              referrerPolicy: "no-referrer",
+              className: ready ? "h-full w-full max-w-5xl bg-white" : "absolute h-px w-px max-w-5xl opacity-0",
+              onClick: stop,
+              onLoad: () => setReady(true),
+              onError: () => setReady(true)
+            }
+          ) : kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "video",
+            {
+              controls: true,
+              playsInline: true,
+              preload: "metadata",
+              src,
+              className: `max-h-full max-w-full ${ready ? "" : "absolute h-px w-px opacity-0"}`,
+              onClick: stop,
+              onLoadedData: () => setReady(true),
+              onError: () => setReady(true),
+              children: labels.previewUnavailable
+            }
+          ) : kind === "audio" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "audio",
+            {
+              controls: true,
+              preload: "metadata",
+              src,
+              className: `w-full max-w-md ${ready ? "" : "absolute h-px w-px opacity-0"}`,
+              onClick: stop,
+              onLoadedMetadata: () => setReady(true),
+              onError: () => setReady(true)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70", children: labels.previewUnavailable })
+        ] }),
         kind === "image" ? /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {