@linktr.ee/messaging-react 1.31.0 → 1.32.1-rc-1777007852

package/src/components/LockedAttachment/components/Visitor/Card.tsx

@@ -1,22 +1,14 @@
-import {
-  CheckCircleIcon,
-  LockOpenIcon,
-  LockSimpleIcon,
-} from '@phosphor-icons/react'
+import { CheckCircleIcon } from '@phosphor-icons/react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import type {
   LockedAttachmentBaseProps,
   LockedAttachmentSource,
-  PaymentStatus,
 } from '../../types'
 import { renderTypeIcon } from '../../utils/icons'
-import { getSourceType } from '../../utils/mimeType'
 
 import CardActions from './CardActions'
-import ImagePreview from './CardImagePreview'
-import MediaPreview from './CardMediaPreview'
-import ThumbnailPreview from './CardThumbnailPreview'
+import CardThumbnail from './CardThumbnail'
 
 export interface VisitorCardProps extends LockedAttachmentBaseProps {
   /**
@@ -43,10 +35,6 @@ export interface VisitorCardProps extends LockedAttachmentBaseProps {
   isUnlocking?: boolean
 }
 
-function getLockIcon(paymentStatus?: PaymentStatus): React.ElementType {
-  return paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon
-}
-
 const VisitorCard: React.FC<VisitorCardProps> = ({
   title,
   amountText,
@@ -60,15 +48,16 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
   isUnlocking = false,
 }) => {
   const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-  const hasMounted = useRef(false)
+
+  const cardRef = useRef<HTMLDivElement>(null)
   const fetchingRef = useRef(false)
-  // Stable ref so fetchSource doesn't change identity when onFetchSource prop changes
+
   const onFetchSourceRef = useRef(onFetchSource)
   onFetchSourceRef.current = onFetchSource
 
-  const isLocked = source === undefined
-  const sourceType = getSourceType(mimeType)
-  const LockIcon = isLocked ? getLockIcon(paymentStatus) : undefined
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveThumbnail = source?.thumbnailUrl ?? thumbnailUrl
+  const effectiveRedeemUrl = source?.redeemUrl
 
   const fetchSource = useCallback(async (): Promise<void> => {
     if (fetchingRef.current) return
@@ -79,20 +68,7 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
     } finally {
       fetchingRef.current = false
     }
-  }, []) // stable — reads onFetchSource via ref
-
-  // When paymentStatus transitions to 'paid' (e.g. after checkout completes),
-  // automatically fetch the source. Skipped on mount.
-  useEffect(() => {
-    if (!hasMounted.current) {
-      hasMounted.current = true
-      return
-    }
-
-    if (paymentStatus === 'paid') {
-      void fetchSource()
-    }
-  }, [paymentStatus, fetchSource])
+  }, [])
 
   const handleUnlockClick = useCallback(() => {
     if (paymentStatus === 'paid') {
@@ -100,44 +76,41 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
     } else {
       onUnlockClick?.()
     }
-  }, [paymentStatus, onUnlockClick, fetchSource])
-
-  let mediaPreview: React.ReactNode
-  if (sourceType === 'image') {
-    mediaPreview = (
-      <ImagePreview
-        key={source?.sourceUrl}
-        sourceUrl={source?.sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        title={title}
-        LockIcon={LockIcon}
-      />
-    )
-  } else if (sourceType === 'document') {
-    mediaPreview = (
-      <ThumbnailPreview
-        key={source?.sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        LockIcon={LockIcon}
-      />
+  }, [paymentStatus, fetchSource, onUnlockClick])
+
+  // Fetch source when card is in viewport
+  useEffect(() => {
+    if (!cardRef.current) return
+    if (paymentStatus !== 'paid' || source !== undefined) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          void fetchSource()
+          observer.disconnect()
+        }
+      },
+      { threshold: 1.0 }
     )
-  } else {
-    mediaPreview = (
-      <MediaPreview
-        key={source?.sourceUrl}
-        sourceUrl={source?.sourceUrl}
-        thumbnailUrl={thumbnailUrl}
+
+    observer.observe(cardRef.current)
+    return () => observer.disconnect()
+  }, [paymentStatus, source, fetchSource])
+
+  return (
+    <div
+      ref={cardRef}
+      data-testid="locked-attachment"
+      className="w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
+    >
+      <CardThumbnail
+        title={title}
+        sourceUrl={effectiveSourceUrl}
+        thumbnailUrl={effectiveThumbnail}
         mimeType={mimeType}
-        LockIcon={LockIcon}
+        paymentStatus={paymentStatus}
       />
-    )
-  }
 
-  return (
-    <div className="w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
-      {mediaPreview}
       <div className="px-4 pb-3 pt-3">
         <p className="mb-1.5 truncate text-base font-medium text-black">
           {title}
@@ -147,12 +120,14 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
             className: 'size-5 shrink-0 text-black/55',
             weight: 'regular',
           })}
-          {detail != null ? (
+
+          {detail && (
             <span className="text-xs font-medium text-black/55">{detail}</span>
-          ) : null}
+          )}
+
           {paymentStatus === 'paid' ? (
-            <>
-              <span className="text-xs font-medium text-black/55">•</span>
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
               <span className="text-xs font-medium text-[#008236]">
                 Purchased
               </span>
@@ -160,21 +135,21 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
                 className="size-4 text-[#008236]"
                 weight="bold"
               />
-            </>
+            </React.Fragment>
           ) : amountText != null ? (
-            <>
-              <span className="text-xs font-medium text-black/55">•</span>
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
               <span className="text-xs font-medium text-black/55">
                 {amountText}
               </span>
-            </>
+            </React.Fragment>
           ) : null}
         </div>
+
         <CardActions
-          isLocked={isLocked}
           isUnlocking={isUnlocking}
-          sourceUrl={source?.sourceUrl}
-          redeemUrl={source?.redeemUrl}
+          sourceUrl={effectiveSourceUrl}
+          redeemUrl={effectiveRedeemUrl}
           onUnlockClicked={handleUnlockClick}
           onDownloadClicked={onDownloadClick}
         />

package/src/components/LockedAttachment/components/Visitor/CardActions.tsx

@@ -2,17 +2,15 @@ import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
 import React from 'react'
 
 interface CardActionsProps {
-  isLocked: boolean
-  isUnlocking?: boolean
   sourceUrl?: string
   redeemUrl?: string
   onUnlockClicked?: () => void
   onDownloadClicked?: () => void
+  isUnlocking?: boolean
 }
 
 const CardActions: React.FC<CardActionsProps> = (props) => {
   const {
-    isLocked,
     isUnlocking = false,
     sourceUrl,
     redeemUrl,
@@ -20,6 +18,8 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
     onDownloadClicked,
   } = props
 
+  const isLocked = sourceUrl === undefined
+
   if (isLocked && onUnlockClicked != null) {
     return (
       <button

package/src/components/LockedAttachment/components/Visitor/CardThumbnail.tsx

@@ -0,0 +1,81 @@
+import { LockOpenIcon, LockSimpleIcon } from '@phosphor-icons/react'
+import React, { useState } from 'react'
+
+import { PaymentStatus } from '../../types'
+import { renderTypeIcon } from '../../utils/icons'
+import { getSourceType } from '../../utils/mimeType'
+import MediaPlayer from '../MediaPlayer'
+
+interface CardThumbnailProps {
+  title?: string
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+  paymentStatus?: PaymentStatus
+}
+
+const CardThumbnail: React.FC<CardThumbnailProps> = ({
+  title,
+  sourceUrl,
+  thumbnailUrl,
+  mimeType,
+  paymentStatus,
+}) => {
+  const [sourceReady, setSourceReady] = useState(false)
+
+  const isLocked = sourceUrl === undefined
+  const sourceType = getSourceType(mimeType)
+
+  if (!isLocked) {
+    if (sourceType === 'audio' || sourceType === 'video') {
+      return (
+        <MediaPlayer
+          source={sourceUrl}
+          poster={thumbnailUrl}
+          mimeType={mimeType}
+        />
+      )
+    }
+
+    return (
+      <div className="relative overflow-hidden bg-black/5">
+        <img
+          src={sourceType === 'document' ? thumbnailUrl : sourceUrl}
+          alt={title}
+          className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+          draggable={false}
+          onLoad={() => setSourceReady(true)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative aspect-video overflow-hidden bg-black/5">
+      {thumbnailUrl != null ? (
+        <img
+          src={thumbnailUrl}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+          draggable={false}
+        />
+      ) : (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {renderTypeIcon(mimeType, {
+            className: 'size-12 text-black/20',
+            weight: 'regular',
+          })}
+        </div>
+      )}
+      {isLocked && (
+        <div className="absolute inset-0 bg-black/30">
+          <div className="absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
+            {paymentStatus === 'paid' ? <LockOpenIcon /> : <LockSimpleIcon />}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CardThumbnail

package/src/components/LockedAttachment/types.ts

@@ -16,6 +16,8 @@ export interface LockedAttachmentSource {
   sourceUrl: string
   /** URL opened when the visitor clicks Download — may be a file or a web destination. */
   redeemUrl?: string
+  /** Thumbnail URL from the fetched asset — overrides the metadata thumbnail when present. */
+  thumbnailUrl?: string
 }
 
 export type { PaymentStatus }

