@linktr.ee/messaging-react 1.26.1 → 1.28.0-rc-1776225927

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

@@ -0,0 +1,469 @@
+import {
+  CheckCircleIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  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 {
+  title?: string
+  /** When true, shows interactive media preview (composing state). When false/omitted, shows static thumbnail (sent/sold state). */
+  isPreview?: boolean
+  placeholderTitle?: string
+  placeholderAmountText?: string
+  onDismiss?: () => void
+}
+
+// ─── Shared primitives ────────────────────────────────────────────────────────
+
+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 {
+  thumbnail?: string
+  mimeType: string
+  overlayIcon?: React.ElementType
+  onClick?: () => void
+}
+
+const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {
+  const { thumbnail, mimeType, overlayIcon: OverlayIcon, 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}
+    >
+      {thumbnail ? (
+        <img
+          src={thumbnail}
+          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>
+      )}
+      {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>
+  )
+}
+
+// ─── Per-type preview components ─────────────────────────────────────────────
+
+interface AudioPreviewProps {
+  source?: string
+  thumbnail?: string
+  mimeType: string
+}
+
+const AudioPreview: React.FC<AudioPreviewProps> = (props) => {
+  const { source, thumbnail, 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])
+
+  useEffect(() => {
+    setPlaying(false)
+    setPlayed(0)
+  }, [source])
+
+  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">
+      {source && (
+        <audio
+          ref={audioRef}
+          src={source}
+          loop
+          onEnded={() => {
+            setPlaying(false)
+            setPlayed(0)
+          }}
+        >
+          <track kind="captions" />
+        </audio>
+      )}
+      <CollapsedThumbnail
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        overlayIcon={source ? (playing ? PauseIcon : PlayIcon) : undefined}
+        onClick={source ? toggle : undefined}
+      />
+      {source && (
+        <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 {
+  source?: string
+  thumbnail?: string
+  mimeType: string
+}
+
+const VideoPreview: React.FC<VideoPreviewProps> = (props) => {
+  const { source, thumbnail, mimeType } = props
+  const [expanded, setExpanded] = useState(false)
+  const collapse = () => setExpanded(false)
+
+  useEffect(() => {
+    setExpanded(false)
+  }, [source])
+
+  if (!source) {
+    return <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} />
+  }
+
+  return (
+    <div
+      className={classNames('relative overflow-hidden', {
+        'aspect-video': !expanded,
+      })}
+    >
+      <MediaPlayer
+        source={source}
+        mimeType={mimeType}
+        poster={thumbnail}
+        playing={expanded}
+        loop
+        controls={false}
+        showProgress
+        onContainerClick={collapse}
+        muted
+      />
+      {!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"
+        >
+          {thumbnail ? (
+            <img
+              src={thumbnail}
+              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 {
+  source?: string
+  thumbnail?: string
+  mimeType: string
+  title?: string
+}
+
+const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
+  const { source, thumbnail, mimeType, title } = props
+  const [expanded, setExpanded] = useState(false)
+  const collapse = () => setExpanded(false)
+
+  useEffect(() => {
+    setExpanded(false)
+  }, [source])
+
+  if (expanded && source) {
+    return (
+      <div className="relative">
+        <button
+          type="button"
+          className="block w-full cursor-pointer border-0 p-0 text-left appearance-none"
+          onClick={collapse}
+          aria-label="Close preview"
+        >
+          <img src={source} alt={title ?? ''} className="block w-full" />
+        </button>
+        <CloseButton onClose={collapse} />
+      </div>
+    )
+  }
+
+  return (
+    <CollapsedThumbnail
+      thumbnail={thumbnail}
+      mimeType={mimeType}
+      overlayIcon={source ? EyeSlashIcon : undefined}
+      onClick={source ? () => setExpanded(true) : undefined}
+    />
+  )
+}
+
+// ─── Card shell ───────────────────────────────────────────────────────────────
+
+const CreatorCard: React.FC<CreatorCardProps> = (props) => {
+  const {
+    title,
+    mimeType = 'application/octet-stream',
+    thumbnail,
+    source,
+    detail,
+    amountText,
+    placeholderTitle = 'Attachment title',
+    placeholderAmountText,
+    paymentStatus,
+    onDismiss,
+    isPreview = false,
+  } = props
+  const sourceType = getSourceType(mimeType)
+  const displayAmountText = placeholderAmountText ?? amountText
+  const isPlaceholderAmount = !!placeholderAmountText
+
+  let mediaPreview: React.ReactNode
+  if (isPreview && sourceType === 'audio') {
+    mediaPreview = (
+      <AudioPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />
+    )
+  } else if (isPreview && sourceType === 'video') {
+    mediaPreview = (
+      <VideoPreview source={source} thumbnail={thumbnail} mimeType={mimeType} />
+    )
+  } else if (isPreview && sourceType === 'image') {
+    mediaPreview = (
+      <ImagePreview
+        source={source}
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        title={title}
+      />
+    )
+  } else {
+    mediaPreview = (
+      <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} />
+    )
+  }
+
+  return (
+    <div className="relative w-[280px] select-none overflow-hidden rounded-3xl bg-white shadow-card">
+      {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