@linktr.ee/messaging-react 4.2.0-rc-1787325521 → 4.2.0-rc-1787599724

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -483,330 +483,3 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     )
   })
 })
-
-const AUDIO = {
-  mimeType: 'audio/mpeg',
-  sourceUrl: 'https://cdn.example.com/clip.mp3',
-}
-const VIDEO = {
-  mimeType: 'video/mp4',
-  sourceUrl: 'https://cdn.example.com/clip.mp4',
-}
-const HERO = 'https://cdn.example.com/yoga.jpg'
-
-// Sent / Composer cards carry no test hook of their own; the shell is the
-// element that owns the card chrome classes.
-const shellOf = (container: HTMLElement) =>
-  container.querySelector('.messaging-link-card') as HTMLElement
-
-describe('LinkAttachment.Composer chrome', () => {
-  it('anchors the dismiss control to the hero on a featured card', () => {
-    const onDismiss = vi.fn()
-    const { container } = renderWithProviders(
-      <LinkAttachment.Composer
-        title="Brie’s FAQ"
-        thumbnailUrl={HERO}
-        onDismiss={onDismiss}
-      />
-    )
-    const dismiss = screen.getByLabelText('Dismiss attachment')
-    expect(dismiss.parentElement?.className).toContain('absolute right-3 top-3')
-    // Sits inside the hero region, not the shell corner.
-    expect(container.querySelector('div.flex-1')?.contains(dismiss)).toBe(true)
-    // 44x44 touch target without growing the 24px circle.
-    expect(dismiss.className).toContain('before:-inset-[10px]')
-    fireEvent.click(dismiss)
-    expect(onDismiss).toHaveBeenCalledTimes(1)
-  })
-
-  it('moves the dismiss control to the shell corner on a classic card', () => {
-    const { container } = renderWithProviders(
-      <LinkAttachment.Composer
-        title="Brie’s FAQ"
-        thumbnailUrl={HERO}
-        layout="classic"
-        onDismiss={() => {}}
-      />
-    )
-    expect(container.querySelector('img')).toBeNull()
-    const shell = shellOf(container)
-    expect(shell.contains(screen.getByLabelText('Dismiss attachment'))).toBe(
-      true
-    )
-    // Classic cards size to their content.
-    expect(shell.className).not.toContain('h-[250px]')
-    expect(shell.className).toContain('block')
-  })
-
-  it('defaults to the featured layout with its hero and fixed box', () => {
-    const { container } = renderWithProviders(
-      <LinkAttachment.Composer title="Brie’s FAQ" thumbnailUrl={HERO} />
-    )
-    expect(container.querySelector('img')?.getAttribute('src')).toBe(HERO)
-    expect(shellOf(container).className).toContain('h-[250px]')
-  })
-
-  it('collapses an audio composer card to the player plus an inline dismiss', () => {
-    const { container } = renderWithProviders(
-      <LinkAttachment.Composer
-        title="My track"
-        url="tr.ee/briemix"
-        {...AUDIO}
-        onDismiss={() => {}}
-      />
-    )
-    const shell = shellOf(container)
-    expect(shell.className).toContain(AUDIO_BG_CLASS)
-    expect(container.querySelector('audio')).not.toBeNull()
-    // No chin on this path, so the URL line goes with it.
-    expect(screen.queryByTestId('link-attachment-url')).toBeNull()
-    const dismiss = screen.getByLabelText('Dismiss attachment')
-    // Inline sibling of the native controls: no overlay halo on top of them.
-    expect(dismiss.className).not.toContain('before:-inset-[10px]')
-    expect(dismiss.parentElement?.className).not.toContain('absolute')
-  })
-
-  it('lets the consumer name the dismiss control', () => {
-    renderWithProviders(
-      <LinkAttachment.Composer
-        title="Brie’s FAQ"
-        onDismiss={() => {}}
-        dismissLabel="Remove link"
-      />
-    )
-    expect(screen.getByLabelText('Remove link')).toBeInTheDocument()
-    expect(screen.queryByLabelText('Dismiss attachment')).toBeNull()
-  })
-
-  it('renders the edit affordance only when a handler is given', () => {
-    const onEditClick = vi.fn()
-    renderWithProviders(
-      <LinkAttachment.Composer title="Brie’s FAQ" onEditClick={onEditClick} />
-    )
-    fireEvent.click(screen.getByLabelText('Edit attachment'))
-    expect(onEditClick).toHaveBeenCalledTimes(1)
-    expect(screen.queryByLabelText('Dismiss attachment')).toBeNull()
-  })
-
-  it('renders no affordances when the composer passes no handlers', () => {
-    renderWithProviders(<LinkAttachment.Composer title="Brie’s FAQ" />)
-    expect(screen.queryByRole('button')).toBeNull()
-  })
-})
-
-describe('LinkAttachment interactivity contract', () => {
-  it('keeps the Received shell non-interactive around playable media', () => {
-    const onClick = vi.fn()
-    renderWithProviders(
-      <LinkAttachment.Received
-        title="Clip"
-        url="tr.ee/briemix"
-        thumbnailUrl={HERO}
-        {...VIDEO}
-        onClick={onClick}
-      />
-    )
-    // The native controls own clicks, so the shell is neither anchor nor button.
-    const root = screen.getByTestId('link-attachment')
-    expect(root.tagName).toBe('DIV')
-    fireEvent.click(root)
-    expect(onClick).not.toHaveBeenCalled()
-  })
-
-  it('keeps the Received shell non-interactive when a CTA owns the click', () => {
-    renderWithProviders(
-      <LinkAttachment.Received
-        title="FAQ"
-        url="tr.ee/briemix"
-        cta={{ label: 'View FAQs' }}
-      />
-    )
-    expect(screen.getByTestId('link-attachment').tagName).toBe('DIV')
-  })
-
-  it('treats a whitespace-only Received url as no url at all', () => {
-    renderWithProviders(
-      <LinkAttachment.Received title="Brie’s FAQ" url="   " />
-    )
-    const root = screen.getByTestId('link-attachment')
-    expect(root.tagName).toBe('DIV')
-    expect(root.hasAttribute('href')).toBe(false)
-    expect(screen.queryByTestId('link-attachment-url')).toBeNull()
-  })
-
-  it('names the Received preview button after the title, then falls back', () => {
-    const { unmount } = renderWithProviders(
-      <LinkAttachment.Received
-        title="Featured image"
-        thumbnailUrl={HERO}
-        onClick={() => {}}
-      />
-    )
-    expect(screen.getByTestId('link-attachment')).toHaveAttribute(
-      'aria-label',
-      'Featured image'
-    )
-    unmount()
-
-    renderWithProviders(
-      <LinkAttachment.Received thumbnailUrl={HERO} onClick={() => {}} />
-    )
-    expect(screen.getByTestId('link-attachment')).toHaveAttribute(
-      'aria-label',
-      'Open attachment preview'
-    )
-  })
-
-  it('ignores the Sent onClick when there is nothing to open', () => {
-    const onClick = vi.fn()
-    const { container } = renderWithProviders(
-      <LinkAttachment.Sent title="My Playlist" onClick={onClick} />
-    )
-    const shell = shellOf(container)
-    expect(shell.tagName).toBe('DIV')
-    fireEvent.click(shell)
-    expect(onClick).not.toHaveBeenCalled()
-  })
-
-  it('ignores the Sent onClick around playable media', () => {
-    const onClick = vi.fn()
-    const { container } = renderWithProviders(
-      <LinkAttachment.Sent
-        title="Clip"
-        url="tr.ee/briemix"
-        thumbnailUrl={HERO}
-        {...VIDEO}
-        onClick={onClick}
-      />
-    )
-    const shell = shellOf(container)
-    expect(shell.tagName).toBe('DIV')
-    fireEvent.click(shell)
-    expect(onClick).not.toHaveBeenCalled()
-  })
-})
-
-describe('LinkAttachment bubble tail grouping', () => {
-  it.each([
-    ['single', true],
-    ['end', true],
-    ['first', false],
-    ['middle', false],
-  ] as const)(
-    'paints the Received tail for groupPosition %s: %s',
-    (groupPosition, expected) => {
-      renderWithProviders(
-        <LinkAttachment.Received
-          title="Brie’s FAQ"
-          url="tr.ee/briemix"
-          groupPosition={groupPosition}
-        />
-      )
-      expect(screen.queryByTestId('link-card-tail') != null).toBe(expected)
-    }
-  )
-
-  it.each([
-    ['single', true],
-    ['end', true],
-    ['first', false],
-  ] as const)(
-    'paints the Sent tail for groupPosition %s: %s',
-    (groupPosition, expected) => {
-      renderWithProviders(
-        <LinkAttachment.Sent
-          title="Brie’s FAQ"
-          url="tr.ee/briemix"
-          groupPosition={groupPosition}
-        />
-      )
-      expect(screen.queryByTestId('link-card-tail') != null).toBe(expected)
-    }
-  )
-
-  it('defaults both chat cards to the tail-bearing single position', () => {
-    const { unmount } = renderWithProviders(
-      <LinkAttachment.Received title="Brie’s FAQ" url="tr.ee/briemix" />
-    )
-    expect(screen.getByTestId('link-card-tail')).toHaveAttribute(
-      'data-variant',
-      'light'
-    )
-    unmount()
-
-    renderWithProviders(
-      <LinkAttachment.Sent title="Brie’s FAQ" url="tr.ee/briemix" />
-    )
-    expect(screen.getByTestId('link-card-tail')).toHaveAttribute(
-      'data-variant',
-      'dark'
-    )
-  })
-
-  it('gives the audio player card no tail — it is not a bubble', () => {
-    const { unmount } = renderWithProviders(
-      <LinkAttachment.Sent title="My track" {...AUDIO} groupPosition="end" />
-    )
-    expect(screen.queryByTestId('link-card-tail')).toBeNull()
-    unmount()
-
-    renderWithProviders(
-      <LinkAttachment.Received
-        title="My track"
-        {...AUDIO}
-        groupPosition="end"
-      />
-    )
-    expect(screen.queryByTestId('link-card-tail')).toBeNull()
-  })
-})
-
-describe('LinkAttachment layout and surface', () => {
-  it.each([
-    ['Sent', LinkAttachment.Sent],
-    ['Received', LinkAttachment.Received],
-  ] as const)(
-    'drops the %s hero and the fixed box for classic',
-    (_side, Card) => {
-      const { container } = renderWithProviders(
-        <Card
-          title="Brie’s FAQ"
-          url="tr.ee/briemix"
-          thumbnailUrl={HERO}
-          layout="classic"
-        />
-      )
-      expect(container.querySelector('img')).toBeNull()
-      const shell = shellOf(container)
-      expect(shell.className).not.toContain('h-[250px]')
-      expect(shell.className).toContain('block')
-    }
-  )
-
-  it.each([
-    ['Sent', LinkAttachment.Sent],
-    ['Received', LinkAttachment.Received],
-  ] as const)('locks the featured %s card to the 250px box', (_side, Card) => {
-    const { container } = renderWithProviders(
-      <Card title="Brie’s FAQ" url="tr.ee/briemix" thumbnailUrl={HERO} />
-    )
-    expect(container.querySelector('img')?.getAttribute('src')).toBe(HERO)
-    expect(shellOf(container).className).toContain('h-[250px]')
-  })
-
-  it.each([
-    ['Sent', LinkAttachment.Sent],
-    ['Received', LinkAttachment.Received],
-  ] as const)(
-    'sizes the %s audio card to its content on the audio surface',
-    (_side, Card) => {
-      const { container } = renderWithProviders(
-        <Card title="My track" url="tr.ee/briemix" {...AUDIO} />
-      )
-      const shell = shellOf(container)
-      expect(shell.className).toContain(AUDIO_BG_CLASS)
-      expect(shell.className).not.toContain('h-[250px]')
-      expect(container.querySelector('audio')).not.toBeNull()
-    }
-  )
-})

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>
+)