@linktr.ee/messaging-react 1.32.1 → 1.33.0-rc-1777504230

package/src/components/MediaMessage/index.tsx

@@ -0,0 +1,476 @@
+import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon, XIcon } from '@phosphor-icons/react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { Attachment, LocalMessage } from 'stream-chat'
+
+import { Avatar } from '../Avatar'
+import MediaPlayer from '../LockedAttachment/components/MediaPlayer'
+import { renderTypeIcon } from '../LockedAttachment/utils/icons'
+import { getSourceType } from '../LockedAttachment/utils/mimeType'
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function cardClass(isMyMessage: boolean) {
+  const bg = isMyMessage ? 'bg-[#121110]' : 'bg-[#F3F3F1]'
+  return `w-[280px] select-none overflow-hidden rounded-[24px] ${bg} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`
+}
+
+function primaryText(isMyMessage: boolean) {
+  return isMyMessage ? 'text-white' : 'text-black'
+}
+
+function secondaryText(isMyMessage: boolean) {
+  return isMyMessage ? 'text-white/55' : 'text-black/55'
+}
+
+function tertiaryText(isMyMessage: boolean) {
+  return isMyMessage ? 'text-white/40' : 'text-black/40'
+}
+
+function thumbnailBg(isMyMessage: boolean) {
+  return isMyMessage ? 'bg-white/10' : 'bg-black/5'
+}
+
+function iconColor(isMyMessage: boolean) {
+  return isMyMessage ? 'text-white/20' : 'text-black/20'
+}
+
+function buttonBg(isMyMessage: boolean) {
+  return isMyMessage ? 'bg-white/10 hover:bg-white/15' : 'bg-black/[0.06] hover:bg-black/10'
+}
+
+// ---------------------------------------------------------------------------
+// Download button (shared across all media types)
+// ---------------------------------------------------------------------------
+
+async function triggerDownload(url: string, filename?: string): Promise<void> {
+  let name: string
+  try { name = filename ?? new URL(url).pathname.split('/').pop() ?? 'download' }
+  catch { name = filename ?? 'download' }
+  const res = await fetch(url, { mode: 'cors' })
+  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  const blob = await res.blob()
+  const objectUrl = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = objectUrl
+  a.download = name
+  a.style.display = 'none'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(objectUrl)
+}
+
+const DownloadButton: React.FC<{ url: string; filename?: string; isMyMessage: boolean }> = ({
+  url,
+  filename,
+  isMyMessage,
+}) => {
+  const [busy, setBusy] = useState(false)
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    // Open synchronously so the browser treats it as a user gesture (prevents popup blocking)
+    const fallback = window.open('', '_blank', 'noopener,noreferrer')
+    setBusy(true)
+    triggerDownload(url, filename)
+      .then(() => { fallback?.close() })
+      .catch(() => { if (fallback) fallback.location.href = url })
+      .finally(() => setBusy(false))
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={busy}
+      className={`flex size-8 items-center justify-center rounded-full ${buttonBg(isMyMessage)} disabled:opacity-50`}
+      aria-label="Download"
+    >
+      {busy ? (
+        <CircleNotchIcon className={`size-4 animate-spin ${secondaryText(isMyMessage)}`} weight="bold" />
+      ) : (
+        <DownloadSimpleIcon className={`size-4 ${secondaryText(isMyMessage)}`} weight="bold" />
+      )}
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Chin: title + file size + download
+// ---------------------------------------------------------------------------
+
+const MediaMeta: React.FC<{
+  mimeType: string
+  title?: string
+  fileSize?: number
+  url: string
+  isMyMessage: boolean
+}> = ({ mimeType, title, fileSize, url, isMyMessage }) => (
+  <div className="flex items-start gap-2 px-4 pb-3 pt-3">
+    <div className="min-w-0 flex-1">
+      {title && (
+        <p className={`mb-1.5 truncate text-base font-medium ${primaryText(isMyMessage)}`}>
+          {title}
+        </p>
+      )}
+      {fileSize !== undefined && (
+        <div className="flex items-center gap-1">
+          {renderTypeIcon(mimeType, {
+            className: `size-5 shrink-0 ${secondaryText(isMyMessage)}`,
+            weight: 'regular',
+          })}
+          <span className={`text-xs font-medium ${secondaryText(isMyMessage)}`}>
+            {formatBytes(fileSize)}
+          </span>
+        </div>
+      )}
+    </div>
+    <div className="flex shrink-0 items-center gap-1 pt-0.5">
+      <DownloadButton url={url} filename={title} isMyMessage={isMyMessage} />
+    </div>
+  </div>
+)
+
+// ---------------------------------------------------------------------------
+// Document card: PDF (click → viewer) or unknown (link only)
+// ---------------------------------------------------------------------------
+
+const FileCard: React.FC<{
+  url: string
+  mimeType: string
+  title?: string
+  fileSize?: number
+  isMyMessage: boolean
+  onExpand?: () => void
+}> = ({ url, mimeType, title, fileSize, isMyMessage, onExpand }) => {
+  const thumbnailContent = (
+    <div
+      className={`aspect-video w-full ${thumbnailBg(isMyMessage)} flex items-center justify-center`}
+    >
+      {renderTypeIcon(mimeType, {
+        className: `size-12 ${iconColor(isMyMessage)}`,
+        weight: 'regular',
+      })}
+    </div>
+  )
+
+  return (
+    <div>
+      {onExpand ? (
+        <button
+          type="button"
+          onClick={onExpand}
+          className="block w-full"
+          aria-label="Open PDF viewer"
+        >
+          {thumbnailContent}
+        </button>
+      ) : (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
+          {thumbnailContent}
+        </a>
+      )}
+      <MediaMeta
+        mimeType={mimeType}
+        title={title}
+        fileSize={fileSize}
+        url={url}
+        isMyMessage={isMyMessage}
+      />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Link preview card (no download / no viewer)
+// ---------------------------------------------------------------------------
+
+const LinkCard: React.FC<{
+  attachment: Attachment
+  isMyMessage: boolean
+}> = ({ attachment, isMyMessage }) => {
+  const { title, text, image_url, og_scrape_url, title_link } = attachment
+  const url = og_scrape_url ?? title_link
+
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
+      <div className="p-2">
+        {image_url ? (
+          <img
+            src={image_url}
+            alt={title ?? ''}
+            className="aspect-video w-full rounded-[20px] object-cover"
+          />
+        ) : (
+          <div
+            className={`aspect-video w-full rounded-[20px] ${thumbnailBg(isMyMessage)} flex items-center justify-center`}
+          >
+            <LinkIcon className={`size-12 ${iconColor(isMyMessage)}`} />
+          </div>
+        )}
+      </div>
+      <div className="px-3 pb-3">
+        {title && (
+          <p className={`truncate text-[14px] font-medium leading-5 ${primaryText(isMyMessage)}`}>
+            {title}
+          </p>
+        )}
+        {text && (
+          <p className={`truncate text-[12px] leading-4 ${secondaryText(isMyMessage)}`}>{text}</p>
+        )}
+        {url && (
+          <p className={`mt-1 truncate text-[12px] leading-4 ${tertiaryText(isMyMessage)}`}>
+            {url}
+          </p>
+        )}
+      </div>
+    </a>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Full-screen media viewer (image, video, PDF)
+// ---------------------------------------------------------------------------
+
+const MediaViewer: React.FC<{
+  sourceType: string
+  url: string
+  mimeType: string
+  title?: string
+  poster?: string
+  onClose: () => void
+}> = ({ sourceType, url, mimeType, title, poster, onClose }) => {
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    const el = dialogRef.current
+    el?.showModal()
+    return () => {
+      if (el?.open) el.close()
+    }
+  }, [])
+
+  const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === dialogRef.current) onClose()
+  }
+
+  const isPdf = mimeType === 'application/pdf'
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    <dialog
+      ref={dialogRef}
+      className="mes-media-viewer"
+      onClose={onClose}
+      onClick={handleClick}
+    >
+      <div className="relative flex h-full w-full items-center justify-center p-6">
+        <button
+          type="button"
+          onClick={onClose}
+          className="absolute right-4 top-4 z-10 flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
+          aria-label="Close"
+        >
+          <XIcon className="size-5" weight="bold" />
+        </button>
+
+        {sourceType === 'image' ? (
+          <img
+            src={url}
+            alt={title ?? ''}
+            className="max-h-[90vh] max-w-[90vw] rounded-2xl object-contain"
+          />
+        ) : isPdf ? (
+          <div className="flex h-full w-full max-w-4xl flex-col pt-14">
+            {title && (
+              <p className="mb-2 shrink-0 truncate text-sm font-medium text-white/70">{title}</p>
+            )}
+            <iframe
+              src={url}
+              title={title ?? 'Document'}
+              className="w-full flex-1 rounded-xl"
+            />
+          </div>
+        ) : (
+          <div className="w-full max-w-2xl">
+            {title && (
+              <p className="mb-4 text-center text-sm font-medium text-white/70">{title}</p>
+            )}
+            <MediaPlayer source={url} mimeType={mimeType} poster={poster} controls />
+          </div>
+        )}
+      </div>
+    </dialog>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// MediaMessage
+// ---------------------------------------------------------------------------
+
+export interface MediaMessageProps {
+  message: LocalMessage
+  isMyMessage?: boolean
+}
+
+export const MediaMessage: React.FC<MediaMessageProps> = ({
+  message,
+  isMyMessage = false,
+}) => {
+  const [viewerOpen, setViewerOpen] = useState(false)
+
+  const linkAttachment = message.attachments?.find(
+    (a) => a.type === 'link' || (a.og_scrape_url && !a.asset_url)
+  )
+  const videoAttachment = message.attachments?.find(
+    (a) => a.type === 'video' && a.asset_url
+  )
+  const imageAttachment = message.attachments?.find(
+    (a) => a.type === 'image' && (a as { image_url?: string }).image_url
+  )
+  const audioAttachment = message.attachments?.find(
+    (a) => a.type === 'audio' && a.asset_url
+  )
+  const fileAttachment = message.attachments?.find(
+    (a) => a.type === 'file' && a.asset_url
+  )
+
+  const activeAttachment =
+    videoAttachment ?? imageAttachment ?? audioAttachment ?? fileAttachment
+
+  const resolvedUrl =
+    videoAttachment?.asset_url ??
+    (imageAttachment as { image_url?: string } | undefined)?.image_url ??
+    audioAttachment?.asset_url ??
+    fileAttachment?.asset_url
+
+  const resolvedType =
+    activeAttachment?.mime_type ??
+    (activeAttachment?.type === 'image'
+      ? 'image/jpeg'
+      : activeAttachment?.type === 'video'
+        ? 'video/mp4'
+        : activeAttachment?.type === 'audio'
+          ? 'audio/mpeg'
+          : 'application/octet-stream')
+
+  if (!linkAttachment && !resolvedUrl) return null
+
+  const sourceType = resolvedUrl ? getSourceType(resolvedType) : null
+  const title = (activeAttachment as { title?: string } | undefined)?.title
+  const fileSize = (activeAttachment as { file_size?: number } | undefined)?.file_size
+  const thumbnailUrl = (videoAttachment as { thumb_url?: string } | undefined)?.thumb_url
+  const isPdf = resolvedType === 'application/pdf'
+
+  const messageClass = isMyMessage
+    ? 'str-chat__message str-chat__message-simple str-chat__message--me str-chat__message-simple--me'
+    : 'str-chat__message str-chat__message-simple str-chat__message--other'
+
+  // Only images, video (from poster), and PDFs support the full-screen viewer
+  const canView = sourceType === 'image' || sourceType === 'video' || isPdf
+
+  return (
+    <>
+      <div className={messageClass}>
+        {!isMyMessage && message.user && (
+          <Avatar
+            className="str-chat__avatar str-chat__message-sender-avatar"
+            id={message.user.id}
+            image={message.user.image}
+            name={message.user.name ?? message.user.id}
+          />
+        )}
+        <div
+          className="str-chat__message-inner"
+          style={{ marginInlineEnd: 0, marginInlineStart: 0 }}
+        >
+          <div className="str-chat__message-bubble-wrapper">
+            <div
+              className="str-chat__message-bubble"
+              style={{ padding: 0, borderRadius: 0, overflow: 'visible', background: 'transparent' }}
+            >
+              <div className={cardClass(isMyMessage)}>
+                {linkAttachment ? (
+                  <LinkCard attachment={linkAttachment} isMyMessage={isMyMessage} />
+                ) : sourceType === 'image' ? (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => setViewerOpen(true)}
+                      className="block w-full cursor-zoom-in"
+                    >
+                      <img src={resolvedUrl!} alt={title ?? ''} className="block w-full" />
+                    </button>
+                    <MediaMeta
+                      mimeType={resolvedType}
+                      title={title}
+                      fileSize={fileSize}
+                      url={resolvedUrl!}
+                      isMyMessage={isMyMessage}
+                    />
+                  </>
+                ) : sourceType === 'video' ? (
+                  <>
+                    <MediaPlayer
+                      source={resolvedUrl!}
+                      mimeType={resolvedType}
+                      poster={thumbnailUrl}
+                      controls
+                      onContainerClick={() => setViewerOpen(true)}
+                    />
+                    <MediaMeta
+                      mimeType={resolvedType}
+                      title={title}
+                      fileSize={fileSize}
+                      url={resolvedUrl!}
+                      isMyMessage={isMyMessage}
+                    />
+                  </>
+                ) : sourceType === 'audio' ? (
+                  <>
+                    <MediaPlayer
+                      source={resolvedUrl!}
+                      mimeType={resolvedType}
+                      controls
+                    />
+                    <MediaMeta
+                      mimeType={resolvedType}
+                      title={title}
+                      fileSize={fileSize}
+                      url={resolvedUrl!}
+                      isMyMessage={isMyMessage}
+                    />
+                  </>
+                ) : (
+                  // document: PDF gets viewer, unknown gets link-only thumbnail
+                  <FileCard
+                    url={resolvedUrl!}
+                    mimeType={resolvedType}
+                    title={title}
+                    fileSize={fileSize}
+                    isMyMessage={isMyMessage}
+                    onExpand={isPdf ? () => setViewerOpen(true) : undefined}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {viewerOpen && canView && resolvedUrl && (
+        <MediaViewer
+          sourceType={sourceType!}
+          url={resolvedUrl}
+          mimeType={resolvedType}
+          title={title}
+          poster={thumbnailUrl}
+          onClose={() => setViewerOpen(false)}
+        />
+      )}
+    </>
+  )
+}

package/src/components/MessagingShell/index.tsx

@@ -42,6 +42,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customProfileContent,
   customChannelActions,
   renderMessage,
+  sendButton,
 }) => {
   const {
     service,
@@ -505,6 +506,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}
+                sendButton={sendButton}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/index.ts

@@ -13,6 +13,8 @@ export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
 export { MessageVoteButtons } from './components/CustomMessage/MessageVoteButtons'
+export { MediaMessage } from './components/MediaMessage'
+export type { MediaMessageProps } from './components/MediaMessage'
 
 // Providers
 export { MessagingProvider } from './providers/MessagingProvider'

package/src/styles.css

@@ -64,6 +64,55 @@
   }
 }
 
