@linktr.ee/messaging-react 1.31.0 → 1.32.1-rc-1777007852

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

@@ -1,105 +1,72 @@
 import {
   CheckCircleIcon,
+  EyeIcon,
+  EyeSlashIcon,
   LockIcon,
   LockOpenIcon,
   XIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 
-import type { LockedAttachmentBaseProps } from '../../types'
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../../types'
 import { renderTypeIcon } from '../../utils/icons'
-import { getSourceType } from '../../utils/mimeType'
 
-import AudioPreview from './CardAudioPreview'
-import CollapsedThumbnail from './CardCollapsedThumbnail'
-import ImagePreview from './CardImagePreview'
-import VideoPreview from './CardVideoPreview'
+import CardThumbnail from './CardThumbnail'
 
 export interface CreatorCardProps extends LockedAttachmentBaseProps {
-  isPreview?: boolean
   placeholderTitle?: string
   placeholderAmountText?: string
-  sourceUrl?: string
   onDismiss?: () => void
+  onPreviewClick?: () => LockedAttachmentSource
 }
 
-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}
+const CreatorCard: React.FC<CreatorCardProps> = ({
+  title,
+  mimeType = 'application/octet-stream',
+  thumbnailUrl,
+  detail,
+  amountText,
+  placeholderTitle = 'Attachment title',
+  placeholderAmountText,
+  paymentStatus,
+  onDismiss,
+  onPreviewClick,
+}) => {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveThumbnailUrl = source?.thumbnailUrl ?? thumbnailUrl
+
+  const handleToggle = useCallback(() => {
+    if (source) {
+      setSource(undefined)
+    } else if (onPreviewClick) {
+      setSource(onPreviewClick())
+    }
+  }, [source, onPreviewClick])
+
+  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)]">
+      <CardHeader
+        onDismiss={onDismiss}
+        onPreviewClick={onPreviewClick}
+        sourceUrl={source?.sourceUrl}
+        paymentStatus={paymentStatus}
       />
-    )
-  } else if (isPreview && sourceType === 'image') {
-    mediaPreview = (
-      <ImagePreview
-        key={sourceUrl}
-        sourceUrl={sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
+
+      <CardThumbnail
         title={title}
-      />
-    )
-  } else {
-    const lockedOverlayIcon = onDismiss
-      ? undefined
-      : paymentStatus === 'paid'
-        ? LockOpenIcon
-        : LockIcon
-    mediaPreview = (
-      <CollapsedThumbnail
-        thumbnailUrl={thumbnailUrl}
+        sourceUrl={effectiveSourceUrl}
+        thumbnailUrl={effectiveThumbnailUrl}
         mimeType={mimeType}
-        overlayIcon={lockedOverlayIcon}
-        darkOverlay
+        onToggle={onPreviewClick ? handleToggle : undefined}
       />
-    )
-  }
 
-  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', {
@@ -109,46 +76,38 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
         >
           {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>
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-[#008236]">Sold</span>
               <CheckCircleIcon
                 className="size-4 text-[#008236]"
                 weight="bold"
               />
-            </>
+            </React.Fragment>
           ) : (
-            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>
-              </>
-            )
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span
+                className={classNames('text-xs font-medium', {
+                  'text-black/30': !amountText,
+                  'text-black/55': !!amountText,
+                })}
+              >
+                {amountText || placeholderAmountText}
+              </span>
+            </React.Fragment>
           )}
         </div>
       </div>
@@ -156,4 +115,45 @@ const CreatorCard: React.FC<CreatorCardProps> = (props) => {
   )
 }
 
+interface CardHeaderProps {
+  onDismiss?: () => void
+  onPreviewClick?: () => void
+  sourceUrl?: string
+  paymentStatus?: PaymentStatus
+}
+
+const CardHeader: React.FC<CardHeaderProps> = ({
+  onDismiss,
+  onPreviewClick,
+  sourceUrl,
+  paymentStatus,
+}) => {
+  if (onDismiss) {
+    return (
+      <button
+        type="button"
+        onClick={onDismiss}
+        className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white right-3"
+        aria-label="Dismiss attachment"
+      >
+        <XIcon className="size-4" weight="bold" />
+      </button>
+    )
+  }
+
+  const Icon = onPreviewClick
+    ? sourceUrl
+      ? EyeIcon
+      : EyeSlashIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockIcon
+
+  return (
+    <div className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3">
+      <Icon className="size-4" weight="fill" />
+    </div>
+  )
+}
+
 export default CreatorCard

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

