office-viewer-react 1.0.0

package/dist/server/assets/PptxViewer-DS7Atucw.js

@@ -0,0 +1,213 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { init } from "pptx-preview";
+import { Loader2, ChevronLeft, ChevronRight } from "lucide-react";
+function fixImageSizing(host) {
+  host.querySelectorAll("img").forEach((img) => {
+    const w = img.getAttribute("width");
+    const h = img.getAttribute("height");
+    if (w && !img.style.width) img.style.setProperty("width", `${w}px`);
+    if (h && !img.style.height) img.style.setProperty("height", `${h}px`);
+  });
+}
+function fixTextRendering(host) {
+  host.querySelectorAll(".text-wrapper span").forEach((span) => {
+    if (!span.style.fontFamily && parseFloat(span.style.letterSpacing) < 0) {
+      span.style.letterSpacing = "";
+    }
+  });
+  host.querySelectorAll(".text-wrapper p").forEach((p) => {
+    if (p.style.lineHeight === "1") p.style.lineHeight = "1.15";
+  });
+}
+function styleSlides(slides, mode, activeIndex) {
+  slides.forEach((s, i) => {
+    if (mode === "navigation") {
+      s.style.display = i === activeIndex ? "" : "none";
+      s.style.marginBottom = "0";
+      s.style.marginTop = "0";
+    } else {
+      s.style.display = "";
+      s.style.marginBottom = "";
+      s.style.marginTop = "";
+    }
+  });
+}
+function PptxViewer({
+  data,
+  mode = "scroll",
+  className,
+  onError
+}) {
+  const outerRef = useRef(null);
+  const slideAreaRef = useRef(null);
+  const hostRef = useRef(null);
+  const slidesRef = useRef([]);
+  const currentSlideRef = useRef(0);
+  const modeRef = useRef(mode);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [totalSlides, setTotalSlides] = useState(0);
+  useEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
+  const isNavMode = mode === "navigation";
+  const canPrev = currentSlide > 0;
+  const canNext = currentSlide < totalSlides - 1;
+  const goToSlide = useCallback((index) => {
+    const slides = slidesRef.current;
+    if (!slides.length || index < 0 || index >= slides.length) return;
+    styleSlides(slides, "navigation", index);
+    currentSlideRef.current = index;
+    setCurrentSlide(index);
+  }, []);
+  const applyMode = useCallback((m) => {
+    const slides = slidesRef.current;
+    if (!slides.length) return;
+    const idx = Math.min(currentSlideRef.current, slides.length - 1);
+    styleSlides(slides, m, idx);
+    if (m === "navigation") {
+      currentSlideRef.current = idx;
+      setCurrentSlide(idx);
+    }
+  }, []);
+  useEffect(() => {
+    applyMode(mode);
+  }, [mode, applyMode]);
+  useEffect(() => {
+    if (mode !== "navigation") return;
+    const handleKey = (e) => {
+      if (e.target instanceof HTMLSelectElement) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        goToSlide(currentSlideRef.current + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        goToSlide(currentSlideRef.current - 1);
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [mode, goToSlide]);
+  const renderPptx = useCallback(
+    async (containerWidth) => {
+      const host = hostRef.current;
+      if (!host || containerWidth === 0) return;
+      setLoading(true);
+      setError(null);
+      host.innerHTML = "";
+      slidesRef.current = [];
+      try {
+        const previewer = init(host, { width: containerWidth, mode: "list" });
+        await previewer.preview(data.slice(0));
+        fixImageSizing(host);
+        fixTextRendering(host);
+        const slides = Array.from(
+          host.querySelectorAll(".pptx-preview-slide-wrapper")
+        );
+        slidesRef.current = slides;
+        setTotalSlides(slides.length);
+        const m = modeRef.current;
+        const idx = Math.min(currentSlideRef.current, slides.length - 1);
+        styleSlides(slides, m, idx);
+        if (m === "navigation") {
+          currentSlideRef.current = idx;
+          setCurrentSlide(idx);
+        }
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error("Failed to render presentation");
+        setError(err.message);
+        onError?.(err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [data, onError]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    let lastWidth = 0;
+    let ro = null;
+    let debounceTimer;
+    function triggerRender() {
+      if (cancelled || !hostRef.current) return;
+      const w = Math.floor(hostRef.current.getBoundingClientRect().width);
+      if (w === 0 || w === lastWidth) return;
+      lastWidth = w;
+      renderPptx(w);
+    }
+    const rafId = requestAnimationFrame(() => {
+      if (cancelled) return;
+      triggerRender();
+      if (slideAreaRef.current) {
+        ro = new ResizeObserver(() => {
+          clearTimeout(debounceTimer);
+          debounceTimer = setTimeout(triggerRender, 250);
+        });
+        ro.observe(slideAreaRef.current);
+      }
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+      clearTimeout(debounceTimer);
+      ro?.disconnect();
+    };
+  }, [data, renderPptx]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: outerRef,
+      className: `ov-pptx${isNavMode ? " ov-pptx--nav" : ""}${className ? ` ${className}` : ""}`,
+      children: [
+        loading && /* @__PURE__ */ jsxs("div", { className: `ov-pptx__loading${isNavMode ? " ov-pptx__loading--nav" : ""}`, children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "ov-pptx__loading-icon" }),
+          /* @__PURE__ */ jsx("span", { className: "ov-pptx__loading-text", children: "Rendering slides…" })
+        ] }),
+        error && /* @__PURE__ */ jsx("div", { className: "ov-pptx__error", children: error }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: slideAreaRef,
+            className: "ov-pptx__slide-area",
+            style: { visibility: loading ? "hidden" : "visible" },
+            children: /* @__PURE__ */ jsx("div", { ref: hostRef, className: "pptx-host ov-pptx__host" })
+          }
+        ),
+        isNavMode && !loading && totalSlides > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => goToSlide(currentSlideRef.current - 1),
+              disabled: !canPrev,
+              "aria-label": "Previous slide",
+              className: "ov-pptx__nav-btn ov-pptx__nav-btn--prev",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ov-pptx__nav-btn-icon", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => goToSlide(currentSlideRef.current + 1),
+              disabled: !canNext,
+              "aria-label": "Next slide",
+              className: "ov-pptx__nav-btn ov-pptx__nav-btn--next",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "ov-pptx__nav-btn-icon", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ov-pptx__nav-counter", children: [
+            /* @__PURE__ */ jsx("span", { className: "ov-pptx__nav-current", children: currentSlide + 1 }),
+            /* @__PURE__ */ jsxs("span", { className: "ov-pptx__nav-total", children: [
+              " of ",
+              totalSlides
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  PptxViewer
+};