react-sharesheet 1.0.0 → 1.1.0

package/dist/drawer.js

@@ -55,6 +55,38 @@ var import_lucide_react2 = require("lucide-react");
 // src/hooks.ts
 var import_react = require("react");
 
+// src/og-fetcher.ts
+var ogCache = /* @__PURE__ */ new Map();
+async function fetchOGData(url) {
+  if (ogCache.has(url)) {
+    return ogCache.get(url);
+  }
+  try {
+    const apiUrl = `https://api.microlink.io?url=${encodeURIComponent(url)}`;
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch OG data: ${response.status}`);
+    }
+    const json = await response.json();
+    if (json.status !== "success" || !json.data) {
+      return null;
+    }
+    const { title, description, image, url: canonicalUrl, publisher } = json.data;
+    const ogData = {
+      title: title || void 0,
+      description: description || void 0,
+      image: image?.url || void 0,
+      url: canonicalUrl || url,
+      siteName: publisher || void 0
+    };
+    ogCache.set(url, ogData);
+    return ogData;
+  } catch (error) {
+    console.warn("[react-sharesheet] Failed to fetch OG data:", error);
+    return null;
+  }
+}
+
 // src/share-functions.ts
 function shareToWhatsApp(url, text) {
   const encoded = encodeURIComponent(`${text}
@@ -231,6 +263,37 @@ function useShareSheet({
     shareReddit
   };
 }
+function useOGData(url) {
+  const [ogData, setOgData] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!url) {
+      setOgData(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchOGData(url).then((data) => {
+      if (!cancelled) {
+        setOgData(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err.message : "Failed to fetch OG data");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  return { ogData, loading, error };
+}
 
 // src/platforms.tsx
 var import_lucide_react = require("lucide-react");
@@ -368,32 +431,6 @@ var CSS_VAR_DEFAULTS = CSS_VAR_UI_DEFAULTS;
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_BUTTON_SIZE = 45;
 var DEFAULT_ICON_SIZE = 22;
-var IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico", "avif"];
-var VIDEO_EXTENSIONS = ["mp4", "webm", "mov", "avi", "mkv", "m4v", "ogv"];
-var AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "wma"];
-function detectPreviewType(url) {
-  try {
-    const pathname = new URL(url, "http://localhost").pathname;
-    const ext = pathname.split(".").pop()?.toLowerCase() || "";
-    if (IMAGE_EXTENSIONS.includes(ext)) return "image";
-    if (VIDEO_EXTENSIONS.includes(ext)) return "video";
-    if (AUDIO_EXTENSIONS.includes(ext)) return "audio";
-    if (url.includes("/api/og") || url.includes("og-image")) return "image";
-    if (url.includes("youtube.com") || url.includes("vimeo.com")) return "video";
-    return "link";
-  } catch {
-    return "link";
-  }
-}
-function getFilenameFromUrl(url) {
-  try {
-    const pathname = new URL(url, "http://localhost").pathname;
-    const filename = pathname.split("/").pop() || "";
-    return decodeURIComponent(filename);
-  } catch {
-    return url;
-  }
-}
 var defaultClasses = {
   root: "max-w-md mx-auto",
   header: "text-center mb-2",
@@ -402,12 +439,8 @@ var defaultClasses = {
   preview: "flex justify-center mb-4 px-4",
   previewSkeleton: "rounded-xl overflow-hidden",
   previewImage: "",
-  previewVideo: "",
-  previewFile: "",
-  previewFileIcon: "",
-  previewFilename: "truncate",
-  previewLink: "",
-  grid: "px-2 py-6 flex flex-row items-center gap-4 gap-y-6 flex-wrap justify-center",
+  previewMeta: "",
+  grid: "px-2 py-6 flex flex-row items-start gap-4 gap-y-6 flex-wrap justify-center",
   button: "flex flex-col items-center gap-0 text-xs w-[60px] outline-none cursor-pointer group",
   buttonIcon: "p-2 rounded-full transition-all flex items-center justify-center group-hover:scale-110 group-active:scale-95 mb-2",
   buttonLabel: ""
@@ -421,28 +454,10 @@ var shimmerKeyframes = `
 function cssVar(name, fallback) {
   return `var(${name}, ${fallback})`;
 }
-function normalizePreview(preview) {
-  if (!preview) return null;
-  if (typeof preview === "string") {
-    const type2 = detectPreviewType(preview);
-    return {
-      url: preview,
-      type: type2,
-      filename: getFilenameFromUrl(preview)
-    };
-  }
-  const type = preview.type === "auto" || !preview.type ? detectPreviewType(preview.url) : preview.type;
-  return {
-    ...preview,
-    type,
-    filename: preview.filename || getFilenameFromUrl(preview.url)
-  };
-}
 function ShareSheetContent({
   title = "Share",
   shareUrl,
   shareText,
-  preview,
   downloadUrl,
   downloadFilename,
   className,
@@ -457,15 +472,15 @@ function ShareSheetContent({
   labels = {},
   icons = {}
 }) {
-  const [mediaLoaded, setMediaLoaded] = (0, import_react2.useState)(false);
-  const [mediaError, setMediaError] = (0, import_react2.useState)(false);
-  const handleMediaLoad = (0, import_react2.useCallback)(() => {
-    setMediaLoaded(true);
+  const [imageLoaded, setImageLoaded] = (0, import_react2.useState)(false);
+  const [imageError, setImageError] = (0, import_react2.useState)(false);
+  const { ogData, loading: ogLoading } = useOGData(shareUrl);
+  const handleImageLoad = (0, import_react2.useCallback)(() => {
+    setImageLoaded(true);
   }, []);
-  const handleMediaError = (0, import_react2.useCallback)(() => {
-    setMediaError(true);
+  const handleImageError = (0, import_react2.useCallback)(() => {
+    setImageError(true);
   }, []);
-  const previewConfig = (0, import_react2.useMemo)(() => normalizePreview(preview), [preview]);
   const shareSheet = useShareSheet({
     shareUrl,
     shareText,
@@ -522,49 +537,30 @@ function ShareSheetContent({
       return true;
     });
   }, [buttons, show, hide]);
-  const showPreview = !!previewConfig;
+  const bgColor = cssVar(CSS_VARS_UI.previewBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewBg]);
+  const shimmerColor = cssVar(CSS_VARS_UI.previewShimmer, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewShimmer]);
+  const textColor = cssVar(CSS_VARS_UI.subtitleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.subtitleColor]);
   const renderPreview = () => {
-    if (!previewConfig) return null;
-    const { type, url, filename, alt, poster } = previewConfig;
-    const bgColor = cssVar(CSS_VARS_UI.previewBg, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewBg]);
-    const shimmerColor = cssVar(CSS_VARS_UI.previewShimmer, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.previewShimmer]);
-    const textColor = cssVar(CSS_VARS_UI.subtitleColor, CSS_VAR_UI_DEFAULTS[CSS_VARS_UI.subtitleColor]);
-    const UrlLabel = ({ displayUrl = url }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        className: cn(defaultClasses.previewFilename, classNames.previewFilename),
-        style: {
-          color: textColor,
-          fontSize: "10px",
-          opacity: 0.5,
-          textAlign: "center",
-          marginTop: "6px"
-        },
-        children: displayUrl
-      }
-    );
-    const PlaceholderCard = ({
-      icon: IconComponent,
-      isLoading = false,
-      label,
-      displayUrl
-    }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    const ogImage = ogData?.image;
+    const hasImage = ogImage && !imageError;
+    if (ogLoading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
           style: {
             position: "relative",
             backgroundColor: bgColor,
-            width: "200px",
-            height: "120px",
+            width: "100%",
+            maxWidth: "320px",
+            aspectRatio: "1.91 / 1",
             overflow: "hidden",
             display: "flex",
             alignItems: "center",
             justifyContent: "center"
           },
           children: [
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 style: {
@@ -575,197 +571,125 @@ function ShareSheetContent({
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: "8px"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { size: 32, style: { color: textColor, opacity: 0.4 } }),
-                  label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: textColor, fontSize: "11px", opacity: 0.4 }, children: label })
-                ]
-              }
-            )
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Link2, { size: 32, style: { color: textColor, opacity: 0.4 } })
           ]
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UrlLabel, { displayUrl })
-    ] });
-    if (mediaError && (type === "image" || type === "video")) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlaceholderCard, { icon: import_lucide_react2.Link2, displayUrl: url });
+      ) });
     }
-    switch (type) {
-      case "image":
-        if (!mediaLoaded) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              "div",
-              {
-                className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
-                style: {
-                  position: "relative",
-                  backgroundColor: bgColor,
-                  width: "200px",
-                  height: "120px",
-                  overflow: "hidden",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
-                        animation: "sharesheet-shimmer 1.5s infinite"
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Image, { size: 32, style: { color: textColor, opacity: 0.4 } })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UrlLabel, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "img",
-              {
-                src: url,
-                alt: alt || "Preview",
-                onLoad: handleMediaLoad,
-                onError: handleMediaError,
-                style: { display: "none" }
-              }
-            )
-          ] });
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "img",
+    if (!ogData || !hasImage) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
+          style: {
+            position: "relative",
+            backgroundColor: bgColor,
+            width: "100%",
+            maxWidth: "320px",
+            aspectRatio: "1.91 / 1",
+            overflow: "hidden",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
             {
-              src: url,
-              alt: alt || "Preview",
-              className: cn(defaultClasses.previewImage, classNames.previewImage),
               style: {
-                maxWidth: "100%",
-                maxHeight: "180px",
-                borderRadius: "12px",
-                opacity: 1,
-                transition: "opacity 0.3s ease-in-out"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UrlLabel, {})
-        ] });
-      case "video":
-        if (!mediaLoaded) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              "div",
-              {
-                className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
-                style: {
-                  position: "relative",
-                  backgroundColor: bgColor,
-                  width: "200px",
-                  height: "120px",
-                  overflow: "hidden",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center"
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        inset: 0,
-                        background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
-                        animation: "sharesheet-shimmer 1.5s infinite"
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Film, { size: 32, style: { color: textColor, opacity: 0.4 } })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UrlLabel, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "video",
-              {
-                src: url,
-                poster,
-                onLoadedData: handleMediaLoad,
-                onError: handleMediaError,
-                style: { display: "none" },
-                muted: true,
-                playsInline: true,
-                preload: "metadata"
-              }
-            )
-          ] });
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", borderRadius: "12px", overflow: "hidden" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "video",
-              {
-                src: url,
-                poster,
-                className: cn(defaultClasses.previewVideo, classNames.previewVideo),
-                style: {
-                  maxWidth: "100%",
-                  maxHeight: "180px",
-                  display: "block"
-                },
-                muted: true,
-                playsInline: true,
-                preload: "metadata"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  pointerEvents: "none"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "div",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px",
+                padding: "16px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Link2, { size: 32, style: { color: textColor, opacity: 0.4 } }),
+                ogData?.title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
                   {
                     style: {
-                      backgroundColor: "rgba(0, 0, 0, 0.5)",
-                      borderRadius: "50%",
-                      padding: "10px"
+                      color: textColor,
+                      fontSize: "12px",
+                      opacity: 0.6,
+                      textAlign: "center",
+                      maxWidth: "280px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      display: "-webkit-box",
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: "vertical"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Play, { size: 20, fill: "white", color: "white" })
+                    children: ogData.title
                   }
                 )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UrlLabel, {})
-        ] });
-      case "audio":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlaceholderCard, { icon: import_lucide_react2.Music, label: filename || "Audio", displayUrl: url });
-      case "file":
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlaceholderCard, { icon: import_lucide_react2.FileText, label: filename || "File", displayUrl: url });
-      case "link":
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlaceholderCard, { icon: import_lucide_react2.Link2, displayUrl: url });
+              ]
+            }
+          )
+        }
+      ) });
+    }
+    if (!imageLoaded) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: cn(defaultClasses.previewSkeleton, classNames.previewSkeleton),
+            style: {
+              position: "relative",
+              backgroundColor: bgColor,
+              width: "100%",
+              maxWidth: "320px",
+              aspectRatio: "1.91 / 1",
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    background: `linear-gradient(90deg, transparent, ${shimmerColor}, transparent)`,
+                    animation: "sharesheet-shimmer 1.5s infinite"
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Image, { size: 32, style: { color: textColor, opacity: 0.4 } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "img",
+          {
+            src: ogImage,
+            alt: ogData.title || "Preview",
+            onLoad: handleImageLoad,
+            onError: handleImageError,
+            style: { display: "none" }
+          }
+        )
+      ] });
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "img",
+      {
+        src: ogImage,
+        alt: ogData.title || "Preview",
+        className: cn(defaultClasses.previewImage, classNames.previewImage),
+        style: {
+          width: "100%",
+          maxWidth: "320px",
+          height: "auto",
+          borderRadius: "12px",
+          opacity: 1,
+          transition: "opacity 0.3s ease-in-out"
+        }
+      }
+    ) });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn(defaultClasses.root, classNames.root, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { dangerouslySetInnerHTML: { __html: shimmerKeyframes } }),
@@ -787,7 +711,7 @@ function ShareSheetContent({
         }
       )
     ] }),
-    showPreview && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(defaultClasses.preview, classNames.preview), children: renderPreview() }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(defaultClasses.preview, classNames.preview), children: renderPreview() }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(defaultClasses.grid, classNames.grid), children: visibleButtons.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
       {
@@ -827,8 +751,8 @@ function ShareSheetContent({
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var defaultDrawerClasses = {
   overlay: "fixed inset-0 z-[70]",
-  drawer: "flex flex-col rounded-t-[14px] h-[70%] mt-24 fixed bottom-0 left-0 right-0 z-[80] border-t outline-none",
-  drawerInner: "p-4 rounded-t-[14px] flex-1 overflow-auto",
+  drawer: "flex flex-col rounded-t-[14px] max-h-[90%] fixed bottom-0 left-0 right-0 z-[80] border-t outline-none",
+  drawerInner: "p-4 pb-8 rounded-t-[14px] overflow-auto",
   handle: "mx-auto w-12 h-1.5 shrink-0 rounded-full mb-6",
   trigger: ""
 };
@@ -839,7 +763,6 @@ function ShareSheetDrawer({
   title = "Share",
   shareUrl,
   shareText,
-  preview,
   downloadUrl,
   downloadFilename,
   disabled,
@@ -917,7 +840,6 @@ function ShareSheetDrawer({
                       title,
                       shareUrl,
                       shareText,
-                      preview,
                       downloadUrl,
                       downloadFilename,
                       className,