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

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

@@ -1,356 +0,0 @@
-import {
-  CheckCircleIcon,
-  DownloadSimpleIcon,
-  LockOpenIcon,
-  LockSimpleIcon,
-} from '@phosphor-icons/react'
-import React, { useCallback, useEffect, useState } from 'react'
-
-import type { LockedAttachmentBaseProps, LockedAttachmentSource, PaymentStatus } from '../types'
-import { renderTypeIcon } from '../utils/icons'
-import { getSourceType } from '../utils/mimeType'
-
-import MediaPlayer from './MediaPlayer'
-
-export interface VisitorCardProps extends LockedAttachmentBaseProps {
-  /** 
-   * Called when the visitor clicks Unlock. Omit to hide the Unlock button. 
-  */
-  onUnlockClick?: () => void
-  /** 
-   * Called when the visitor clicks Download on an unlocked card. 
-   * Omit to hide the Download button.
-   */
-  onDownloadClick?: () => void
-  /**
-   * Returns current unlock state — sourceUrl (for playback) and redeemUrl (for download).
-   * Bound to the message by the host before being passed down,
-   * so this component receives no Stream Chat types.
-   */
-  onUnlocked?: () => LockedAttachmentSource
-}
-
-const getLockIcon = (paymentStatus?: PaymentStatus): React.ElementType => {
-  return paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon
-}
-
-interface LockOverlayProps {
-  icon: React.ElementType
-}
-
-const LockOverlay: React.FC<LockOverlayProps> = (props) => {
-  const { icon: Icon } = 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" />
-      </div>
-    </div>
-  )
-}
-
-interface LockedPreviewProps {
-  thumbnailUrl?: string
-  mimeType: string
-  LockIcon: React.ElementType
-}
-
-const LockedPreview: React.FC<LockedPreviewProps> = (props) => {
-  const { thumbnailUrl, mimeType, LockIcon } = props
-  return (
-    <div className="relative aspect-video overflow-hidden bg-black/5">
-      {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>
-      )}
-      <LockOverlay icon={LockIcon} />
-    </div>
-  )
-}
-
-interface ImagePreviewProps {
-  sourceUrl?: string
-  thumbnailUrl?: string
-  mimeType: string
-  title?: string
-  paymentStatus?: PaymentStatus
-  isLocked: boolean
-}
-
-const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
-  const { sourceUrl, thumbnailUrl, mimeType, title, paymentStatus, isLocked } = props
-  const [sourceReady, setSourceReady] = useState(false)
-
-  if (isLocked) {
-    return (
-      <LockedPreview
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        LockIcon={getLockIcon(paymentStatus)}
-      />
-    )
-  }
-
-  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>
-  )
-}
-
-interface DocumentPreviewProps {
-  thumbnailUrl?: string
-  mimeType: string
-  paymentStatus?: PaymentStatus
-  isLocked: boolean
-}
-
-const DocumentPreview: React.FC<DocumentPreviewProps> = (props) => {
-  const { thumbnailUrl, mimeType, paymentStatus, isLocked } = props
-  return (
-    <div className="relative aspect-video overflow-hidden bg-black/5">
-      {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>
-      )}
-      {isLocked && <LockOverlay icon={getLockIcon(paymentStatus)} />}
-    </div>
-  )
-}
-
-interface MediaPreviewProps {
-  sourceUrl?: string
-  thumbnailUrl?: string
-  mimeType: string
-  paymentStatus?: PaymentStatus
-  isLocked: boolean
-}
-
-const MediaPreview: React.FC<MediaPreviewProps> = (props) => {
-  const { sourceUrl, thumbnailUrl, mimeType, paymentStatus, isLocked } = props
-  if (isLocked) {
-    return (
-      <LockedPreview
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        LockIcon={getLockIcon(paymentStatus)}
-      />
-    )
-  }
-  return (
-    <MediaPlayer
-      source={sourceUrl!}
-      mimeType={mimeType}
-      poster={thumbnailUrl}
-    />
-  )
-}
-
-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
-  isUnlocking?: boolean
-  sourceUrl?: string
-  redeemUrl?: string
-  onUnlockClicked?: () => void
-  onDownloadClicked?: () => void
-}
-
-const CardActions: React.FC<CardActionsProps> = (props) => {
-  const {
-    isLocked,
-    isUnlocking,
-    sourceUrl,
-    redeemUrl,
-    onUnlockClicked,
-    onDownloadClicked,
-  } = props
-
-  if (isLocked && onUnlockClicked) {
-    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 />
-        ) : (
-          <>
-            <LockSimpleIcon className="size-4" weight="fill" />
-            Unlock
-          </>
-        )}
-      </button>
-    )
-  }
-
-  if (!isLocked && onDownloadClicked && sourceUrl) {
-    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 VisitorCard: React.FC<VisitorCardProps> = (props) => {
-  const {
-    title,
-    amountText,
-    thumbnailUrl,
-    mimeType = 'application/octet-stream',
-    detail,
-    onUnlocked,
-    onUnlockClick,
-    onDownloadClick,
-    paymentStatus,
-  } = props
-
-  const { sourceUrl, redeemUrl } = onUnlocked?.() ?? {}
-  const [isUnlocking, setUnlocking] = useState(false)
-
-  const isLocked = sourceUrl === undefined
-  const sourceType = getSourceType(mimeType)
-
-  useEffect(() => {
-    if (sourceUrl !== undefined) {
-      setUnlocking(false)
-    }
-  }, [sourceUrl])
-
-  const onUnlockClicked = useCallback(() => {
-    if (onUnlockClick) {
-      setUnlocking(true)
-      onUnlockClick()
-    }
-  }, [onUnlockClick])
-
-  let mediaPreview: React.ReactNode
-  if (sourceType === 'image') {
-    mediaPreview = (
-      <ImagePreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        title={title}
-        paymentStatus={paymentStatus}
-        isLocked={isLocked}
-      />
-    )
-  } else if (sourceType === 'document') {
-    mediaPreview = (
-      <DocumentPreview
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        paymentStatus={paymentStatus}
-        isLocked={isLocked}
-      />
-    )
-  } else {
-    mediaPreview = (
-      <MediaPreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        paymentStatus={paymentStatus}
-        isLocked={isLocked}
-      />
-    )
-  }
-
-  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 && (
-            <span className="text-xs font-medium text-black/55">{detail}</span>
-          )}
-          {paymentStatus === 'paid' ? (
-            <React.Fragment>
-              <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"
-              />
-            </React.Fragment>
-          ) : (
-            amountText && (
-              <React.Fragment>
-                <span className="text-xs font-medium text-black/55">•</span>
-                <span className="text-xs font-medium text-black/55">
-                  {amountText}
-                </span>
-              </React.Fragment>
-            )
-          )}
-        </div>
-        <CardActions
-          isLocked={isLocked}
-          isUnlocking={isUnlocking}
-          sourceUrl={sourceUrl}
-          redeemUrl={redeemUrl}
-          onUnlockClicked={onUnlockClicked}
-          onDownloadClicked={onDownloadClick}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default VisitorCard