@linktr.ee/messaging-react 1.26.1 → 1.27.0

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

@@ -0,0 +1,299 @@
+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
+  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,
+  loop = false,
+  controls = true,
+  showProgress = false,
+  onContainerClick,
+  muted = false,
+}) => {
+  const sourceType = getSourceType(mimeType)
+  const [playing, setPlaying] = useState(autoPlay)
+  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 pointer-events-none">
+          <div className="h-1 w-full overflow-hidden rounded-full bg-white/30">
+            <div className="h-full rounded-full bg-white" style={{ width: `${scrubberPercent}%` }} />
+          </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,293 @@
+import {
+  CheckCircleIcon,
+  DownloadSimpleIcon,
+  LockSimpleIcon,
+  LockSimpleOpenIcon,
+} 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 and optional poster.
+   * The component manages loading state and sets source/poster 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 => {
+  return paymentStatus === 'paid' ? LockSimpleOpenIcon : LockSimpleIcon
+}
+
+const ThumbnailOrIcon: React.FC<{ src?: string; mimeType: string }> = ({
+  src,
+  mimeType,
+}) => {
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt=""
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+    )
+  }
+
+  return (
+    <div className="absolute inset-0 flex items-center justify-center">
+      {renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}
+    </div>
+  )
+}
+
+const LockOverlay: React.FC<{ icon: React.ElementType }> = ({ icon: Icon }) => (
+  <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+    <div className="flex size-12 items-center justify-center rounded-full bg-black/60">
+      <Icon className="size-6 text-white" weight="regular" />
+    </div>
+  </div>
+)
+
+interface LockedPreviewProps {
+  thumbnail?: string
+  mimeType: string
+  LockIcon: React.ElementType
+}
+
+const LockedPreview: React.FC<LockedPreviewProps> = ({
+  thumbnail,
+  mimeType,
+  LockIcon,
+}) => (
+  <div className="relative aspect-video overflow-hidden bg-black/5">
+    <ThumbnailOrIcon src={thumbnail} mimeType={mimeType} />
+    <LockOverlay icon={LockIcon} />
+  </div>
+)
+
+interface CardActionsProps {
+  isLocked: boolean
+  loading: boolean
+  paymentStatus?: PaymentStatus
+  source?: string
+  LockIcon: React.ElementType
+  onUnlock?: () => void
+  onDownload?: () => void
+}
+
+const CardActions: React.FC<CardActionsProps> = ({
+  isLocked,
+  loading,
+  paymentStatus,
+  source,
+  LockIcon,
+  onUnlock,
+  onDownload,
+}) => {
+  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>
+        ) : (
+          <>
+            <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
+}
+
+interface VisitorCardMetaProps {
+  mimeType: string
+  detail?: string
+  paymentStatus?: PaymentStatus
+  amountText?: string
+}
+
+const VisitorCardMeta: React.FC<VisitorCardMetaProps> = ({
+  mimeType,
+  detail,
+  paymentStatus,
+  amountText,
+}) => {
+  return (
+    <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>
+  )
+}
+
+const VisitorCard: React.FC<VisitorCardProps> = ({
+  title,
+  amountText,
+  thumbnail,
+  poster: posterProp,
+  source: sourceProp,
+  mimeType = 'application/octet-stream',
+  detail,
+  onUnlock,
+  onDownload,
+  paymentStatus,
+}) => {
+  const [source, setSource] = useState(sourceProp)
+  const [poster, setPoster] = useState(posterProp)
+  const [loading, setLoading] = useState(false)
+  const [sourceReady, setSourceReady] = useState(false)
+
+  useEffect(() => {
+    if (sourceProp !== undefined) setSource(sourceProp)
+  }, [sourceProp])
+
+  useEffect(() => {
+    if (posterProp !== undefined) setPoster(posterProp)
+  }, [posterProp])
+
+  const isLocked = source === undefined
+  const LockIcon = getLockIcon(paymentStatus)
+  const sourceType = getSourceType(mimeType)
+
+  const handleUnlock = async () => {
+    if (!onUnlock) return
+    setLoading(true)
+    try {
+      const result = await onUnlock()
+      setSource(result.source)
+      if (result.poster) setPoster(result.poster)
+    } catch (err) {
+      // Avoid unhandled rejection from async onClick; host may still surface UI in onUnlock.
+      if (isDevBuild()) {
+        console.debug('[LockedAttachment] onUnlock failed', err)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  let mediaPreview: React.ReactNode
+  if (sourceType === 'image') {
+    mediaPreview = isLocked ? (
+      <LockedPreview
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        LockIcon={LockIcon}
+      />
+    ) : (
+      <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>
+    )
+  } else if (sourceType === 'document') {
+    mediaPreview = (
+      <div className="relative aspect-video overflow-hidden bg-black/5">
+        <ThumbnailOrIcon
+          src={isLocked ? thumbnail : poster}
+          mimeType={mimeType}
+        />
+        {isLocked && <LockOverlay icon={LockIcon} />}
+      </div>
+    )
+  } else {
+    mediaPreview = isLocked ? (
+      <LockedPreview
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        LockIcon={LockIcon}
+      />
+    ) : (
+      <MediaPlayer
+        source={source}
+        mimeType={mimeType}
+        poster={poster ?? thumbnail}
+      />
+    )
+  }
+
+  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)]">
+      {mediaPreview}
+      <div className="px-4 pb-3 pt-3">
+        <p className="mb-1.5 truncate text-base font-medium text-black">
+          {title}
+        </p>
+        <VisitorCardMeta
+          mimeType={mimeType}
+          detail={detail}
+          paymentStatus={paymentStatus}
+          amountText={amountText}
+        />
+        <CardActions
+          isLocked={isLocked}
+          loading={loading}
+          paymentStatus={paymentStatus}
+          source={source}
+          LockIcon={LockIcon}
+          onUnlock={onUnlock ? handleUnlock : undefined}
+          onDownload={onDownload}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default VisitorCard

package/src/components/LockedAttachment/index.tsx

@@ -0,0 +1,39 @@
+import React, { Suspense } from 'react'
+
+import type { CreatorCardProps } from './components/Creator'
+import type { VisitorCardProps } from './components/Visitor'
+
+const CreatorCardLazy = React.lazy(() => import('./components/Creator'))
+const VisitorCardLazy = React.lazy(() => import('./components/Visitor'))
+
+const LockedAttachmentFallback = () => (
+  <div
+    className="w-[280px] min-h-[200px] animate-pulse rounded-3xl bg-black/[0.06] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04)]"
+    aria-hidden
+  />
+)
+
+export type LockedAttachmentProps =
+  | ({ isCreator: true } & CreatorCardProps)
+  | ({ isCreator?: false } & VisitorCardProps)
+
+const LockedAttachment = (props: LockedAttachmentProps) => {
+  if (props.isCreator) {
+    const { isCreator: _, ...rest } = props
+    return (
+      <Suspense fallback={<LockedAttachmentFallback />}>
+        <CreatorCardLazy {...rest} />
+      </Suspense>
+    )
+  }
+  const { isCreator: _, ...rest } = props
+  return (
+    <Suspense fallback={<LockedAttachmentFallback />}>
+      <VisitorCardLazy {...rest} />
+    </Suspense>
+  )
+}
+
+export default LockedAttachment
+export type { CreatorCardProps, VisitorCardProps }
+export type { PaymentStatus, LockedAttachmentSource } from './types'

package/src/components/LockedAttachment/types.ts

@@ -0,0 +1,18 @@
+import type { PaymentStatus } from '../../stream-custom-data'
+
+/** Shared fields for creator and visitor locked-attachment cards (internal). */
+export interface LockedAttachmentBaseProps {
+  mimeType?: string
+  /** Blurred preview image shown in the locked/collapsed state. */
+  thumbnail?: string
+  /** Clean poster image passed to the media player. Falls back to thumbnail. */
+  poster?: string
+  /** Unlocked media URL. Undefined while locked or pending unlock. */
+  source?: string
+  detail?: string
+  amountText?: string
+  paymentStatus?: PaymentStatus
+}
+
+export type { PaymentStatus }
+export type { LockedAttachmentSource } from '../../types'

package/src/components/LockedAttachment/utils/icons.ts

@@ -0,0 +1,52 @@
+import {
+  FileIcon,
+  FileCsvIcon,
+  FileDocIcon,
+  FileMdIcon,
+  FilePdfIcon,
+  FilePptIcon,
+  FileTextIcon,
+  FileXlsIcon,
+  FileZipIcon,
+  ImageIcon,
+  SpeakerHighIcon,
+  VideoCameraIcon,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getDocumentIconType, getSourceType } from './mimeType'
+import type { AttachmentSourceType } from './mimeType'
+
+export const MEDIA_TYPE_ICON: Record<AttachmentSourceType, React.ElementType> =
+  {
+    video: VideoCameraIcon,
+    audio: SpeakerHighIcon,
+    image: ImageIcon,
+    document: FileIcon,
+  }
+
+const DOCUMENT_ICON_COMPONENT = {
+  pdf: FilePdfIcon,
+  doc: FileDocIcon,
+  xls: FileXlsIcon,
+  csv: FileCsvIcon,
+  ppt: FilePptIcon,
+  zip: FileZipIcon,
+  text: FileTextIcon,
+  markdown: FileMdIcon,
+  generic: FileIcon,
+} as const
+
+export function getTypeIcon(mimeType: string): React.ElementType {
+  const sourceType = getSourceType(mimeType)
+  if (sourceType !== 'document') return MEDIA_TYPE_ICON[sourceType]
+  return DOCUMENT_ICON_COMPONENT[getDocumentIconType(mimeType)]
+}
+
+/** Use instead of `<TypeIcon />` where TypeIcon = getTypeIcon(mime) to satisfy react-hooks/static-components. */
+export function renderTypeIcon(
+  mimeType: string,
+  props: { className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }
+): React.ReactElement {
+  return React.createElement(getTypeIcon(mimeType), props)
+}