@linktr.ee/messaging-react 2.0.0 → 2.0.1-rc-1778656305

package/src/components/LockedAttachment/components/_shared/CardBody.tsx

@@ -0,0 +1,94 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { renderTypeIcon } from '../../../AttachmentCard'
+
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface CardBodyProps {
+  variant: LockedCardVariant
+  title?: string
+  placeholderTitle?: string
+  mimeType: string
+  detail?: string
+  statusBadge?: React.ReactNode
+  action?: React.ReactNode
+  /** Overrides the auto-detected type icon (used by Gallery to swap in an `Images` icon). */
+  icon?: React.ReactNode
+  /** Optional control rendered on the right of the title/status block (e.g. Composer edit pencil). */
+  trailingAction?: React.ReactNode
+}
+
+/**
+ * Title + status row layout shared by Composer / Sent / Received cards.
+ * Layout matches the Figma `Container > Labels` group (16px h-padding, 12px v-padding,
+ * 4px gap between title and status row, 4px gap inside status row).
+ */
+const CardBody: React.FC<CardBodyProps> = ({
+  variant,
+  title,
+  placeholderTitle = 'Attachment title',
+  mimeType,
+  detail,
+  statusBadge,
+  action,
+  icon,
+  trailingAction,
+}) => {
+  const isDark = variant === 'dark'
+  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
+  const titleDimmed = isDark && !title
+
+  const typeIcon =
+    icon ??
+    renderTypeIcon(mimeType, {
+      className: classNames(
+        'size-5 shrink-0',
+        isDark ? 'text-white/55' : 'text-black/55'
+      ),
+      weight: 'regular',
+    })
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-end gap-3">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          {displayTitle.trim() !== '' && (
+            <p
+              className={classNames('truncate text-base font-medium leading-6', {
+                'text-black/90': !isDark,
+                'text-white/30': isDark && titleDimmed,
+                'text-white': isDark && !titleDimmed,
+              })}
+            >
+              {displayTitle}
+            </p>
+          )}
+
+          <div className="flex flex-wrap items-center gap-1">
+            {typeIcon}
+
+            {detail != null && detail !== '' && (
+              <span
+                className={classNames(
+                  'text-xs font-medium',
+                  isDark ? 'text-white/55' : 'text-black/55'
+                )}
+              >
+                {detail}
+              </span>
+            )}
+
+            {statusBadge}
+          </div>
+        </div>
+
+        {trailingAction && <div className="shrink-0">{trailingAction}</div>}
+      </div>
+
+      {action}
+    </div>
+  )
+}
+
+export default CardBody

package/src/components/LockedAttachment/components/_shared/GalleryThumbnail.tsx

