@linktr.ee/messaging-react 1.27.0 → 1.28.0-rc-1776231821

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

@@ -1,169 +1,461 @@
-import { CheckCircleIcon, EyeIcon, EyeSlashIcon } from '@phosphor-icons/react'
+import {
+  CheckCircleIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  PauseIcon,
+  PlayIcon,
+  XIcon,
+} from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React, { useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 
-import type { LockedAttachmentBaseProps, PaymentStatus } from '../types'
+import type { LockedAttachmentBaseProps } from '../types'
 import { renderTypeIcon } from '../utils/icons'
-import { getSourceType, type AttachmentSourceType } from '../utils/mimeType'
+import { getSourceType } from '../utils/mimeType'
 
 import MediaPlayer from './MediaPlayer'
 
 export interface CreatorCardProps extends LockedAttachmentBaseProps {
-  title?: string
+  isPreview?: boolean
   placeholderTitle?: string
   placeholderAmountText?: string
+  onDismiss?: () => void
+}
+
+interface CloseButtonProps {
+  onClose: () => void
 }
 
-const CloseButton = ({ onClose }: { onClose: () => void }) => (
-  <button
-    type="button"
-    onClick={onClose}
-    className="absolute right-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>
-)
+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
-  canExpand: boolean
-  onExpand: () => void
+  overlayIcon?: React.ElementType
+  onClick?: () => void
 }
 
-const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = ({ thumbnail, mimeType, canExpand, onExpand }) => {
+const CollapsedThumbnail: React.FC<CollapsedThumbnailProps> = (props) => {
+  const { thumbnail, mimeType, overlayIcon: OverlayIcon, onClick } = props
   return (
     <button
       type="button"
-      disabled={!canExpand}
-      className={classNames('relative aspect-video block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none', { 'cursor-pointer': canExpand, 'cursor-default': !canExpand })}
-      onClick={onExpand}
-      aria-label={canExpand ? 'Expand attachment preview' : undefined}
+      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>
-      }
-      {canExpand && (
-        <div className="pointer-events-none absolute right-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
-          <EyeSlashIcon className="size-4" weight="fill" />
+      {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>
   )
 }
 
-interface ExpandedMediaProps {
-  source: string
-  mimeType: string
-  sourceType: AttachmentSourceType
-  poster?: string
+
+interface AudioPreviewProps {
+  source?: string
   thumbnail?: string
-  title?: string
-  onCollapse: () => void
+  mimeType: string
 }
 
-const getExpandedImgSrc = (sourceType: AttachmentSourceType, source: string, poster?: string, thumbnail?: string) =>
-  sourceType === 'document' ? (poster ?? thumbnail) : source
+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), [])
 
-const ExpandedMedia: React.FC<ExpandedMediaProps> = ({ source, mimeType, sourceType, poster, thumbnail, title, onCollapse }) => {
-  if (sourceType === 'video' || sourceType === 'audio') {
-    return (
-      <div className="relative">
-        <MediaPlayer
-          source={source}
-          mimeType={mimeType}
-          poster={poster ?? thumbnail}
-          autoPlay
-          loop
-          controls={false}
-          showProgress
-          onContainerClick={onCollapse}
-          muted={sourceType === 'video'}
-        />
-        <CloseButton onClose={onCollapse} />
-      </div>
-    )
-  }
-  const imgSrc = getExpandedImgSrc(sourceType, source, poster, thumbnail)
   return (
     <div className="relative">
-      <button type="button" className="block w-full cursor-pointer border-0 p-0 text-left appearance-none" onClick={onCollapse} aria-label="Close preview">
-        <img src={imgSrc} alt={title ?? ''} className="block w-full" />
-      </button>
-      <CloseButton onClose={onCollapse} />
+      {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 CreatorCardMetaProps {
-  title?: string
-  placeholderTitle: string
+interface VideoPreviewProps {
+  source?: string
+  thumbnail?: string
   mimeType: string
-  detail?: string
-  paymentStatus?: PaymentStatus
-  displayAmountText?: string
-  isPlaceholderAmount: boolean
 }
 
-const CreatorCardMeta: React.FC<CreatorCardMetaProps> = ({ title, placeholderTitle, mimeType, detail, paymentStatus, displayAmountText, isPlaceholderAmount }) => {
+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="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
+      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>
   )
 }
 
-const CreatorCard: React.FC<CreatorCardProps> = ({
-  title,
-  mimeType = 'application/octet-stream',
-  thumbnail,
-  poster,
-  source,
-  detail,
-  amountText,
-  placeholderTitle = 'Attachment title',
-  placeholderAmountText,
-  paymentStatus,
-}) => {
-  const sourceType = getSourceType(mimeType)
+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)
 
-  const displayAmountText = placeholderAmountText ?? amountText
-  const isPlaceholderAmount = !!placeholderAmountText
-  const canExpand = sourceType === 'document'
-    ? !!(source && (poster || thumbnail))
-    : !!source
+  useEffect(() => {
+    setExpanded(false)
+  }, [source])
 
-  const collapse = () => setExpanded(false)
+  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}
+    />
+  )
+}
 
-  const mediaPreview = expanded && source
-    ? <ExpandedMedia source={source} mimeType={mimeType} sourceType={sourceType} poster={poster} thumbnail={thumbnail} title={title} onCollapse={collapse} />
-    : <CollapsedThumbnail thumbnail={thumbnail} mimeType={mimeType} canExpand={canExpand} onExpand={() => setExpanded(true)} />
+
+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 = amountText ?? placeholderAmountText
+  const isPlaceholderAmount = !amountText && !!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="w-[280px] overflow-hidden rounded-3xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)]">
+    <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}
-      <CreatorCardMeta title={title} placeholderTitle={placeholderTitle} mimeType={mimeType} detail={detail} paymentStatus={paymentStatus} displayAmountText={displayAmountText} isPlaceholderAmount={isPlaceholderAmount} />
+      <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>
   )
 }