@virtualansoftware/vs-office-viewer 1.0.1 → 1.0.2

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

@@ -0,0 +1,209 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { init } from "pptx-preview";
+//#region src/viewers/PptxViewer.tsx
+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 {
+			await init(host, {
+				width: containerWidth,
+				mode: "list"
+			}).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 : /* @__PURE__ */ 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]
+					})]
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { PptxViewer };