@linktr.ee/messaging-react 4.4.7 → 4.5.0-rc-1788297811

package/src/components/MessageAttachment/Audio/index.tsx

@@ -1,95 +1,75 @@
 import React from 'react'
+import { useMessageContext } from 'stream-chat-react'
 
-import { nativePlayerProps } from '../../../utils/nativeMediaPlayers'
 import Bubble from '../_shared/Bubble'
-import DismissButton from '../_shared/DismissButton'
 import {
   bubbleVariantForState,
   type AudioItem,
   type ComposerExtras,
-  type MediaPreloadMode,
   type MessageAttachmentBaseProps,
   type MessageAttachmentState,
 } from '../types'
 
+import { audioRowRequester } from './audioRowRequester'
+import WaveformAudioRow, {
+  type AudioRowTrailingAction,
+} from './WaveformAudioRow'
+
+// Figma `2754:17710` → `attachment-audio` (`…;2754:8062`): a 299×72
+// card on `#1E2330` with a 20/12/20/20 inset, a uniform 20px radius and
+// no stroke. `@linktr.ee/component-library@11.8.6`'s radius scale is
+// 8 / 16 / 24 / 64 / full, so there is no 20px token to reach for.
+//
+// The radius is uniform in every state, so the card opts out of the
+// same-author corner flattening the text bubbles apply — a 32px control
+// tucked into a 4px corner would collide with it.
+const CARD_WIDTH_CLASS = 'w-[299px]'
+const CARD_PADDING_CLASS = 'py-5 pl-5 pr-3'
+const CARD_RADIUS_CLASS = 'rounded-[20px]'
+
 export interface AudioAttachmentSharedProps extends MessageAttachmentBaseProps {
   /** Audio source URL (`mp3`, `aac`, `wav`, …). */
   src?: string
-  /** MIME type hint — typed onto the inline `<source>` element. */
+  /** MIME type hint — gates playability via the player's `canPlayType` probe. */
   mimeType?: string
   /**
-   * Filename — used as the download default name (consumed by the
-   * native player's kebab menu). The HTML `<audio>` element doesn't
-   * expose a built-in title slot, so we don't render the filename
-   * inside the bubble itself.
+   * Filename — the download default name for the trailing action, and
+   * part of each control's accessible name.
    */
   filename?: string
   /**
    * Stacked audio. Takes precedence over `src` when set. Each item
-   * renders its own native `<audio controls>` player, vertically
-   * stacked inside the same bubble with an 8px gap between players.
-   * Sent + Received only — the composer surface accepts a single
-   * attachment at a time.
+   * renders its own waveform row, vertically stacked inside the same
+   * bubble with an 8px gap. Sent + Received only — the composer surface
+   * accepts a single attachment at a time.
    */
   items?: AudioItem[]
-  /**
-   * `<audio preload>` hint applied to every player on the bubble.
-   * When omitted, the default depends on the rendered shape:
-   *
-   *   - Single audio (no `items`, or `items.length === 1`) →
-   *     `'metadata'` so the native player surfaces duration
-   *     immediately.
-   *   - Stacked audio (`items.length > 1`) → `'none'` so a thread
-   *     of voice memos doesn't fan out N parallel metadata requests
-   *     on first paint.
-   *
-   * Per-track overrides live on `AudioItem.preload`.
-   */
-  preload?: MediaPreloadMode
+  /** See `AudioItem.durationSeconds`. Applies to the single-`src` shape. */
+  durationSeconds?: number
+  /** See `AudioItem.waveformData`. Applies to the single-`src` shape. */
+  waveformData?: number[]
 }
 
 const resolveItems = ({
   src,
   mimeType,
   filename,
+  durationSeconds,
+  waveformData,
   items,
 }: {
   src?: string
   mimeType?: string
   filename?: string
+  durationSeconds?: number
+  waveformData?: number[]
   items?: AudioItem[]
 }): AudioItem[] => {
   if (items && items.length > 0) return items
-  if (src) return [{ src, mimeType, filename }]
+  if (src) return [{ src, mimeType, filename, durationSeconds, waveformData }]
   return []
 }
 
