@papyrus-sdk/ui-react-native 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -3618,9 +3618,192 @@ var styles9 = StyleSheet9.create({
   }
 });
 var SettingsSheet_default = SettingsSheet;
+
+// components/CoverPreview.tsx
+import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
+import {
+  ActivityIndicator as ActivityIndicator2,
+  StyleSheet as StyleSheet10,
+  Text as Text7,
+  UIManager as UIManager2,
+  View as View10,
+  findNodeHandle as findNodeHandle3
+} from "react-native";
+import { MobileDocumentEngine, PapyrusPageView as PapyrusPageView3 } from "@papyrus-sdk/engine-native";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var parseDataUri = (value) => {
+  const match = /^data:([^;,]+)?(;base64)?,/.exec(value);
+  if (!match) return null;
+  return { mime: match[1] ?? "" };
+};
+var inferDocumentType = (source, explicitType) => {
+  if (explicitType) return explicitType;
+  if (typeof source === "string") {
+    const dataUri = parseDataUri(source);
+    if (dataUri?.mime) {
+      const mime = dataUri.mime.toLowerCase();
+      if (mime.includes("epub")) return "epub";
+      if (mime.includes("text")) return "text";
+      if (mime.includes("pdf")) return "pdf";
+    }
+    const clean = source.split("?")[0].split("#")[0];
+    const ext = clean.includes(".") ? clean.split(".").pop()?.toLowerCase() : void 0;
+    if (ext === "epub") return "epub";
+    if (ext === "txt") return "text";
+    if (ext === "pdf") return "pdf";
+    return "pdf";
+  }
+  if (typeof source === "object" && source !== null && "uri" in source) {
+    const clean = source.uri.split("?")[0].split("#")[0];
+    const ext = clean.includes(".") ? clean.split(".").pop()?.toLowerCase() : void 0;
+    if (ext === "epub") return "epub";
+    if (ext === "txt") return "text";
+    if (ext === "pdf") return "pdf";
+  }
+  return "pdf";
+};
+var CoverPreview = ({
+  source,
+  type,
+  pageIndex = 0,
+  visible = true,
+  keepAlive = false,
+  allowInteraction = false,
+  renderScale = 2,
+  showLoading = true,
+  loadingIndicator,
+  placeholder,
+  style,
+  onLoadStart,
+  onLoadEnd,
+  onError
+}) => {
+  const [engine, setEngine] = useState5(null);
+  const [layoutReady, setLayoutReady] = useState5(false);
+  const [loaded, setLoaded] = useState5(false);
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const viewRef = useRef5(null);
+  const resolvedType = useMemo5(() => inferDocumentType(source, type), [source, type]);
+  const isPdf = resolvedType === "pdf";
+  const hasNativePageView = Boolean(UIManager2.getViewManagerConfig?.("PapyrusPageView"));
+  const canRender = !isPdf || hasNativePageView;
+  const shouldRender = Boolean(visible);
+  useEffect7(() => {
+    if (!shouldRender) {
+      if (!keepAlive) {
+        setEngine(null);
+        setLoaded(false);
+        setError(null);
+      }
+      return;
+    }
+    if (!engine && canRender) {
+      setEngine(new MobileDocumentEngine());
+    }
+  }, [shouldRender, keepAlive, engine, canRender]);
+  useEffect7(() => {
+    if (!engine || !shouldRender || !canRender) return;
+    let active = true;
+    setLoading(true);
+    setLoaded(false);
+    setError(null);
+    onLoadStart?.();
+    const loadInput = type ? { type, source } : source;
+    engine.load(loadInput).then(() => {
+      if (!active) return;
+      if (!isPdf && pageIndex > 0) {
+        engine.goToPage(pageIndex + 1);
+      }
+      setLoaded(true);
+      setLoading(false);
+      onLoadEnd?.();
+    }).catch((err) => {
+      if (!active) return;
+      const errorValue = err instanceof Error ? err : new Error("[Papyrus] Failed to load document");
+      setError(errorValue);
+      setLoading(false);
+      onError?.(errorValue);
+    });
+    return () => {
+      active = false;
+    };
+  }, [engine, shouldRender, canRender, source, type, pageIndex, isPdf, onLoadStart, onLoadEnd, onError]);
+  useEffect7(() => {
+    if (!engine || !isPdf || !loaded || !layoutReady || !shouldRender || !canRender) return;
+    const viewTag = findNodeHandle3(viewRef.current);
+    if (!viewTag) return;
+    engine.renderPage(pageIndex, viewTag, renderScale);
+  }, [engine, isPdf, loaded, layoutReady, shouldRender, canRender, pageIndex, renderScale]);
+  useEffect7(() => {
+    return () => {
+      engine?.destroy();
+    };
+  }, [engine]);
+  const handleLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setLayoutReady(true);
+    }
+  };
+  if (!shouldRender || !canRender) {
+    return /* @__PURE__ */ jsx11(View10, { style: [styles10.container, style], children: placeholder ?? /* @__PURE__ */ jsx11(View10, { style: styles10.placeholder, children: /* @__PURE__ */ jsx11(Text7, { style: styles10.placeholderText, children: "Preview" }) }) });
+  }
+  return /* @__PURE__ */ jsxs11(View10, { style: [styles10.container, style], onLayout: handleLayout, children: [
+    /* @__PURE__ */ jsx11(View10, { style: styles10.previewFrame, pointerEvents: allowInteraction ? "auto" : "none", children: isPdf ? /* @__PURE__ */ jsx11(PapyrusPageView3, { ref: viewRef, style: styles10.pageView }) : engine && /* @__PURE__ */ jsx11(WebViewViewer_default, { engine }) }),
+    showLoading && loading && /* @__PURE__ */ jsx11(View10, { pointerEvents: "none", style: styles10.loadingOverlay, children: loadingIndicator ?? /* @__PURE__ */ jsx11(ActivityIndicator2, { size: "small", color: "#2563eb" }) }),
+    error && /* @__PURE__ */ jsx11(View10, { pointerEvents: "none", style: styles10.errorOverlay, children: /* @__PURE__ */ jsx11(Text7, { style: styles10.errorText, children: "Preview unavailable" }) })
+  ] });
+};
+var styles10 = StyleSheet10.create({
+  container: {
+    backgroundColor: "#f8fafc",
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  previewFrame: {
+    flex: 1,
+    backgroundColor: "#ffffff"
+  },
+  pageView: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "transparent"
+  },
+  loadingOverlay: {
+    ...StyleSheet10.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(15, 23, 42, 0.15)"
+  },
+  errorOverlay: {
+    ...StyleSheet10.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(15, 23, 42, 0.4)"
+  },
+  errorText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#f8fafc"
+  },
+  placeholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#e2e8f0"
+  },
+  placeholderText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#475569"
+  }
+});
+var CoverPreview_default = CoverPreview;
 export {
   AnnotationEditor_default as AnnotationEditor,
   BottomBar_default as BottomBar,
+  CoverPreview_default as CoverPreview,
   PageRenderer_default as PageRenderer,
   RightSheet_default as RightSheet,
   SettingsSheet_default as SettingsSheet,