@linktr.ee/messaging-react 3.31.0-rc-1785485102 → 3.31.0

package/src/components/MessageAttachment/Audio/AudioAttachment.stories.tsx

@@ -1,8 +1,6 @@
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
-import { Chat, WithAudioPlayback } from 'stream-chat-react'
 
-import { createMockStreamChatClient } from '../../../testing/createMockStreamChatClient'
 import {
   StoryGrid,
   StoryHeading,
@@ -16,63 +14,27 @@ import AudioAttachment from '.'
 const AUDIO_SRC =
   'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
 
-/** Resolves nothing, so the metadata probe never fills the duration slot. */
-const UNREACHABLE_SRC = 'https://cdn.example.invalid/unreachable.mp3'
-
-/**
- * The exact amplitudes Figma draws (`2754:17710` → `sound-wave`
- * `…;2754:8065`), as bar heights on the 30px track normalised to `0..1`.
- * Rendering the design's own values is what makes these stories a usable
- * pixel reference.
- */
-const FIGMA_WAVEFORM = [
-  4, 4, 4, 4, 24, 20, 16, 21, 8, 9, 13, 15, 16, 21, 24, 18, 14, 11, 11, 11, 11,
-  11, 18, 24, 24, 30, 25, 21, 19, 16, 11, 12, 8, 4, 4,
-].map((height) => height / 30)
-
 const STACK_AUDIO: AudioItem[] = [
   {
     src: AUDIO_SRC,
     mimeType: 'audio/mpeg',
     filename: 'Take 1 — full mix.mp3',
-    durationSeconds: 12,
-    waveformData: FIGMA_WAVEFORM,
   },
   {
     src: AUDIO_SRC,
     mimeType: 'audio/mpeg',
     filename: 'Take 2 — vocals isolated.mp3',
-    durationSeconds: 95,
-    waveformData: [...FIGMA_WAVEFORM].reverse(),
   },
   {
     src: AUDIO_SRC,
     mimeType: 'audio/mpeg',
     filename: 'Take 3 — instrumental only.mp3',
-    durationSeconds: 3812,
   },
 ]
 
-/**
- * The card's playback comes from `stream-chat-react`'s pooled
- * `AudioPlayer`, which `<Channel>` mounts in production. Mounting the
- * pool directly gives the stories the same contract — real playback,
- * one player at a time across the page — without needing a channel that
- * can `watch()` against a backend. Without it every play / seek control
- * renders disabled.
- */
-const withAudioPlayback: Decorator = (Story) => (
-  <Chat client={createMockStreamChatClient({ id: 'story-user' })}>
-    <WithAudioPlayback>
-      <Story />
-    </WithAudioPlayback>
-  </Chat>
-)
-
 const meta: Meta = {
   title: 'MessageAttachment/Audio',
   parameters: { layout: 'fullscreen' },
-  decorators: [withAudioPlayback],
 }
 export default meta
 
@@ -81,16 +43,16 @@ const handleDismiss = () => {
 }
 
 /**
- * The design's waveform player card: a 299×72 bubble holding a 32px
- * play toggle, a 35-bar waveform with a progress fill and an invisible
- * native seek control over it, the duration, and a 32px trailing action
- * — Remove in the composer, Download once sent.
+ * Native `<audio controls>` player inside a chat bubble. The browser
+ * chrome provides play / scrub / volume / kebab-menu (which already
+ * includes a download), so we don't render any extra controls.
+ * Composer adds an inline dismiss `×` to the right of the player.
  */
 export const Single: StoryFn = () => (
   <StoryPage>
     <StoryHeading
       title="Audio attachment"
-      description="Play to watch the fill advance bar by bar and the duration count up; click or drag the waveform to seek, or Tab to it and use the arrow keys. Starting a second card pauses the first — one player at a time across the whole thread."
+      description="Native browser audio chrome — play, scrub, volume, and the built-in download in the kebab menu. Composer renders an inline dismiss button next to the player."
     />
     <StoryGrid>
       <StoryRow
@@ -100,8 +62,6 @@ export const Single: StoryFn = () => (
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
-            durationSeconds={12}
-            waveformData={FIGMA_WAVEFORM}
             onDismiss={handleDismiss}
           />
         }
@@ -110,8 +70,6 @@ export const Single: StoryFn = () => (
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
-            durationSeconds={12}
-            waveformData={FIGMA_WAVEFORM}
           />
         }
         received={
@@ -119,8 +77,6 @@ export const Single: StoryFn = () => (
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
-            durationSeconds={12}
-            waveformData={FIGMA_WAVEFORM}
           />
         }
       />
@@ -128,28 +84,20 @@ export const Single: StoryFn = () => (
   </StoryPage>
 )
 
-/**
- * Every case where no amplitudes can be produced — a decode failure, an
- * unsupported codec, a file over the composer's decode ceiling, a clip
- * re-staged from *Recently shared* (whose `File` is a zero-byte
- * placeholder), or anything sent before `waveform_data` was persisted
- * (legacy web, the mobile app, a visitor).
- */
-export const NoWaveform: StoryFn = () => (
+export const SingleWithText: StoryFn = () => (
   <StoryPage>
     <StoryHeading
-      title="Degraded states"
-      description="The waveform falls back to every bar at the design's 4px minimum, so the card keeps exactly the same silhouette and the progress fill still tracks playback. An unknown duration holds its slot as `--:--` until a metadata probe resolves it."
+      title="Audio with caption"
+      description="Caption sits below the player, inside the same bubble."
     />
     <StoryGrid>
       <StoryRow
-        label="No waveform"
+        label="Caption"
         composer={
           <AudioAttachment.Composer
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
-            filename="Voice note.m4a"
-            durationSeconds={12}
+            filename="Morning meditation.mp3"
             onDismiss={handleDismiss}
           />
         }
@@ -157,69 +105,16 @@ export const NoWaveform: StoryFn = () => (
           <AudioAttachment.Sent
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
-            filename="Voice note.m4a"
-            durationSeconds={12}
+            filename="Morning meditation.mp3"
+            text="Recorded this morning before training"
           />
         }
         received={
           <AudioAttachment.Received
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
-            filename="Voice note.m4a"
-            durationSeconds={12}
-          />
-        }
-      />
-      <StoryRow
-        label="No waveform, no duration"
-        composer={
-          <AudioAttachment.Composer
-            src={UNREACHABLE_SRC}
-            filename="Unreachable.mp3"
-            onDismiss={handleDismiss}
-          />
-        }
-        sent={
-          <AudioAttachment.Sent
-            src={UNREACHABLE_SRC}
-            filename="Unreachable.mp3"
-          />
-        }
-        received={
-          <AudioAttachment.Received
-            src={UNREACHABLE_SRC}
-            filename="Unreachable.mp3"
-          />
-        }
-      />
-      <StoryRow
-        label="Unplayable codec"
-        composer={
-          <AudioAttachment.Composer
-            src={AUDIO_SRC}
-            mimeType="audio/x-made-up"
-            filename="Master.aiff"
-            durationSeconds={12}
-            waveformData={FIGMA_WAVEFORM}
-            onDismiss={handleDismiss}
-          />
-        }
-        sent={
-          <AudioAttachment.Sent
-            src={AUDIO_SRC}
-            mimeType="audio/x-made-up"
-            filename="Master.aiff"
-            durationSeconds={12}
-            waveformData={FIGMA_WAVEFORM}
-          />
-        }
-        received={
-          <AudioAttachment.Received
-            src={AUDIO_SRC}
-            mimeType="audio/x-made-up"
-            filename="Master.aiff"
-            durationSeconds={12}
-            waveformData={FIGMA_WAVEFORM}
+            filename="Morning meditation.mp3"
+            text="Recorded this morning before training"
           />
         }
       />
@@ -228,29 +123,67 @@ export const NoWaveform: StoryFn = () => (
 )
 
 /**
- * Stacked audio — multiple clips clustered into one bubble, as
- * `StreamAttachmentMessage` does for consecutive same-kind attachments.
- * Sent + Received only: the composer accepts one attachment at a time.
+ * Stacked audio attachments — multiple clips inside one bubble. Each
+ * clip renders its own native `<audio controls>` player, vertically
+ * stacked with a hairline separator.
+ *
+ * Sent + Received only — the composer surface accepts a single
+ * attachment at a time.
  */
 export const Stacked: StoryFn = () => (
   <StoryPage>
     <StoryHeading
       title="Stacked audio"
-      description="Each clip is its own row and its own player, stacked with an 8px gap. Only one can play at a time. The third row has no waveform, so it shows the flat fallback beside two real ones."
+      description="Each clip plays independently with its own native controls. Composer column is intentionally blank — the composer accepts a single attachment at a time."
     />
     <StoryGrid>
       <StoryRow
         label="2 clips"
+        composer={
+          <AudioAttachment.Composer
+            src={AUDIO_SRC}
+            mimeType="audio/mpeg"
+            filename="Morning meditation.mp3"
+            onDismiss={handleDismiss}
+          />}
         sent={<AudioAttachment.Sent items={STACK_AUDIO.slice(0, 2)} />}
         received={<AudioAttachment.Received items={STACK_AUDIO.slice(0, 2)} />}
       />
       <StoryRow
         label="3 clips"
+        composer={
+          <AudioAttachment.Composer
+            src={AUDIO_SRC}
+            mimeType="audio/mpeg"
+            filename="Morning meditation.mp3"
+            onDismiss={handleDismiss}
+          />}
         sent={<AudioAttachment.Sent items={STACK_AUDIO} />}
         received={<AudioAttachment.Received items={STACK_AUDIO} />}
       />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Stacked audio with an accompanying caption.
+ *  Sent + Received only — see `Stacked` for the rationale. */
+export const StackedWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked audio with caption"
+      description="Caption sits inside the same bubble, below the player stack. Composer column is intentionally blank — the composer accepts a single attachment at a time."
+    />
+    <StoryGrid>
       <StoryRow
         label="3 clips + caption"
+        composer={
+          <AudioAttachment.Composer
+            src={AUDIO_SRC}
+            mimeType="audio/mpeg"
+            filename="Morning meditation.mp3"
+            onDismiss={handleDismiss}
+          />
+        }
         sent={
           <AudioAttachment.Sent
             items={STACK_AUDIO}
@@ -267,45 +200,3 @@ export const Stacked: StoryFn = () => (
     </StoryGrid>
   </StoryPage>
 )
-
-/**
- * The card keeps a uniform 20px radius in every grouping position — a
- * 32px control tucked into a 4px flattened corner would collide with it
- * — so a run of audio bubbles reads as a stack of identical cards.
- */
-export const Grouped: StoryFn = () => (
-  <StoryPage>
-    <StoryHeading
-      title="Same-author run"
-      description="`groupPosition` still serialises onto the bubble, but the audio card opts out of the corner flattening the text bubbles apply."
-    />
-    <StoryGrid>
-      {(['first', 'middle', 'end'] as const).map((groupPosition) => (
-        <StoryRow
-          key={groupPosition}
-          label={groupPosition}
-          sent={
-            <AudioAttachment.Sent
-              src={AUDIO_SRC}
-              mimeType="audio/mpeg"
-              filename="Morning meditation.mp3"
-              durationSeconds={12}
-              waveformData={FIGMA_WAVEFORM}
-              groupPosition={groupPosition}
-            />
-          }
-          received={
-            <AudioAttachment.Received
-              src={AUDIO_SRC}
-              mimeType="audio/mpeg"
-              filename="Morning meditation.mp3"
-              durationSeconds={12}
-              waveformData={FIGMA_WAVEFORM}
-              groupPosition={groupPosition}
-            />
-          }
-        />
-      ))}
-    </StoryGrid>
-  </StoryPage>
-)

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

@@ -1,74 +1,93 @@
 import React from 'react'
-import { useMessageContext } from 'stream-chat-react'
 
 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 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 — gates playability via the player's `canPlayType` probe. */
+  /** MIME type hint — typed onto the inline `<source>` element. */
   mimeType?: string
   /**
-   * Filename — the download default name for the trailing action, and
-   * part of each control's accessible name.
+   * 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?: string
   /**
    * Stacked audio. Takes precedence over `src` when set. Each item
-   * 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.
+   * 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.
    */
   items?: AudioItem[]
-  /** See `AudioItem.durationSeconds`. Applies to the single-`src` shape. */
-  durationSeconds?: number
-  /** See `AudioItem.waveformData`. Applies to the single-`src` shape. */
-  waveformData?: number[]
+  /**
+   * `<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
 }
 
 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, durationSeconds, waveformData }]
+  if (src) return [{ src, mimeType, filename }]
   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
+      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
@@ -80,63 +99,52 @@ 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()
-
   const variant = bubbleVariantForState(state)
-  const resolvedItems = resolveItems({
-    src,
-    mimeType,
-    filename,
-    durationSeconds,
-    waveformData,
-    items,
-  })
+  const showDismiss = state === 'composer' && !!onDismiss
+  const resolvedItems = resolveItems({ src, mimeType, filename, items })
 
   if (resolvedItems.length === 0) {
     return null
   }
 
-  const requester = message?.id
-    ? `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`
-    : undefined
-
-  // 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`.
-  const trailingAction: AudioRowTrailingAction =
-    state === 'composer' && onDismiss
-      ? { kind: 'dismiss', onDismiss }
-      : { kind: 'download' }
+  // 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')
 
   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) => (
-          <WaveformAudioRow
+          <NativeAudioPlayer
             key={`${item.src}-${index}`}
             item={item}
-            variant={variant}
-            requester={requester}
-            trailingAction={trailingAction}
+            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
+            }
           />
         ))}
       </div>
@@ -156,10 +164,8 @@ export interface AudioComposerProps extends ComposerExtras {
   src?: string
   mimeType?: string
   filename?: string
-  /** See `AudioItem.durationSeconds`. */
-  durationSeconds?: number
-  /** See `AudioItem.waveformData`. */
-  waveformData?: number[]
+  /** See `AudioAttachmentSharedProps.preload`. */
+  preload?: MediaPreloadMode
 }
 export type AudioSentProps = AudioAttachmentSharedProps
 export type AudioReceivedProps = AudioAttachmentSharedProps