@linktr.ee/messaging-react 3.10.0 → 3.11.0-rc-1783756377

package/dist/Card-BnbNynLQ.js

@@ -0,0 +1,694 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { PlayIcon as B, LockOpenIcon as q, LockSimpleIcon as V, CaretLeftIcon as F, CaretRightIcon as H, ImagesIcon as J, DownloadSimpleIcon as R, XIcon as Q, PencilSimpleIcon as W } from "@phosphor-icons/react";
+import y, { useState as k, useRef as I, useCallback as L, useEffect as Y } from "react";
+import v from "classnames";
+import { r as A, g as T, A as G } from "./index-DJXjS2H9.js";
+import { L as Z, P as O } from "./LoadingDots-Ct3WmVlT.js";
+const z = ({
+  variant: t,
+  title: a,
+  placeholderTitle: n = "Attachment title",
+  mimeType: r,
+  detail: i,
+  statusBadge: s,
+  action: c,
+  icon: u,
+  trailingAction: d
+}) => {
+  const l = t === "dark", o = a || n, f = !a, m = u ?? A(r, {
+    className: v(
+      "size-5 shrink-0",
+      l ? "text-white/55" : "text-black/55"
+    ),
+    weight: "regular"
+  });
+  return /* @__PURE__ */ h("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ h("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        o.trim() !== "" && /* @__PURE__ */ e(
+          "p",
+          {
+            className: v("truncate text-base font-medium leading-6", {
+              "text-black/90": !l && !f,
+              "text-black/30": !l && f,
+              "text-white/30": l && f,
+              "text-white": l && !f
+            }),
+            children: o
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: "flex flex-wrap items-center gap-1", children: [
+          m,
+          i != null && i !== "" && /* @__PURE__ */ e(
+            "span",
+            {
+              className: v(
+                "text-xs font-medium",
+                l ? "text-white/55" : "text-black/55"
+              ),
+              children: i
+            }
+          ),
+          s
+        ] })
+      ] }),
+      d && /* @__PURE__ */ e("div", { className: "shrink-0", children: d })
+    ] }),
+    c
+  ] });
+}, _ = ({
+  paymentStatus: t,
+  mimeType: a,
+  isPlayable: n,
+  isLocked: r
+}) => {
+  const i = a ? T(a) : void 0, c = (n ?? (i === "video" || i === "audio")) && !r ? B : t === "paid" ? q : V;
+  return /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: v(
+        "flex size-12 items-center justify-center rounded-full bg-black/30 text-white",
+        c === B && "group-hover:bg-black/40"
+      ),
+      children: /* @__PURE__ */ e(c, { className: "size-6", weight: "fill" })
+    }
+  ) });
+};
+function ee(t) {
+  const a = T(t.mimeType);
+  return a === "video" || a === "audio";
+}
+const te = ({
+  variant: t,
+  gallery: a,
+  title: n,
+  showLocked: r,
+  paymentStatus: i,
+  topRight: s
+}) => {
+  const [c, u] = k(0), d = a.length, l = Math.min(c, d - 1), o = a[l], f = ee(o), m = (g) => {
+    g.stopPropagation(), u((p) => Math.max(0, p - 1));
+  }, w = (g) => {
+    g.stopPropagation(), u((p) => Math.min(d - 1, p + 1));
+  }, x = l === 0, b = l === d - 1, N = t === "dark";
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: v(
+        "group relative overflow-hidden rounded-t-md",
+        r ? "aspect-[337/386]" : void 0
+      ),
+      children: [
+        r ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: v(
+              "absolute inset-0",
+              N ? "bg-white/10" : "bg-black/5"
+            ),
+            children: o.thumbnailUrl && /* @__PURE__ */ e(
+              "img",
+              {
+                src: o.thumbnailUrl,
+                alt: "",
+                "aria-hidden": !0,
+                draggable: !1,
+                className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ e(
+          G,
+          {
+            mimeType: o.mimeType,
+            sourceUrl: o.sourceUrl,
+            thumbnailUrl: o.thumbnailUrl,
+            title: n,
+            variant: t,
+            mediaPlayerProps: { autoPlay: !0 }
+          },
+          l
+        ),
+        r && /* @__PURE__ */ e(
+          _,
+          {
+            paymentStatus: i,
+            isPlayable: f,
+            isLocked: r
+          }
+        ),
+        d > 1 && /* @__PURE__ */ h(y.Fragment, { children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: m,
+              disabled: x,
+              "aria-label": "Previous item",
+              className: v(
+                "absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
+                x ? "opacity-40" : "hover:bg-black/40"
+              ),
+              children: /* @__PURE__ */ e(F, { className: "size-5", weight: "bold" })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: w,
+              disabled: b,
+              "aria-label": "Next item",
+              className: v(
+                "absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
+                b ? "opacity-40" : "hover:bg-black/40"
+              ),
+              children: /* @__PURE__ */ e(H, { className: "size-5", weight: "bold" })
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30", children: /* @__PURE__ */ h("span", { className: "text-xs font-medium leading-none text-white", children: [
+            l + 1,
+            "/",
+            d
+          ] }) })
+        ] }),
+        s && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: s })
+      ]
+    }
+  );
+}, ae = ({
+  variant: t,
+  mimeType: a,
+  thumbnailUrl: n,
+  title: r,
+  source: i,
+  showLocked: s,
+  paymentStatus: c,
+  topRight: u,
+  containedImage: d = !1
+}) => {
+  const l = s || i == null ? void 0 : i.sourceUrl, o = s ? n : (i == null ? void 0 : i.thumbnailUrl) ?? n, f = t === "dark";
+  return /* @__PURE__ */ h("div", { className: "relative overflow-hidden rounded-t-md", children: [
+    s ? /* @__PURE__ */ h(
+      "div",
+      {
+        className: v(
+          "relative aspect-video overflow-hidden",
+          f ? "bg-white/10" : "bg-black/5"
+        ),
+        children: [
+          o ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: o,
+              alt: "",
+              "aria-hidden": !0,
+              draggable: !1,
+              className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            }
+          ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: A(a, {
+            className: f ? "size-12 text-white/20" : "size-12 text-black/20",
+            weight: "regular"
+          }) }),
+          /* @__PURE__ */ e(
+            _,
+            {
+              paymentStatus: c,
+              mimeType: a,
+              isLocked: s
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      G,
+      {
+        mimeType: a,
+        sourceUrl: l,
+        thumbnailUrl: o,
+        title: r,
+        variant: t,
+        containedImage: d,
+        mediaPlayerProps: l ? { autoPlay: !0, loop: !0, controls: !0, muted: !1 } : void 0
+      }
+    ),
+    u && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: u })
+  ] });
+}, P = (t) => t.length >= 2, U = (t) => /* @__PURE__ */ e(
+  J,
+  {
+    className: t === "dark" ? "size-5 shrink-0 text-white/55" : "size-5 shrink-0 text-black/55"
+  }
+), j = ({
+  variant: t,
+  gallery: a,
+  title: n,
+  showLocked: r,
+  paymentStatus: i,
+  mimeType: s,
+  thumbnailUrl: c,
+  source: u,
+  containedImage: d,
+  topRight: l
+}) => P(a) ? /* @__PURE__ */ e(
+  te,
+  {
+    variant: t,
+    gallery: a,
+    title: n,
+    showLocked: r,
+    paymentStatus: i,
+    topRight: l
+  }
+) : /* @__PURE__ */ e(
+  ae,
+  {
+    variant: t,
+    mimeType: s,
+    thumbnailUrl: c,
+    title: n,
+    source: u,
+    showLocked: r,
+    paymentStatus: i,
+    topRight: l,
+    containedImage: d
+  }
+), D = ({
+  variant: t,
+  children: a,
+  rootRef: n,
+  "data-testid": r
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: n,
+    "data-testid": r,
+    className: v(
+      "relative w-[280px] select-none overflow-hidden rounded-md",
+      t === "dark" ? "bg-[#1e2330]" : "bg-white",
+      "shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
+    ),
+    children: a
+  }
+), E = ({
+  onToggle: t,
+  isBusy: a,
+  isPreviewVisible: n,
+  children: r
+}) => t ? /* @__PURE__ */ e(
+  "div",
+  {
+    role: "button",
+    tabIndex: a ? -1 : 0,
+    "aria-label": "Toggle preview",
+    "aria-busy": a,
+    "aria-pressed": n,
+    "aria-disabled": a || void 0,
+    onClick: a ? void 0 : t,
+    onKeyDown: (i) => {
+      a || i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), t());
+    },
+    className: a ? "block w-full text-left" : "block w-full cursor-pointer text-left",
+    children: r
+  }
+) : /* @__PURE__ */ e(y.Fragment, { children: r });
+function S({
+  isGallery: t,
+  onFetchSource: a,
+  onPreviewClick: n
+}) {
+  const [r, i] = k(), [s, c] = k(!1), [u, d] = k(!1), l = I(!1), o = L(async () => {
+    if (n == null || n(), s) {
+      c(!1);
+      return;
+    }
+    if (t) {
+      c(!0);
+      return;
+    }
+    if (r) {
+      c(!0);
+      return;
+    }
+    if (a && !l.current) {
+      l.current = !0, d(!0);
+      try {
+        const m = await a();
+        m && (i(m), c(!0));
+      } finally {
+        l.current = !1, d(!1);
+      }
+    }
+  }, [s, t, r, n, a]), f = t || a != null || n != null ? o : void 0;
+  return {
+    source: r,
+    isPreviewVisible: s,
+    isLoadingPreview: u,
+    handleToggle: o,
+    togglePreview: f
+  };
+}
+function ie({
+  paymentStatus: t,
+  onFetchSource: a,
+  onUnlockClick: n
+}) {
+  const [r, i] = k(), s = I(null), c = I(!1), u = I(a);
+  u.current = a;
+  const d = L(async () => {
+    var o;
+    if (!c.current) {
+      c.current = !0;
+      try {
+        const f = await ((o = u.current) == null ? void 0 : o.call(u));
+        f && i(f);
+      } finally {
+        c.current = !1;
+      }
+    }
+  }, []), l = L(() => {
+    t === "paid" ? d() : n == null || n();
+  }, [t, d, n]);
+  return Y(() => {
+    if (!s.current || t !== "paid" || r !== void 0) return;
+    const o = new IntersectionObserver(
+      ([f]) => {
+        f.isIntersecting && (d(), o.disconnect());
+      },
+      { threshold: 1 }
+    );
+    return o.observe(s.current), () => o.disconnect();
+  }, [t, r, d]), { source: r, cardRef: s, handleUnlockClick: l };
+}
+const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]", re = ({
+  isLocked: t,
+  sourceUrl: a,
+  redeemUrl: n,
+  onUnlockClicked: r,
+  onDownloadClicked: i,
+  isUnlocking: s = !1
+}) => {
+  if (t && r != null)
+    return /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: r,
+        disabled: s,
+        "aria-label": s ? "Unlocking" : "Unlock",
+        "aria-busy": s,
+        title: s ? "Unlocking" : "Unlock",
+        className: C,
+        children: s ? /* @__PURE__ */ e(Z, {}) : /* @__PURE__ */ h(y.Fragment, { children: [
+          /* @__PURE__ */ e(V, { className: "size-4", weight: "fill" }),
+          "Unlock"
+        ] })
+      }
+    );
+  if (!t && i != null) {
+    const c = n ?? a;
+    return c != null ? /* @__PURE__ */ h(
+      "a",
+      {
+        href: c,
+        "aria-label": "Download",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: i,
+        className: `${C} !text-white`,
+        children: [
+          /* @__PURE__ */ e(R, { className: "size-4", weight: "bold" }),
+          "Download"
+        ]
+      }
+    ) : /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        onClick: i,
+        "aria-label": "Download",
+        className: C,
+        children: [
+          /* @__PURE__ */ e(R, { className: "size-4", weight: "bold" }),
+          "Download"
+        ]
+      }
+    );
+  }
+  return null;
+}, ne = ({
+  title: t,
+  mimeType: a = "application/octet-stream",
+  thumbnailUrl: n,
+  detail: r,
+  amountText: i,
+  placeholderTitle: s,
+  placeholderAmountText: c,
+  gallery: u = [],
+  onDismiss: d,
+  onPreviewClick: l,
+  onFetchSource: o,
+  onEditClick: f
+}) => {
+  const m = P(u), { source: w, isPreviewVisible: x, isLoadingPreview: b, togglePreview: N } = S({ isGallery: m, onFetchSource: o, onPreviewClick: l }), g = !x, p = b, M = /* @__PURE__ */ h(y.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: i ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
+        children: i || c
+      }
+    )
+  ] }), K = d ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: ($) => {
+        $.stopPropagation(), d();
+      },
+      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
+      "aria-label": "Dismiss attachment",
+      children: /* @__PURE__ */ e(Q, { className: "size-3", weight: "bold" })
+    }
+  ) : void 0, X = f ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: f,
+      "aria-label": "Edit attachment",
+      className: "flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
+      children: /* @__PURE__ */ e(W, { className: "size-5", weight: "regular" })
+    }
+  ) : void 0;
+  return /* @__PURE__ */ h(D, { variant: "dark", children: [
+    /* @__PURE__ */ e(
+      E,
+      {
+        onToggle: N,
+        isBusy: p,
+        isPreviewVisible: !g,
+        children: /* @__PURE__ */ e(
+          j,
+          {
+            variant: "dark",
+            gallery: u,
+            title: t,
+            showLocked: g,
+            mimeType: a,
+            thumbnailUrl: n,
+            source: w,
+            topRight: K
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      z,
+      {
+        variant: "dark",
+        title: t,
+        placeholderTitle: s,
+        mimeType: a,
+        detail: r,
+        statusBadge: M,
+        icon: m ? U("dark") : void 0,
+        trailingAction: X
+      }
+    )
+  ] });
+}, se = ({
+  title: t,
+  mimeType: a = "application/octet-stream",
+  thumbnailUrl: n,
+  detail: r,
+  amountText: i,
+  placeholderTitle: s,
+  placeholderAmountText: c,
+  gallery: u = []
+}) => {
+  const d = P(u), l = /* @__PURE__ */ h(y.Fragment, { children: [
+    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: i ? "text-xs font-medium text-black/55" : "text-xs font-medium text-black/30",
+        children: i || c
+      }
+    )
+  ] });
+  return /* @__PURE__ */ h(D, { variant: "light", children: [
+    /* @__PURE__ */ e(
+      j,
+      {
+        variant: "light",
+        gallery: u,
+        title: t,
+        showLocked: !0,
+        mimeType: a,
+        thumbnailUrl: n
+      }
+    ),
+    /* @__PURE__ */ e(
+      z,
+      {
+        variant: "light",
+        title: t,
+        placeholderTitle: s,
+        mimeType: a,
+        detail: r,
+        statusBadge: l,
+        icon: d ? U("light") : void 0
+      }
+    )
+  ] });
+}, le = ({
+  title: t,
+  mimeType: a = "application/octet-stream",
+  thumbnailUrl: n,
+  detail: r,
+  amountText: i,
+  placeholderTitle: s,
+  paymentStatus: c = "pending",
+  gallery: u = [],
+  onPreviewClick: d,
+  onFetchSource: l
+}) => {
+  const o = P(u), { source: f, isPreviewVisible: m, isLoadingPreview: w, togglePreview: x } = S({ isGallery: o, onFetchSource: l, onPreviewClick: d }), b = !m;
+  return /* @__PURE__ */ h(D, { variant: "dark", children: [
+    /* @__PURE__ */ e(
+      E,
+      {
+        onToggle: x,
+        isBusy: w,
+        isPreviewVisible: !b,
+        children: /* @__PURE__ */ e(
+          j,
+          {
+            variant: "dark",
+            gallery: u,
+            title: t,
+            showLocked: b,
+            paymentStatus: c,
+            mimeType: a,
+            thumbnailUrl: n,
+            source: f
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      z,
+      {
+        variant: "dark",
+        title: t,
+        placeholderTitle: s,
+        mimeType: a,
+        detail: r,
+        statusBadge: /* @__PURE__ */ e(
+          O,
+          {
+            isMine: !0,
+            paymentStatus: c,
+            amountText: i
+          }
+        ),
+        icon: o ? U("dark") : void 0
+      }
+    )
+  ] });
+}, ce = ({
+  title: t,
+  amountText: a,
+  thumbnailUrl: n,
+  mimeType: r = "application/octet-stream",
+  detail: i,
+  gallery: s = [],
+  onUnlockClick: c,
+  onFetchSource: u,
+  onDownloadClick: d,
+  paymentStatus: l,
+  isUnlocking: o = !1
+}) => {
+  const f = P(s), { source: m, cardRef: w, handleUnlockClick: x } = ie({
+    paymentStatus: l,
+    onFetchSource: u,
+    onUnlockClick: c
+  }), b = m == null ? void 0 : m.sourceUrl, N = m == null ? void 0 : m.redeemUrl, g = f ? l !== "paid" : b === void 0, p = T(r), M = f ? void 0 : b;
+  return /* @__PURE__ */ h(
+    D,
+    {
+      variant: "light",
+      rootRef: w,
+      "data-testid": "locked-attachment",
+      children: [
+        /* @__PURE__ */ e(
+          j,
+          {
+            variant: "light",
+            gallery: s,
+            title: t,
+            showLocked: g,
+            paymentStatus: l,
+            mimeType: r,
+            thumbnailUrl: n,
+            source: m,
+            containedImage: !g && p === "document"
+          }
+        ),
+        /* @__PURE__ */ e(
+          z,
+          {
+            variant: "light",
+            title: t,
+            mimeType: r,
+            detail: i,
+            statusBadge: /* @__PURE__ */ e(
+              O,
+              {
+                isMine: !1,
+                paymentStatus: l,
+                amountText: a
+              }
+            ),
+            icon: f ? U("light") : void 0,
+            action: /* @__PURE__ */ e(
+              re,
+              {
+                isLocked: g,
+                isUnlocking: o,
+                sourceUrl: M,
+                redeemUrl: N,
+                onUnlockClicked: x,
+                onDownloadClicked: d
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, be = (t) => t.isDraft ? /* @__PURE__ */ e(ne, { ...t }) : t.isPreview ? /* @__PURE__ */ e(se, { ...t }) : t.isMine ? /* @__PURE__ */ e(le, { ...t }) : /* @__PURE__ */ e(ce, { ...t });
+export {
+  be as default
+};
+//# sourceMappingURL=Card-BnbNynLQ.js.map