@linktr.ee/messaging-react 1.37.0 → 1.38.0-rc-1777617124

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { Attachment } from 'stream-chat';
 import { Channel } from 'stream-chat';
 import { ChannelFilters } from 'stream-chat';
 import { ChannelListProps as ChannelListProps_2 } from 'stream-chat-react';
@@ -315,13 +316,28 @@ export declare interface LockedAttachmentSource {
     thumbnailUrl?: string;
 }
 
-export declare const MediaMessage: default_2.FC<MediaMessageProps>;
+export declare const MediaMessage: default_2.FC<MediaMessageProps> & {
+    Creator: default_2.FC<{
+        message: LocalMessage;
+    }>;
+    Visitor: default_2.FC<{
+        message: LocalMessage;
+    }>;
+};
 
 export declare interface MediaMessageProps {
     message: LocalMessage;
     isMyMessage?: boolean;
 }
 
+export declare interface MediaMessageResolved {
+    resolvedUrl: string;
+    resolvedType: string;
+    title?: string;
+    fileSize?: number;
+    thumbnailUrl?: string;
+}
+
 declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | DmAgentSystemType;
 
 export declare interface MessageMetadata {
@@ -505,6 +521,10 @@ export declare interface ParticipantSource {
  */
 declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
 
+export declare function resolveLinkAttachment(message: LocalMessage): Attachment | undefined;
+
+export declare function resolveMediaFromMessage(message: LocalMessage): MediaMessageResolved | null;
+
 export declare function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K];
 
 /**

package/dist/index.js

@@ -1,23 +1,25 @@
-import { A as e, a as t, C as i, b as n, c as o, d as g, F as r, e as m, L as u, f as M, h as c, i as l, j as h, P as C, k as P, u as d, l as L, m as p, n as v } from "./index-DOsC03ZN.js";
+import { b as e, c as t, C as i, d as n, e as o, f as r, F as g, g as M, L as m, M as l, h as u, i as c, j as h, P as d, k as v, r as C, l as L, u as P, m as k, n as p, o as A } from "./index-B_4pciGp.js";
 export {
   e as ActionButton,
   t as Avatar,
   i as ChannelEmptyState,
   n as ChannelList,
   o as ChannelView,
-  g as CustomMessageProvider,
-  r as FaqList,
-  m as FaqListItem,
-  u as LockedAttachment,
-  M as MediaMessage,
-  c as MessageVoteButtons,
-  l as MessagingProvider,
+  r as CustomMessageProvider,
+  g as FaqList,
+  M as FaqListItem,
+  m as LockedAttachment,
+  l as MediaMessage,
+  u as MessageVoteButtons,
+  c as MessagingProvider,
   h as MessagingShell,
-  C as ParticipantPicker,
-  P as formatRelativeTime,
-  d as useCustomMessage,
-  L as useMessageVote,
+  d as ParticipantPicker,
+  v as formatRelativeTime,
+  C as resolveLinkAttachment,
+  L as resolveMediaFromMessage,
+  P as useCustomMessage,
+  k as useMessageVote,
   p as useMessaging,
-  v as useParticipants
+  A as useParticipants
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.37.0",
+  "version": "1.38.0-rc-1777617124",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/{LockedAttachment/components → AttachmentCard}/MediaPlayer.tsx

@@ -1,9 +1,10 @@
 import { CircleNotchIcon, PauseIcon, PlayIcon } from '@phosphor-icons/react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
-import { isDevBuild } from '../../../utils/isDevBuild'
-import { renderTypeIcon } from '../utils/icons'
-import { getSourceType } from '../utils/mimeType'
+import { isDevBuild } from '../../utils/isDevBuild'
+
+import { renderTypeIcon } from './utils/icons'
+import { getSourceType } from './utils/mimeType'
 
 type TouchEventUnion =
   | MouseEvent

package/src/components/AttachmentCard/Thumbnail.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react'
+
+import MediaPlayer, { type MediaPlayerProps } from './MediaPlayer'
+import { renderTypeIcon } from './utils/icons'
+import { getSourceType } from './utils/mimeType'
+
+export type AttachmentThumbnailVariant = 'light' | 'dark'
+
+export interface AttachmentThumbnailProps {
+  mimeType: string
+  sourceUrl?: string
+  thumbnailUrl?: string
+  title?: string
+  variant: AttachmentThumbnailVariant
+  /** Extra props passed to MediaPlayer when source is video or audio. */
+  mediaPlayerProps?: Partial<
+    Pick<
+      MediaPlayerProps,
+      'autoPlay' | 'loop' | 'muted' | 'controls' | 'onContainerClick'
+    >
+  >
+  /**
+   * When true (Visitor unlocked image/document), use aspect-video + object-contain fade-in.
+   */
+  containedImage?: boolean
+}
+
+const placeholderIconClass = (variant: AttachmentThumbnailVariant) =>
+  variant === 'dark' ? 'size-12 text-white/20' : 'size-12 text-black/20'
+
+const posterShellClass = (variant: AttachmentThumbnailVariant) =>
+  variant === 'dark'
+    ? 'aspect-video overflow-hidden bg-white/10'
+    : 'aspect-video overflow-hidden bg-black/5'
+
+/**
+ * Renders the media preview area for attachment cards (LockedAttachment, MediaMessage).
+ * Overlays (dim, lock, eye toggle) are composed by the parent.
+ */
+const AttachmentThumbnail: React.FC<AttachmentThumbnailProps> = ({
+  mimeType,
+  sourceUrl,
+  thumbnailUrl,
+  title,
+  variant,
+  mediaPlayerProps,
+  containedImage = false,
+}) => {
+  const sourceType = getSourceType(mimeType)
+  const [sourceReady, setSourceReady] = useState(false)
+
+  if (sourceUrl && (sourceType === 'video' || sourceType === 'audio')) {
+    return (
+      <MediaPlayer
+        source={sourceUrl}
+        mimeType={mimeType}
+        poster={thumbnailUrl}
+        controls
+        {...mediaPlayerProps}
+      />
+    )
+  }
+
+  if (sourceUrl && sourceType === 'image') {
+    if (containedImage) {
+      return (
+        <div className="relative aspect-video overflow-hidden bg-black/5">
+          <img
+            src={sourceUrl}
+            alt={title ?? ''}
+            className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+            draggable={false}
+            onLoad={() => setSourceReady(true)}
+          />
+        </div>
+      )
+    }
+    return (
+      <img
+        src={sourceUrl}
+        alt={title ?? ''}
+        className="block w-full"
+        draggable={false}
+      />
+    )
+  }
+
+  if (sourceUrl && sourceType === 'document') {
+    if (thumbnailUrl) {
+      if (containedImage) {
+        return (
+          <div className="relative aspect-video overflow-hidden bg-black/5">
+            <img
+              src={thumbnailUrl}
+              alt={title ?? ''}
+              className={`absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${sourceReady ? 'opacity-100' : 'opacity-0'}`}
+              draggable={false}
+              onLoad={() => setSourceReady(true)}
+            />
+          </div>
+        )
+      }
+      return (
+        <img
+          src={thumbnailUrl}
+          alt=""
+          className="block w-full"
+          draggable={false}
+        />
+      )
+    }
+    return (
+      <div
+        className={`flex aspect-video w-full items-center justify-center ${variant === 'dark' ? 'bg-white/10' : 'bg-black/5'}`}
+      >
+        {renderTypeIcon(mimeType, {
+          className: placeholderIconClass(variant),
+          weight: 'regular',
+        })}
+      </div>
+    )
+  }
+
+  // Poster-only or empty (no sourceUrl)
+  if (thumbnailUrl) {
+    return (
+      <div className={`relative ${posterShellClass(variant)}`}>
+        <img
+          src={thumbnailUrl}
+          alt={title ?? ''}
+          draggable={false}
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`flex aspect-video w-full items-center justify-center ${variant === 'dark' ? 'bg-white/10' : 'bg-black/5'}`}
+    >
+      {renderTypeIcon(mimeType, {
+        className: placeholderIconClass(variant),
+        weight: 'regular',
+      })}
+    </div>
+  )
+}
+
+export default AttachmentThumbnail

