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

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

@@ -0,0 +1,359 @@
+import { CircleNotchIcon, PauseIcon, PlayIcon } from '@phosphor-icons/react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import ReactPlayer from 'react-player'
+
+import { isDevBuild } from '../../../utils/isDevBuild'
+import { renderTypeIcon } from '../utils/icons'
+import { getSourceType, type AttachmentSourceType } from '../utils/mimeType'
+
+const getPlayerBg = (sourceType: AttachmentSourceType, poster?: string) =>
+  sourceType === 'audio' && !poster ? 'bg-black/5' : 'bg-black'
+
+function getClientXFromEvent(
+  e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
+): number {
+  if ('touches' in e) {
+    return e.touches[0]?.clientX ?? e.changedTouches[0]?.clientX ?? 0
+  }
+  return e.clientX
+}
+
+export interface MediaPlayerProps {
+  source: string
+  mimeType: string
+  poster?: string
+  autoPlay?: boolean
+  /** Controlled playing state. When provided, syncs to internal play/pause. */
+  playing?: boolean
+  loop?: boolean
+  controls?: boolean
+  showProgress?: boolean
+  onContainerClick?: () => void
+  /** When true, requests muted playback (helps autoplay policies on video). */
+  muted?: boolean
+}
+
+const MediaPlayer: React.FC<MediaPlayerProps> = ({
+  source,
+  mimeType,
+  poster,
+  autoPlay = false,
+  playing: playingProp,
+  loop = false,
+  controls = true,
+  showProgress = false,
+  onContainerClick,
+  muted = false,
+}) => {
+  const sourceType = getSourceType(mimeType)
+  const [playing, setPlaying] = useState(autoPlay)
+
+  // Sync controlled playing prop to internal state
+  const prevPlayingPropRef = useRef(playingProp)
+  useEffect(() => {
+    if (
+      playingProp !== undefined &&
+      playingProp !== prevPlayingPropRef.current
+    ) {
+      prevPlayingPropRef.current = playingProp
+      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)
+  /** Set when autoplay/play() was rejected so user can start via gesture (no controls UI). */
+  const [manualPlayRequired, setManualPlayRequired] = useState(false)
+  const playerRef = useRef<HTMLVideoElement>(null)
+  const trackRef = useRef<HTMLDivElement>(null)
+  const rafRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    setManualPlayRequired(false)
+  }, [source])
+
+  useEffect(() => {
+    if (!playing) {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+      return
+    }
+    const tick = () => {
+      const el = playerRef.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])
+
+  // ReactPlayer v3 uses native HTML media elements and does not support a
+  // declarative `playing` prop — playback must be driven imperatively.
+  useEffect(() => {
+    const el = playerRef.current
+    if (!el) return
+    if (playing) {
+      void el.play().catch((err) => {
+        setPlaying(false)
+        setManualPlayRequired(true)
+        if (isDevBuild()) {
+          console.debug('[MediaPlayer] play() failed', err)
+        }
+      })
+    } else {
+      el.pause()
+    }
+  }, [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)
+  }
+
+  useEffect(() => {
+    if (!seeking) return
+    const onMove = (e: MouseEvent | TouchEvent) => setPlayed(getFraction(e))
+    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])
+
+  // Use natural aspect ratio once metadata loads, fall back to 16:9 before then.
+  const aspectStyle = videoAspect
+    ? { aspectRatio: String(videoAspect) }
+    : undefined
+  const aspectClass = !videoAspect ? ' aspect-video' : ''
+  const scrubberPercent = Math.round(played * 100)
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={`relative cursor-pointer overflow-hidden ${getPlayerBg(sourceType, poster)}${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)
+      }}
+    >
+      {poster && (
+        <img
+          src={poster}
+          alt=""
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      )}
+      {!poster && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {renderTypeIcon(mimeType, {
+            className: 'size-12 text-black/20',
+            weight: 'regular',
+          })}
+        </div>
+      )}
+      <div className="absolute inset-0">
+        <ReactPlayer
+          ref={playerRef}
+          src={source}
+          poster={poster}
+          loop={loop}
+          muted={muted}
+          playsInline
+          width="100%"
+          height="100%"
+          onLoadStart={() => setBuffering(true)}
+          onCanPlay={() => setBuffering(false)}
+          onWaiting={() => setBuffering(true)}
+          onPlay={() => setManualPlayRequired(false)}
+          onLoadedMetadata={() => {
+            const el = playerRef.current
+            if (el && el.videoWidth && el.videoHeight) {
+              setVideoAspect(el.videoWidth / el.videoHeight)
+            }
+          }}
+          onEnded={() => {
+            if (!loop) {
+              setPlaying(false)
+              setPlayed(0)
+            }
+          }}
+        />
+      </div>
+
+      {buffering && !manualPlayRequired && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center">
+          <CircleNotchIcon
+            className="size-8 animate-spin text-white/80"
+            weight="bold"
+          />
+        </div>
+      )}
+
+      {manualPlayRequired && !controls && (
+        <div
+          className="absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35"
+          role="button"
+          tabIndex={0}
+          aria-label="Play preview"
+          onClick={(e) => {
+            e.stopPropagation()
+            startPlaybackFromGesture()
+          }}
+          onKeyDown={(e) => {
+            if (e.key !== 'Enter' && e.key !== ' ') return
+            e.preventDefault()
+            e.stopPropagation()
+            startPlaybackFromGesture()
+          }}
+        >
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm">
+            <PlayIcon className="size-9 translate-x-0.5" weight="fill" />
+          </span>
+        </div>
+      )}
+
+      {showProgress && !controls && (
+        <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
+            role="slider"
+            aria-label="Playback position"
+            aria-valuenow={scrubberPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            tabIndex={0}
+            ref={trackRef}
+            className="relative flex h-4 w-full cursor-pointer items-center"
+            onMouseDown={handleTrackPointerDown}
+            onTouchStart={handleTrackPointerDown}
+            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: `${scrubberPercent}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {controls && (
+        <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              setPlaying((p) => !p)
+            }}
+            className="shrink-0 text-white"
+            aria-label={playing ? 'Pause' : 'Play'}
+          >
+            {playing ? (
+              <PauseIcon className="size-5" weight="fill" />
+            ) : (
+              <PlayIcon className="size-5 translate-x-px" weight="fill" />
+            )}
+          </button>
+
+          <div
+            role="slider"
+            aria-label="Playback position"
+            aria-valuenow={scrubberPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            tabIndex={0}
+            ref={trackRef}
+            className="relative flex h-4 w-full cursor-pointer items-center"
+            onMouseDown={handleTrackPointerDown}
+            onTouchStart={handleTrackPointerDown}
+            onClick={(e) => e.stopPropagation()}
+            onMouseEnter={() => setScrubberHovered(true)}
+            onMouseLeave={() => setScrubberHovered(false)}
+            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 transition-all duration-200 ${scrubberHovered || seeking ? 'h-1.5' : 'h-1'}`}
+            >
+              <div
+                className="h-full rounded-full bg-white"
+                style={{ width: `${scrubberPercent}%` }}
+              />
+            </div>
+            <div
+              className={`absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${scrubberHovered || seeking ? 'scale-100 opacity-100' : 'scale-0 opacity-0'}`}
+              style={{ left: `${scrubberPercent}%` }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default MediaPlayer

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

@@ -0,0 +1,356 @@
+import {
+  CheckCircleIcon,
+  DownloadSimpleIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+} from '@phosphor-icons/react'
+import React, { useEffect, useState } from 'react'
+
+import { isDevBuild } from '../../../utils/isDevBuild'
+import type {
+  LockedAttachmentBaseProps,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../types'
+import { renderTypeIcon } from '../utils/icons'
+import { getSourceType } from '../utils/mimeType'
+
+import MediaPlayer from './MediaPlayer'
+
+export interface VisitorCardProps extends LockedAttachmentBaseProps {
+  title?: string
+  /**
+   * Called when the visitor clicks Unlock. Return the resolved source URL.
+   * The component manages loading state and sets source internally on resolution.
+   * Omit to hide the Unlock button.
+   */
+  onUnlock?: () => Promise<LockedAttachmentSource>
+  /** Called when the visitor clicks Download on an unlocked card. */
+  onDownload?: () => void
+}
+
+const getLockIcon = (paymentStatus?: PaymentStatus): React.ElementType =>
+  paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon
+
+// ─── Shared primitives ────────────────────────────────────────────────────────
+
+interface LockOverlayProps {
+  icon: React.ElementType
+}
+
+const LockOverlay: React.FC<LockOverlayProps> = (props) => {
+  const { icon: Icon } = props
+  return (
+    <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">
+        <Icon className="size-4 text-white" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+interface LockedPreviewProps {
+  thumbnail?: string
+  mimeType: string
+  LockIcon: React.ElementType
+}
+
+const LockedPreview: React.FC<LockedPreviewProps> = (props) => {
+  const { thumbnail, mimeType, LockIcon } = props
+  return (
+    <div className="relative aspect-video overflow-hidden bg-black/5">
+      {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>
+      )}
+      <LockOverlay icon={LockIcon} />
+    </div>
+  )
+}
+
+// ─── Per-type preview components ─────────────────────────────────────────────
+
+interface ImagePreviewProps {
+  source?: string
+  thumbnail?: string
+  mimeType: string
+  title?: string
+  paymentStatus?: PaymentStatus
+  isLocked: boolean
+}
+
+const ImagePreview: React.FC<ImagePreviewProps> = (props) => {
+  const { source, thumbnail, mimeType, title, paymentStatus, isLocked } = props
+  const [sourceReady, setSourceReady] = useState(false)
+
+  useEffect(() => {
+    setSourceReady(false)
+  }, [source])
+
+  if (isLocked) {
+    return (
+      <LockedPreview
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        LockIcon={getLockIcon(paymentStatus)}
+      />
+    )
+  }
+
+  return (
+    <div className="relative overflow-hidden bg-black/5">
+      <img
+        src={source}
+        alt={title}
+        className={`block w-full transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+        onLoad={() => setSourceReady(true)}
+      />
+    </div>
+  )
+}
+
+interface DocumentPreviewProps {
+  thumbnail?: string
+  mimeType: string
+  paymentStatus?: PaymentStatus
+  isLocked: boolean
+}
+
+const DocumentPreview: React.FC<DocumentPreviewProps> = (props) => {
+  const { thumbnail, mimeType, paymentStatus, isLocked } = props
+  return (
+    <div className="relative aspect-video overflow-hidden bg-black/5">
+      {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>
+      )}
+      {isLocked && <LockOverlay icon={getLockIcon(paymentStatus)} />}
+    </div>
+  )
+}
+
+interface MediaPreviewProps {
+  source?: string
+  thumbnail?: string
+  mimeType: string
+  paymentStatus?: PaymentStatus
+  isLocked: boolean
+}
+
+const MediaPreview: React.FC<MediaPreviewProps> = (props) => {
+  const { source, thumbnail, mimeType, paymentStatus, isLocked } = props
+  if (isLocked) {
+    return (
+      <LockedPreview
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        LockIcon={getLockIcon(paymentStatus)}
+      />
+    )
+  }
+  return <MediaPlayer source={source!} mimeType={mimeType} poster={thumbnail} />
+}
+
+// ─── Actions ─────────────────────────────────────────────────────────────────
+
+interface CardActionsProps {
+  isLocked: boolean
+  loading: boolean
+  paymentStatus?: PaymentStatus
+  source?: string
+  onUnlock?: () => void
+  onDownload?: () => void
+}
+
+const CardActions: React.FC<CardActionsProps> = (props) => {
+  const { isLocked, loading, paymentStatus, source, onUnlock, onDownload } =
+    props
+  const LockIcon = getLockIcon(paymentStatus)
+
+  if (isLocked && onUnlock) {
+    return (
+      <button
+        type="button"
+        onClick={onUnlock}
+        disabled={loading}
+        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white disabled:opacity-70"
+      >
+        {loading ? (
+          <span className="flex items-center gap-1">
+            <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" />
+            <span className="size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" />
+            <span className="size-1 rounded-full bg-white animate-bounce" />
+          </span>
+        ) : (
+          <>
+            {paymentStatus === 'paid' ? (
+              <LockOpenIcon className="size-4" weight="fill" />
+            ) : (
+              <LockIcon className="size-4" weight="fill" />
+            )}
+            {paymentStatus === 'paid' ? 'Open' : 'Unlock'}
+          </>
+        )}
+      </button>
+    )
+  }
+
+  if (!isLocked && onDownload && source) {
+    return (
+      <a
+        href={source}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onDownload}
+        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none !text-white"
+      >
+        <DownloadSimpleIcon className="size-4" weight="bold" />
+        Download
+      </a>
+    )
+  }
+
+  return null
+}
+
+// ─── Card shell ───────────────────────────────────────────────────────────────
+
+const VisitorCard: React.FC<VisitorCardProps> = (props) => {
+  const {
+    title,
+    amountText,
+    thumbnail,
+    source: sourceProp,
+    mimeType = 'application/octet-stream',
+    detail,
+    onUnlock,
+    onDownload,
+    paymentStatus,
+  } = props
+  const [source, setSource] = useState(sourceProp)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (sourceProp !== undefined) setSource(sourceProp)
+  }, [sourceProp])
+
+  const isLocked = source === undefined
+  const sourceType = getSourceType(mimeType)
+
+  const handleUnlock = async () => {
+    if (!onUnlock) return
+    setLoading(true)
+    try {
+      const result = await onUnlock()
+      setSource(result.source)
+    } catch (err) {
+      if (isDevBuild()) console.debug('[LockedAttachment] onUnlock failed', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  let mediaPreview: React.ReactNode
+  if (sourceType === 'image') {
+    mediaPreview = (
+      <ImagePreview
+        source={source}
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        title={title}
+        paymentStatus={paymentStatus}
+        isLocked={isLocked}
+      />
+    )
+  } else if (sourceType === 'document') {
+    mediaPreview = (
+      <DocumentPreview
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        paymentStatus={paymentStatus}
+        isLocked={isLocked}
+      />
+    )
+  } else {
+    mediaPreview = (
+      <MediaPreview
+        source={source}
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        paymentStatus={paymentStatus}
+        isLocked={isLocked}
+      />
+    )
+  }
+
+  return (
+    <div className="w-[280px] select-none overflow-hidden rounded-3xl bg-white shadow-card">
+      {mediaPreview}
+      <div className="px-4 pb-3 pt-3">
+        <p className="mb-1.5 truncate text-base font-medium text-black">
+          {title}
+        </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"
+              />
+            </>
+          ) : (
+            amountText && (
+              <>
+                <span className="text-xs font-medium text-black/55">•</span>
+                <span className="text-xs font-medium text-black/55">
+                  {amountText}
+                </span>
+              </>
+            )
+          )}
+        </div>
+        <CardActions
+          isLocked={isLocked}
+          loading={loading}
+          paymentStatus={paymentStatus}
+          source={source}
+          onUnlock={onUnlock ? handleUnlock : undefined}
+          onDownload={onDownload}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default VisitorCard