@linktr.ee/messaging-react 1.28.0-rc-1776233688 → 1.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.28.0-rc-1776233688",
+  "version": "1.28.1",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -106,6 +106,11 @@ interface TemplateProps {
         | 'MESSAGE_PAID'
         | 'MESSAGE_CHATBOT'
         | 'MESSAGE_ATTACHMENT'
+      payment_status?: 
+        | 'pending'
+        | 'paid'
+        | 'failed'
+        | 'refunded'
       amount_text?: string
       attachment_title?: string
       attachment_mime_type?: string
@@ -316,7 +321,12 @@ PaidAttachment.args = {
     },
     {
       id: 'msg-2',
-      text: 'yes here it is',
+      text: 'Yes, of course!',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'let me know if you have any questions!',
       user: storyUsers.creator,
       metadata: {
         custom_type: 'MESSAGE_ATTACHMENT',
@@ -327,11 +337,6 @@ PaidAttachment.args = {
         attachment_detail: '1:20',
       },
     },
-    {
-      id: 'msg-3',
-      text: 'let me know if you have any questions!',
-      user: storyUsers.creator,
-    },
     {
       id: 'msg-4',
       text: 'Looks amazing, unlocking now!',

package/src/components/CustomMessage/index.tsx

@@ -202,7 +202,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           }}
         >
           {isAttachment ? (
-            <div className="flex flex-col gap-2">
+            <div className={classNames("flex flex-col gap-1", isMine ? "items-end" : "items-start")}>
               <LockedAttachment
                 title={message.metadata?.attachment_title}
                 mimeType={message.metadata?.attachment_mime_type}

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
-import LockedAttachment, { type VisitorCardProps } from '.'
+import LockedAttachment from '.'
 
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
 const VIDEO_SOURCE = '/video-source.mp4'
@@ -22,23 +22,11 @@ const meta: Meta = {
 }
 export default meta
 
-type InteractiveProps = Omit<VisitorCardProps, 'onUnlock' | 'onDownload'> & {
-  unlockedSource: string
+const withDelay = <T,>(fn: () => Promise<T> | T) => async (): Promise<T> => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return fn()
 }
 
-const Interactive = ({ unlockedSource, ...props }: InteractiveProps) => (
-  <LockedAttachment
-    {...props}
-    onUnlock={async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      const res = await fetch(unlockedSource)
-      const blob = await res.blob()
-      return { source: URL.createObjectURL(blob) }
-    }}
-    onDownload={() => {}}
-  />
-)
-
 const VARIANTS = [
   {
     label: 'Video',
@@ -149,13 +137,14 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
-            <Interactive
+            <LockedAttachment
               title={title}
               amountText="AU$9.99"
               thumbnail={thumbnail}
               mimeType={mimeType}
               detail={detail}
-              unlockedSource={source}
+              onUnlock={withDelay(() => ({ source }))}
+              onDownload={() => {}}
             />
           </td>
         ))}
@@ -166,14 +155,15 @@ export const Visitor: StoryFn = () => (
         </td>
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
-            <Interactive
+            <LockedAttachment
               title={title}
               amountText="AU$9.99"
               thumbnail={thumbnail}
               mimeType={mimeType}
               detail={detail}
-              unlockedSource={source}
               paymentStatus="paid"
+              onUnlock={withDelay(() => ({ source }))}
+              onDownload={() => {}}
             />
           </td>
         ))}
@@ -192,7 +182,7 @@ export const Visitor: StoryFn = () => (
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
-              onDownload={() => {}}
+              onDownload={() => new Promise((resolve) => setTimeout(resolve, 2000))}
             />
           </td>
         ))}
@@ -212,7 +202,6 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               isPreview
               thumbnail={thumbnail}
               source={source}
@@ -230,7 +219,6 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               title={title}
               thumbnail={thumbnail}
               source={source}
@@ -249,7 +237,7 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
+              
               title={title}
               thumbnail={thumbnail}
               source={source}