package/src/components/AttachmentCard/index.tsx

@@ -0,0 +1,114 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { renderTypeIcon } from './utils/icons'
+
+export { default as AttachmentThumbnail } from './Thumbnail'
+export type {
+  AttachmentThumbnailProps,
+  AttachmentThumbnailVariant,
+} from './Thumbnail'
+export { default as MediaPlayer } from './MediaPlayer'
+export type { MediaPlayerProps } from './MediaPlayer'
+export { renderTypeIcon, getTypeIcon, MEDIA_TYPE_ICON } from './utils/icons'
+export {
+  getSourceType,
+  getDocumentIconType,
+  type AttachmentSourceType,
+  type DocumentIconType,
+} from './utils/mimeType'
+
+export interface AttachmentCardProps {
+  variant: 'light' | 'dark'
+  thumbnail: React.ReactNode
+  title?: string
+  placeholderTitle?: string
+  mimeType: string
+  detail?: string
+  statusBadge?: React.ReactNode
+  action?: React.ReactNode
+  topLeft?: React.ReactNode
+  topRight?: React.ReactNode
+  rootRef?: React.Ref<HTMLDivElement>
+  'data-testid'?: string
+}
+
+const AttachmentCard: React.FC<AttachmentCardProps> = ({
+  variant,
+  thumbnail,
+  title,
+  placeholderTitle = 'Attachment title',
+  mimeType,
+  detail,
+  statusBadge,
+  action,
+  topLeft,
+  topRight,
+  rootRef,
+  'data-testid': dataTestId,
+}) => {
+  const isDark = variant === 'dark'
+  const displayTitle = isDark ? (title ?? placeholderTitle) : (title ?? '')
+  const titleDimmed = isDark && !title
+
+  return (
+    <div
+      ref={rootRef}
+      data-testid={dataTestId}
+      className={classNames(
+        'relative w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]',
+        isDark ? 'bg-[#121110]' : 'bg-white'
+      )}
+    >
+      {topLeft ? (
+        <div className="pointer-events-auto absolute left-3 top-3 z-50">{topLeft}</div>
+      ) : null}
+      {topRight ? (
+        <div className="pointer-events-auto absolute right-3 top-3 z-50">{topRight}</div>
+      ) : null}
+
+      {thumbnail}
+
+      <div className="px-4 pb-3 pt-3">
+        {displayTitle.trim() !== '' && (
+          <p
+            className={classNames('mb-0.5 truncate text-base font-medium', {
+              'text-black': !isDark,
+              'text-white/30': isDark && titleDimmed,
+              'text-white': isDark && !titleDimmed,
+            })}
+          >
+            {displayTitle}
+          </p>
+        )}
+
+        <div className="flex flex-wrap items-center gap-1">
+          {renderTypeIcon(mimeType, {
+            className: classNames(
+              'size-5 shrink-0',
+              isDark ? 'text-white/55' : 'text-black/55'
+            ),
+            weight: 'regular',
+          })}
+
+          {detail != null && detail !== '' && (
+            <span
+              className={classNames(
+                'text-xs font-medium',
+                isDark ? 'text-white/55' : 'text-black/55'
+              )}
+            >
+              {detail}
+            </span>
+          )}
+
+          {statusBadge}
+        </div>
+
+        {action}
+      </div>
+    </div>
+  )
+}
+
+export default AttachmentCard

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