package/dist/Card-C5t3dZ5q.js

@@ -1,350 +0,0 @@
-import { jsxs as m, jsx as e, Fragment as L } from "react/jsx-runtime";
-import { PauseIcon as _, PlayIcon as F, EyeSlashIcon as M, EyeIcon as R, XIcon as S, CheckCircleIcon as X, LockOpenIcon as D, LockIcon as B } from "@phosphor-icons/react";
-import C from "classnames";
-import { r as I, M as q, g as O } from "./MediaPlayer-BCsdmsON.js";
-import { useState as k, useRef as T, useEffect as z, useCallback as E } from "react";
-const P = ({
-  thumbnailUrl: o,
-  mimeType: a,
-  overlayIcon: s,
-  darkOverlay: r,
-  onClick: n
-}) => /* @__PURE__ */ m(
-  "button",
-  {
-    type: "button",
-    disabled: !n,
-    className: C(
-      "relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none",
-      { "cursor-pointer": !!n, "cursor-default": !n }
-    ),
-    onClick: n,
-    "aria-label": s ? "Toggle preview" : void 0,
-    children: [
-      o ? /* @__PURE__ */ e(
-        "img",
-        {
-          src: o,
-          alt: "",
-          className: "absolute inset-0 h-full w-full object-cover"
-        }
-      ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: I(a, {
-        className: "size-12 text-black/20",
-        weight: "regular"
-      }) }),
-      r && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 bg-black/30" }),
-      s && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white", children: /* @__PURE__ */ e(s, { className: "size-4", weight: "fill" }) })
-    ]
-  }
-), $ = (o) => {
-  const { sourceUrl: a, thumbnailUrl: s, mimeType: r } = o, [n, c] = k(!1), [i, h] = k(0), [b, v] = k(!1), f = T(null), w = T(null), d = T(null);
-  z(() => {
-    const t = f.current;
-    t && (n ? t.play().catch(() => c(!1)) : t.pause());
-  }, [n]), z(() => {
-    if (!n) {
-      d.current !== null && cancelAnimationFrame(d.current);
-      return;
-    }
-    const t = () => {
-      const l = f.current;
-      l && l.duration && !b && h(l.currentTime / l.duration), d.current = requestAnimationFrame(t);
-    };
-    return d.current = requestAnimationFrame(t), () => {
-      d.current !== null && cancelAnimationFrame(d.current);
-    };
-  }, [n, b]);
-  const [x, g] = k(!1), u = E(
-    (t) => {
-      var A, j;
-      const l = w.current;
-      if (!l) return 0;
-      const y = "touches" in t ? ((A = t.touches[0]) == null ? void 0 : A.clientX) ?? ((j = t.changedTouches[0]) == null ? void 0 : j.clientX) ?? 0 : t.clientX, N = l.getBoundingClientRect();
-      return Math.max(0, Math.min(1, (y - N.left) / N.width));
-    },
-    []
-  ), p = E((t) => {
-    const l = f.current;
-    l && l.duration && (l.currentTime = t * l.duration);
-  }, []);
-  z(() => {
-    if (!b) return;
-    const t = (y) => {
-      const N = u(y);
-      h(N), p(N);
-    }, l = (y) => {
-      v(!1), p(u(y));
-    };
-    return window.addEventListener("mousemove", t), window.addEventListener("mouseup", l), window.addEventListener("touchmove", t, { passive: !0 }), window.addEventListener("touchend", l), () => {
-      window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", l), window.removeEventListener("touchmove", t), window.removeEventListener("touchend", l);
-    };
-  }, [b, u, p]);
-  const U = E(() => c((t) => !t), []);
-  return /* @__PURE__ */ m("div", { className: "relative", children: [
-    a && /* @__PURE__ */ e(
-      "audio",
-      {
-        ref: f,
-        src: a,
-        loop: !0,
-        onCanPlay: () => g(!0),
-        onEnded: () => {
-          c(!1), h(0);
-        },
-        children: /* @__PURE__ */ e("track", { kind: "captions" })
-      }
-    ),
-    /* @__PURE__ */ e(
-      P,
-      {
-        thumbnailUrl: s,
-        mimeType: r,
-        overlayIcon: a && x ? n ? _ : F : void 0,
-        onClick: a && x ? U : void 0
-      }
-    ),
-    a && x && /* @__PURE__ */ e("div", { className: "absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent", children: /* @__PURE__ */ e(
-      "div",
-      {
-        ref: w,
-        role: "slider",
-        "aria-label": "Playback position",
-        "aria-valuenow": Math.round(i * 100),
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        tabIndex: 0,
-        className: "relative flex h-4 w-full cursor-pointer items-center",
-        onMouseDown: (t) => {
-          t.stopPropagation(), v(!0);
-          const l = u(t);
-          h(l), p(l);
-        },
-        onTouchStart: (t) => {
-          t.stopPropagation(), v(!0);
-          const l = u(t);
-          h(l), p(l);
-        },
-        onClick: (t) => t.stopPropagation(),
-        onKeyDown: (t) => {
-          t.key === "ArrowRight" && p(Math.min(1, i + 0.05)), t.key === "ArrowLeft" && p(Math.max(0, i - 0.05));
-        },
-        children: /* @__PURE__ */ e("div", { className: "w-full overflow-hidden rounded-full bg-white/30 h-1", children: /* @__PURE__ */ e(
-          "div",
-          {
-            className: "h-full rounded-full bg-white",
-            style: { width: `${Math.round(i * 100)}%` }
-          }
-        ) })
-      }
-    ) })
-  ] });
-}, K = (o) => {
-  const { sourceUrl: a, thumbnailUrl: s, mimeType: r, title: n } = o, [c, i] = k(!1);
-  return c && a ? /* @__PURE__ */ m("div", { className: "relative", children: [
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: "block w-full cursor-pointer border-0 p-0 text-left appearance-none",
-        onClick: () => i(!1),
-        "aria-label": "Close preview",
-        children: /* @__PURE__ */ e("img", { src: a, alt: n ?? "", className: "block w-full" })
-      }
-    ),
-    /* @__PURE__ */ e(V, { onClose: () => i(!1) })
-  ] }) : /* @__PURE__ */ e(
-    P,
-    {
-      thumbnailUrl: s,
-      mimeType: r,
-      overlayIcon: a ? M : void 0,
-      onClick: a ? () => i(!0) : void 0
-    }
-  );
-}, V = ({ onClose: o }) => /* @__PURE__ */ e(
-  "button",
-  {
-    type: "button",
-    onClick: o,
-    className: "absolute left-3 top-3 z-40 flex size-8 items-center justify-center rounded-full bg-black/60 text-white",
-    "aria-label": "Close preview",
-    children: /* @__PURE__ */ e(R, { className: "size-4", weight: "fill" })
-  }
-), G = (o) => {
-  const { sourceUrl: a, thumbnailUrl: s, mimeType: r } = o, [n, c] = k(!1), i = () => {
-    c(!1);
-  };
-  return a ? /* @__PURE__ */ m(
-    "div",
-    {
-      className: C("relative overflow-hidden", {
-        "aspect-video": !n
-      }),
-      children: [
-        /* @__PURE__ */ e(
-          q,
-          {
-            source: a,
-            mimeType: r,
-            poster: s,
-            playing: n,
-            loop: !0,
-            controls: !1,
-            muted: !0,
-            showProgress: !0,
-            onContainerClick: i
-          }
-        ),
-        !n && /* @__PURE__ */ m(
-          "button",
-          {
-            type: "button",
-            className: "absolute inset-0 block cursor-pointer border-0 p-0 text-left appearance-none",
-            onClick: () => c(!0),
-            "aria-label": "Expand video preview",
-            children: [
-              s ? /* @__PURE__ */ e(
-                "img",
-                {
-                  src: s,
-                  alt: "",
-                  className: "absolute inset-0 h-full w-full object-cover"
-                }
-              ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: I(r, {
-                className: "size-12 text-black/20",
-                weight: "regular"
-              }) }),
-              /* @__PURE__ */ e("div", { className: "pointer-events-none absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white", children: /* @__PURE__ */ e(M, { className: "size-4", weight: "fill" }) })
-            ]
-          }
-        ),
-        n && /* @__PURE__ */ e(H, { onClose: i })
-      ]
-    }
-  ) : /* @__PURE__ */ e(P, { thumbnailUrl: s, mimeType: r });
-}, H = ({ onClose: o }) => /* @__PURE__ */ e(
-  "button",
-  {
-    type: "button",
-    onClick: o,
-    className: "absolute left-3 top-3 z-40 flex size-8 items-center justify-center rounded-full bg-black/60 text-white",
-    "aria-label": "Close preview",
-    children: /* @__PURE__ */ e(R, { className: "size-4", weight: "fill" })
-  }
-), ee = (o) => {
-  const {
-    title: a,
-    mimeType: s = "application/octet-stream",
-    thumbnailUrl: r,
-    sourceUrl: n,
-    detail: c,
-    amountText: i,
-    placeholderTitle: h = "Attachment title",
-    placeholderAmountText: b,
-    paymentStatus: v,
-    onDismiss: f,
-    isPreview: w = !1
-  } = o, d = O(s), x = i ?? b, g = !i && !!b;
-  let u;
-  return w && d === "audio" ? u = /* @__PURE__ */ e(
-    $,
-    {
-      sourceUrl: n,
-      thumbnailUrl: r,
-      mimeType: s
-    },
-    n
-  ) : w && d === "video" ? u = /* @__PURE__ */ e(
-    G,
-    {
-      sourceUrl: n,
-      thumbnailUrl: r,
-      mimeType: s
-    },
-    n
-  ) : w && d === "image" ? u = /* @__PURE__ */ e(
-    K,
-    {
-      sourceUrl: n,
-      thumbnailUrl: r,
-      mimeType: s,
-      title: a
-    },
-    n
-  ) : u = /* @__PURE__ */ e(
-    P,
-    {
-      thumbnailUrl: r,
-      mimeType: s,
-      overlayIcon: f ? void 0 : v === "paid" ? D : B,
-      darkOverlay: !0
-    }
-  ), /* @__PURE__ */ m("div", { className: "relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]", children: [
-    f && /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: f,
-        className: "absolute right-3 top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white",
-        "aria-label": "Dismiss attachment",
-        children: /* @__PURE__ */ e(S, { className: "size-4", weight: "bold" })
-      }
-    ),
-    u,
-    /* @__PURE__ */ m("div", { className: "px-4 pb-3 pt-3", children: [
-      /* @__PURE__ */ e(
-        "p",
-        {
-          className: C("mb-1.5 truncate text-base font-medium", {
-            "text-black/30": !a,
-            "text-black": !!a
-          }),
-          children: a || h
-        }
-      ),
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: [
-        I(s, {
-          className: "size-5 shrink-0 text-black/55",
-          weight: "regular"
-        }),
-        c && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: c }),
-        v === "paid" ? /* @__PURE__ */ m(L, { children: [
-          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
-          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#008236]", children: "Purchased" }),
-          /* @__PURE__ */ e(
-            X,
-            {
-              className: "size-4 text-[#008236]",
-              weight: "bold"
-            }
-          )
-        ] }) : x && /* @__PURE__ */ m(L, { children: [
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: C("text-xs font-medium", {
-                "text-black/30": g,
-                "text-black/55": !g
-              }),
-              children: "•"
-            }
-          ),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: C("text-xs font-medium", {
-                "text-black/30": g,
-                "text-black/55": !g
-              }),
-              children: x
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-};
-export {
-  ee as default
-};
-//# sourceMappingURL=Card-C5t3dZ5q.js.map