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

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)
               }
             }}

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

@@ -1,22 +1,14 @@
-import {
-  CheckCircleIcon,
-  LockOpenIcon,
-  LockSimpleIcon,
-} from '@phosphor-icons/react'
+import { CheckCircleIcon } from '@phosphor-icons/react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import type {
   LockedAttachmentBaseProps,
   LockedAttachmentSource,
-  PaymentStatus,
 } from '../../types'
 import { renderTypeIcon } from '../../utils/icons'
-import { getSourceType } from '../../utils/mimeType'
 
 import CardActions from './CardActions'
-import ImagePreview from './CardImagePreview'
-import MediaPreview from './CardMediaPreview'
-import ThumbnailPreview from './CardThumbnailPreview'
+import CardThumbnail from './CardThumbnail'
 
 export interface VisitorCardProps extends LockedAttachmentBaseProps {
   /**
@@ -43,10 +35,6 @@ export interface VisitorCardProps extends LockedAttachmentBaseProps {
   isUnlocking?: boolean
 }
 
-function getLockIcon(paymentStatus?: PaymentStatus): React.ElementType {
-  return paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon
-}
-
 const VisitorCard: React.FC<VisitorCardProps> = ({
   title,
   amountText,
@@ -60,15 +48,16 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
   isUnlocking = false,
 }) => {
   const [source, setSource] = useState<LockedAttachmentSource | undefined>()
-  const hasMounted = useRef(false)
+
+  const cardRef = useRef<HTMLDivElement>(null)
   const fetchingRef = useRef(false)
-  // Stable ref so fetchSource doesn't change identity when onFetchSource prop changes
+
   const onFetchSourceRef = useRef(onFetchSource)
   onFetchSourceRef.current = onFetchSource
 
-  const isLocked = source === undefined
-  const sourceType = getSourceType(mimeType)
-  const LockIcon = isLocked ? getLockIcon(paymentStatus) : undefined
+  const effectiveSourceUrl = source?.sourceUrl
+  const effectiveThumbnail = source?.thumbnailUrl ?? thumbnailUrl
+  const effectiveRedeemUrl = source?.redeemUrl
 
   const fetchSource = useCallback(async (): Promise<void> => {
     if (fetchingRef.current) return
@@ -79,20 +68,7 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
     } finally {
       fetchingRef.current = false
     }
-  }, []) // stable — reads onFetchSource via ref
-
-  // When paymentStatus transitions to 'paid' (e.g. after checkout completes),
-  // automatically fetch the source. Skipped on mount.
-  useEffect(() => {
-    if (!hasMounted.current) {
-      hasMounted.current = true
-      return
-    }
-
-    if (paymentStatus === 'paid') {
-      void fetchSource()
-    }
-  }, [paymentStatus, fetchSource])
+  }, [])
 
   const handleUnlockClick = useCallback(() => {
     if (paymentStatus === 'paid') {
@@ -100,44 +76,41 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
     } else {
       onUnlockClick?.()
     }
-  }, [paymentStatus, onUnlockClick, fetchSource])
-
-  let mediaPreview: React.ReactNode
-  if (sourceType === 'image') {
-    mediaPreview = (
-      <ImagePreview
-        key={source?.sourceUrl}
-        sourceUrl={source?.sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        title={title}
-        LockIcon={LockIcon}
-      />
-    )
-  } else if (sourceType === 'document') {
-    mediaPreview = (
-      <ThumbnailPreview
-        key={source?.sourceUrl}
-        thumbnailUrl={thumbnailUrl}
-        mimeType={mimeType}
-        LockIcon={LockIcon}
-      />
+  }, [paymentStatus, fetchSource, onUnlockClick])
+
+  // Fetch source when card is in viewport
+  useEffect(() => {
+    if (!cardRef.current) return
+    if (paymentStatus !== 'paid' || source !== undefined) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          void fetchSource()
+          observer.disconnect()
+        }
+      },
+      { threshold: 1.0 }
     )
-  } else {
-    mediaPreview = (
-      <MediaPreview
-        key={source?.sourceUrl}
-        sourceUrl={source?.sourceUrl}
-        thumbnailUrl={thumbnailUrl}
+
+    observer.observe(cardRef.current)
+    return () => observer.disconnect()
+  }, [paymentStatus, source, fetchSource])
+
+  return (
+    <div
+      ref={cardRef}
+      data-testid="locked-attachment"
+      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)]"
+    >
+      <CardThumbnail
+        title={title}
+        sourceUrl={effectiveSourceUrl}
+        thumbnailUrl={effectiveThumbnail}
         mimeType={mimeType}
-        LockIcon={LockIcon}
+        paymentStatus={paymentStatus}
       />
-    )
-  }
 
-  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}
@@ -147,12 +120,14 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
             className: 'size-5 shrink-0 text-black/55',
             weight: 'regular',
           })}
-          {detail != null ? (
+
+          {detail && (
             <span className="text-xs font-medium text-black/55">{detail}</span>
-          ) : null}
+          )}
+
           {paymentStatus === 'paid' ? (
-            <>
-              <span className="text-xs font-medium text-black/55">•</span>
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
               <span className="text-xs font-medium text-[#008236]">
                 Purchased
               </span>
@@ -160,21 +135,21 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
                 className="size-4 text-[#008236]"
                 weight="bold"
               />
-            </>
+            </React.Fragment>
           ) : amountText != null ? (
-            <>
-              <span className="text-xs font-medium text-black/55">•</span>
+            <React.Fragment>
+              <span className="text-xs font-medium text-black/55">&bull;</span>
               <span className="text-xs font-medium text-black/55">
                 {amountText}
               </span>
-            </>
+            </React.Fragment>
           ) : null}
         </div>
+
         <CardActions
-          isLocked={isLocked}
           isUnlocking={isUnlocking}
-          sourceUrl={source?.sourceUrl}
-          redeemUrl={source?.redeemUrl}
+          sourceUrl={effectiveSourceUrl}
+          redeemUrl={effectiveRedeemUrl}
           onUnlockClicked={handleUnlockClick}
           onDownloadClicked={onDownloadClick}
         />

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

@@ -2,17 +2,15 @@ import { DownloadSimpleIcon, LockSimpleIcon } from '@phosphor-icons/react'
 import React from 'react'
 
 interface CardActionsProps {
-  isLocked: boolean
-  isUnlocking?: boolean
   sourceUrl?: string
   redeemUrl?: string
   onUnlockClicked?: () => void
   onDownloadClicked?: () => void
+  isUnlocking?: boolean
 }
 
 const CardActions: React.FC<CardActionsProps> = (props) => {
   const {
-    isLocked,
     isUnlocking = false,
     sourceUrl,
     redeemUrl,
@@ -20,6 +18,8 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
     onDownloadClicked,
   } = props
 
+  const isLocked = sourceUrl === undefined
+
   if (isLocked && onUnlockClicked != null) {
     return (
       <button

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

@@ -0,0 +1,81 @@
+import { LockOpenIcon, LockSimpleIcon } from '@phosphor-icons/react'
+import React, { useState } from 'react'
+
+import { PaymentStatus } from '../../types'
+import { renderTypeIcon } from '../../utils/icons'
+import { getSourceType } from '../../utils/mimeType'
+import MediaPlayer from '../MediaPlayer'
+
+interface CardThumbnailProps {
+  title?: string
+  sourceUrl?: string
+  thumbnailUrl?: string
+  mimeType: string
+  paymentStatus?: PaymentStatus
+}
+
+const CardThumbnail: React.FC<CardThumbnailProps> = ({
+  title,
+  sourceUrl,
+  thumbnailUrl,
+  mimeType,
+  paymentStatus,
+}) => {
+  const [sourceReady, setSourceReady] = useState(false)
+
+  const isLocked = sourceUrl === undefined
+  const sourceType = getSourceType(mimeType)
+
+  if (!isLocked) {
+    if (sourceType === 'audio' || sourceType === 'video') {
+      return (
+        <MediaPlayer
+          source={sourceUrl}
+          poster={thumbnailUrl}
+          mimeType={mimeType}
+        />
+      )
+    }
+
+    return (
+      <div className="relative overflow-hidden bg-black/5">
+        <img
+          src={sourceType === 'document' ? thumbnailUrl : sourceUrl}
+          alt={title}
+          className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+          draggable={false}
+          onLoad={() => setSourceReady(true)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative aspect-video overflow-hidden bg-black/5">
+      {thumbnailUrl != null ? (
+        <img
+          src={thumbnailUrl}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+          draggable={false}
+        />
+      ) : (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {renderTypeIcon(mimeType, {
+            className: 'size-12 text-black/20',
+            weight: 'regular',
+          })}
+        </div>
+      )}
+      {isLocked && (
+        <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 text-white">
+            {paymentStatus === 'paid' ? <LockOpenIcon /> : <LockSimpleIcon />}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CardThumbnail

package/src/components/LockedAttachment/types.ts

@@ -16,6 +16,8 @@ export interface LockedAttachmentSource {
   sourceUrl: string
   /** URL opened when the visitor clicks Download — may be a file or a web destination. */
   redeemUrl?: string
+  /** Thumbnail URL from the fetched asset — overrides the metadata thumbnail when present. */
+  thumbnailUrl?: string
 }
 
 export type { PaymentStatus }