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

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

@@ -1,93 +1,75 @@
 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 { 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
-      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
@@ -99,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>
@@ -164,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.test.tsx

@@ -1,4 +1,9 @@
 import React from 'react'
+import {
+  ChatProvider,
+  WithAudioPlayback,
+  type ChatContextValue,
+} from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen, fireEvent } from '../../test/utils'
@@ -7,6 +12,21 @@ import { triggerDownload } from './_shared/triggerDownload'
 
 import MessageAttachment, { bubbleGroupPositionFromStream } from '.'
 
+// `MessageAttachment.Audio`'s playback comes from `stream-chat-react`'s
+// pooled `AudioPlayer`, which `<Channel>` mounts in production. Mounting
+// the pool directly is the same contract without needing a channel that
+// can `watch()`. The player reads only `client` off the chat context —
+// optional-chained, for error notifications — so a stub is enough; its
+// presence is what stops `useChatContext` warning.
+const AUDIO_CHAT_CONTEXT = {} as ChatContextValue
+
+const renderAudio = (ui: React.ReactElement) =>
+  renderWithProviders(
+    <ChatProvider value={AUDIO_CHAT_CONTEXT}>
+      <WithAudioPlayback>{ui}</WithAudioPlayback>
+    </ChatProvider>
+  )
+
 vi.mock('./_shared/triggerDownload', () => ({
   triggerDownload: vi.fn(() => Promise.resolve()),
 }))