@@ -0,0 +1,114 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { renderTypeIcon } from '../../utils/icons'
+import { getSourceType } from '../../utils/mimeType'
+import MediaPlayer from '../MediaPlayer'
+
+interface CardThumbnailProps {
+  title?: string
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+  onToggle?: () => void
+}
+
+const CardThumbnail: React.FC<CardThumbnailProps> = ({
+  title,
+  sourceUrl,
+  thumbnailUrl,
+  mimeType,
+  onToggle,
+}) => {
+  const isExpanded = onToggle && sourceUrl && thumbnailUrl
+
+  return (
+    <button
+      type="button"
+      disabled={!onToggle}
+      className={classNames(
+        'relative block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',
+        { 'cursor-pointer': !!onToggle, 'cursor-default': !onToggle }
+      )}
+      onClick={onToggle}
+      aria-label={onToggle ? 'Toggle preview' : undefined}
+    >
+      {isExpanded ? (
+        <ThumbnailMedia
+          sourceUrl={sourceUrl}
+          thumbnailUrl={thumbnailUrl}
+          mimeType={mimeType}
+        />
+      ) : thumbnailUrl ? (
+        <div className="aspect-video overflow-hidden">
+          <img
+            src={thumbnailUrl}
+            alt={title}
+            draggable={false}
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        </div>
+      ) : (
+        <div className="aspect-video flex items-center justify-center">
+          {renderTypeIcon(mimeType, {
+            className: 'size-12 text-black/20',
+            weight: 'regular',
+          })}
+        </div>
+      )}
+
+      {!isExpanded && (
+        <div className="pointer-events-none absolute inset-0 bg-black/30" />
+      )}
+    </button>
+  )
+}
+
+interface ThumbnailMediaProps {
+  sourceUrl: string
+  thumbnailUrl: string
+  mimeType: string
+}
+
+const ThumbnailMedia: React.FC<ThumbnailMediaProps> = ({
+  sourceUrl,
+  thumbnailUrl,
+  mimeType,
+}) => {
+  const sourceType = getSourceType(mimeType)
+
+  if (sourceType === 'video' || sourceType === 'audio') {
+    return (
+      <MediaPlayer
+        mimeType={mimeType}
+        source={sourceUrl}
+        poster={thumbnailUrl}
+        autoPlay={true}
+        loop={true}
+        controls={true}
+        muted={false}
+      />
+    )
+  }
+
+  if (sourceType === 'image') {
+    return (
+      <img src={sourceUrl} alt="" className="block w-full" draggable={false} />
+    )
+  }
+
+  if (sourceType === 'document') {
+    return (
+      <img
+        src={thumbnailUrl}
+        alt=""
+        className="block w-full"
+        draggable={false}
+      />
+    )
+  }
+
+  return null
+}
+
+export default CardThumbnail

package/src/components/LockedAttachment/components/MediaPlayer.tsx

@@ -3,13 +3,16 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import { isDevBuild } from '../../../utils/isDevBuild'
 import { renderTypeIcon } from '../utils/icons'
-import { getSourceType, type AttachmentSourceType } from '../utils/mimeType'
+import { getSourceType } from '../utils/mimeType'
+
+type TouchEventUnion =
+  | MouseEvent
+  | TouchEvent
+  | React.MouseEvent
+  | React.TouchEvent
 
-const getPlayerBg = (sourceType: AttachmentSourceType, poster?: string) => {
-  return sourceType === 'audio' && !poster ? 'bg-black/5' : 'bg-black'
-}
 
