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

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

@@ -1,99 +1,190 @@
 import {
   CheckCircleIcon,
   DownloadSimpleIcon,
+  LockOpenIcon,
   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 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.
+   * 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. */
+  /** 
+   * Called when the visitor clicks Download on an unlocked card.
+   */
   onDownload?: () => void
 }
 
-const getLockIcon = (paymentStatus?: PaymentStatus): React.ElementType => {
-  return paymentStatus === 'paid' ? LockSimpleOpenIcon : LockSimpleIcon
+const getLockIcon = (paymentStatus?: PaymentStatus): React.ElementType =>
+  paymentStatus === 'paid' ? LockOpenIcon : LockSimpleIcon
+
+
+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>
+  )
 }
 
-const ThumbnailOrIcon: React.FC<{ src?: string; mimeType: string }> = ({
-  src,
-  mimeType,
-}) => {
-  if (src) {
+
+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 (
-      <img
-        src={src}
-        alt=""
-        className="absolute inset-0 h-full w-full object-cover"
+      <LockedPreview
+        thumbnail={thumbnail}
+        mimeType={mimeType}
+        LockIcon={getLockIcon(paymentStatus)}
       />
     )
   }
 
   return (
-    <div className="absolute inset-0 flex items-center justify-center">
-      {renderTypeIcon(mimeType, { className: 'size-12 text-black/20', weight: 'regular' })}
+    <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>
   )
 }
 
-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" />
+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>
-  </div>
-)
+  )
+}
 
-interface LockedPreviewProps {
+interface MediaPreviewProps {
+  source?: string
   thumbnail?: string
   mimeType: string
-  LockIcon: React.ElementType
+  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} />
 }
 