@@ -716,50 +736,186 @@ describe('MessageAttachment.File', () => {
 })
 
 describe('MessageAttachment.Audio', () => {
-  it('renders the native audio player only (no title, no extra download)', () => {
-    renderWithProviders(
+  // 12 samples so the resample path is exercised on the way to the
+  // design's 35 bars.
+  const WAVEFORM = [
+    0.1, 0.8, 0.65, 0.2, 0.3, 0.45, 0.5, 0.7, 1, 0.85, 0.4, 0.15,
+  ]
+
+  it('renders the waveform card: bars, play toggle, duration and seek', () => {
+    renderAudio(
       <MessageAttachment.Audio.Sent
         src="https://cdn.example.com/song.mp3"
         mimeType="audio/mpeg"
         filename="song.mp3"
+        durationSeconds={12}
+        waveformData={WAVEFORM}
       />
     )
+
     const bubble = screen.getByTestId('audio-attachment')
-    expect(bubble.querySelector('audio')).not.toBeNull()
-    // No filename title — the native `<audio>` element doesn't expose
-    // a title slot, so we render just the player.
-    expect(screen.queryByText('song.mp3')).toBeNull()
-    // Native player handles its own download in the kebab menu, so
-    // no extra Download button should be rendered.
-    expect(screen.queryByRole('button', { name: /download/i })).toBeNull()
+    expect(bubble.querySelectorAll('[data-testid="amplitude-bar"]')).toHaveLength(
+      35
+    )
+    // The native player is gone — playback is our own control set now.
+    expect(bubble.querySelector('audio')).toBeNull()
+    expect(
+      screen.getByRole('button', { name: 'Play audio — song.mp3' })
+    ).toBeInTheDocument()
+    expect(screen.getByText('00:12')).toBeInTheDocument()
+
+    const seek = screen.getByRole('slider', { name: 'Seek audio — song.mp3' })
+    expect(seek).toHaveAttribute('aria-valuetext', '00:00 of 00:12')
+    expect(seek).toHaveValue('0')
+
+    // The bars duplicate what the slider already announces, so they
+    // must stay out of the accessibility tree — otherwise they read as
+    // 35 unnamed nodes and (in Stream's own version of this widget) as
+    // an unnamed `progressbar`.
+    const track = bubble.querySelector('.mes-audio-wave__track')
+    expect(track).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('renders the full bar count as a flat placeholder when no waveform exists', () => {
+    // The total fallback: a decode failure, an unsupported codec, a
+    // re-staged zero-byte placeholder, or anything sent before
+    // `waveform_data` was persisted. Passing `[]` straight through
+    // would render no bars at all, so the card must supply its own
+    // all-zero row — the card's silhouette has to be unchanged.
+    renderAudio(
+      <MessageAttachment.Audio.Received src="https://cdn.example.com/legacy.mp3" />
+    )
+
+    const bars = screen.getAllByTestId('amplitude-bar')
+    expect(bars).toHaveLength(35)
+    bars.forEach((bar) => {
+      expect(bar).not.toHaveClass('mes-audio-wave__bar--played')
+    })
   })
 
-  it('shows an inline dismiss button next to the player on Composer state', () => {
+  it.each([3, 12, 35, 200])(
+    'resamples a %i-sample waveform to the rendered bar count',
+    (sampleCount) => {
+      const data = Array.from({ length: sampleCount }, (_, i) =>
+        Math.abs(Math.sin(i))
+      )
+      renderAudio(
+        <MessageAttachment.Audio.Sent
+          src="https://cdn.example.com/song.mp3"
+          waveformData={data}
+        />
+      )
+      expect(screen.getAllByTestId('amplitude-bar')).toHaveLength(35)
+    }
+  )
+
+  it('shows an unknown duration without collapsing the slot', () => {
+    renderAudio(
+      <MessageAttachment.Audio.Sent src="https://cdn.example.com/legacy.mp3" />
+    )
+
+    expect(screen.getByText('--:--')).toBeInTheDocument()
+    expect(screen.getByRole('slider', { name: 'Seek audio' })).toHaveAttribute(
+      'aria-valuetext',
+      '00:00 of --:--'
+    )
+  })
+
+  it('removes the draft from the composer trailing action', () => {
+    // There is no product-owned overflow menu on audio attachments in
+    // production, so the design's trailing control carries forward the
+    // one action each surface already had: Remove in the composer…
     const onDismiss = vi.fn()
-    renderWithProviders(
+    renderAudio(
       <MessageAttachment.Audio.Composer
         src="https://cdn.example.com/song.mp3"
+        filename="song.mp3"
         onDismiss={onDismiss}
       />
     )
-    const dismiss = screen.getByLabelText('Dismiss attachment')
-    expect(dismiss).toBeInTheDocument()
-    fireEvent.click(dismiss)
+
+    expect(
+      screen.queryByRole('button', { name: /download/i })
+    ).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Remove attachment' }))
     expect(onDismiss).toHaveBeenCalledTimes(1)
   })
 
-  it('renders one native player per item for stacked audio', () => {
-    renderWithProviders(
+  it('downloads from the sent trailing action', () => {
+    // …and Download once sent, preserving the capability the native
+    // `<audio controls>` kebab used to provide.
+    renderAudio(
+      <MessageAttachment.Audio.Sent
+        src="https://cdn.example.com/song.mp3"
+        filename="song.mp3"
+      />
+    )
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Download audio — song.mp3' })
+    )
+    expect(mockTriggerDownload).toHaveBeenCalledWith(
+      'https://cdn.example.com/song.mp3',
+      'song.mp3'
+    )
+  })
+
+  it('renders one waveform row per item for stacked audio', () => {
+    renderAudio(
       <MessageAttachment.Audio.Sent
         items={[
-          { src: 'https://cdn.example.com/a.mp3', mimeType: 'audio/mpeg' },
-          { src: 'https://cdn.example.com/b.mp3', mimeType: 'audio/mpeg' },
-          { src: 'https://cdn.example.com/c.mp3', mimeType: 'audio/mpeg' },
+          { src: 'https://cdn.example.com/a.mp3', durationSeconds: 12 },
+          { src: 'https://cdn.example.com/b.mp3', durationSeconds: 30 },
+          { src: 'https://cdn.example.com/c.mp3', durationSeconds: 65 },
         ]}
       />
     )
+
     const bubble = screen.getByTestId('audio-attachment')
-    expect(bubble.querySelectorAll('audio')).toHaveLength(3)
+    expect(
+      bubble.querySelectorAll('[data-testid="audio-attachment-row"]')
+    ).toHaveLength(3)
+    expect(screen.getByText('01:05')).toBeInTheDocument()
+  })
+
+  it('disables playback for a MIME type the browser cannot play, but keeps the download', () => {
+    // `canPlayType` gates playback, and clicking play on an unplayable
+    // track is a no-op inside the player anyway — so the control says
+    // so. The file must still be retrievable.
+    renderAudio(
+      <MessageAttachment.Audio.Received
+        src="https://cdn.example.com/master.flac"
+        mimeType="audio/flac"
+        filename="master.flac"
+      />
+    )
+
+    expect(
+      screen.getByRole('button', { name: /^Play audio/ })
+    ).toBeDisabled()
+    expect(screen.getByRole('slider', { name: /^Seek audio/ })).toBeDisabled()
+    expect(
+      screen.getByRole('button', { name: /^Download audio/ })
+    ).toBeEnabled()
+  })
+
+  it('still renders the card without the audio-playback provider', () => {
+    // The pooled player lives on `<Channel>`. Outside one the card must
+    // degrade to an inert card rather than rendering nothing — a blank
+    // bubble is undiagnosable, and it would silently break every
+    // consumer that mounts an attachment outside a channel.
+    renderWithProviders(
+      <MessageAttachment.Audio.Sent
+        src="https://cdn.example.com/song.mp3"
+        durationSeconds={12}
+        waveformData={WAVEFORM}
+      />
+    )
+
+    expect(screen.getByTestId('audio-attachment')).toBeInTheDocument()
+    expect(screen.getAllByTestId('amplitude-bar')).toHaveLength(35)
+    expect(screen.getByText('00:12')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /^Play audio/ })).toBeDisabled()
   })
 })
 
@@ -951,60 +1107,6 @@ describe('MessageAttachment lazy-loading defaults', () => {
       expect(video?.getAttribute('preload')).toBe('metadata')
     })
   })
-
-  describe('Audio', () => {
-    it('defaults a single-track bubble to preload="metadata"', () => {
-      renderWithProviders(
-        <MessageAttachment.Audio.Received
-          src="https://cdn.example.com/song.mp3"
-          mimeType="audio/mpeg"
-        />
-      )
-      const audio = screen
-        .getByTestId('audio-attachment')
-        .querySelector('audio')
-      expect(audio?.getAttribute('preload')).toBe('metadata')
-    })
-
-    it('defaults a stacked (3-track) bubble to preload="none" on every player', () => {
-      renderWithProviders(
-        <MessageAttachment.Audio.Sent
-          items={[
-            { src: 'https://cdn.example.com/a.mp3', mimeType: 'audio/mpeg' },
-            { src: 'https://cdn.example.com/b.mp3', mimeType: 'audio/mpeg' },
-            { src: 'https://cdn.example.com/c.mp3', mimeType: 'audio/mpeg' },
-          ]}
-        />
-      )
-      const audios = Array.from(
-        screen.getByTestId('audio-attachment').querySelectorAll('audio')
-      )
-      expect(audios).toHaveLength(3)
-      audios.forEach((audio) => {
-        expect(audio.getAttribute('preload')).toBe('none')
-      })
-    })
-
-    it('honors a per-track AudioItem.preload override', () => {
-      renderWithProviders(
-        <MessageAttachment.Audio.Sent
-          items={[
-            { src: 'https://cdn.example.com/a.mp3', mimeType: 'audio/mpeg' },
-            {
-              src: 'https://cdn.example.com/b.mp3',
-              mimeType: 'audio/mpeg',
-              preload: 'metadata',
-            },
-          ]}
-        />
-      )
-      const audios = Array.from(
-        screen.getByTestId('audio-attachment').querySelectorAll('audio')
-      )
-      expect(audios[0]?.getAttribute('preload')).toBe('none')
-      expect(audios[1]?.getAttribute('preload')).toBe('metadata')
-    })
-  })
 })
 
 describe('bubbleGroupPositionFromStream', () => {

package/src/components/MessageAttachment/_shared/fileMeta.test.ts

@@ -25,14 +25,6 @@ describe('formatFileSize', () => {
     expect(formatFileSize(Infinity)).toBe('')
     expect(formatFileSize(-1)).toBe('')
   })
-
-  it('handles unit boundaries without crossing into the next unit early', () => {
-    expect(formatFileSize(1023)).toBe('1023 B')
-    expect(formatFileSize(1024 * 1024 - 1)).toBe('1024.0 KB')
-    expect(formatFileSize(1024 * 1024)).toBe('1.00 MB')
-    expect(formatFileSize(1024 ** 3 - 1)).toBe('1024.00 MB')
-    expect(formatFileSize(1024 ** 3)).toBe('1.00 GB')
-  })
 })
 
 describe('getFileExtensionLabel', () => {
@@ -51,18 +43,6 @@ describe('getFileExtensionLabel', () => {
     expect(getFileExtensionLabel('application/octet-stream')).toBeUndefined()
     expect(getFileExtensionLabel()).toBeUndefined()
   })
-
-  it('handles dot boundaries, extension length, and MIME fallbacks', () => {
-    expect(getFileExtensionLabel('text/plain', '.gitignore')).toBe('TXT')
-    expect(getFileExtensionLabel('text/plain', 'notes.')).toBe('TXT')
-    expect(getFileExtensionLabel('image/webp', 'photo.webp')).toBe('WEBP')
-    expect(getFileExtensionLabel('image/webp', 'photo.abcdef')).toBe('WEBP')
-    expect(getFileExtensionLabel('application/json', 'data.12345')).toBe(
-      '12345'
-    )
-    expect(getFileExtensionLabel('image/*')).toBeUndefined()
-    expect(getFileExtensionLabel('application/octet-stream')).toBeUndefined()
-  })
 })
 
 describe('buildCompactMetaLabel', () => {
@@ -79,23 +59,6 @@ describe('buildCompactMetaLabel', () => {
   it('returns undefined when nothing is renderable', () => {
     expect(buildCompactMetaLabel()).toBeUndefined()
   })
-
-  it('drops non-positive and non-number sizes while retaining size-only labels', () => {
-    expect(buildCompactMetaLabel('application/pdf', 'report.pdf', 0)).toBe(
-      'PDF'
-    )
-    expect(buildCompactMetaLabel('application/pdf', 'report.pdf', -1)).toBe(
-      'PDF'
-    )
-    expect(buildCompactMetaLabel(undefined, undefined, 1024)).toBe('1.0 KB')
-    expect(
-      buildCompactMetaLabel(
-        'application/octet-stream',
-        undefined,
-        '1024' as never
-      )
-    ).toBeUndefined()
-  })
 })
 
 describe('filenameFromUrl', () => {
@@ -114,11 +77,4 @@ describe('filenameFromUrl', () => {
   it('falls back to a default when the URL cannot be parsed', () => {
     expect(filenameFromUrl('not a url at all')).toBe('download')
   })
-
-  it('handles trailing slashes, deep paths, and query strings', () => {
-    expect(filenameFromUrl('https://cdn.example.com/folder/')).toBe('download')
-    expect(
-      filenameFromUrl('https://cdn.example.com/a/b/c/report.pdf?download=1')
-    ).toBe('report.pdf')
-  })
 })

package/src/components/MessageAttachment/_shared/useIsClient.ts

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from 'react'
+
+/** No store to subscribe to — the value flips once, at hydration. */
+const subscribe = () => () => {}
+const getSnapshot = () => true
+const getServerSnapshot = () => false
+
+/**
+ * `false` while server-rendering and for the hydration render, `true`
+ * from the first client render onwards.
+ *
+ * `useSyncExternalStore` is what makes that safe: React uses
+ * `getServerSnapshot` for both the server pass and hydration, so the
+ * two trees match and only then does the component re-render as
+ * interactive. The `useState` + `useEffect` spelling of this produces
+ * the same result but trips `react-hooks/set-state-in-effect`.
+ *
+ * Used to keep browser-only work out of a server render — see
+ * `WaveformAudioRow`, where constructing Stream's pooled `AudioPlayer`
+ * reaches for `new Audio()` (MES-1360).
+ */
+export const useIsClient = (): boolean =>
+  useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)