-const getClientXFromEvent = ( e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent ): number => {
+const getClientXFromEvent = (e: TouchEventUnion): number => {
   if ('touches' in e) {
     return e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0
   }
@@ -26,7 +29,6 @@ export interface MediaPlayerProps {
   loop?: boolean
   controls?: boolean
   showProgress?: boolean
-  onContainerClick?: () => void
   /** When true, requests muted playback (helps autoplay policies on video). */
   muted?: boolean
 }
@@ -40,14 +42,67 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   loop = false,
   controls = true,
   showProgress = false,
-  onContainerClick,
   muted = false,
 }) => {
+  // --- Derived ---
   const sourceType = getSourceType(mimeType)
+
+  // --- Refs ---
+  const playerRef = useRef<HTMLMediaElement>(null)
+  const trackRef = useRef<HTMLDivElement>(null)
+  const rafRef = useRef<number | null>(null)
+  const prevPlayingPropRef = useRef(playingProp)
+
+  // --- State: playback ---
   const [playing, setPlaying] = useState(autoPlay)
+  const [played, setPlayed] = useState(0)
+  const [seeking, setSeeking] = useState(false)
+
+  // --- State: UI ---
+  const [scrubberHovered, setScrubberHovered] = useState(false)
+  /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */
+  const [manualPlayRequired, setManualPlayRequired] = useState(false)
+
+  // --- State: loading ---
+  const [buffering, setBuffering] = useState(false)
+  /** True until the first canPlay fires for the current source — hides controls/spinner behind poster. */
+  const [initialLoad, setInitialLoad] = useState(true)
+  const [videoAspect, setVideoAspect] = useState<number | null>(null)
+
+  // --- Callbacks ---
+  const startPlaybackFromGesture = useCallback(() => {
+    setManualPlayRequired(false)
+    setPlaying(true)
+  }, [])
+
+  const getFraction = useCallback((e: TouchEventUnion) => {
+    const track = trackRef.current
+    if (!track) return 0
+    const rect = track.getBoundingClientRect()
+    return Math.max(
+      0,
+      Math.min(1, (getClientXFromEvent(e) - rect.left) / rect.width)
+    )
+  }, [])
+
+  const seekTo = useCallback((fraction: number) => {
+    const el = playerRef.current
+    if (el && el.duration) el.currentTime = fraction * el.duration
+  }, [])
+
+  const handleTrackPointerDown = (
+    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
+  ) => {
+    e.stopPropagation()
+    setSeeking(true)
+    const fraction = getFraction(e)
+    setPlayed(fraction)
+    seekTo(fraction)
+  }
+
+  // --- Effects ---
 
   // Sync controlled playing prop to internal state
-  const prevPlayingPropRef = useRef(playingProp)
   useEffect(() => {
     if (
       playingProp !== undefined &&
@@ -57,20 +112,8 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       setPlaying(playingProp)
     }
   }, [playingProp])
-  const [played, setPlayed] = useState(0)
-  const [seeking, setSeeking] = useState(false)
-  const [scrubberHovered, setScrubberHovered] = useState(false)
-  const [videoAspect, setVideoAspect] = useState<number | null>(null)
-  const [buffering, setBuffering] = useState(false)
-  /** True until the first canPlay fires for the current source — hides controls/spinner behind poster. */
-  const [initialLoad, setInitialLoad] = useState(true)
-  /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */
-  const [manualPlayRequired, setManualPlayRequired] = useState(false)
-  const playerRef = useRef<HTMLMediaElement>(null)
-  const trackRef = useRef<HTMLDivElement>(null)
-  const rafRef = useRef<number | null>(null)
-
 
+  // RAF-driven progress updates
   useEffect(() => {
     if (!playing) {
       if (rafRef.current !== null) {
@@ -108,39 +151,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     }
   }, [playing])
 
-  const startPlaybackFromGesture = useCallback(() => {
-    setManualPlayRequired(false)
-    setPlaying(true)
-  }, [])
-
-  const getFraction = useCallback(
-    (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {
-      const track = trackRef.current
-      if (!track) return 0
-      const rect = track.getBoundingClientRect()
-      return Math.max(
-        0,
-        Math.min(1, (getClientXFromEvent(e) - rect.left) / rect.width)
-      )
-    },
-    []
-  )
-
-  const seekTo = useCallback((fraction: number) => {
-    const el = playerRef.current
-    if (el && el.duration) el.currentTime = fraction * el.duration
-  }, [])
-
-  const handleTrackPointerDown = (
-    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
-  ) => {
-    e.stopPropagation()
-    setSeeking(true)
-    const fraction = getFraction(e)
-    setPlayed(fraction)
-    seekTo(fraction)
-  }
-
+  // Global seeking listeners
   useEffect(() => {
     if (!seeking) return
     const onMove = (e: MouseEvent | TouchEvent) => setPlayed(getFraction(e))
@@ -160,6 +171,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     }
   }, [seeking, getFraction, seekTo])
 
+  // --- Derived render values ---
   // Use natural aspect ratio once metadata loads, fall back to 16:9 before then.
   const aspectStyle = videoAspect
     ? { aspectRatio: String(videoAspect) }
@@ -171,24 +183,16 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     <div
       role="button"
       tabIndex={0}
-      className={`relative cursor-pointer overflow-hidden ${getPlayerBg(sourceType, poster)}${aspectClass}`}
+      className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
       onClick={() => {
         if (manualPlayRequired) return
-        if (onContainerClick) {
-          onContainerClick()
-          return
-        }
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
         if (manualPlayRequired) return
-        if (onContainerClick) {
-          onContainerClick()
-          return
-        }
         if (controls) setPlaying((p) => !p)
       }}
     >
@@ -217,7 +221,10 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
             muted={muted}
             style={{ width: '100%', height: '100%' }}
             onLoadStart={() => setBuffering(true)}
-            onCanPlay={() => { setBuffering(false); setInitialLoad(false) }}
+            onCanPlay={() => {
+              setBuffering(false)
+              setInitialLoad(false)
+            }}
             onWaiting={() => setBuffering(true)}
             onPlay={() => setManualPlayRequired(false)}
             onEnded={() => {
@@ -238,12 +245,19 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
             playsInline
             style={{ width: '100%', height: '100%' }}
             onLoadStart={() => setBuffering(true)}
-            onCanPlay={() => { setBuffering(false); setInitialLoad(false) }}
+            onCanPlay={() => {
+              setBuffering(false)
+              setInitialLoad(false)
+            }}
             onWaiting={() => setBuffering(true)}
             onPlay={() => setManualPlayRequired(false)}
             onLoadedMetadata={() => {
               const el = playerRef.current
-              if (el instanceof HTMLVideoElement && el.videoWidth && el.videoHeight) {
+              if (
+                el instanceof HTMLVideoElement &&
+                el.videoWidth &&
+                el.videoHeight
+              ) {
                 setVideoAspect(el.videoWidth / el.videoHeight)
               }
             }}