@linktr.ee/messaging-react 1.27.0 → 1.28.0-rc-1776231821

package/dist/Creator-BFpHsh2u.js

@@ -0,0 +1,318 @@
+import { jsxs as f, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { XIcon as F, CheckCircleIcon as R, PauseIcon as S, PlayIcon as X, EyeSlashIcon as M, EyeIcon as D } from "@phosphor-icons/react";
+import N from "classnames";
+import { useState as C, useRef as P, useEffect as x, useCallback as E } from "react";
+import { g as q, r as z, M as B } from "./MediaPlayer-DXz4IBLx.js";
+const L = (u) => {
+  const { onClose: n } = u;
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: n,
+      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(D, { className: "size-4", weight: "fill" })
+    }
+  );
+}, T = (u) => {
+  const { thumbnail: n, mimeType: s, overlayIcon: o, onClick: l } = u;
+  return /* @__PURE__ */ f(
+    "button",
+    {
+      type: "button",
+      disabled: !l,
+      className: N(
+        "relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none",
+        { "cursor-pointer": !!l, "cursor-default": !l }
+      ),
+      onClick: l,
+      "aria-label": o ? "Toggle preview" : void 0,
+      children: [
+        n ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: n,
+            alt: "",
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: z(s, {
+          className: "size-12 text-black/20",
+          weight: "regular"
+        }) }),
+        o && /* @__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(o, { className: "size-4", weight: "fill" }) })
+      ]
+    }
+  );
+}, K = (u) => {
+  const { source: n, thumbnail: s, mimeType: o } = u, [l, r] = C(!1), [i, d] = C(0), [h, g] = C(!1), b = P(null), w = P(null), m = P(null);
+  x(() => {
+    const t = b.current;
+    t && (l ? t.play().catch(() => r(!1)) : t.pause());
+  }, [l]), x(() => {
+    if (!l) {
+      m.current !== null && cancelAnimationFrame(m.current);
+      return;
+    }
+    const t = () => {
+      const a = b.current;
+      a && a.duration && !h && d(a.currentTime / a.duration), m.current = requestAnimationFrame(t);
+    };
+    return m.current = requestAnimationFrame(t), () => {
+      m.current !== null && cancelAnimationFrame(m.current);
+    };
+  }, [l, h]), x(() => {
+    r(!1), d(0);
+  }, [n]);
+  const p = E(
+    (t) => {
+      var I, A;
+      const a = w.current;
+      if (!a) return 0;
+      const k = "touches" in t ? ((I = t.touches[0]) == null ? void 0 : I.clientX) ?? ((A = t.changedTouches[0]) == null ? void 0 : A.clientX) ?? 0 : t.clientX, y = a.getBoundingClientRect();
+      return Math.max(0, Math.min(1, (k - y.left) / y.width));
+    },
+    []
+  ), c = E((t) => {
+    const a = b.current;
+    a && a.duration && (a.currentTime = t * a.duration);
+  }, []);
+  x(() => {
+    if (!h) return;
+    const t = (k) => {
+      const y = p(k);
+      d(y), c(y);
+    }, a = (k) => {
+      g(!1), c(p(k));
+    };
+    return window.addEventListener("mousemove", t), window.addEventListener("mouseup", a), window.addEventListener("touchmove", t, { passive: !0 }), window.addEventListener("touchend", a), () => {
+      window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", a), window.removeEventListener("touchmove", t), window.removeEventListener("touchend", a);
+    };
+  }, [h, p, c]);
+  const v = E(() => r((t) => !t), []);
+  return /* @__PURE__ */ f("div", { className: "relative", children: [
+    n && /* @__PURE__ */ e(
+      "audio",
+      {
+        ref: b,
+        src: n,
+        loop: !0,
+        onEnded: () => {
+          r(!1), d(0);
+        },
+        children: /* @__PURE__ */ e("track", { kind: "captions" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      T,
+      {
+        thumbnail: s,
+        mimeType: o,
+        overlayIcon: n ? l ? S : X : void 0,
+        onClick: n ? v : void 0
+      }
+    ),
+    n && /* @__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(), g(!0);
+          const a = p(t);
+          d(a), c(a);
+        },
+        onTouchStart: (t) => {
+          t.stopPropagation(), g(!0);
+          const a = p(t);
+          d(a), c(a);
+        },
+        onClick: (t) => t.stopPropagation(),
+        onKeyDown: (t) => {
+          t.key === "ArrowRight" && c(Math.min(1, i + 0.05)), t.key === "ArrowLeft" && c(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)}%` }
+          }
+        ) })
+      }
+    ) })
+  ] });
+}, O = (u) => {
+  const { source: n, thumbnail: s, mimeType: o } = u, [l, r] = C(!1), i = () => r(!1);
+  return x(() => {
+    r(!1);
+  }, [n]), n ? /* @__PURE__ */ f(
+    "div",
+    {
+      className: N("relative overflow-hidden", {
+        "aspect-video": !l
+      }),
+      children: [
+        /* @__PURE__ */ e(
+          B,
+          {
+            source: n,
+            mimeType: o,
+            poster: s,
+            playing: l,
+            loop: !0,
+            controls: !1,
+            showProgress: !0,
+            onContainerClick: i,
+            muted: !0
+          }
+        ),
+        !l && /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            className: "absolute inset-0 block cursor-pointer border-0 p-0 text-left appearance-none",
+            onClick: () => r(!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: z(o, {
+                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" }) })
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ e(L, { onClose: i })
+      ]
+    }
+  ) : /* @__PURE__ */ e(T, { thumbnail: s, mimeType: o });
+}, U = (u) => {
+  const { source: n, thumbnail: s, mimeType: o, title: l } = u, [r, i] = C(!1), d = () => i(!1);
+  return x(() => {
+    i(!1);
+  }, [n]), r && n ? /* @__PURE__ */ f("div", { className: "relative", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: "block w-full cursor-pointer border-0 p-0 text-left appearance-none",
+        onClick: d,
+        "aria-label": "Close preview",
+        children: /* @__PURE__ */ e("img", { src: n, alt: l ?? "", className: "block w-full" })
+      }
+    ),
+    /* @__PURE__ */ e(L, { onClose: d })
+  ] }) : /* @__PURE__ */ e(
+    T,
+    {
+      thumbnail: s,
+      mimeType: o,
+      overlayIcon: n ? M : void 0,
+      onClick: n ? () => i(!0) : void 0
+    }
+  );
+}, Q = (u) => {
+  const {
+    title: n,
+    mimeType: s = "application/octet-stream",
+    thumbnail: o,
+    source: l,
+    detail: r,
+    amountText: i,
+    placeholderTitle: d = "Attachment title",
+    placeholderAmountText: h,
+    paymentStatus: g,
+    onDismiss: b,
+    isPreview: w = !1
+  } = u, m = q(s), p = i ?? h, c = !i && !!h;
+  let v;
+  return w && m === "audio" ? v = /* @__PURE__ */ e(K, { source: l, thumbnail: o, mimeType: s }) : w && m === "video" ? v = /* @__PURE__ */ e(O, { source: l, thumbnail: o, mimeType: s }) : w && m === "image" ? v = /* @__PURE__ */ e(
+    U,
+    {
+      source: l,
+      thumbnail: o,
+      mimeType: s,
+      title: n
+    }
+  ) : v = /* @__PURE__ */ e(T, { thumbnail: o, mimeType: s }), /* @__PURE__ */ f("div", { className: "relative w-[280px] select-none overflow-hidden rounded-3xl bg-white shadow-card", children: [
+    b && /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: b,
+        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(F, { className: "size-4", weight: "bold" })
+      }
+    ),
+    v,
+    /* @__PURE__ */ f("div", { className: "px-4 pb-3 pt-3", children: [
+      /* @__PURE__ */ e(
+        "p",
+        {
+          className: N("mb-1.5 truncate text-base font-medium", {
+            "text-black/30": !n,
+            "text-black": !!n
+          }),
+          children: n || d
+        }
+      ),
+      /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
+        z(s, {
+          className: "size-5 shrink-0 text-black/55",
+          weight: "regular"
+        }),
+        r && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: r }),
+        g === "paid" ? /* @__PURE__ */ f(j, { 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(
+            R,
+            {
+              className: "size-4 text-[#008236]",
+              weight: "bold"
+            }
+          )
+        ] }) : p && /* @__PURE__ */ f(j, { children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: N("text-xs font-medium", {
+                "text-black/30": c,
+                "text-black/55": !c
+              }),
+              children: "•"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: N("text-xs font-medium", {
+                "text-black/30": c,
+                "text-black/55": !c
+              }),
+              children: p
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as default
+};
+//# sourceMappingURL=Creator-BFpHsh2u.js.map

package/dist/Creator-BFpHsh2u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Creator-BFpHsh2u.js","sources":["../src/components/LockedAttachment/components/Creator.tsx"],"sourcesContent":["import {\n  CheckCircleIcon,\n  EyeIcon,\n  EyeSlashIcon,\n  PauseIcon,\n  PlayIcon,\n  XIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { LockedAttachmentBaseProps } from '../types'\nimport { renderTypeIcon } from '../utils/icons'\nimport { getSourceType } from '../utils/mimeType'\n\nimport MediaPlayer from './MediaPlayer'\n\nexport interface CreatorCardProps extends LockedAttachmentBaseProps {\n  isPreview?: boolean\n  placeholderTitle?: string\n  placeholderAmountText?: string\n  onDismiss?: () => void\n}\n\ninterface CloseButtonProps {\n  onClose: () => void\n}\n\nconst CloseButton: React.FC<CloseButtonProps> = (props) => {\n  const { onClose } = props\n  return (\n    <button\n      type=\"button\"\n      onClick={onClose}\n      className=\"absolute left-3 top-3 z-40 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\"\n      aria-label=\"Close preview\"\n    >\n      <EyeIcon className=\"size-4\" weight=\"fill\" />\n    </button>\n  )\n}\n\ninterface CollapsedThumbnailProps {\n  thumbnail?: string\n  mimeType: string\n  overlayIcon?: React.ElementType\n  onClick?: () => void\n}\n\nconst CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {\n  const { thumbnail, mimeType, overlayIcon: OverlayIcon, onClick } = props\n  return (\n    <button\n      type=\"button\"\n      disabled={!onClick}\n      className={classNames(\n        'relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',\n        { 'cursor-pointer': !!onClick, 'cursor-default': !onClick }\n      )}\n      onClick={onClick}\n      aria-label={OverlayIcon ? 'Toggle preview' : undefined}\n    >\n      {thumbnail ? (\n        <img\n          src={thumbnail}\n          alt=\"\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      ) : (\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-12 text-black/20',\n            weight: 'regular',\n          })}\n        </div>\n      )}\n      {OverlayIcon && (\n        <div className=\"pointer-events-none absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\">\n          <OverlayIcon className=\"size-4\" weight=\"fill\" />\n        </div>\n      )}\n    </button>\n  )\n}\n\n\ninterface AudioPreviewProps {\n  source?: string\n  thumbnail?: string\n  mimeType: string\n}\n\nconst AudioPreview: React.FC<AudioPreviewProps> = (props) => {\n  const { source, thumbnail, mimeType } = props\n  const [playing, setPlaying] = useState(false)\n  const [played, setPlayed] = useState(0)\n  const [seeking, setSeeking] = useState(false)\n  const audioRef = useRef<HTMLAudioElement>(null)\n  const trackRef = useRef<HTMLDivElement>(null)\n  const rafRef = useRef<number | null>(null)\n\n  useEffect(() => {\n    const el = audioRef.current\n    if (!el) return\n    if (playing) {\n      void el.play().catch(() => setPlaying(false))\n    } else {\n      el.pause()\n    }\n  }, [playing])\n\n  useEffect(() => {\n    if (!playing) {\n      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)\n      return\n    }\n    const tick = () => {\n      const el = audioRef.current\n      if (el && el.duration && !seeking) setPlayed(el.currentTime / el.duration)\n      rafRef.current = requestAnimationFrame(tick)\n    }\n    rafRef.current = requestAnimationFrame(tick)\n    return () => {\n      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)\n    }\n  }, [playing, seeking])\n\n  useEffect(() => {\n    setPlaying(false)\n    setPlayed(0)\n  }, [source])\n\n  const getFraction = useCallback(\n    (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {\n      const track = trackRef.current\n      if (!track) return 0\n      const clientX =\n        'touches' in e\n          ? (e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0)\n          : e.clientX\n      const rect = track.getBoundingClientRect()\n      return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))\n    },\n    []\n  )\n\n  const seekTo = useCallback((fraction: number) => {\n    const el = audioRef.current\n    if (el && el.duration) el.currentTime = fraction * el.duration\n  }, [])\n\n  useEffect(() => {\n    if (!seeking) return\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      const f = getFraction(e)\n      setPlayed(f)\n      seekTo(f)\n    }\n    const onUp = (e: MouseEvent | TouchEvent) => {\n      setSeeking(false)\n      seekTo(getFraction(e))\n    }\n    window.addEventListener('mousemove', onMove)\n    window.addEventListener('mouseup', onUp)\n    window.addEventListener('touchmove', onMove, { passive: true })\n    window.addEventListener('touchend', onUp)\n    return () => {\n      window.removeEventListener('mousemove', onMove)\n      window.removeEventListener('mouseup', onUp)\n      window.removeEventListener('touchmove', onMove)\n      window.removeEventListener('touchend', onUp)\n    }\n  }, [seeking, getFraction, seekTo])\n\n  const toggle = useCallback(() => setPlaying((p) => !p), [])\n\n  return (\n    <div className=\"relative\">\n      {source && (\n        <audio\n          ref={audioRef}\n          src={source}\n          loop\n          onEnded={() => {\n            setPlaying(false)\n            setPlayed(0)\n          }}\n        >\n          <track kind=\"captions\" />\n        </audio>\n      )}\n      <CollapsedThumbnail\n        thumbnail={thumbnail}\n        mimeType={mimeType}\n        overlayIcon={source ? (playing ? PauseIcon : PlayIcon) : undefined}\n        onClick={source ? toggle : undefined}\n      />\n      {source && (\n        <div className=\"absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent\">\n          <div\n            ref={trackRef}\n            role=\"slider\"\n            aria-label=\"Playback position\"\n            aria-valuenow={Math.round(played * 100)}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            tabIndex={0}\n            className=\"relative flex h-4 w-full cursor-pointer items-center\"\n            onMouseDown={(e) => {\n              e.stopPropagation()\n              setSeeking(true)\n              const f = getFraction(e)\n              setPlayed(f)\n              seekTo(f)\n            }}\n            onTouchStart={(e) => {\n              e.stopPropagation()\n              setSeeking(true)\n              const f = getFraction(e)\n              setPlayed(f)\n              seekTo(f)\n            }}\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))\n              if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))\n            }}\n          >\n            <div className=\"w-full overflow-hidden rounded-full bg-white/30 h-1\">\n              <div\n                className=\"h-full rounded-full bg-white\"\n                style={{ width: `${Math.round(played * 100)}%` }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\ninterface VideoPreviewProps {\n  source?: string\n  thumbnail?: string\n  mimeType: string\n}\n\nconst VideoPreview: React.FC<VideoPreviewProps> = (props) => {\n  const { source, thumbnail, mimeType } = props\n  const [expanded, setExpanded] = useState(false)\n  const collapse = () => setExpanded(false)\n\n  useEffect(() => {\n    setExpanded(false)\n  }, [source])\n\n  if (!source) {\n    return <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} />\n  }\n\n  return (\n    <div\n      className={classNames('relative overflow-hidden', {\n        'aspect-video': !expanded,\n      })}\n    >\n      <MediaPlayer\n        source={source}\n        mimeType={mimeType}\n        poster={thumbnail}\n        playing={expanded}\n        loop\n        controls={false}\n        showProgress\n        onContainerClick={collapse}\n        muted\n      />\n      {!expanded && (\n        <button\n          type=\"button\"\n          className=\"absolute inset-0 block cursor-pointer border-0 p-0 text-left appearance-none\"\n          onClick={() => setExpanded(true)}\n          aria-label=\"Expand video preview\"\n        >\n          {thumbnail ? (\n            <img\n              src={thumbnail}\n              alt=\"\"\n              className=\"absolute inset-0 h-full w-full object-cover\"\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              {renderTypeIcon(mimeType, {\n                className: 'size-12 text-black/20',\n                weight: 'regular',\n              })}\n            </div>\n          )}\n          <div className=\"pointer-events-none absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\">\n            <EyeSlashIcon className=\"size-4\" weight=\"fill\" />\n          </div>\n        </button>\n      )}\n      {expanded && <CloseButton onClose={collapse} />}\n    </div>\n  )\n}\n\ninterface ImagePreviewProps {\n  source?: string\n  thumbnail?: string\n  mimeType: string\n  title?: string\n}\n\nconst ImagePreview: React.FC<ImagePreviewProps> = (props) => {\n  const { source, thumbnail, mimeType, title } = props\n  const [expanded, setExpanded] = useState(false)\n  const collapse = () => setExpanded(false)\n\n  useEffect(() => {\n    setExpanded(false)\n  }, [source])\n\n  if (expanded && source) {\n    return (\n      <div className=\"relative\">\n        <button\n          type=\"button\"\n          className=\"block w-full cursor-pointer border-0 p-0 text-left appearance-none\"\n          onClick={collapse}\n          aria-label=\"Close preview\"\n        >\n          <img src={source} alt={title ?? ''} className=\"block w-full\" />\n        </button>\n        <CloseButton onClose={collapse} />\n      </div>\n    )\n  }\n\n  return (\n    <CollapsedThumbnail\n      thumbnail={thumbnail}\n      mimeType={mimeType}\n      overlayIcon={source ? EyeSlashIcon : undefined}\n      onClick={source ? () => setExpanded(true) : undefined}\n    />\n  )\n}\n\n\nconst CreatorCard: React.FC<CreatorCardProps> = (props) => {\n  const {\n    title,\n    mimeType = 'application/octet-stream',\n    thumbnail,\n    source,\n    detail,\n    amountText,\n    placeholderTitle = 'Attachment title',\n    placeholderAmountText,\n    paymentStatus,\n    onDismiss,\n    isPreview = false,\n  } = props\n  const sourceType = getSourceType(mimeType)\n  const displayAmountText = amountText ?? placeholderAmountText\n  const isPlaceholderAmount = !amountText && !!placeholderAmountText\n\n  let mediaPreview: React.ReactNode\n  if (isPreview && sourceType === 'audio') {\n    mediaPreview = (\n      <AudioPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />\n    )\n  } else if (isPreview && sourceType === 'video') {\n    mediaPreview = (\n      <VideoPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />\n    )\n  } else if (isPreview && sourceType === 'image') {\n    mediaPreview = (\n      <ImagePreview\n        source={source}\n        thumbnail={thumbnail}\n        mimeType={mimeType}\n        title={title}\n      />\n    )\n  } else {\n    mediaPreview = (\n      <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} />\n    )\n  }\n\n  return (\n    <div className=\"relative w-[280px] select-none overflow-hidden rounded-3xl bg-white shadow-card\">\n      {onDismiss && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          className=\"absolute right-3 top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\"\n          aria-label=\"Dismiss attachment\"\n        >\n          <XIcon className=\"size-4\" weight=\"bold\" />\n        </button>\n      )}\n      {mediaPreview}\n      <div className=\"px-4 pb-3 pt-3\">\n        <p\n          className={classNames('mb-1.5 truncate text-base font-medium', {\n            'text-black/30': !title,\n            'text-black': !!title,\n          })}\n        >\n          {title || placeholderTitle}\n        </p>\n        <div className=\"flex items-center gap-1\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-5 shrink-0 text-black/55',\n            weight: 'regular',\n          })}\n          {detail && (\n            <span className=\"text-xs font-medium text-black/55\">{detail}</span>\n          )}\n          {paymentStatus === 'paid' ? (\n            <>\n              <span className=\"text-xs font-medium text-black/55\">•</span>\n              <span className=\"text-xs font-medium text-[#008236]\">\n                Purchased\n              </span>\n              <CheckCircleIcon\n                className=\"size-4 text-[#008236]\"\n                weight=\"bold\"\n              />\n            </>\n          ) : (\n            displayAmountText && (\n              <>\n                <span\n                  className={classNames('text-xs font-medium', {\n                    'text-black/30': isPlaceholderAmount,\n                    'text-black/55': !isPlaceholderAmount,\n                  })}\n                >\n                  •\n                </span>\n                <span\n                  className={classNames('text-xs font-medium', {\n                    'text-black/30': isPlaceholderAmount,\n                    'text-black/55': !isPlaceholderAmount,\n                  })}\n                >\n                  {displayAmountText}\n                </span>\n              </>\n            )\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default CreatorCard\n"],"names":["CloseButton","props","onClose","jsx","EyeIcon","CollapsedThumbnail","thumbnail","mimeType","OverlayIcon","onClick","jsxs","classNames","AudioPreview","source","playing","setPlaying","useState","played","setPlayed","seeking","setSeeking","audioRef","useRef","trackRef","rafRef","useEffect","el","tick","getFraction","useCallback","e","track","clientX","_a","_b","rect","seekTo","fraction","onMove","f","onUp","toggle","p","PauseIcon","PlayIcon","VideoPreview","expanded","setExpanded","collapse","MediaPlayer","EyeSlashIcon","ImagePreview","title","CreatorCard","detail","amountText","placeholderTitle","placeholderAmountText","paymentStatus","onDismiss","isPreview","sourceType","getSourceType","displayAmountText","isPlaceholderAmount","mediaPreview","XIcon","renderTypeIcon","Fragment","CheckCircleIcon"],"mappings":"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"}

package/dist/MediaPlayer-DXz4IBLx.js

@@ -0,0 +1,313 @@
+import { jsxs as L, jsx as n } from "react/jsx-runtime";
+import { FileIcon as $, ImageIcon as V, SpeakerHighIcon as G, VideoCameraIcon as Y, FileMdIcon as Z, FileTextIcon as J, FileZipIcon as Q, FilePptIcon as ee, FileCsvIcon as te, FileXlsIcon as ne, FileDocIcon as ae, FilePdfIcon as re, CircleNotchIcon as ie, PlayIcon as W, PauseIcon as oe } from "@phosphor-icons/react";
+import se, { useState as c, useRef as M, useEffect as x, useCallback as z } from "react";
+const le = [
+  [/pdf/, "pdf"],
+  [/wordprocessingml|msword|\.doc/, "doc"],
+  [/spreadsheetml|ms-excel|\.xls/, "xls"],
+  [/csv/, "csv"],
+  [/presentationml|ms-powerpoint|\.ppt/, "ppt"],
+  [/zip|x-rar|x-7z|x-tar|x-gzip/, "zip"],
+  [/plain|rtf/, "text"],
+  [/markdown/, "markdown"]
+];
+function H(a) {
+  return a.startsWith("video/") ? "video" : a.startsWith("audio/") ? "audio" : a.startsWith("image/") ? "image" : "document";
+}
+function ce(a) {
+  const r = le.find(
+    ([i]) => i.test(a)
+  );
+  return r ? r[1] : "generic";
+}
+const ue = {
+  video: Y,
+  audio: G,
+  image: V,
+  document: $
+}, de = {
+  pdf: re,
+  doc: ae,
+  xls: ne,
+  csv: te,
+  ppt: ee,
+  zip: Q,
+  text: J,
+  markdown: Z,
+  generic: $
+};
+function fe(a) {
+  const r = H(a);
+  return r !== "document" ? ue[r] : de[ce(a)];
+}
+function me(a, r) {
+  return se.createElement(fe(a), r);
+}
+const he = (a, r) => a === "audio" && !r ? "bg-black/5" : "bg-black";
+function pe(a) {
+  var r, i;
+  return "touches" in a ? ((r = a.touches[0]) == null ? void 0 : r.clientX) ?? ((i = a.changedTouches[0]) == null ? void 0 : i.clientX) ?? 0 : a.clientX;
+}
+const be = ({
+  source: a,
+  mimeType: r,
+  poster: i,
+  autoPlay: _ = !1,
+  playing: u,
+  loop: k = !1,
+  controls: v = !0,
+  showProgress: X = !1,
+  onContainerClick: N,
+  muted: C = !1
+}) => {
+  const D = H(r), [d, o] = c(_), R = M(u);
+  x(() => {
+    u !== void 0 && u !== R.current && (R.current = u, o(u));
+  }, [u]);
+  const [w, g] = c(0), [f, A] = c(!1), [S, j] = c(!1), [T, q] = c(null), [K, m] = c(!1), [I, b] = c(!1), h = M(null), F = M(null), s = M(null);
+  x(() => {
+    b(!1);
+  }, [a]), x(() => {
+    if (!d) {
+      s.current !== null && (cancelAnimationFrame(s.current), s.current = null);
+      return;
+    }
+    const e = () => {
+      const t = h.current;
+      t && t.duration && !f && g(t.currentTime / t.duration), s.current = requestAnimationFrame(e);
+    };
+    return s.current = requestAnimationFrame(e), () => {
+      s.current !== null && cancelAnimationFrame(s.current);
+    };
+  }, [d, f]), x(() => {
+    const e = h.current;
+    e && (d ? e.play().catch((t) => {
+      o(!1), b(!0);
+    }) : e.pause());
+  }, [d]);
+  const O = z(() => {
+    b(!1), o(!0);
+  }, []), P = z(
+    (e) => {
+      const t = F.current;
+      if (!t) return 0;
+      const p = t.getBoundingClientRect();
+      return Math.max(
+        0,
+        Math.min(1, (pe(e) - p.left) / p.width)
+      );
+    },
+    []
+  ), l = z((e) => {
+    const t = h.current;
+    t && t.duration && (t.currentTime = e * t.duration);
+  }, []), E = (e) => {
+    e.stopPropagation(), A(!0);
+    const t = P(e);
+    g(t), l(t);
+  };
+  x(() => {
+    if (!f) return;
+    const e = (p) => g(P(p)), t = (p) => {
+      A(!1), l(P(p));
+    };
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", t), window.addEventListener("touchmove", e, { passive: !0 }), window.addEventListener("touchend", t), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", t), window.removeEventListener("touchmove", e), window.removeEventListener("touchend", t);
+    };
+  }, [f, P, l]);
+  const B = T ? { aspectRatio: String(T) } : void 0, U = T ? "" : " aspect-video", y = Math.round(w * 100);
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: `relative cursor-pointer overflow-hidden ${he(D, i)}${U}`,
+      style: B,
+      onClick: () => {
+        if (!I) {
+          if (N) {
+            N();
+            return;
+          }
+          v && o((e) => !e);
+        }
+      },
+      onKeyDown: (e) => {
+        if (!(e.key !== "Enter" && e.key !== " ") && (e.preventDefault(), !I)) {
+          if (N) {
+            N();
+            return;
+          }
+          v && o((t) => !t);
+        }
+      },
+      children: [
+        i && /* @__PURE__ */ n(
+          "img",
+          {
+            src: i,
+            alt: "",
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ),
+        !i && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: me(r, {
+          className: "size-12 text-black/20",
+          weight: "regular"
+        }) }),
+        /* @__PURE__ */ n("div", { className: "absolute inset-0", children: D === "audio" ? /* @__PURE__ */ n(
+          "audio",
+          {
+            ref: h,
+            src: a,
+            loop: k,
+            muted: C,
+            style: { width: "100%", height: "100%" },
+            onLoadStart: () => m(!0),
+            onCanPlay: () => m(!1),
+            onWaiting: () => m(!0),
+            onPlay: () => b(!1),
+            onEnded: () => {
+              k || (o(!1), g(0));
+            },
+            children: /* @__PURE__ */ n("track", { kind: "captions" })
+          }
+        ) : /* @__PURE__ */ n(
+          "video",
+          {
+            ref: h,
+            src: a,
+            poster: i,
+            loop: k,
+            muted: C,
+            playsInline: !0,
+            style: { width: "100%", height: "100%" },
+            onLoadStart: () => m(!0),
+            onCanPlay: () => m(!1),
+            onWaiting: () => m(!0),
+            onPlay: () => b(!1),
+            onLoadedMetadata: () => {
+              const e = h.current;
+              e instanceof HTMLVideoElement && e.videoWidth && e.videoHeight && q(e.videoWidth / e.videoHeight);
+            },
+            onEnded: () => {
+              k || (o(!1), g(0));
+            },
+            children: /* @__PURE__ */ n("track", { kind: "captions" })
+          }
+        ) }),
+        K && !I && /* @__PURE__ */ n("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ n(
+          ie,
+          {
+            className: "size-8 animate-spin text-white/80",
+            weight: "bold"
+          }
+        ) }),
+        I && !v && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Play preview",
+            onClick: (e) => {
+              e.stopPropagation(), O();
+            },
+            onKeyDown: (e) => {
+              e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), O());
+            },
+            children: /* @__PURE__ */ n("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ n(W, { className: "size-9 translate-x-0.5", weight: "fill" }) })
+          }
+        ),
+        X && !v && /* @__PURE__ */ n("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__ */ n(
+          "div",
+          {
+            role: "slider",
+            "aria-label": "Playback position",
+            "aria-valuenow": y,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            tabIndex: 0,
+            ref: F,
+            className: "relative flex h-4 w-full cursor-pointer items-center",
+            onMouseDown: E,
+            onTouchStart: E,
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => {
+              e.key === "ArrowRight" && l(Math.min(1, w + 0.05)), e.key === "ArrowLeft" && l(Math.max(0, w - 0.05));
+            },
+            children: /* @__PURE__ */ n("div", { className: "w-full overflow-hidden rounded-full bg-white/30 h-1", children: /* @__PURE__ */ n(
+              "div",
+              {
+                className: "h-full rounded-full bg-white",
+                style: { width: `${y}%` }
+              }
+            ) })
+          }
+        ) }),
+        v && /* @__PURE__ */ L("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation(), o((t) => !t);
+              },
+              className: "shrink-0 text-white",
+              "aria-label": d ? "Pause" : "Play",
+              children: d ? /* @__PURE__ */ n(oe, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ n(W, { className: "size-5 translate-x-px", weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ L(
+            "div",
+            {
+              role: "slider",
+              "aria-label": "Playback position",
+              "aria-valuenow": y,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              tabIndex: 0,
+              ref: F,
+              className: "relative flex h-4 w-full cursor-pointer items-center",
+              onMouseDown: E,
+              onTouchStart: E,
+              onClick: (e) => e.stopPropagation(),
+              onMouseEnter: () => j(!0),
+              onMouseLeave: () => j(!1),
+              onKeyDown: (e) => {
+                e.key === "ArrowRight" && l(Math.min(1, w + 0.05)), e.key === "ArrowLeft" && l(Math.max(0, w - 0.05));
+              },
+              children: [
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${S || f ? "h-1.5" : "h-1"}`,
+                    children: /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: "h-full rounded-full bg-white",
+                        style: { width: `${y}%` }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${S || f ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    style: { left: `${y}%` }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  be as M,
+  H as g,
+  me as r
+};
+//# sourceMappingURL=MediaPlayer-DXz4IBLx.js.map