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

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

@@ -1,6 +1,8 @@
-import type { Meta, StoryFn } from '@storybook/react'
+import type { Decorator, Meta, StoryFn } from '@storybook/react'
 import React from 'react'
+import { Chat, WithAudioPlayback } from 'stream-chat-react'
 
+import { createMockStreamChatClient } from '../../../testing/createMockStreamChatClient'
 import {
   StoryGrid,
   StoryHeading,
@@ -14,27 +16,63 @@ 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
 
@@ -43,16 +81,16 @@ const handleDismiss = () => {
 }
 
 /**
- * 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.
+ * 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.
  */
 export const Single: StoryFn = () => (
   <StoryPage>
     <StoryHeading
       title="Audio attachment"
-      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."
+      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."
     />
     <StoryGrid>
       <StoryRow
@@ -62,6 +100,8 @@ export const Single: StoryFn = () => (
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
+            durationSeconds={12}
+            waveformData={FIGMA_WAVEFORM}
             onDismiss={handleDismiss}
           />
         }
@@ -70,6 +110,8 @@ export const Single: StoryFn = () => (
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
+            durationSeconds={12}
+            waveformData={FIGMA_WAVEFORM}
           />
         }
         received={
@@ -77,6 +119,8 @@ export const Single: StoryFn = () => (
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
+            durationSeconds={12}
+            waveformData={FIGMA_WAVEFORM}
           />
         }
       />
@@ -84,20 +128,28 @@ export const Single: StoryFn = () => (
   </StoryPage>
 )
 
-export const SingleWithText: StoryFn = () => (
+/**
+ * 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 = () => (
   <StoryPage>
     <StoryHeading
-      title="Audio with caption"
-      description="Caption sits below the player, inside the same bubble."
+      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."
     />
     <StoryGrid>
       <StoryRow
-        label="Caption"
+        label="No waveform"
         composer={
           <AudioAttachment.Composer
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
-            filename="Morning meditation.mp3"
+            filename="Voice note.m4a"
+            durationSeconds={12}
             onDismiss={handleDismiss}
           />
         }
@@ -105,87 +157,100 @@ export const SingleWithText: StoryFn = () => (
           <AudioAttachment.Sent
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
-            filename="Morning meditation.mp3"
-            text="Recorded this morning before training"
+            filename="Voice note.m4a"
+            durationSeconds={12}
           />
         }
         received={
           <AudioAttachment.Received
             src={AUDIO_SRC}
             mimeType="audio/mpeg"
-            filename="Morning meditation.mp3"
-            text="Recorded this morning before training"
+            filename="Voice note.m4a"
+            durationSeconds={12}
           />
         }
       />
-    </StoryGrid>
-  </StoryPage>
-)
-
-/**
- * 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 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"
+        label="No waveform, no duration"
         composer={
           <AudioAttachment.Composer
-            src={AUDIO_SRC}
-            mimeType="audio/mpeg"
-            filename="Morning meditation.mp3"
+            src={UNREACHABLE_SRC}
+            filename="Unreachable.mp3"
             onDismiss={handleDismiss}
           />
         }
-        sent={<AudioAttachment.Sent items={STACK_AUDIO.slice(0, 2)} />}
-        received={<AudioAttachment.Received items={STACK_AUDIO.slice(0, 2)} />}
+        sent={
+          <AudioAttachment.Sent
+            src={UNREACHABLE_SRC}
+            filename="Unreachable.mp3"
+          />
+        }
+        received={
+          <AudioAttachment.Received
+            src={UNREACHABLE_SRC}
+            filename="Unreachable.mp3"
+          />
+        }
       />
       <StoryRow
-        label="3 clips"
+        label="Unplayable codec"
         composer={
           <AudioAttachment.Composer
             src={AUDIO_SRC}
-            mimeType="audio/mpeg"
-            filename="Morning meditation.mp3"
+            mimeType="audio/x-made-up"
+            filename="Master.aiff"
+            durationSeconds={12}
+            waveformData={FIGMA_WAVEFORM}
             onDismiss={handleDismiss}
           />
         }
-        sent={<AudioAttachment.Sent items={STACK_AUDIO} />}
-        received={<AudioAttachment.Received items={STACK_AUDIO} />}
+        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}
+          />
+        }
       />
     </StoryGrid>
   </StoryPage>
 )
 
-/** Stacked audio with an accompanying caption.
- *  Sent + Received only — see `Stacked` for the rationale. */
-export const StackedWithText: 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.
+ */
+export const Stacked: 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."
+      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."
     />
     <StoryGrid>
+      <StoryRow
+        label="2 clips"
+        sent={<AudioAttachment.Sent items={STACK_AUDIO.slice(0, 2)} />}
+        received={<AudioAttachment.Received items={STACK_AUDIO.slice(0, 2)} />}
+      />
+      <StoryRow
+        label="3 clips"
+        sent={<AudioAttachment.Sent items={STACK_AUDIO} />}
+        received={<AudioAttachment.Received items={STACK_AUDIO} />}
+      />
       <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}
@@ -202,3 +267,45 @@ export const StackedWithText: 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/WaveformAudioRow.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import {
+  ChatProvider,
+  WithAudioPlayback,
+  type ChatContextValue,
+} from 'stream-chat-react'
+import { describe, expect, it, vi } from 'vitest'
+
+import MessageAttachment from '..'
+import { renderWithProviders, screen, userEvent } from '../../../test/utils'
+
+// See `MessageAttachment.test.tsx` — the player reads only `client` off
+// the chat context, so a stub is all the pool needs.
+const CHAT_CONTEXT = {} as ChatContextValue
+
+const withPlayback = (ui: React.ReactElement) => (
+  <ChatProvider value={CHAT_CONTEXT}>
+    <WithAudioPlayback>{ui}</WithAudioPlayback>
+  </ChatProvider>
+)
+
+describe('WaveformAudioRow duration formatting', () => {
+  it('carries a rounded-up second into the next minute', () => {
+    // `displayDuration` buckets first and `Math.ceil`s the leftover
+    // seconds, so 59.5 formatted straight through reads `00:60` — and a
+    // playing clip flashed it once a minute.
+    renderWithProviders(
+      withPlayback(
+        <MessageAttachment.Audio.Sent
+          src="https://cdn.example.com/song.mp3"
+          durationSeconds={59.5}
+        />
+      )
+    )
+
+    expect(screen.queryByText('00:60')).not.toBeInTheDocument()
+    expect(screen.getByText('00:59')).toBeInTheDocument()
+  })
+
+  it('floors a fractional duration rather than inventing a second', () => {
+    renderWithProviders(
+      withPlayback(
+        <MessageAttachment.Audio.Sent
+          src="https://cdn.example.com/song.mp3"
+          durationSeconds={125.9}
+        />
+      )
+    )
+
+    expect(screen.getByText('02:05')).toBeInTheDocument()
+  })
+})
+
+describe('WaveformAudioRow play control', () => {
+  it('does not advertise Pause while a start is still in flight', async () => {
+    const user = userEvent.setup()
+    // The control returns early while `togglePlay` is pending, so
+    // showing Pause made it look live while swallowing every press —
+    // and announced "Pause audio" to assistive tech.
+    renderWithProviders(
+      withPlayback(
+        <MessageAttachment.Audio.Sent
+          src="https://cdn.example.com/song.mp3"
+          mimeType="audio/mpeg"
+          filename="song.mp3"
+          durationSeconds={12}
+        />
+      )
+    )
+
+    const play = screen.getByRole('button', { name: 'Play audio — song.mp3' })
+    await user.click(play)
+
+    expect(
+      screen.getByRole('button', { name: 'Play audio — song.mp3' })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /^Pause audio/ })
+    ).not.toBeInTheDocument()
+  })
+})
+
+describe('WaveformAudioRow composer trailing action', () => {
+  it('renders no trailing control for a draft with no dismiss handler', () => {
+    // Falling through to `download` handed a composer draft the
+    // sent-only action; the native player it replaces rendered nothing.
+    renderWithProviders(
+      withPlayback(
+        <MessageAttachment.Audio.Composer
+          src="https://cdn.example.com/song.mp3"
+          filename="song.mp3"
+        />
+      )
+    )
+
+    expect(
+      screen.queryByRole('button', { name: /^Download audio/ })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Remove attachment' })
+    ).not.toBeInTheDocument()
+    // The card itself is unchanged.
+    expect(screen.getAllByTestId('amplitude-bar')).toHaveLength(35)
+  })
+
+  it('still renders Remove when the draft can be dismissed', async () => {
+    const user = userEvent.setup()
+    const onDismiss = vi.fn()
+    renderWithProviders(
+      withPlayback(
+        <MessageAttachment.Audio.Composer
+          src="https://cdn.example.com/song.mp3"
+          onDismiss={onDismiss}
+        />
+      )
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Remove attachment' }))
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('WaveformAudioRow server rendering', () => {
+  it('renders an inert card without reaching for `new Audio()`', () => {
+    // Stream constructs its pooled player during render, and the
+    // constructor evaluates `new Audio().canPlayType(mimeType)` — which
+    // is a ReferenceError in Node, so a host server-rendering a channel
+    // got a crash instead of markup. Deleting the global reproduces the
+    // server environment inside jsdom.
+    const OriginalAudio = globalThis.Audio
+    // @ts-expect-error — deliberately removing a DOM global
+    delete globalThis.Audio
+
+    try {
+      const html = renderToString(
+        withPlayback(
+          <MessageAttachment.Audio.Sent
+            src="https://cdn.example.com/song.mp3"
+            mimeType="audio/mpeg"
+            durationSeconds={12}
+          />
+        )
+      )
+
+      // The card is there in full, just not yet interactive.
+      expect(html).toContain('data-testid="audio-attachment"')
+      expect(html).toContain('mes-audio-wave__bar')
+      expect(html).toContain('00:12')
+      expect(html).toContain('disabled')
+    } finally {
+      globalThis.Audio = OriginalAudio
+    }
+  })
+})