@linktr.ee/messaging-react 1.31.0-rc-1776677746 → 1.31.0

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

@@ -0,0 +1,161 @@
+import { PauseIcon, PlayIcon } from '@phosphor-icons/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import CollapsedThumbnail from './CardCollapsedThumbnail'
+
+interface AudioPreviewProps {
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+}
+
+const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
+  const { sourceUrl, thumbnailUrl, mimeType } = props
+  const [playing, setPlaying] = useState(false)
+  const [played, setPlayed] = useState(0)
+  const [seeking, setSeeking] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const trackRef = useRef<HTMLDivElement>(null)
+  const rafRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    const el = audioRef.current
+    if (!el) return
+    if (playing) {
+      void el.play().catch(() => setPlaying(false))
+    } else {
+      el.pause()
+    }
+  }, [playing])
+
+  useEffect(() => {
+    if (!playing) {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      return
+    }
+    const tick = () => {
+      const el = audioRef.current
+      if (el && el.duration && !seeking) setPlayed(el.currentTime / el.duration)
+      rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+    }
+  }, [playing, seeking])
+
+  const [audioReady, setAudioReady] = useState(false)
+
+  const getFraction = useCallback(
+    (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {
+      const track = trackRef.current
+      if (!track) return 0
+      const clientX =
+        'touches' in e
+          ? (e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0)
+          : e.clientX
+      const rect = track.getBoundingClientRect()
+      return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+    },
+    []
+  )
+
+  const seekTo = useCallback((fraction: number) => {
+    const el = audioRef.current
+    if (el && el.duration) el.currentTime = fraction * el.duration
+  }, [])
+
+  useEffect(() => {
+    if (!seeking) return
+    const onMove = (e: MouseEvent | TouchEvent) => {
+      const f = getFraction(e)
+      setPlayed(f)
+      seekTo(f)
+    }
+    const onUp = (e: MouseEvent | TouchEvent) => {
+      setSeeking(false)
+      seekTo(getFraction(e))
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    window.addEventListener('touchmove', onMove, { passive: true })
+    window.addEventListener('touchend', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+      window.removeEventListener('touchmove', onMove)
+      window.removeEventListener('touchend', onUp)
+    }
+  }, [seeking, getFraction, seekTo])
+
+  const toggle = useCallback(() => setPlaying((p) => !p), [])
+
+  return (
+    <div className="relative">
+      {sourceUrl && (
+        <audio
+          ref={audioRef}
+          src={sourceUrl}
+          loop
+          onCanPlay={() => setAudioReady(true)}
+          onEnded={() => {
+            setPlaying(false)
+            setPlayed(0)
+          }}
+        >
+          <track kind="captions" />
+        </audio>
+      )}
+      <CollapsedThumbnail
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        overlayIcon={
+          sourceUrl && audioReady ? (playing ? PauseIcon : PlayIcon) : undefined
+        }
+        onClick={sourceUrl && audioReady ? toggle : undefined}
+      />
+      {sourceUrl && 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}
+            role="slider"
+            aria-label="Playback position"
+            aria-valuenow={Math.round(played * 100)}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            tabIndex={0}
+            className="relative flex h-4 w-full cursor-pointer items-center"
+            onMouseDown={(e) => {
+              e.stopPropagation()
+              setSeeking(true)
+              const f = getFraction(e)
+              setPlayed(f)
+              seekTo(f)
+            }}
+            onTouchStart={(e) => {
+              e.stopPropagation()
+              setSeeking(true)
+              const f = getFraction(e)
+              setPlayed(f)
+              seekTo(f)
+            }}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
+              if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
+            }}
+          >
+            <div className="w-full overflow-hidden rounded-full bg-white/30 h-1">
+              <div
+                className="h-full rounded-full bg-white"
+                style={{ width: `${Math.round(played * 100)}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AudioPreview

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

@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { renderTypeIcon } from '../../utils/icons'
+
+interface CollapsedThumbnailProps {
+  thumbnailUrl?: string
+  mimeType: string
+  overlayIcon?: React.ElementType
+  darkOverlay?: boolean
+  onClick?: () => void
+}
+
+const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = ({
+  thumbnailUrl,
+  mimeType,
+  overlayIcon: OverlayIcon,
+  darkOverlay,
+  onClick,
+}) => {
+  return (
+    <button
+      type="button"
+      disabled={!onClick}
+      className={classNames(
+        'relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',
+        { 'cursor-pointer': !!onClick, 'cursor-default': !onClick }
+      )}
+      onClick={onClick}
+      aria-label={OverlayIcon ? 'Toggle preview' : undefined}
+    >
+      {thumbnailUrl ? (
+        <img
+          src={thumbnailUrl}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      ) : (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {renderTypeIcon(mimeType, {
+            className: 'size-12 text-black/20',
+            weight: 'regular',
+          })}
+        </div>
+      )}
+      {darkOverlay && (
+        <div className="pointer-events-none absolute inset-0 bg-black/30" />
+      )}
+      {OverlayIcon && (
+        <div className="pointer-events-none absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
+          <OverlayIcon className="size-4" weight="fill" />
+        </div>
+      )}
+    </button>
+  )
+}
+
+export default CollapsedThumbnail

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

@@ -0,0 +1,56 @@
+import { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react'
+import { useState } from 'react'
+
+import CollapsedThumbnail from './CardCollapsedThumbnail'
+
+interface ImagePreviewProps {
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+  title?: string
+}
+
+const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
+  const { sourceUrl, thumbnailUrl, mimeType, title } = props
+  const [expanded, setExpanded] = useState(false)
+
+  if (expanded && sourceUrl) {
+    return (
+      <div className="relative">
+        <button
+          type="button"
+          className="block w-full cursor-pointer border-0 p-0 text-left appearance-none"
+          onClick={() => setExpanded(false)}
+          aria-label="Close preview"
+        >
+          <img src={sourceUrl} alt={title ?? ''} className="block w-full" />
+        </button>
+        <CloseButton onClose={() => setExpanded(false)} />
+      </div>
+    )
+  }
+
+  return (
+    <CollapsedThumbnail
+      thumbnailUrl={thumbnailUrl}
+      mimeType={mimeType}
+      overlayIcon={sourceUrl ? EyeSlashIcon : undefined}
+      onClick={sourceUrl ? () => setExpanded(true) : undefined}
+    />
+  )
+}
+
+const CloseButton: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClose}
+      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"
+    >
+      <EyeIcon className="size-4" weight="fill" />
+    </button>
+  )
+}
+
+export default ImagePreview

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

@@ -0,0 +1,91 @@
+import { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+
+import { renderTypeIcon } from '../../utils/icons'
+import MediaPlayer from '../MediaPlayer'
+
+import CollapsedThumbnail from './CardCollapsedThumbnail'
+
+interface VideoPreviewProps {
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+}
+
+const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
+  const { sourceUrl, thumbnailUrl, mimeType } = props
+  const [expanded, setExpanded] = useState(false)
+
+  const collapse = () => {
+    setExpanded(false)
+  }
+
+  if (!sourceUrl) {
+    return (
+      <CollapsedThumbnail thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
+    )
+  }
+
+  return (
+    <div
+      className={classNames('relative overflow-hidden', {
+        'aspect-video': !expanded,
+      })}
+    >
+      <MediaPlayer
+        source={sourceUrl}
+        mimeType={mimeType}
+        poster={thumbnailUrl}
+        playing={expanded}
+        loop={true}
+        controls={false}
+        muted={true}
+        showProgress={true}
+        onContainerClick={collapse}
+      />
+      {!expanded && (
+        <button
+          type="button"
+          className="absolute inset-0 block cursor-pointer border-0 p-0 text-left appearance-none"
+          onClick={() => setExpanded(true)}
+          aria-label="Expand video preview"
+        >
+          {thumbnailUrl ? (
+            <img
+              src={thumbnailUrl}
+              alt=""
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              {renderTypeIcon(mimeType, {
+                className: 'size-12 text-black/20',
+                weight: 'regular',
+              })}
+            </div>
+          )}
+          <div className="pointer-events-none absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
+            <EyeSlashIcon className="size-4" weight="fill" />
+          </div>
+        </button>
+      )}
+      {expanded && <CloseButton onClose={collapse} />}
+    </div>
+  )
+}
+
+const CloseButton: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClose}
+      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"
+    >
+      <EyeIcon className="size-4" weight="fill" />
+    </button>
+  )
+}
+
+export default VideoPreview

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

@@ -0,0 +1,2 @@
+export { default as CreatorCard } from './Card'
+export type { CreatorCardProps } from './Card'

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

@@ -0,0 +1,186 @@
+import {
+  CheckCircleIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+} from '@phosphor-icons/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../../types'
+import { renderTypeIcon } from '../../utils/icons'
+import { getSourceType } from '../../utils/mimeType'
+
+import CardActions from './CardActions'
+import ImagePreview from './CardImagePreview'
+import MediaPreview from './CardMediaPreview'
+import ThumbnailPreview from './CardThumbnailPreview'
+
+export interface VisitorCardProps extends LockedAttachmentBaseProps {
+  /**
+   * Called when the visitor clicks Unlock on an unpaid attachment.
+   * Use this to open a checkout flow. Omit to hide the Unlock button.
+   */
+  onUnlockClick?: () => void
+  /**
+   * Called to fetch the attachment source — fired automatically when
+   * paymentStatus transitions to 'paid', or immediately on click when
+   * paymentStatus is already 'paid'. Return a LockedAttachmentSource to
+   * unlock the card.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  /**
+   * Called when the visitor clicks Download on an unlocked card.
+   * Omit to hide the Download button.
+   */
+  onDownloadClick?: () => void
+  /**
+   * When true, shows loading dots on the Unlock button.
+   * Driven by the LockedAttachmentContext (e.g. checkout in progress, payment processing).
+   */
+  isUnlocking?: boolean
+}
+
+function getLockIcon(paymentStatus?: PaymentStatus): React.ElementType {
+  return paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon
+}
+
+const VisitorCard: React.FC<VisitorCardProps> = ({
+  title,
+  amountText,
+  thumbnailUrl,
+  mimeType = 'application/octet-stream',
+  detail,
+  onUnlockClick,
+  onFetchSource,
+  onDownloadClick,
+  paymentStatus,
+  isUnlocking = false,
+}) => {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+  const hasMounted = useRef(false)
+  const fetchingRef = useRef(false)
+  // Stable ref so fetchSource doesn't change identity when onFetchSource prop changes
+  const onFetchSourceRef = useRef(onFetchSource)
+  onFetchSourceRef.current = onFetchSource
+
+  const isLocked = source === undefined
+  const sourceType = getSourceType(mimeType)
+  const LockIcon = isLocked ? getLockIcon(paymentStatus) : undefined
+
+  const fetchSource = useCallback(async (): Promise<void> => {
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    try {
+      const result = await onFetchSourceRef.current?.()
+      if (result) setSource(result)
+    } finally {
+      fetchingRef.current = false
+    }
+  }, []) // stable — reads onFetchSource via ref
+
+  // When paymentStatus transitions to 'paid' (e.g. after checkout completes),
+  // automatically fetch the source. Skipped on mount.
+  useEffect(() => {
+    if (!hasMounted.current) {
+      hasMounted.current = true
+      return
+    }
+
+    if (paymentStatus === 'paid') {
+      void fetchSource()
+    }
+  }, [paymentStatus, fetchSource])
+
+  const handleUnlockClick = useCallback(() => {
+    if (paymentStatus === 'paid') {
+      void fetchSource()
+    } else {
+      onUnlockClick?.()
+    }
+  }, [paymentStatus, onUnlockClick, fetchSource])
+
+  let mediaPreview: React.ReactNode
+  if (sourceType === 'image') {
+    mediaPreview = (
+      <ImagePreview
+        key={source?.sourceUrl}
+        sourceUrl={source?.sourceUrl}
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        title={title}
+        LockIcon={LockIcon}
+      />
+    )
+  } else if (sourceType === 'document') {
+    mediaPreview = (
+      <ThumbnailPreview
+        key={source?.sourceUrl}
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        LockIcon={LockIcon}
+      />
+    )
+  } else {
+    mediaPreview = (
+      <MediaPreview
+        key={source?.sourceUrl}
+        sourceUrl={source?.sourceUrl}
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        LockIcon={LockIcon}
+      />
+    )
+  }
+
+  return (
+    <div className="w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
+      {mediaPreview}
+      <div className="px-4 pb-3 pt-3">
+        <p className="mb-1.5 truncate text-base font-medium text-black">
+          {title}
+        </p>
+        <div className="flex items-center gap-1">
+          {renderTypeIcon(mimeType, {
+            className: 'size-5 shrink-0 text-black/55',
+            weight: 'regular',
+          })}
+          {detail != null ? (
+            <span className="text-xs font-medium text-black/55">{detail}</span>
+          ) : null}
+          {paymentStatus === 'paid' ? (
+            <>
+              <span className="text-xs font-medium text-black/55">•</span>
+              <span className="text-xs font-medium text-[#008236]">
+                Purchased
+              </span>
+              <CheckCircleIcon
+                className="size-4 text-[#008236]"
+                weight="bold"
+              />
+            </>
+          ) : amountText != null ? (
+            <>
+              <span className="text-xs font-medium text-black/55">•</span>
+              <span className="text-xs font-medium text-black/55">
+                {amountText}
+              </span>
+            </>
+          ) : null}
+        </div>
+        <CardActions
+          isLocked={isLocked}
+          isUnlocking={isUnlocking}
+          sourceUrl={source?.sourceUrl}
+          redeemUrl={source?.redeemUrl}
+          onUnlockClicked={handleUnlockClick}
+          onDownloadClicked={onDownloadClick}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default VisitorCard

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

@@ -0,0 +1,71 @@
+import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
+import React from 'react'
+
+interface CardActionsProps {
+  isLocked: boolean
+  isUnlocking?: boolean
+  sourceUrl?: string
+  redeemUrl?: string
+  onUnlockClicked?: () => void
+  onDownloadClicked?: () => void
+}
+
+const CardActions: React.FC<CardActionsProps> = (props) => {
+  const {
+    isLocked,
+    isUnlocking = false,
+    sourceUrl,
+    redeemUrl,
+    onUnlockClicked,
+    onDownloadClicked,
+  } = props
+
+  if (isLocked && onUnlockClicked != null) {
+    return (
+      <button
+        type="button"
+        onClick={onUnlockClicked}
+        disabled={isUnlocking}
+        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"
+      >
+        {isUnlocking ? (
+          <LoadingDots />
+        ) : (
+          <React.Fragment>
+            <LockSimpleIcon className="size-4" weight="fill" />
+            Unlock
+          </React.Fragment>
+        )}
+      </button>
+    )
+  }
+
+  if (!isLocked && onDownloadClicked != null && sourceUrl != null) {
+    return (
+      <a
+        href={redeemUrl ?? sourceUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onDownloadClicked}
+        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]"
+      >
+        <DownloadSimpleIcon className="size-4" weight="bold" />
+        Download
+      </a>
+    )
+  }
+
+  return null
+}
+
+const LoadingDots: React.FC = () => {
+  return (
+    <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>
+  )
+}
+
+export default CardActions

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+
+import ThumbnailPreview from './CardThumbnailPreview'
+
+interface ImagePreviewProps {
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+  title?: string
+  LockIcon?: React.ElementType
+}
+
+const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
+  const { sourceUrl, thumbnailUrl, mimeType, title, LockIcon } = props
+  const [sourceReady, setSourceReady] = useState(false)
+
+  if (LockIcon != null) {
+    return (
+      <ThumbnailPreview
+        thumbnailUrl={thumbnailUrl}
+        mimeType={mimeType}
+        LockIcon={LockIcon}
+      />
+    )
+  }
+
+  return (
+    <div className="relative overflow-hidden bg-black/5">
+      <img
+        src={sourceUrl}
+        alt={title}
+        className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+        onLoad={() => setSourceReady(true)}
+      />
+    </div>
+  )
+}
+
+export default ImagePreview