-const NativeAudioPlayer: React.FC<{
-  item: AudioItem
-  preload: MediaPreloadMode
-  trailingAction?: React.ReactNode
-}> = ({ item, preload, trailingAction }) => (
-  <div className="flex items-center gap-2">
-    {/* No `<track>` is rendered — we don't author caption sidecars
-        for chat attachments, and an empty `<track kind="captions" />`
-        emits a runtime warning. Re-add a real track (with `src`,
-        `srcLang`, and `default`) once caption support actually ships.
-        The `jsx-a11y/media-has-caption` rule is suppressed for the
-        same reason. */}
-    {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-    <audio
-      {...nativePlayerProps}
-      src={item.src}
-      controls
-      preload={item.preload ?? preload}
-      className="block min-w-0 flex-1"
-    >
-      {item.mimeType ? <source src={item.src} type={item.mimeType} /> : null}
-    </audio>
-    {trailingAction ?? null}
-  </div>
-)
-
 interface InternalAudioRowProps extends AudioAttachmentSharedProps {
   state: MessageAttachmentState
   onDismiss?: () => void
@@ -101,52 +81,74 @@ const AudioAttachmentRow: React.FC<InternalAudioRowProps> = ({
   mimeType,
   filename,
   items,
+  durationSeconds,
+  waveformData,
   text,
   groupPosition,
-  preload,
   onDismiss,
 }) => {
+  // Namespaces the pooled players per message, so scrolling a
+  // virtualized thread away and back restores the playback position
+  // instead of starting a fresh player. Returns `{}` (silently) outside
+  // a message, which is the composer case.
+  const { message, threadList } = useMessageContext()
+  // Fallback namespace for a card rendered outside a message — the
+  // composer, a story, a consumer mounting one directly. Stable for the
+  // life of the component, which is all those surfaces need; a message
+  // id is preferred because it also survives a virtualized thread
+  // scrolling the row away and back.
+  const instanceId = React.useId()
+
   const variant = bubbleVariantForState(state)
-  const showDismiss = state === 'composer' && !!onDismiss
-  const resolvedItems = resolveItems({ src, mimeType, filename, items })
+  const resolvedItems = resolveItems({
+    src,
+    mimeType,
+    filename,
+    durationSeconds,
+    waveformData,
+    items,
+  })
 
   if (resolvedItems.length === 0) {
     return null
   }
 
-  // Default rule: surface duration immediately for a single player,
-  // but avoid fanning out N metadata requests when the bubble is a
-  // thread of voice memos. An explicit `preload` prop overrides;
-  // per-track overrides live on `AudioItem.preload`.
-  const resolvedPreload: MediaPreloadMode =
-    preload ?? (resolvedItems.length > 1 ? 'none' : 'metadata')
+  const requesterBase = message?.id
+    ? `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`
+    : instanceId
+
+  // The composer's single action is removing the draft; every other
+  // surface carries forward the download the native player's own kebab
+  // used to provide. See `AudioRowTrailingAction`.
+  // A composer draft mounted without `onDismiss` gets no trailing
+  // control: falling through to `download` would hand a draft the
+  // sent-only action, which the native player it replaces never did.
+  const trailingAction: AudioRowTrailingAction | undefined =
+    state === 'composer'
+      ? onDismiss
+        ? { kind: 'dismiss', onDismiss }
+        : undefined
+      : { kind: 'download' }
 
   return (
     <Bubble
       variant={variant}
       text={text}
       groupPosition={groupPosition}
+      bordered={false}
+      widthClassName={CARD_WIDTH_CLASS}
+      paddingClassName={CARD_PADDING_CLASS}
+      radiusClassName={CARD_RADIUS_CLASS}
       data-testid="audio-attachment"
     >
-      {/* Native `<audio controls>` already exposes a download in its
-          kebab menu, so we don't render a separate Download button.
-          The element also has no built-in title slot — the dismiss
-          button (Composer only) sits inline next to the player.
-          Stacked players get an 8px vertical gap so each track reads
-          as a discrete attachment. */}
       <div className="flex flex-col gap-2">
         {resolvedItems.map((item, index) => (
-          <NativeAudioPlayer
+          <WaveformAudioRow
             key={`${item.src}-${index}`}
             item={item}
-            preload={resolvedPreload}
-            trailingAction={
-              // Composer only supports a single attachment, so the
-              // dismiss control sits on the only player.
-              showDismiss && index === 0 ? (
-                <DismissButton onClick={onDismiss!} variant="inline" />
-              ) : undefined
-            }
+            variant={variant}
+            requester={audioRowRequester(requesterBase, index)}
+            trailingAction={trailingAction}
           />
         ))}
       </div>
@@ -166,8 +168,10 @@ export interface AudioComposerProps extends ComposerExtras {
   src?: string
   mimeType?: string
   filename?: string
-  /** See `AudioAttachmentSharedProps.preload`. */
-  preload?: MediaPreloadMode
+  /** See `AudioItem.durationSeconds`. */
+  durationSeconds?: number
+  /** See `AudioItem.waveformData`. */
+  waveformData?: number[]
 }
 export type AudioSentProps = AudioAttachmentSharedProps
 export type AudioReceivedProps = AudioAttachmentSharedProps

package/src/components/MessageAttachment/MessageAttachment.behavior.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../test/utils'
 
 import { triggerDownload } from './_shared/triggerDownload'
 import { bubbleVariantForState, bubbleGroupPositionFromStream } from './types'
@@ -14,7 +14,8 @@ vi.mock('./_shared/triggerDownload', () => ({
 const mockedDownload = vi.mocked(triggerDownload)
 
 describe('MessageAttachment behavior', () => {
-  it('renders file rows with precedence, fallback names, and cancellation', () => {
+  it('renders file rows with precedence, fallback names, and cancellation', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn(() => false)
     const { rerender } = renderWithProviders(
       <MessageAttachment.File.Sent
@@ -32,14 +33,14 @@ describe('MessageAttachment behavior', () => {
     )
     expect(screen.getByText('first.pdf')).toBeInTheDocument()
     expect(screen.getByText('second.pdf')).toBeInTheDocument()
-    fireEvent.click(screen.getByRole('button', { name: 'Download first.pdf' }))
+    await user.click(screen.getByRole('button', { name: 'Download first.pdf' }))
     expect(onClick).toHaveBeenCalledWith(0)
     expect(mockedDownload).not.toHaveBeenCalled()
 
     rerender(
       <MessageAttachment.File.Sent src="https://cdn.example.com/fallback.txt" />
     )
-    fireEvent.click(
+    await user.click(
       screen.getByRole('button', { name: 'Download fallback.txt' })
     )
     expect(mockedDownload).toHaveBeenCalledWith(
@@ -48,10 +49,12 @@ describe('MessageAttachment behavior', () => {
     )
   })
 
-  it('renders no file when inputs are absent and supports composer dismissal', () => {
+  it('renders no file when inputs are absent and supports composer dismissal', async () => {
+    const user = userEvent.setup()
     const { container } = renderWithProviders(
       <MessageAttachment.File.Received />
     )
+    // eslint-disable-next-line testing-library/no-node-access -- the null-rendering DOM contract has no semantic query.
     expect(container.firstChild).toBeNull()
     const onDismiss = vi.fn()
     renderWithProviders(
@@ -60,11 +63,12 @@ describe('MessageAttachment behavior', () => {
         onDismiss={onDismiss}
       />
     )
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    await user.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
     expect(onDismiss).toHaveBeenCalledOnce()
   })
 
-  it('renders image stacks, forwards loading, and supports click cancellation', () => {
+  it('renders image stacks, forwards loading, and supports click cancellation', async () => {
+    const user = userEvent.setup()
     const onClick = vi.fn(() => false)
     renderWithProviders(
       <MessageAttachment.Image.Sent
@@ -79,12 +83,13 @@ describe('MessageAttachment behavior', () => {
     )
     expect(screen.getAllByRole('img')[0]).toHaveAttribute('loading', 'lazy')
     expect(screen.getAllByRole('img')).toHaveLength(2)
-    fireEvent.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
+    await user.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
     expect(onClick).toHaveBeenCalledWith(1)
     expect(screen.queryByTestId('image-viewer')).not.toHaveAttribute('open')
   })
 
-  it('opens images at the clicked index and suffixes a shared filename', () => {
+  it('opens images at the clicked index and suffixes a shared filename', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MessageAttachment.Image.Sent
         filename="photos.jpg"
@@ -94,7 +99,7 @@ describe('MessageAttachment behavior', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
+    await user.click(screen.getByRole('button', { name: 'Open image 2 of 2' }))
     expect(screen.getByTestId('image-viewer')).toHaveAttribute(
       'aria-label',
       'photos.jpg (2)'
@@ -105,7 +110,8 @@ describe('MessageAttachment behavior', () => {
     )
   })
 
-  it('renders video posters and posterless first-frame previews', () => {
+  it('renders video posters and posterless first-frame previews', async () => {
+    const user = userEvent.setup()
     const onDismiss = vi.fn()
     const { rerender } = renderWithProviders(
       <MessageAttachment.Video.Composer
@@ -119,7 +125,7 @@ describe('MessageAttachment behavior', () => {
     expect(
       screen.getByRole('img', { name: 'Video 1 thumbnail' })
     ).toHaveAttribute('src', '/poster.jpg')
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    await user.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
     expect(onDismiss).toHaveBeenCalledOnce()
     rerender(
       <MessageAttachment.Video.Sent src="https://cdn.example.com/video.mp4" />
@@ -172,7 +178,8 @@ describe('MessageAttachment behavior', () => {
     expect(screen.queryByLabelText('Video 1 thumbnail')).not.toBeInTheDocument()
   })
 
-  it('supports PDF titles, download actions, dismiss, and viewer index', () => {
+  it('supports PDF titles, download actions, dismiss, and viewer index', async () => {
+    const user = userEvent.setup()
     const onDismiss = vi.fn()
     renderWithProviders(
       <MessageAttachment.Pdf.Composer
@@ -182,7 +189,7 @@ describe('MessageAttachment behavior', () => {
       />
     )
     expect(screen.getByText('Quarterly report')).toBeInTheDocument()
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
+    await user.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
     expect(onDismiss).toHaveBeenCalledOnce()
 
     renderWithProviders(
@@ -193,7 +200,7 @@ describe('MessageAttachment behavior', () => {
         ]}
       />
     )
-    fireEvent.click(screen.getByRole('button', { name: 'Open two.pdf' }))
+    await user.click(screen.getByRole('button', { name: 'Open two.pdf' }))
     expect(screen.getAllByTestId('pdf-viewer').at(-1)).toHaveAttribute(
       'aria-label',
       'two.pdf'