@@ -9,14 +9,12 @@ import {
 import classNames from 'classnames'
 import React, { useCallback, useRef, useState } from 'react'
 
+import AttachmentCard, { AttachmentThumbnail } from '../../../AttachmentCard'
 import type {
   LockedAttachmentBaseProps,
   LockedAttachmentSource,
   PaymentStatus,
 } from '../../types'
-import { renderTypeIcon } from '../../utils/icons'
-
-import CardThumbnail from './CardThumbnail'
 
 export interface CreatorCardProps extends LockedAttachmentBaseProps {
   placeholderTitle?: string
@@ -27,6 +25,65 @@ export interface CreatorCardProps extends LockedAttachmentBaseProps {
   onFetchSource?: () => Promise<LockedAttachmentSource | void>
 }
 
+function headerSlots(props: {
+  onDismiss?: () => void
+  onToggle?: () => void
+  isExpanded?: boolean
+  paymentStatus?: PaymentStatus
+  isLoading?: boolean
+}): { topLeft?: React.ReactNode; topRight?: React.ReactNode } {
+  const { onDismiss, onToggle, isExpanded, paymentStatus, isLoading } = props
+
+  if (onDismiss) {
+    return {
+      topLeft: undefined,
+      topRight: (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
+          aria-label="Dismiss attachment"
+        >
+          <XIcon className="size-4" weight="bold" />
+        </button>
+      ),
+    }
+  }
+
+  if (onToggle) {
+    const Icon = isExpanded ? EyeIcon : EyeSlashIcon
+    return {
+      topLeft: (
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex size-8 items-center justify-center rounded-full bg-black/60 text-white"
+          aria-label={isExpanded ? 'Hide preview' : 'Show preview'}
+          aria-pressed={isExpanded}
+        >
+          <Icon className="size-4" weight="fill" />
+        </button>
+      ),
+      topRight: undefined,
+    }
+  }
+
+  const Icon = paymentStatus === 'paid' ? LockOpenIcon : LockIcon
+
+  return {
+    topLeft: (
+      <div className="flex size-8 items-center justify-center rounded-full bg-black/60 text-white">
+        {isLoading ? (
+          <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+        ) : (
+          <Icon className="size-4" weight="fill" />
+        )}
+      </div>
+    ),
+    topRight: undefined,
+  }
+}
+
 const CreatorCard: React.FC<CreatorCardProps> = ({
   title,
   mimeType = 'application/octet-stream',
@@ -78,122 +135,75 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
 
   const toggleHandler = onFetchSource || onPreviewClick ? handleToggle : undefined
 
-  return (
-    <div className="relative w-[280px] select-none overflow-hidden rounded-[24px] bg-[#121110] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]">
-      <CardHeader
-        onDismiss={onDismiss}
-        onToggle={isBusy ? undefined : toggleHandler}
-        isExpanded={isPreviewVisible}
-        paymentStatus={paymentStatus}
-        isLoading={isBusy}
-      />
-
-      <CardThumbnail
-        title={title}
-        sourceUrl={effectiveSourceUrl}
-        thumbnailUrl={effectiveThumbnailUrl}
-        mimeType={mimeType}
-        onToggle={isBusy ? undefined : toggleHandler}
-      />
-
-      <div className="px-4 pb-3 pt-3">
-        <p
-          className={classNames('mb-0.5 truncate text-base font-medium', {
-            'text-white/30': !title,
-            'text-white': !!title,
+  const statusBadge =
+    paymentStatus === 'paid' ? (
+      <React.Fragment>
+        <span className="text-xs font-medium text-white/55">&bull;</span>
+        <span className="text-xs font-medium text-[#34c759]">Sold</span>
+        <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
+      </React.Fragment>
+    ) : (
+      <React.Fragment>
+        <span className="text-xs font-medium text-white/55">&bull;</span>
+        <span
+          className={classNames('text-xs font-medium', {
+            'text-white/30': !amountText,
+            'text-white/55': !!amountText,
           })}
         >
-          {title || placeholderTitle}
-        </p>
-
-        <div className="flex items-center gap-1">
-          {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-white/55',
-            weight: 'regular',
-          })}
-
-          {detail && (
-            <span className="text-xs font-medium text-white/55">{detail}</span>
-          )}
-
-          {paymentStatus === 'paid' ? (
-            <React.Fragment>
-              <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span className="text-xs font-medium text-[#34c759]">Sold</span>
-              <CheckCircleIcon className="size-4 text-[#34c759]" weight="bold" />
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              <span className="text-xs font-medium text-white/55">&bull;</span>
-              <span
-                className={classNames('text-xs font-medium', {
-                  'text-white/30': !amountText,
-                  'text-white/55': !!amountText,
-                })}
-              >
-                {amountText || placeholderAmountText}
-              </span>
-            </React.Fragment>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface CardHeaderProps {
-  onDismiss?: () => void
-  onToggle?: () => void
-  isExpanded?: boolean
-  paymentStatus?: PaymentStatus
-  isLoading?: boolean
-}
-
-const CardHeader: React.FC<CardHeaderProps> = ({
-  onDismiss,
-  onToggle,
-  isExpanded,
-  paymentStatus,
-  isLoading,
-}) => {
-  if (onDismiss) {
-    return (
-      <button
-        type="button"
-        onClick={onDismiss}
-        className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white right-3"
-        aria-label="Dismiss attachment"
-      >
-        <XIcon className="size-4" weight="bold" />
-      </button>
-    )
-  }
-
-  if (onToggle) {
-    const Icon = isExpanded ? EyeIcon : EyeSlashIcon
-    return (
-      <button
-        type="button"
-        onClick={onToggle}
-        className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3"
-        aria-label={isExpanded ? 'Hide preview' : 'Show preview'}
-        aria-pressed={isExpanded}
-      >
-        <Icon className="size-4" weight="fill" />
-      </button>
+          {amountText || placeholderAmountText}
+        </span>
+      </React.Fragment>
     )
-  }
 
-  const Icon = paymentStatus === 'paid' ? LockOpenIcon : LockIcon
+  const { topLeft, topRight } = headerSlots({
+    onDismiss,
+    onToggle: isBusy ? undefined : toggleHandler,
+    isExpanded: isPreviewVisible,
+    paymentStatus,
+    isLoading: isBusy,
+  })
 
   return (
-    <div className="absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3">
-      {isLoading ? (
-        <span className="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-      ) : (
-        <Icon className="size-4" weight="fill" />
-      )}
-    </div>
+    <AttachmentCard
+      variant="dark"
+      title={title}
+      placeholderTitle={placeholderTitle}
+      mimeType={mimeType}
+      detail={detail}
+      statusBadge={statusBadge}
+      topLeft={topLeft}
+      topRight={topRight}
+      thumbnail={
+        <button
+          type="button"
+          disabled={!toggleHandler || isBusy}
+          className={classNames(
+            'relative block w-full overflow-hidden border-0 bg-white/10 p-0 text-left appearance-none',
+            { 'cursor-pointer': !!toggleHandler && !isBusy, 'cursor-default': !toggleHandler || isBusy }
+          )}
+          onClick={isBusy ? undefined : toggleHandler}
+          aria-label={toggleHandler ? 'Toggle preview' : undefined}
+          aria-busy={isBusy}
+        >
+          <AttachmentThumbnail
+            mimeType={mimeType}
+            sourceUrl={effectiveSourceUrl}
+            thumbnailUrl={effectiveThumbnailUrl}
+            title={title}
+            variant="dark"
+            mediaPlayerProps={
+              effectiveSourceUrl
+                ? { autoPlay: true, loop: true, controls: true, muted: false }
+                : undefined
+            }
+          />
+          {!isPreviewVisible && (
+            <div className="pointer-events-none absolute inset-0 bg-black/30" />
+          )}
+        </button>
+      }
+    />
   )
 }