-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,
-}) => {
+const CardActions: React.FC<CardActionsProps> = (props) => {
+  const { isLocked, loading, paymentStatus, source, onUnlock, onDownload } =
+    props
+  const LockIcon = getLockIcon(paymentStatus)
+
   if (isLocked && onUnlock) {
     return (
       <button
@@ -110,13 +201,18 @@ const CardActions: React.FC<CardActionsProps> = ({
           </span>
         ) : (
           <>
-            <LockIcon className="size-4" weight="fill" />
+            {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
@@ -131,75 +227,31 @@ const CardActions: React.FC<CardActionsProps> = ({
       </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 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 [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 () => {
@@ -208,12 +260,8 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
     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)
-      }
+      if (isDevBuild()) console.debug('[LockedAttachment] onUnlock failed', err)
     } finally {
       setLoading(false)
     }
@@ -221,67 +269,79 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
 
   let mediaPreview: React.ReactNode
   if (sourceType === 'image') {
-    mediaPreview = isLocked ? (
-      <LockedPreview
+    mediaPreview = (
+      <ImagePreview
+        source={source}
         thumbnail={thumbnail}
         mimeType={mimeType}
-        LockIcon={LockIcon}
+        title={title}
+        paymentStatus={paymentStatus}
+        isLocked={isLocked}
       />
-    ) : (
-      <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
+      <DocumentPreview
         thumbnail={thumbnail}
         mimeType={mimeType}
-        LockIcon={LockIcon}
+        paymentStatus={paymentStatus}
+        isLocked={isLocked}
       />
-    ) : (
-      <MediaPlayer
+    )
+  } else {
+    mediaPreview = (
+      <MediaPreview
         source={source}
+        thumbnail={thumbnail}
         mimeType={mimeType}
-        poster={poster ?? thumbnail}
+        paymentStatus={paymentStatus}
+        isLocked={isLocked}
       />
     )
   }
 
   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="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>
-        <VisitorCardMeta
-          mimeType={mimeType}
-          detail={detail}
-          paymentStatus={paymentStatus}
-          amountText={amountText}
-        />
+        <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}
-          LockIcon={LockIcon}
           onUnlock={onUnlock ? handleUnlock : undefined}
           onDownload={onDownload}
         />

package/src/components/LockedAttachment/index.tsx

@@ -13,23 +13,23 @@ const LockedAttachmentFallback = () => (
   />
 )
 
+type Never<T, K extends keyof T = keyof T> = { [P in K]?: never }
+
 export type LockedAttachmentProps =
-  | ({ isCreator: true } & CreatorCardProps)
-  | ({ isCreator?: false } & VisitorCardProps)
+  | (CreatorCardProps & Never<VisitorCardProps, 'onUnlock' | 'onDownload'>)
+  | (VisitorCardProps & Never<CreatorCardProps, 'isPreview' | 'placeholderTitle' | 'placeholderAmountText' | 'onDismiss'>)
 
 const LockedAttachment = (props: LockedAttachmentProps) => {
-  if (props.isCreator) {
-    const { isCreator: _, ...rest } = props
+  if (props.onUnlock != null || props.onDownload != null) {
     return (
       <Suspense fallback={<LockedAttachmentFallback />}>
-        <CreatorCardLazy {...rest} />
+        <VisitorCardLazy {...props} />
       </Suspense>
     )
   }
-  const { isCreator: _, ...rest } = props
   return (
     <Suspense fallback={<LockedAttachmentFallback />}>
-      <VisitorCardLazy {...rest} />
+      <CreatorCardLazy {...props} />
     </Suspense>
   )
 }

package/src/components/LockedAttachment/types.ts

@@ -1,13 +1,9 @@
 import type { PaymentStatus } from '../../stream-custom-data'
 
-/** Shared fields for creator and visitor locked-attachment cards (internal). */
 export interface LockedAttachmentBaseProps {
+  title?: string
   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

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

@@ -11,6 +11,7 @@ import {
   ImageIcon,
   SpeakerHighIcon,
   VideoCameraIcon,
+  IconProps,
 } from '@phosphor-icons/react'
 import React from 'react'
 
@@ -46,7 +47,7 @@ export function getTypeIcon(mimeType: string): React.ElementType {
 /** 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' }
+  props: IconProps
 ): React.ReactElement {
   return React.createElement(getTypeIcon(mimeType), props)
 }

package/src/components/LockedAttachment/utils/mimeType.test.ts

@@ -39,12 +39,20 @@ describe('getDocumentIconType', () => {
 
   it('returns doc for Word types', () => {
     expect(getDocumentIconType('application/msword')).toBe('doc')
-    expect(getDocumentIconType('application/vnd.openxmlformats-officedocument.wordprocessingml.document')).toBe('doc')
+    expect(
+      getDocumentIconType(
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      )
+    ).toBe('doc')
   })
 
   it('returns xls for Excel types', () => {
     expect(getDocumentIconType('application/vnd.ms-excel')).toBe('xls')
-    expect(getDocumentIconType('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')).toBe('xls')
+    expect(
+      getDocumentIconType(
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      )
+    ).toBe('xls')
   })
 
   it('returns csv for text/csv', () => {
@@ -53,7 +61,11 @@ describe('getDocumentIconType', () => {
 
   it('returns ppt for PowerPoint types', () => {
     expect(getDocumentIconType('application/vnd.ms-powerpoint')).toBe('ppt')
-    expect(getDocumentIconType('application/vnd.openxmlformats-officedocument.presentationml.presentation')).toBe('ppt')
+    expect(
+      getDocumentIconType(
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+      )
+    ).toBe('ppt')
   })
 
   it('returns zip for archive types', () => {
@@ -79,11 +91,17 @@ describe('getDocumentIconType', () => {
   })
 
   it('returns xls for macro-enabled Excel', () => {
-    expect(getDocumentIconType('application/vnd.ms-excel.sheet.macroEnabled.12')).toBe('xls')
+    expect(
+      getDocumentIconType('application/vnd.ms-excel.sheet.macroEnabled.12')
+    ).toBe('xls')
   })
 
   it('returns ppt for macro-enabled PowerPoint', () => {
-    expect(getDocumentIconType('application/vnd.ms-powerpoint.presentation.macroEnabled.12')).toBe('ppt')
+    expect(
+      getDocumentIconType(
+        'application/vnd.ms-powerpoint.presentation.macroEnabled.12'
+      )
+    ).toBe('ppt')
   })
 
   it('returns generic for unknown types', () => {
@@ -91,7 +109,11 @@ describe('getDocumentIconType', () => {
     expect(getDocumentIconType('application/json')).toBe('generic')
     expect(getDocumentIconType('text/html')).toBe('generic')
     expect(getDocumentIconType('application/vnd.rar')).toBe('generic')
-    expect(getDocumentIconType('application/vnd.oasis.opendocument.text')).toBe('generic')
-    expect(getDocumentIconType('application/vnd.oasis.opendocument.spreadsheet')).toBe('generic')
+    expect(getDocumentIconType('application/vnd.oasis.opendocument.text')).toBe(
+      'generic'
+    )
+    expect(
+      getDocumentIconType('application/vnd.oasis.opendocument.spreadsheet')
+    ).toBe('generic')
   })
 })

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

@@ -30,6 +30,8 @@ export function getSourceType(mimeType: string): AttachmentSourceType {
 }
 
 export function getDocumentIconType(mimeType: string): DocumentIconType {
-  const match = DOCUMENT_ICON_PATTERNS.find(([pattern]) => pattern.test(mimeType))
+  const match = DOCUMENT_ICON_PATTERNS.find(([pattern]) =>
+    pattern.test(mimeType)
+  )
   return match ? match[1] : 'generic'
 }

package/src/types.ts

@@ -119,7 +119,6 @@ export interface ChannelListProps {
 
 export interface LockedAttachmentSource {
   source: string
-  poster?: string
 }
 
 /**