@@ -267,7 +255,6 @@ export const Creator: StoryFn = () => (
         {VARIANTS.map(({ title, mimeType, detail, thumbnail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               title={title}
               thumbnail={thumbnail}
               source={source}
@@ -294,7 +281,6 @@ export const NoThumbnail: StoryFn = () => (
         {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment
-              isCreator
               title={title}
               source={source}
               mimeType={mimeType}
@@ -310,12 +296,13 @@ export const NoThumbnail: StoryFn = () => (
         </td>
         {NO_THUMBNAIL_VARIANTS.map(({ title, mimeType, detail, source }) => (
           <td key={mimeType} className="align-top">
-            <Interactive
+            <LockedAttachment
               title={title}
               amountText="AU$9.99"
               mimeType={mimeType}
               detail={detail}
-              unlockedSource={source}
+              onUnlock={withDelay(() => ({ source }))}
+              onDownload={() => {}}
             />
           </td>
         ))}

package/src/components/LockedAttachment/components/Creator.tsx

@@ -131,9 +131,12 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
     }
   }, [playing, seeking])
 
+  const [audioReady, setAudioReady] = useState(false)
+
   useEffect(() => {
     setPlaying(false)
     setPlayed(0)
+    setAudioReady(false)
   }, [source])
 
   const getFraction = useCallback(
@@ -187,6 +190,7 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
           ref={audioRef}
           src={source}
           loop
+          onCanPlay={() => setAudioReady(true)}
           onEnded={() => {
             setPlaying(false)
             setPlayed(0)
@@ -198,10 +202,10 @@ const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
       <CollapsedThumbnail
         thumbnail={thumbnail}
         mimeType={mimeType}
-        overlayIcon={source ? (playing ? PauseIcon : PlayIcon) : undefined}
-        onClick={source ? toggle : undefined}
+        overlayIcon={source && audioReady ? (playing ? PauseIcon : PlayIcon) : undefined}
+        onClick={source && audioReady ? toggle : undefined}
       />
-      {source && (
+      {source && audioReady && (
         <div className="absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent">
           <div
             ref={trackRef}

package/src/components/LockedAttachment/components/MediaPlayer.tsx

@@ -63,6 +63,8 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   const [scrubberHovered, setScrubberHovered] = useState(false)
   const [videoAspect, setVideoAspect] = useState<number | null>(null)
   const [buffering, setBuffering] = useState(false)
+  /** True until the first canPlay fires for the current source — hides controls/spinner behind poster. */
+  const [initialLoad, setInitialLoad] = useState(true)
   /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */
   const [manualPlayRequired, setManualPlayRequired] = useState(false)
   const playerRef = useRef<HTMLMediaElement>(null)
@@ -71,6 +73,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
 
   useEffect(() => {
     setManualPlayRequired(false)
+    setInitialLoad(true)
   }, [source])
 
   useEffect(() => {
@@ -209,6 +212,11 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
           })}
         </div>
       )}
+      {initialLoad && poster && (
+        <div className="absolute inset-0 z-20">
+          <img src={poster} alt="" className="h-full w-full object-cover" />
+        </div>
+      )}
       <div className="absolute inset-0">
         {sourceType === 'audio' ? (
           <audio
@@ -218,7 +226,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
             muted={muted}
             style={{ width: '100%', height: '100%' }}
             onLoadStart={() => setBuffering(true)}
-            onCanPlay={() => setBuffering(false)}
+            onCanPlay={() => { setBuffering(false); setInitialLoad(false) }}
             onWaiting={() => setBuffering(true)}
             onPlay={() => setManualPlayRequired(false)}
             onEnded={() => {
@@ -240,7 +248,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
             playsInline
             style={{ width: '100%', height: '100%' }}
             onLoadStart={() => setBuffering(true)}
-            onCanPlay={() => setBuffering(false)}
+            onCanPlay={() => { setBuffering(false); setInitialLoad(false) }}
             onWaiting={() => setBuffering(true)}
             onPlay={() => setManualPlayRequired(false)}
             onLoadedMetadata={() => {

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

@@ -24,10 +24,11 @@ export interface VisitorCardProps extends LockedAttachmentBaseProps {
    * Omit to hide the Unlock button.
    */
   onUnlock?: () => Promise<LockedAttachmentSource>
-  /** 
+  /**
    * Called when the visitor clicks Download on an unlocked card.
+   * May return a Promise — if so, the component shows a loader until it resolves.
    */
-  onDownload?: () => void
+  onDownload?: () => void | Promise<void>
 }
 
 const getLockIcon = (paymentStatus?: PaymentStatus): React.ElementType =>
@@ -36,14 +37,23 @@ const getLockIcon = (paymentStatus?: PaymentStatus): React.ElementType =>
 
 interface LockOverlayProps {
   icon: React.ElementType
+  loading?: boolean
 }
 
 const LockOverlay: React.FC<LockOverlayProps> = (props) => {
-  const { icon: Icon } = props
+  const { icon: Icon, loading } = props
   return (
     <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">
-        <Icon className="size-4 text-white" weight="fill" />
+        {loading ? (
+          <span className="flex items-center gap-[2px]">
+            <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" />
+            <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" />
+            <span className="size-1 rounded-full bg-white animate-bounce" />
+          </span>
+        ) : (
+          <Icon className="size-4 text-white" weight="fill" />
+        )}
       </div>
     </div>
   )
@@ -53,10 +63,11 @@ interface LockedPreviewProps {
   thumbnail?: string
   mimeType: string
   LockIcon: React.ElementType
+  loading?: boolean
 }
 
 const LockedPreview: React.FC<LockedPreviewProps> = (props) => {
-  const { thumbnail, mimeType, LockIcon } = props
+  const { thumbnail, mimeType, LockIcon, loading } = props
   return (
     <div className="relative aspect-video overflow-hidden bg-black/5">
       {thumbnail ? (
@@ -73,7 +84,7 @@ const LockedPreview: React.FC<LockedPreviewProps> = (props) => {
           })}
         </div>
       )}
-      <LockOverlay icon={LockIcon} />
+      <LockOverlay icon={LockIcon} loading={loading} />
     </div>
   )
 }
@@ -86,10 +97,11 @@ interface ImagePreviewProps {
   title?: string
   paymentStatus?: PaymentStatus
   isLocked: boolean
+  loading?: boolean
 }
 
 const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
-  const { source, thumbnail, mimeType, title, paymentStatus, isLocked } = props
+  const { source, thumbnail, mimeType, title, paymentStatus, isLocked, loading } = props
   const [sourceReady, setSourceReady] = useState(false)
 
   useEffect(() => {
@@ -102,6 +114,7 @@ const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
         thumbnail={thumbnail}
         mimeType={mimeType}
         LockIcon={getLockIcon(paymentStatus)}
+        loading={loading}
       />
     )
   }
@@ -123,10 +136,11 @@ interface DocumentPreviewProps {
   mimeType: string
   paymentStatus?: PaymentStatus
   isLocked: boolean
+  loading?: boolean
 }
 
 const DocumentPreview: React.FC<DocumentPreviewProps> = (props) => {
-  const { thumbnail, mimeType, paymentStatus, isLocked } = props
+  const { thumbnail, mimeType, paymentStatus, isLocked, loading } = props
   return (
     <div className="relative aspect-video overflow-hidden bg-black/5">
       {thumbnail ? (
@@ -143,7 +157,7 @@ const DocumentPreview: React.FC<DocumentPreviewProps> = (props) => {
           })}
         </div>
       )}
-      {isLocked && <LockOverlay icon={getLockIcon(paymentStatus)} />}
+      {isLocked && <LockOverlay icon={getLockIcon(paymentStatus)} loading={loading} />}
     </div>
   )
 }
@@ -154,16 +168,18 @@ interface MediaPreviewProps {
   mimeType: string
   paymentStatus?: PaymentStatus
   isLocked: boolean
+  loading?: boolean
 }
 
 const MediaPreview: React.FC<MediaPreviewProps> = (props) => {
-  const { source, thumbnail, mimeType, paymentStatus, isLocked } = props
+  const { source, thumbnail, mimeType, paymentStatus, isLocked, loading } = props
   if (isLocked) {
     return (
       <LockedPreview
         thumbnail={thumbnail}
         mimeType={mimeType}
         LockIcon={getLockIcon(paymentStatus)}
+        loading={loading}
       />
     )
   }
@@ -171,9 +187,18 @@ const MediaPreview: React.FC<MediaPreviewProps> = (props) => {
 }
 
 
+const LoadingDots = () => (
+  <span className="flex items-center gap-1">
+    <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" />
+    <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" />
+    <span className="size-1 rounded-full bg-white animate-bounce" />
+  </span>
+)
+
 interface CardActionsProps {
   isLocked: boolean
-  loading: boolean
+  unlockLoading: boolean
+  downloadLoading: boolean
   paymentStatus?: PaymentStatus
   source?: string
   onUnlock?: () => void
@@ -181,8 +206,7 @@ interface CardActionsProps {
 }
 
 const CardActions: React.FC<CardActionsProps> = (props) => {
-  const { isLocked, loading, paymentStatus, source, onUnlock, onDownload } =
-    props
+  const { isLocked, unlockLoading, downloadLoading, paymentStatus, source, onUnlock, onDownload } = props
   const LockIcon = getLockIcon(paymentStatus)
 
   if (isLocked && onUnlock) {
@@ -190,15 +214,11 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
       <button
         type="button"
         onClick={onUnlock}
-        disabled={loading}
+        disabled={unlockLoading}
         className="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 disabled:opacity-70"
       >
-        {loading ? (
-          <span className="flex items-center gap-1">
-            <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" />
-            <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" />
-            <span className="size-1 rounded-full bg-white animate-bounce" />
-          </span>
+        {unlockLoading ? (
+          <LoadingDots />
         ) : (
           <>
             {paymentStatus === 'paid' ? (
@@ -215,16 +235,21 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
 
   if (!isLocked && onDownload && source) {
     return (
-      <a
-        href={source}
-        target="_blank"
-        rel="noopener noreferrer"
+      <button
+        type="button"
         onClick={onDownload}
-        className="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"
+        disabled={downloadLoading}
+        className="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 disabled:opacity-70"
       >
-        <DownloadSimpleIcon className="size-4" weight="bold" />
-        Download
-      </a>
+        {downloadLoading ? (
+          <LoadingDots />
+        ) : (
+          <>
+            <DownloadSimpleIcon className="size-4" weight="bold" />
+            Download
+          </>
+        )}
+      </button>
     )
   }
 
@@ -245,7 +270,8 @@ const VisitorCard: React.FC<VisitorCardProps> = (props) => {
     paymentStatus,
   } = props
   const [source, setSource] = useState(sourceProp)
-  const [loading, setLoading] = useState(false)
+  const [unlockLoading, setUnlockLoading] = useState(false)
+  const [downloadLoading, setDownloadLoading] = useState(false)
 
   useEffect(() => {
     if (sourceProp !== undefined) setSource(sourceProp)
@@ -256,14 +282,26 @@ const VisitorCard: React.FC<VisitorCardProps> = (props) => {
 
   const handleUnlock = async () => {
     if (!onUnlock) return
-    setLoading(true)
+    setUnlockLoading(true)
     try {
       const result = await onUnlock()
       setSource(result.source)
     } catch (err) {
       if (isDevBuild()) console.debug('[LockedAttachment] onUnlock failed', err)
     } finally {
-      setLoading(false)
+      setUnlockLoading(false)
+    }
+  }
+
+  const handleDownload = async () => {
+    if (!onDownload) return
+    setDownloadLoading(true)
+    try {
+      await onDownload()
+    } catch (err) {
+      if (isDevBuild()) console.debug('[LockedAttachment] onDownload failed', err)
+    } finally {
+      setDownloadLoading(false)
     }
   }
 
@@ -277,6 +315,7 @@ const VisitorCard: React.FC<VisitorCardProps> = (props) => {
         title={title}
         paymentStatus={paymentStatus}
         isLocked={isLocked}
+        loading={unlockLoading}
       />
     )
   } else if (sourceType === 'document') {
@@ -286,6 +325,7 @@ const VisitorCard: React.FC<VisitorCardProps> = (props) => {
         mimeType={mimeType}
         paymentStatus={paymentStatus}
         isLocked={isLocked}
+        loading={unlockLoading}
       />
     )
   } else {
@@ -296,6 +336,7 @@ const VisitorCard: React.FC<VisitorCardProps> = (props) => {
         mimeType={mimeType}
         paymentStatus={paymentStatus}
         isLocked={isLocked}
+        loading={unlockLoading}
       />
     )
   }
@@ -339,11 +380,12 @@ const VisitorCard: React.FC<VisitorCardProps> = (props) => {
         </div>
         <CardActions
           isLocked={isLocked}
-          loading={loading}
+          unlockLoading={unlockLoading}
+          downloadLoading={downloadLoading}
           paymentStatus={paymentStatus}
           source={source}
           onUnlock={onUnlock ? handleUnlock : undefined}
-          onDownload={onDownload}
+          onDownload={onDownload ? handleDownload : undefined}
         />
       </div>
     </div>

package/dist/Creator-BJ6UBWsR.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Creator-BJ6UBWsR.js","sources":["../src/components/LockedAttachment/components/Creator.tsx"],"sourcesContent":["import {\n  CheckCircleIcon,\n  EyeIcon,\n  EyeSlashIcon,\n  LockIcon,\n  LockOpenIcon,\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  darkOverlay?: boolean\n  onClick?: () => void\n}\n\nconst CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {\n  const { thumbnail, mimeType, overlayIcon: OverlayIcon, darkOverlay, 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      {darkOverlay && (\n        <div className=\"pointer-events-none absolute inset-0 bg-black/30\" />\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    const lockedOverlayIcon = onDismiss\n      ? undefined\n      : paymentStatus === 'paid'\n        ? LockOpenIcon\n        : LockIcon\n    mediaPreview = (\n      <CollapsedThumbnail\n        thumbnail={thumbnail}\n        mimeType={mimeType}\n        overlayIcon={lockedOverlayIcon}\n        darkOverlay\n      />\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","darkOverlay","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","LockOpenIcon","LockIcon","XIcon","renderTypeIcon","Fragment","CheckCircleIcon"],"mappings":"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"}