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

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

@@ -1,470 +0,0 @@
-import {
-  CheckCircleIcon,
-  EyeIcon,
-  EyeSlashIcon,
-  LockIcon,
-  LockOpenIcon,
-  PauseIcon,
-  PlayIcon,
-  XIcon,
-} from '@phosphor-icons/react'
-import classNames from 'classnames'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-
-import type { LockedAttachmentBaseProps } from '../types'
-import { renderTypeIcon } from '../utils/icons'
-import { getSourceType } from '../utils/mimeType'
-
-import MediaPlayer from './MediaPlayer'
-
-export interface CreatorCardProps extends LockedAttachmentBaseProps {
-  isPreview?: boolean
-  placeholderTitle?: string
-  placeholderAmountText?: string
-  sourceUrl?: string
-  onDismiss?: () => void
-}
-
-interface CloseButtonProps {
-  onClose: () => void
-}
-
-const CloseButton: React.FC<CloseButtonProps> = (props) => {
-  const { onClose } = props
-  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>
-  )
-}
-
-interface CollapsedThumbnailProps {
-  thumbnailUrl?: string
-  mimeType: string
-  overlayIcon?: React.ElementType
-  darkOverlay?: boolean
-  onClick?: () => void
-}
-
-const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {
-  const { thumbnailUrl, mimeType, overlayIcon: OverlayIcon, darkOverlay, onClick } = props
-  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>
-  )
-}
-
-
-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>
-  )
-}
-
-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>
-  )
-}
-
-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 CreatorCard: React.FC<CreatorCardProps> = (props) => {
-  const {
-    title,
-    mimeType = 'application/octet-stream',
-    thumbnailUrl,
-    sourceUrl,
-    detail,
-    amountText,
-    placeholderTitle = 'Attachment title',
-    placeholderAmountText,
-    paymentStatus,
-    onDismiss,
-    isPreview = false,
-  } = props
-  const sourceType = getSourceType(mimeType)
-  const displayAmountText = amountText ?? placeholderAmountText
-  const isPlaceholderAmount = !amountText && !!placeholderAmountText
-
-  let mediaPreview: React.ReactNode
-  if (isPreview && sourceType === 'audio') {
-    mediaPreview = (
-      <AudioPreview key={sourceUrl} sourceUrl={sourceUrl} thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
-    )
-  } else if (isPreview && sourceType === 'video') {
-    mediaPreview = (
-      <VideoPreview key={sourceUrl} sourceUrl={sourceUrl} thumbnailUrl={thumbnailUrl} mimeType={mimeType} />
-    )
-  } else if (isPreview && sourceType === 'image') {
-    mediaPreview = (
-      <ImagePreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        title={title}
-      />
-    )
-  } else {
-    const lockedOverlayIcon = onDismiss
-      ? undefined
-      : paymentStatus === 'paid'
-        ? LockOpenIcon
-        : LockIcon
-    mediaPreview = (
-      <CollapsedThumbnail
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        overlayIcon={lockedOverlayIcon}
-        darkOverlay
-      />
-    )
-  }
-
-  return (
-    <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)]">
-      {onDismiss && (
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="absolute right-3 top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
-          aria-label="Dismiss attachment"
-        >
-          <XIcon className="size-4" weight="bold" />
-        </button>
-      )}
-      {mediaPreview}
-      <div className="px-4 pb-3 pt-3">
-        <p
-          className={classNames('mb-1.5 truncate text-base font-medium', {
-            'text-black/30': !title,
-            'text-black': !!title,
-          })}
-        >
-          {title || placeholderTitle}
-        </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' ? (
-            <>
-              <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"
-              />
-            </>
-          ) : (
-            displayAmountText && (
-              <>
-                <span
-                  className={classNames('text-xs font-medium', {
-                    'text-black/30': isPlaceholderAmount,
-                    'text-black/55': !isPlaceholderAmount,
-                  })}
-                >
-                  •
-                </span>
-                <span
-                  className={classNames('text-xs font-medium', {
-                    'text-black/30': isPlaceholderAmount,
-                    'text-black/55': !isPlaceholderAmount,
-                  })}
-                >
-                  {displayAmountText}
-                </span>
-              </>
-            )
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CreatorCard