@@ -0,0 +1,178 @@
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+
+import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
+import type {
+  LockedAttachmentGalleryItem,
+  PaymentStatus,
+} from '../../types'
+
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface GalleryThumbnailProps {
+  variant: LockedCardVariant
+  gallery: LockedAttachmentGalleryItem[]
+  title?: string
+  /** When true, all items are shown blurred + the locked/play badge is overlaid. */
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Top-right slot (e.g. dismiss X on Composer). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+}
+
+function isPlayableItem(item: LockedAttachmentGalleryItem): boolean {
+  const sourceType = getSourceType(item.mimeType)
+  return sourceType === 'video' || sourceType === 'audio'
+}
+
+/**
+ * Mixed-media carousel used by every LockedAttachment card when its `gallery`
+ * prop has 2+ items. Matches the "Gallery" frames in the Figma design system:
+ * 337/386 aspect ratio, prev/next caret buttons, a counter pill, and a center
+ * lock / play indicator that swaps based on the current item.
+ */
+const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
+  variant,
+  gallery,
+  title,
+  showLocked,
+  paymentStatus,
+  topRight,
+}) => {
+  const [index, setIndex] = useState(0)
+  const total = gallery.length
+  const safeIndex = Math.min(index, total - 1)
+  const current = gallery[safeIndex]
+  const isVideoItem = isPlayableItem(current)
+
+  // Center badge: PLAY for video items, LOCK for non-video locked items.
+  // Unlocked image items show no center badge — the image is the content.
+  const centerBadge = (() => {
+    if (isVideoItem) {
+      return <PlayIcon className="size-6" weight="fill" />
+    }
+    if (showLocked) {
+      return paymentStatus === 'paid' ? (
+        <LockOpenIcon className="size-6" weight="fill" />
+      ) : (
+        <LockSimpleIcon className="size-6" weight="fill" />
+      )
+    }
+    return null
+  })()
+
+  // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
+  // wrapper on ComposerCard / SentCard.
+  const goPrev = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIndex((i) => Math.max(0, i - 1))
+  }
+  const goNext = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIndex((i) => Math.min(total - 1, i + 1))
+  }
+  const atStart = safeIndex === 0
+  const atEnd = safeIndex === total - 1
+
+  const isDark = variant === 'dark'
+
+  // Locked + unlocked render entirely separate trees so the locked state
+  // doesn't end up stacking a blurred `<img>` on top of an underlying
+  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
+  // shows through as a visible horizontal seam at the 16:9 boundary
+  // inside the taller 337/386 gallery aspect).
+  //
+  // The locked branch uses `filter: blur` on a single full-size `<img>`
+  // — not `backdrop-filter` — so the rounded corners are clipped
+  // normally without any clip-path workarounds (see LockedThumbnail).
+  return (
+    <div className="relative aspect-[337/386] overflow-hidden rounded-t-2xl">
+      {showLocked ? (
+        <div
+          className={classNames(
+            'absolute inset-0',
+            isDark ? 'bg-white/10' : 'bg-black/5'
+          )}
+        >
+          {current.thumbnailUrl && (
+            <img
+              src={current.thumbnailUrl}
+              alt=""
+              aria-hidden
+              draggable={false}
+              // `scale-110` hides the fuzzy edge that `filter: blur` leaves
+              // around the image bounds.
+              className="absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            />
+          )}
+        </div>
+      ) : (
+        <AttachmentThumbnail
+          mimeType={current.mimeType}
+          sourceUrl={current.sourceUrl}
+          thumbnailUrl={current.thumbnailUrl}
+          title={title}
+          variant={variant}
+        />
+      )}
+
+      {centerBadge && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+            {centerBadge}
+          </div>
+        </div>
+      )}
+
+      {total > 1 && (
+        <React.Fragment>
+          <button
+            type="button"
+            onClick={goPrev}
+            disabled={atStart}
+            aria-label="Previous item"
+            className={classNames(
+              'absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',
+              atStart ? 'opacity-40' : 'hover:bg-black/40'
+            )}
+          >
+            <CaretLeftIcon className="size-5" weight="bold" />
+          </button>
+          <button
+            type="button"
+            onClick={goNext}
+            disabled={atEnd}
+            aria-label="Next item"
+            className={classNames(
+              'absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity',
+              atEnd ? 'opacity-40' : 'hover:bg-black/40'
+            )}
+          >
+            <CaretRightIcon className="size-5" weight="bold" />
+          </button>
+
+          <div className="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1">
+            <span className="text-xs font-medium leading-4 text-white">
+              {safeIndex + 1}/{total}
+            </span>
+          </div>
+        </React.Fragment>
+      )}
+
+      {topRight && (
+        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+          {topRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default GalleryThumbnail

package/src/components/LockedAttachment/components/_shared/LockBadge.tsx

@@ -0,0 +1,39 @@
+import {
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type { PaymentStatus } from '../../types'
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/25` from the design system's `alpha-black-25` token.
+ *
+ * For playable media (video/audio), the badge shows a play icon instead of a
+ * lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<{
+  paymentStatus?: PaymentStatus
+  mimeType?: string
+}> = ({ paymentStatus, mimeType }) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const isPlayable = sourceType === 'video' || sourceType === 'audio'
+
+  const Icon = isPlayable
+    ? PlayIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/LockedAttachment/components/_shared/LockedCardShell.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+import React from 'react'
+
+export type LockedCardVariant = 'dark' | 'light'
+
+export interface LockedCardShellProps {
+  variant: LockedCardVariant
+  children: React.ReactNode
+  rootRef?: React.Ref<HTMLDivElement>
+  'data-testid'?: string
+}
+
+/**
+ * Outer chrome for every LockedAttachment card.
+ * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
+ */
+const LockedCardShell: React.FC<LockedCardShellProps> = ({
+  variant,
+  children,
+  rootRef,
+  'data-testid': dataTestId,
+}) => (
+  <div
+    ref={rootRef}
+    data-testid={dataTestId}
+    className={classNames(
+      'relative w-[280px] select-none overflow-hidden rounded-2xl',
+      'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
+      variant === 'dark' ? 'bg-[#121110]' : 'bg-white'
+    )}
+  >
+    {children}
+  </div>
+)
+
+export default LockedCardShell

package/src/components/LockedAttachment/components/_shared/LockedThumbnail.tsx

@@ -0,0 +1,128 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import {
+  AttachmentThumbnail,
+  renderTypeIcon,
+} from '../../../AttachmentCard'
+import type { LockedAttachmentSource, PaymentStatus } from '../../types'
+
+import { LockBadge } from './LockBadge'
+import type { LockedCardVariant } from './LockedCardShell'
+
+export interface LockedThumbnailProps {
+  variant: LockedCardVariant
+  mimeType: string
+  thumbnailUrl?: string
+  title?: string
+  /**
+   * When provided, the underlying source is shown unblurred (preview / unlocked state).
+   * When undefined, the thumbnail is treated as locked: blurred with a central lock badge.
+   */
+  source?: LockedAttachmentSource
+  /**
+   * Forces the locked appearance even when a source is provided. Used for the
+   * Composer card where the locked treatment is the default and the user toggles
+   * a preview in place.
+   */
+  showLocked: boolean
+  paymentStatus?: PaymentStatus
+  /** Top-right overlay (e.g. dismiss X on Composer). Rendered inside the thumbnail. */
+  topRight?: React.ReactNode
+  /** When true, renders the unlocked image with aspect-video + object-contain. */
+  containedImage?: boolean
+}
+
+/**
+ * Renders the 180px-tall media area for a LockedAttachment card.
+ * Handles three visual states:
+ *   - locked:       blurred thumbnail + centered 48px lock badge
+ *   - preview/paid: clear thumbnail (the underlying source)
+ *   - empty:        type-icon placeholder
+ */
+const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
+  variant,
+  mimeType,
+  thumbnailUrl,
+  title,
+  source,
+  showLocked,
+  paymentStatus,
+  topRight,
+  containedImage = false,
+}) => {
+  const effectiveSourceUrl = showLocked ? undefined : source?.sourceUrl
+  const effectiveThumbnailUrl = showLocked
+    ? thumbnailUrl
+    : (source?.thumbnailUrl ?? thumbnailUrl)
+
+  const isDark = variant === 'dark'
+
+  // Locked + unlocked render entirely separate trees so the locked state
+  // doesn't end up stacking a blurred `<img>` on top of an underlying
+  // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
+  // shows through as a visible horizontal seam at the 16:9 boundary).
+  //
+  // The locked branch uses `filter: blur` on a single full-size `<img>`
+  // — not `backdrop-filter` — because `backdrop-filter` paints in its
+  // own compositing layer that escapes ancestor `overflow: hidden` on
+  // Chrome/Safari and flattens the card's top corners. `filter` is
+  // clipped normally, so the rounded corners stay round without any
+  // clip-path workarounds.
+  return (
+    <div className="relative overflow-hidden rounded-t-2xl">
+      {showLocked ? (
+        <div
+          className={classNames(
+            'relative aspect-video overflow-hidden',
+            isDark ? 'bg-white/10' : 'bg-black/5'
+          )}
+        >
+          {effectiveThumbnailUrl ? (
+            <img
+              src={effectiveThumbnailUrl}
+              alt=""
+              aria-hidden
+              draggable={false}
+              // `scale-110` hides the fuzzy semi-transparent edge that
+              // `filter: blur` leaves around the image bounds.
+              className="absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              {renderTypeIcon(mimeType, {
+                className: isDark
+                  ? 'size-12 text-white/20'
+                  : 'size-12 text-black/20',
+                weight: 'regular',
+              })}
+            </div>
+          )}
+          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />
+        </div>
+      ) : (
+        <AttachmentThumbnail
+          mimeType={mimeType}
+          sourceUrl={effectiveSourceUrl}
+          thumbnailUrl={effectiveThumbnailUrl}
+          title={title}
+          variant={variant}
+          containedImage={containedImage}
+          mediaPlayerProps={
+            effectiveSourceUrl
+              ? { autoPlay: true, loop: true, controls: true, muted: false }
+              : undefined
+          }
+        />
+      )}
+
+      {topRight && (
+        <div className="pointer-events-auto absolute right-3 top-3 z-10">
+          {topRight}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LockedThumbnail

package/src/components/LockedAttachment/index.tsx

@@ -1,32 +1,63 @@
 import React, { Suspense } from 'react'
 
-import type { CreatorCardProps } from './components/Creator/Card'
-import type { VisitorCardProps } from './components/Visitor/Card'
+import type { ComposerCardProps } from './components/Composer/Card'
+import type { ReceivedCardProps } from './components/Received/Card'
+import type { SentCardProps } from './components/Sent/Card'
 
-const CreatorCardLazy = React.lazy(() => import('./components/Creator/Card'))
-const VisitorCardLazy = React.lazy(() => import('./components/Visitor/Card'))
+const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
+const SentCardLazy = React.lazy(() => import('./components/Sent/Card'))
+const ReceivedCardLazy = React.lazy(() => import('./components/Received/Card'))
 
 const LockedAttachmentFallback = () => (
   <div
-    className="w-[280px] min-h-[200px] animate-pulse rounded-[24px] bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
+    className="w-[280px] min-h-[200px] animate-pulse rounded-2xl bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
     aria-hidden
   />
 )
 
-const Creator = (props: CreatorCardProps) => (
+const Composer = (props: ComposerCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <CreatorCardLazy {...props} />
+    <ComposerCardLazy {...props} />
   </Suspense>
 )
 
-const Visitor = (props: VisitorCardProps) => (
+const Sent = (props: SentCardProps) => (
   <Suspense fallback={<LockedAttachmentFallback />}>
-    <VisitorCardLazy {...props} />
+    <SentCardLazy {...props} />
   </Suspense>
 )
 
-const LockedAttachment = { Creator, Visitor }
+const Received = (props: ReceivedCardProps) => (
+  <Suspense fallback={<LockedAttachmentFallback />}>
+    <ReceivedCardLazy {...props} />
+  </Suspense>
+)
+
+/**
+ * @deprecated Renamed to `LockedAttachment.Sent` (post-send sender card) or
+ * `LockedAttachment.Composer` (drafting state). This alias maps to `Sent`
+ * because that matches the previous in-thread usage; pre-send / drafting
+ * usages (e.g. with `onDismiss`) should migrate to `LockedAttachment.Composer`.
+ */
+const Creator = Sent
+
+/** @deprecated Renamed to `LockedAttachment.Received`. */
+const Visitor = Received
+
+const LockedAttachment = { Composer, Sent, Received, Creator, Visitor }
 
 export default LockedAttachment
-export type { CreatorCardProps, VisitorCardProps }
-export type { PaymentStatus, LockedAttachmentSource, LockedAttachmentContextValue } from './types'
+export type { ComposerCardProps, SentCardProps, ReceivedCardProps }
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export type CreatorCardProps = SentCardProps
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export type VisitorCardProps = ReceivedCardProps
+export type {
+  PaymentStatus,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/LockedAttachment/types.ts

@@ -9,6 +9,23 @@ export interface LockedAttachmentBaseProps {
   detail?: string
   amountText?: string
   paymentStatus?: PaymentStatus
+  /**
+   * When provided with 2+ items, the card renders as a mixed-media carousel
+   * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
+   * item brings its own thumbnail and optional source so that
+   * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+   * same carousel chrome.
+   */
+  gallery?: LockedAttachmentGalleryItem[]
+}
+
+export interface LockedAttachmentGalleryItem {
+  /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+  mimeType: string
+  /** Poster image used for both the locked (blurred) and unlocked preview state. */
+  thumbnailUrl?: string
+  /** Underlying source (image or video URL) — shown only when unlocked. */
+  sourceUrl?: string
 }
 
 export interface LockedAttachmentSource {

package/src/components/MediaMessage/index.tsx

@@ -216,7 +216,7 @@ export function resolveMediaFromMessage(
   }
 }
 
-/** Dark card (sent / own message) — matches LockedAttachment.Creator preview without toggle. */
+/** Dark card (sent / own message) — matches LockedAttachment.Sent preview without toggle. */
 const Creator: React.FC<MediaMessageResolved> = ({
   resolvedUrl,
   resolvedType,
@@ -246,7 +246,7 @@ const Creator: React.FC<MediaMessageResolved> = ({
   )
 }
 
-/** Light card (received) — matches LockedAttachment.Visitor unlocked without Purchased copy. */
+/** Light card (received) — matches LockedAttachment.Received unlocked without Purchased copy. */
 const Visitor: React.FC<MediaMessageResolved> = ({
   resolvedUrl,
   resolvedType,

package/src/index.ts

@@ -53,9 +53,14 @@ export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
+  ComposerCardProps,
+  SentCardProps,
+  ReceivedCardProps,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+  // Deprecated aliases preserved for backwards compatibility:
   CreatorCardProps,
   VisitorCardProps,
-  LockedAttachmentContextValue,
 } from './components/LockedAttachment'
 export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'

package/src/styles.css

@@ -1,6 +1,13 @@
 /* Stream Chat base styles */
 @import 'stream-chat-react/dist/css/v2/index.css';
 
+/* Inherit the host's font instead of stream-chat-react's hardcoded system stack.
+   In admin (federation host) this resolves to Link Sans; on linktr.ee profile
+   pages it resolves to the creator's profile font. */
+.str-chat {
+  --str-chat__font-family: inherit;
+}
+
 /* Dialog component styles - used by messaging components */
 /* Note: Dialogs get moved to the top layer when opened with .showModal() */
 .mes-dialog {