+/* Full-screen media viewer dialog */
+.mes-media-viewer {
+  --transition-duration: 0.15s;
+
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  width: 100vw;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100dvh;
+  position: fixed;
+  inset: 0;
+
+  transition:
+    opacity var(--transition-duration) ease,
+    overlay var(--transition-duration) allow-discrete,
+    display var(--transition-duration) allow-discrete;
+
+  opacity: 0;
+}
+
+.mes-media-viewer[open] {
+  opacity: 1;
+}
+
+.mes-media-viewer::backdrop {
+  transition:
+    display var(--transition-duration) allow-discrete,
+    overlay var(--transition-duration) allow-discrete,
+    background-color var(--transition-duration) linear;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.mes-media-viewer[open]::backdrop {
+  background-color: rgba(0, 0, 0, 0.92);
+}
+
+@starting-style {
+  .mes-media-viewer[open] {
+    opacity: 0;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+}
+
 /* Textarea composer focus styles */
 .mes-textarea-composer-container:has(.mes-textarea-composer:focus) {
   outline: 2px solid black;

package/src/types.ts

@@ -2,6 +2,7 @@ import type {
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
+import type { ComponentType } from 'react'
 import type {
   Channel,
   ChannelFilters,
@@ -234,6 +235,17 @@ export interface ChannelViewProps {
     message: LocalMessage
   ) => React.ReactNode
 
+  /**
+   * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
+   * the send control: `Channel` merges this into `ComponentContext` and an
+   * explicit `SendButton: undefined` would otherwise override outer
+   * `WithComponents` overrides.
+   *
+   * @example
+   * sendButton={MediaSendButton}
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sendButton?: ComponentType<any>
 }
 
 /**
@@ -257,6 +269,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'customProfileContent'
   | 'customChannelActions'
   | 'renderMessage'
+  | 'sendButton'
 >
 
 /**

package/dist/Card-1CQEn-OT.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-1CQEn-OT.js","sources":["../src/components/LockedAttachment/components/Creator/CardThumbnail.tsx","../src/components/LockedAttachment/components/Creator/Card.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../utils/icons'\nimport { getSourceType } from '../../utils/mimeType'\nimport MediaPlayer from '../MediaPlayer'\n\ninterface CardThumbnailProps {\n  title?: string\n  sourceUrl?: string\n  thumbnailUrl?: string\n  mimeType: string\n  onToggle?: () => void\n}\n\nconst CardThumbnail: React.FC<CardThumbnailProps> = ({\n  title,\n  sourceUrl,\n  thumbnailUrl,\n  mimeType,\n  onToggle,\n}) => {\n  const isExpanded = onToggle && sourceUrl && thumbnailUrl\n\n  return (\n    <button\n      type=\"button\"\n      disabled={!onToggle}\n      className={classNames(\n        'relative block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',\n        { 'cursor-pointer': !!onToggle, 'cursor-default': !onToggle }\n      )}\n      onClick={onToggle}\n      aria-label={onToggle ? 'Toggle preview' : undefined}\n    >\n      {isExpanded ? (\n        <ThumbnailMedia\n          sourceUrl={sourceUrl}\n          thumbnailUrl={thumbnailUrl}\n          mimeType={mimeType}\n        />\n      ) : thumbnailUrl ? (\n        <div className=\"aspect-video overflow-hidden\">\n          <img\n            src={thumbnailUrl}\n            alt={title}\n            draggable={false}\n            className=\"absolute inset-0 h-full w-full object-cover\"\n          />\n        </div>\n      ) : (\n        <div className=\"aspect-video flex items-center justify-center\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-12 text-black/20',\n            weight: 'regular',\n          })}\n        </div>\n      )}\n\n      {!isExpanded && (\n        <div className=\"pointer-events-none absolute inset-0 bg-black/30\" />\n      )}\n    </button>\n  )\n}\n\ninterface ThumbnailMediaProps {\n  sourceUrl: string\n  thumbnailUrl: string\n  mimeType: string\n}\n\nconst ThumbnailMedia: React.FC<ThumbnailMediaProps> = ({\n  sourceUrl,\n  thumbnailUrl,\n  mimeType,\n}) => {\n  const sourceType = getSourceType(mimeType)\n\n  if (sourceType === 'video' || sourceType === 'audio') {\n    return (\n      <MediaPlayer\n        mimeType={mimeType}\n        source={sourceUrl}\n        poster={thumbnailUrl}\n        autoPlay={true}\n        loop={true}\n        controls={true}\n        muted={false}\n      />\n    )\n  }\n\n  if (sourceType === 'image') {\n    return (\n      <img src={sourceUrl} alt=\"\" className=\"block w-full\" draggable={false} />\n    )\n  }\n\n  if (sourceType === 'document') {\n    return (\n      <img\n        src={thumbnailUrl}\n        alt=\"\"\n        className=\"block w-full\"\n        draggable={false}\n      />\n    )\n  }\n\n  return null\n}\n\nexport default CardThumbnail\n","import {\n  CheckCircleIcon,\n  EyeIcon,\n  EyeSlashIcon,\n  LockIcon,\n  LockOpenIcon,\n  XIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useCallback, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\nimport { renderTypeIcon } from '../../utils/icons'\n\nimport CardThumbnail from './CardThumbnail'\n\nexport interface CreatorCardProps extends LockedAttachmentBaseProps {\n  placeholderTitle?: string\n  placeholderAmountText?: string\n  onDismiss?: () => void\n  onPreviewClick?: () => LockedAttachmentSource\n}\n\nconst CreatorCard: React.FC<CreatorCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  paymentStatus,\n  onDismiss,\n  onPreviewClick,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveThumbnailUrl = source?.thumbnailUrl ?? thumbnailUrl\n\n  const handleToggle = useCallback(() => {\n    if (source) {\n      setSource(undefined)\n    } else if (onPreviewClick) {\n      setSource(onPreviewClick())\n    }\n  }, [source, onPreviewClick])\n\n  return (\n    <div className=\"relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]\">\n      <CardHeader\n        onDismiss={onDismiss}\n        onPreviewClick={onPreviewClick}\n        sourceUrl={source?.sourceUrl}\n        paymentStatus={paymentStatus}\n      />\n\n      <CardThumbnail\n        title={title}\n        sourceUrl={effectiveSourceUrl}\n        thumbnailUrl={effectiveThumbnailUrl}\n        mimeType={mimeType}\n        onToggle={onPreviewClick ? handleToggle : undefined}\n      />\n\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\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\n          {detail && (\n            <span className=\"text-xs font-medium text-black/55\">{detail}</span>\n          )}\n\n          {paymentStatus === 'paid' ? (\n            <React.Fragment>\n              <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n              <span className=\"text-xs font-medium text-[#008236]\">Sold</span>\n              <CheckCircleIcon\n                className=\"size-4 text-[#008236]\"\n                weight=\"bold\"\n              />\n            </React.Fragment>\n          ) : (\n            <React.Fragment>\n              <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n              <span\n                className={classNames('text-xs font-medium', {\n                  'text-black/30': !amountText,\n                  'text-black/55': !!amountText,\n                })}\n              >\n                {amountText || placeholderAmountText}\n              </span>\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\ninterface CardHeaderProps {\n  onDismiss?: () => void\n  onPreviewClick?: () => void\n  sourceUrl?: string\n  paymentStatus?: PaymentStatus\n}\n\nconst CardHeader: React.FC<CardHeaderProps> = ({\n  onDismiss,\n  onPreviewClick,\n  sourceUrl,\n  paymentStatus,\n}) => {\n  if (onDismiss) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white right-3\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-4\" weight=\"bold\" />\n      </button>\n    )\n  }\n\n  const Icon = onPreviewClick\n    ? sourceUrl\n      ? EyeIcon\n      : EyeSlashIcon\n    : paymentStatus === 'paid'\n      ? LockOpenIcon\n      : LockIcon\n\n  return (\n    <div className=\"absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3\">\n      <Icon className=\"size-4\" weight=\"fill\" />\n    </div>\n  )\n}\n\nexport default CreatorCard\n"],"names":["CardThumbnail","title","sourceUrl","thumbnailUrl","mimeType","onToggle","isExpanded","jsxs","classNames","jsx","ThumbnailMedia","sourceType","getSourceType","MediaPlayer","CreatorCard","detail","amountText","placeholderTitle","placeholderAmountText","paymentStatus","onDismiss","onPreviewClick","source","setSource","useState","effectiveSourceUrl","effectiveThumbnailUrl","handleToggle","useCallback","CardHeader","renderTypeIcon","React","CheckCircleIcon","XIcon","EyeIcon","EyeSlashIcon","LockOpenIcon","LockIcon"],"mappings":";;;;;AAeA,MAAMA,IAA8C,CAAC;AAAA,EACnD,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAaD,KAAYH,KAAaC;AAE5C,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,CAACF;AAAA,MACX,WAAWG;AAAA,QACT;AAAA,QACA,EAAE,kBAAkB,CAAC,CAACH,GAAU,kBAAkB,CAACA,EAAA;AAAA,MAAS;AAAA,MAE9D,SAASA;AAAA,MACT,cAAYA,IAAW,mBAAmB;AAAA,MAEzC,UAAA;AAAA,QAAAC,IACC,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAAR;AAAA,YACA,cAAAC;AAAA,YACA,UAAAC;AAAA,UAAA;AAAA,QAAA,IAEAD,IACF,gBAAAM,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKN;AAAA,YACL,KAAKF;AAAA,YACL,WAAW;AAAA,YACX,WAAU;AAAA,UAAA;AAAA,QAAA,GAEd,IAEA,gBAAAQ,EAAC,SAAI,WAAU,iDACZ,YAAeL,GAAU;AAAA,UACxB,WAAW;AAAA,UACX,QAAQ;AAAA,QAAA,CACT,GACH;AAAA,QAGD,CAACE,KACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mDAAA,CAAmD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E,GAQMC,IAAgD,CAAC;AAAA,EACrD,WAAAR;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMO,IAAaC,EAAcR,CAAQ;AAEzC,SAAIO,MAAe,WAAWA,MAAe,UAEzC,gBAAAF;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,UAAAT;AAAA,MACA,QAAQF;AAAA,MACR,QAAQC;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,EAAA,IAKTQ,MAAe,UAEf,gBAAAF,EAAC,SAAI,KAAKP,GAAW,KAAI,IAAG,WAAU,gBAAe,WAAW,GAAA,CAAO,IAIvES,MAAe,aAEf,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKN;AAAA,MACL,KAAI;AAAA,MACJ,WAAU;AAAA,MACV,WAAW;AAAA,IAAA;AAAA,EAAA,IAKV;AACT,GCpFMW,IAA0C,CAAC;AAAA,EAC/C,OAAAb;AAAA,EACA,UAAAG,IAAW;AAAA,EACX,cAAAD;AAAA,EACA,QAAAY;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,uBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAA,GAEtBC,IAAqBH,KAAA,gBAAAA,EAAQ,WAC7BI,KAAwBJ,KAAA,gBAAAA,EAAQ,iBAAgBnB,GAEhDwB,IAAeC,EAAY,MAAM;AACrC,IAAIN,IACFC,EAAU,MAAS,IACVF,KACTE,EAAUF,GAAgB;AAAA,EAE9B,GAAG,CAACC,GAAQD,CAAc,CAAC;AAE3B,SACE,gBAAAd,EAAC,OAAA,EAAI,WAAU,yIACb,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAAT;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,KAAA,gBAAAA,EAAQ;AAAA,QACnB,eAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,gBAAAV;AAAA,MAACT;AAAA,MAAA;AAAA,QACC,OAAAC;AAAA,QACA,WAAWwB;AAAA,QACX,cAAcC;AAAA,QACd,UAAAtB;AAAA,QACA,UAAUiB,IAAiBM,IAAe;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5C,gBAAApB,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD,EAAW,yCAAyC;AAAA,YAC7D,iBAAiB,CAACP;AAAA,YAClB,cAAc,CAAC,CAACA;AAAA,UAAA,CACjB;AAAA,UAEA,UAAAA,KAASgB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGZ,gBAAAV,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,QAAAuB,EAAe1B,GAAU;AAAA,UACxB,WAAW;AAAA,UACX,QAAQ;AAAA,QAAA,CACT;AAAA,QAEAW,KACC,gBAAAN,EAAC,QAAA,EAAK,WAAU,qCAAqC,UAAAM,GAAO;AAAA,QAG7DI,MAAkB,SACjB,gBAAAZ,EAACwB,EAAM,UAAN,EACC,UAAA;AAAA,UAAA,gBAAAtB,EAAC,QAAA,EAAK,WAAU,qCAAoC,UAAA,KAAM;AAAA,UAC1D,gBAAAA,EAAC,QAAA,EAAK,WAAU,sCAAqC,UAAA,QAAI;AAAA,UACzD,gBAAAA;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,QAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACT,EAAA,CACF,IAEA,gBAAAzB,EAACwB,EAAM,UAAN,EACC,UAAA;AAAA,UAAA,gBAAAtB,EAAC,QAAA,EAAK,WAAU,qCAAoC,UAAA,KAAM;AAAA,UAC1D,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,EAAW,uBAAuB;AAAA,gBAC3C,iBAAiB,CAACQ;AAAA,gBAClB,iBAAiB,CAAC,CAACA;AAAA,cAAA,CACpB;AAAA,cAEA,UAAAA,KAAcE;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,GASMW,IAAwC,CAAC;AAAA,EAC7C,WAAAT;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAnB;AAAA,EACA,eAAAiB;AACF,MACMC,IAEA,gBAAAX;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAASW;AAAA,IACT,WAAU;AAAA,IACV,cAAW;AAAA,IAEX,UAAA,gBAAAX,EAACwB,GAAA,EAAM,WAAU,UAAS,QAAO,OAAA,CAAO;AAAA,EAAA;AAAA,IAc5C,gBAAAxB,EAAC,OAAA,EAAI,WAAU,0GACb,UAAA,gBAAAA,EAVSY,IACTnB,IACEgC,IACAC,IACFhB,MAAkB,SAChBiB,IACAC,KAII,WAAU,UAAS,QAAO,OAAA,CAAO,EAAA,CACzC;"}

package/dist/Card-ClE_iExA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-ClE_iExA.js","sources":["../src/components/LockedAttachment/components/Visitor/CardActions.tsx","../src/components/LockedAttachment/components/Visitor/CardThumbnail.tsx","../src/components/LockedAttachment/components/Visitor/Card.tsx"],"sourcesContent":["import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React from 'react'\n\ninterface CardActionsProps {\n  sourceUrl?: string\n  redeemUrl?: string\n  onUnlockClicked?: () => void\n  onDownloadClicked?: () => void\n  isUnlocking?: boolean\n}\n\nconst CardActions: React.FC<CardActionsProps> = (props) => {\n  const {\n    isUnlocking = false,\n    sourceUrl,\n    redeemUrl,\n    onUnlockClicked,\n    onDownloadClicked,\n  } = props\n\n  const isLocked = sourceUrl === undefined\n\n  if (isLocked && onUnlockClicked != null) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onUnlockClicked}\n        disabled={isUnlocking}\n        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 hover:bg-[#2a2928] disabled:opacity-70\"\n      >\n        {isUnlocking ? (\n          <LoadingDots />\n        ) : (\n          <React.Fragment>\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" />\n            Unlock\n          </React.Fragment>\n        )}\n      </button>\n    )\n  }\n\n  if (!isLocked && onDownloadClicked != null && sourceUrl != null) {\n    return (\n      <a\n        href={redeemUrl ?? sourceUrl}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onDownloadClicked}\n        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 hover:bg-[#2a2928]\"\n      >\n        <DownloadSimpleIcon className=\"size-4\" weight=\"bold\" />\n        Download\n      </a>\n    )\n  }\n\n  return null\n}\n\nconst LoadingDots: React.FC = () => {\n  return (\n    <span className=\"flex items-center gap-1\">\n      <span className=\"size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]\" />\n      <span className=\"size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]\" />\n      <span className=\"size-1 rounded-full bg-white animate-bounce\" />\n    </span>\n  )\n}\n\nexport default CardActions\n","import { LockOpenIcon, LockSimpleIcon } from '@phosphor-icons/react'\nimport React, { useState } from 'react'\n\nimport { PaymentStatus } from '../../types'\nimport { renderTypeIcon } from '../../utils/icons'\nimport { getSourceType } from '../../utils/mimeType'\nimport MediaPlayer from '../MediaPlayer'\n\ninterface CardThumbnailProps {\n  title?: string\n  sourceUrl?: string\n  thumbnailUrl?: string\n  mimeType: string\n  paymentStatus?: PaymentStatus\n}\n\nconst CardThumbnail: React.FC<CardThumbnailProps> = ({\n  title,\n  sourceUrl,\n  thumbnailUrl,\n  mimeType,\n  paymentStatus,\n}) => {\n  const [sourceReady, setSourceReady] = useState(false)\n\n  const isLocked = sourceUrl === undefined\n  const sourceType = getSourceType(mimeType)\n\n  if (!isLocked) {\n    if (sourceType === 'audio' || sourceType === 'video') {\n      return (\n        <MediaPlayer\n          source={sourceUrl}\n          poster={thumbnailUrl}\n          mimeType={mimeType}\n        />\n      )\n    }\n\n    return (\n      <div className=\"relative overflow-hidden bg-black/5\">\n        <img\n          src={sourceType === 'document' ? thumbnailUrl : sourceUrl}\n          alt={title}\n          className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}\n          draggable={false}\n          onLoad={() => setSourceReady(true)}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"relative aspect-video overflow-hidden bg-black/5\">\n      {thumbnailUrl != null ? (\n        <img\n          src={thumbnailUrl}\n          alt=\"\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          draggable={false}\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      {isLocked && (\n        <div className=\"absolute inset-0 bg-black/30\">\n          <div className=\"absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white\">\n            {paymentStatus === 'paid' ? <LockOpenIcon /> : <LockSimpleIcon />}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default CardThumbnail\n","import { CheckCircleIcon } from '@phosphor-icons/react'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n} from '../../types'\nimport { renderTypeIcon } from '../../utils/icons'\n\nimport CardActions from './CardActions'\nimport CardThumbnail from './CardThumbnail'\n\nexport interface VisitorCardProps extends LockedAttachmentBaseProps {\n  /**\n   * Called when the visitor clicks Unlock on an unpaid attachment.\n   * Use this to open a checkout flow. Omit to hide the Unlock button.\n   */\n  onUnlockClick?: () => void\n  /**\n   * Called to fetch the attachment source — fired automatically when\n   * paymentStatus transitions to 'paid', or immediately on click when\n   * paymentStatus is already 'paid'. Return a LockedAttachmentSource to\n   * unlock the card.\n   */\n  onFetchSource?: () => Promise<LockedAttachmentSource | void>\n  /**\n   * Called when the visitor clicks Download on an unlocked card.\n   * Omit to hide the Download button.\n   */\n  onDownloadClick?: () => void\n  /**\n   * When true, shows loading dots on the Unlock button.\n   * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).\n   */\n  isUnlocking?: boolean\n}\n\nconst VisitorCard: React.FC<VisitorCardProps> = ({\n  title,\n  amountText,\n  thumbnailUrl,\n  mimeType = 'application/octet-stream',\n  detail,\n  onUnlockClick,\n  onFetchSource,\n  onDownloadClick,\n  paymentStatus,\n  isUnlocking = false,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const cardRef = useRef<HTMLDivElement>(null)\n  const fetchingRef = useRef(false)\n\n  const onFetchSourceRef = useRef(onFetchSource)\n  onFetchSourceRef.current = onFetchSource\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveThumbnail = source?.thumbnailUrl ?? thumbnailUrl\n  const effectiveRedeemUrl = source?.redeemUrl\n\n  const fetchSource = useCallback(async (): Promise<void> => {\n    if (fetchingRef.current) return\n    fetchingRef.current = true\n    try {\n      const result = await onFetchSourceRef.current?.()\n      if (result) setSource(result)\n    } finally {\n      fetchingRef.current = false\n    }\n  }, [])\n\n  const handleUnlockClick = useCallback(() => {\n    if (paymentStatus === 'paid') {\n      void fetchSource()\n    } else {\n      onUnlockClick?.()\n    }\n  }, [paymentStatus, fetchSource, onUnlockClick])\n\n  // Fetch source when card is in viewport\n  useEffect(() => {\n    if (!cardRef.current) return\n    if (paymentStatus !== 'paid' || source !== undefined) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          void fetchSource()\n          observer.disconnect()\n        }\n      },\n      { threshold: 1.0 }\n    )\n\n    observer.observe(cardRef.current)\n    return () => observer.disconnect()\n  }, [paymentStatus, source, fetchSource])\n\n  return (\n    <div\n      ref={cardRef}\n      data-testid=\"locked-attachment\"\n      className=\"w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]\"\n    >\n      <CardThumbnail\n        title={title}\n        sourceUrl={effectiveSourceUrl}\n        thumbnailUrl={effectiveThumbnail}\n        mimeType={mimeType}\n        paymentStatus={paymentStatus}\n      />\n\n      <div className=\"px-4 pb-3 pt-3\">\n        <p className=\"mb-1.5 truncate text-base font-medium text-black\">\n          {title}\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\n          {detail && (\n            <span className=\"text-xs font-medium text-black/55\">{detail}</span>\n          )}\n\n          {paymentStatus === 'paid' ? (\n            <React.Fragment>\n              <span className=\"text-xs font-medium text-black/55\">&bull;</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            </React.Fragment>\n          ) : amountText != null ? (\n            <React.Fragment>\n              <span className=\"text-xs font-medium text-black/55\">&bull;</span>\n              <span className=\"text-xs font-medium text-black/55\">\n                {amountText}\n              </span>\n            </React.Fragment>\n          ) : null}\n        </div>\n\n        <CardActions\n          isUnlocking={isUnlocking}\n          sourceUrl={effectiveSourceUrl}\n          redeemUrl={effectiveRedeemUrl}\n          onUnlockClicked={handleUnlockClick}\n          onDownloadClicked={onDownloadClick}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default VisitorCard\n"],"names":["CardActions","props","isUnlocking","sourceUrl","redeemUrl","onUnlockClicked","onDownloadClicked","isLocked","jsx","LoadingDots","jsxs","React","LockSimpleIcon","DownloadSimpleIcon","CardThumbnail","title","thumbnailUrl","mimeType","paymentStatus","sourceReady","setSourceReady","useState","sourceType","getSourceType","LockOpenIcon","MediaPlayer","VisitorCard","amountText","detail","onUnlockClick","onFetchSource","onDownloadClick","source","setSource","cardRef","useRef","fetchingRef","onFetchSourceRef","effectiveSourceUrl","effectiveThumbnail","effectiveRedeemUrl","fetchSource","useCallback","result","_a","handleUnlockClick","useEffect","observer","entry","renderTypeIcon","CheckCircleIcon"],"mappings":"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"}