@linktr.ee/messaging-react 4.1.5 → 4.2.0-rc-1787083791

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

@@ -0,0 +1,335 @@
+import {
+  DownloadSimpleIcon,
+  PauseIcon,
+  PlayIcon,
+  XIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+import {
+  displayDuration,
+  resampleWaveformData,
+  useAudioPlayer,
+  useStateStore,
+  type AudioPlayerState,
+} from 'stream-chat-react'
+
+import { triggerDownload } from '../_shared/triggerDownload'
+import type { AudioItem, BubbleVariant } from '../types'
+
+/**
+ * Bar count in the design's waveform (Figma `2754:17710`, nodes
+ * `…;2754:8066` – `…;2754:8100`). The 138px track is exactly
+ * `35 × 2px bars + 34 × 2px gaps`, so the count is derived from the
+ * drawn geometry rather than picked.
+ */
+const WAVEFORM_BAR_COUNT = 35
+
+/**
+ * Total fallback for every case where no amplitudes exist: a decode
+ * failure, an unsupported codec, a re-staged zero-byte placeholder, a
+ * file over the composer's decode ceiling, or any attachment sent
+ * before `waveform_data` was persisted (legacy web, the mobile app, a
+ * visitor).
+ *
+ * `.mes-audio-wave__bar` floors every bar at the design's 4px minimum,
+ * so all 35 bars render as the shortest bar the design already draws:
+ * the card's silhouette, height and geometry are identical to a real
+ * waveform, and the progress fill still sweeps left to right during
+ * playback. A shape-changing degraded state (e.g. a plain progress
+ * bar) would read as a different feature.
+ */
+const FLAT_WAVEFORM: readonly number[] = Object.freeze(
+  new Array<number>(WAVEFORM_BAR_COUNT).fill(0)
+)
+
+/** Shown in the fixed duration slot until a duration is known. */
+const UNKNOWN_DURATION = '--:--'
+
+const AUDIO_PLAYER_STATE_SELECTOR = (state: AudioPlayerState) => ({
+  canPlayRecord: state.canPlayRecord,
+  isPlaying: state.isPlaying,
+  progressPercent: state.progressPercent,
+  secondsElapsed: state.secondsElapsed,
+})
+
+// Both of Figma's `content-control-buttons` instances (`…;2754:8063`
+// play, `…;2754:8102` trailing) are the same 32×32 pill with a 6px inset
+// around a 12px glyph and a 20px background blur; only the fill differs.
+const CONTROL_CLASS =
+  'flex size-8 shrink-0 items-center justify-center rounded-full backdrop-blur-[20px]'
+
+// Figma draws only the dark sender card (`fill:#1E2330`), with every
+// control in white. The light (`Received`) variant — the one visitors see
+// on linktr.ee-profiles — is undrawn, so it inverts the same treatment
+// against the `#f2f1ef` bubble. Ratios below were measured off the
+// composited render, not estimated:
+//
+//                          played  unplayed  played:unplayed  play button
+//   dark   on #1E2330      15.69      3.71             4.24        15.69
+//   light  on #F2F1EF      18.17      3.78             4.81        15.16
+//
+// Both unplayed fills clear WCAG 1.4.11's 3:1 floor for non-text contrast,
+// and the played/unplayed step is well past it so progress is legible on
+// its own. The light variant needs `#040403` at 0.5 where dark needs white
+// at 0.4, because it composites towards a lighter backdrop.
+const PLAY_BUTTON_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'bg-white text-black/90 disabled:bg-white/40',
+  light: 'bg-[#040403]/90 text-white disabled:bg-[#040403]/30',
+}
+
+const TRAILING_BUTTON_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'bg-[#040403]/80 text-white hover:bg-[#040403]',
+  light: 'bg-black/10 text-black/90 hover:bg-black/20',
+}
+
+/**
+ * What the design's trailing 32px control does. The ticket asks to
+ * "keep the same options as current production", and production has no
+ * product-owned menu on an audio attachment — the only menu was the
+ * native `<audio controls>` kebab, which disappears with the native
+ * player. So each surface carries forward the single action it already
+ * had: the composer removes the draft, and a sent / received card
+ * downloads the file (the capability the browser kebab provided).
+ */
+export type AudioRowTrailingAction =
+  | { kind: 'dismiss'; onDismiss: () => void }
+  | { kind: 'download' }
+
+export interface WaveformAudioRowProps {
+  item: AudioItem
+  variant: BubbleVariant
+  trailingAction: AudioRowTrailingAction
+  /**
+   * Namespaces the pooled `AudioPlayer` so the same asset rendered in
+   * two different messages keeps two independent playback positions.
+   * Derived from the Stream message id where one is available.
+   */
+  requester?: string
+}
+
+/**
+ * Resolves the track length. `durationSeconds` (persisted on the Stream
+ * attachment at send time) is authoritative and correct on first paint.
+ * Without it — legacy sends, mobile-app sends, visitor sends — a single
+ * detached `preload="metadata"` element resolves it from the response
+ * headers, which is exactly what the native player it replaces did.
+ */
+const useResolvedDuration = (
+  src: string,
+  durationSeconds?: number
+): number | undefined => {
+  const [probed, setProbed] = React.useState<number>()
+
+  React.useEffect(() => {
+    if (durationSeconds != null || !src) return
+
+    const probe = document.createElement('audio')
+    probe.preload = 'metadata'
+    const handleLoadedMetadata = () => {
+      if (Number.isFinite(probe.duration) && probe.duration > 0) {
+        setProbed(probe.duration)
+      }
+    }
+    probe.addEventListener('loadedmetadata', handleLoadedMetadata)
+    probe.src = src
+
+    return () => {
+      probe.removeEventListener('loadedmetadata', handleLoadedMetadata)
+      probe.removeAttribute('src')
+      setProbed(undefined)
+    }
+  }, [src, durationSeconds])
+
+  return durationSeconds ?? probed
+}
+
+/**
+ * One waveform player row: 32px play toggle, 35-bar waveform with a
+ * progress fill and a native seek control, the duration, and the 32px
+ * trailing action. A single-item bubble is the design's 299×72 card;
+ * a stacked bubble repeats the row.
+ *
+ * Playback is `stream-chat-react`'s pooled `AudioPlayer`, which gives
+ * single-player-at-a-time across the thread, pause-on-unmount and
+ * saved-position restore. That pool lives on `<Channel>`, so outside
+ * one the card still renders in full with its controls disabled rather
+ * than vanishing.
+ */
+const WaveformAudioRow: React.FC<WaveformAudioRowProps> = ({
+  item,
+  variant,
+  trailingAction,
+  requester,
+}) => {
+  const trackRef = React.useRef<HTMLDivElement>(null)
+  const [isStarting, setIsStarting] = React.useState(false)
+
+  // An empty array must never reach `resampleWaveformData` — its
+  // `upSample` branch `console.warn`s and returns `[]`, which renders no
+  // bars at all (and trips consumers whose tests fail on console output).
+  const amplitudes = React.useMemo<readonly number[]>(() => {
+    const data = item.waveformData
+    if (!data || data.length === 0) return FLAT_WAVEFORM
+    if (data.length === WAVEFORM_BAR_COUNT) return data
+    return resampleWaveformData(data, WAVEFORM_BAR_COUNT)
+  }, [item.waveformData])
+  const durationSeconds = useResolvedDuration(item.src, item.durationSeconds)
+
+  const audioPlayer = useAudioPlayer({
+    durationSeconds,
+    mimeType: item.mimeType,
+    requester,
+    src: item.src,
+    title: item.filename,
+  })
+
+  const {
+    canPlayRecord = false,
+    isPlaying = false,
+    progressPercent = 0,
+    secondsElapsed = 0,
+  } = useStateStore(audioPlayer?.state, AUDIO_PLAYER_STATE_SELECTOR) ?? {}
+
+  const progress = Math.min(Math.max(progressPercent, 0), 100)
+  const playable = !!audioPlayer && canPlayRecord
+  const showPause = isPlaying || isStarting
+
+  const totalLabel =
+    durationSeconds == null ? UNKNOWN_DURATION : displayDuration(durationSeconds)
+  // Mirrors the native player: the slot counts up while playing and
+  // holds the elapsed position when paused, falling back to the total.
+  const displayedLabel =
+    secondsElapsed > 0 ? displayDuration(secondsElapsed) : totalLabel
+
+  const handleTogglePlay = () => {
+    if (!audioPlayer || isStarting) return
+    setIsStarting(true)
+    void audioPlayer.togglePlay().finally(() => setIsStarting(false))
+  }
+
+  // One seek code path for pointer, keyboard and drag: the native range
+  // input owns the interaction, and its value is translated into the
+  // `SeekFn` contract from the bar track's own rect. Going through
+  // `AudioPlayer.seek` inherits its lazy element acquisition (so
+  // seeking before the first play works), its seekable-range check and
+  // its 16ms throttle — `setSecondsElapsed` alone would not, because
+  // no `<audio>` element exists until the pool hands one over.
+  const handleSeek = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const track = trackRef.current
+    if (!audioPlayer || !track) return
+    const ratio = Math.min(Math.max(Number(event.target.value) / 100, 0), 1)
+    const rect = track.getBoundingClientRect()
+    void audioPlayer.seek({
+      clientX: rect.x + ratio * rect.width,
+      currentTarget: track,
+    })
+  }
+
+  // Suffixed onto each control's accessible name so a thread of stacked
+  // clips reads as "Play audio — take-2.mp3", not three identical labels.
+  const label = item.filename ? ` \u2014 ${item.filename}` : ''
+
+  return (
+    <div
+      role="group"
+      aria-label={item.filename ?? 'Audio attachment'}
+      className="flex items-center"
+      data-testid="audio-attachment-row"
+    >
+      <button
+        type="button"
+        onClick={handleTogglePlay}
+        disabled={!playable}
+        aria-busy={isStarting || undefined}
+        aria-label={`${showPause ? 'Pause audio' : 'Play audio'}${label}`}
+        className={classNames(CONTROL_CLASS, PLAY_BUTTON_BY_VARIANT[variant])}
+      >
+        {showPause ? (
+          <PauseIcon className="size-3" weight="fill" aria-hidden />
+        ) : (
+          <PlayIcon className="size-3" weight="fill" aria-hidden />
+        )}
+      </button>
+
+      {/* Figma `soundwave-container` (…;2754:8064): 203×30, 10px gap,
+          12px horizontal inset, waveform flexing against a fixed
+          duration slot. */}
+      <div className="flex min-w-0 flex-1 items-center gap-2.5 px-3">
+        <div
+          className={classNames(
+            'mes-audio-wave',
+            variant === 'light' && 'mes-audio-wave--light'
+          )}
+        >
+          {/* The bars carry no information a screen reader can use —
+              elapsed / total is announced by the range input below —
+              so they stay out of the accessibility tree entirely. */}
+          <div ref={trackRef} className="mes-audio-wave__track" aria-hidden>
+            {amplitudes.map((amplitude, index) => (
+              <span
+                // Bars are positional, and the array is a fixed-length
+                // resample of the same track — index is the identity.
+                key={index}
+                data-testid="amplitude-bar"
+                className={classNames(
+                  'mes-audio-wave__bar',
+                  progress > (index / amplitudes.length) * 100 &&
+                    'mes-audio-wave__bar--played'
+                )}
+                style={
+                  {
+                    '--mes-audio-wave-bar': `${
+                      Math.min(Math.max(amplitude, 0), 1) * 100
+                    }%`,
+                  } as React.CSSProperties
+                }
+              />
+            ))}
+          </div>
+          <input
+            type="range"
+            className="mes-audio-wave__seek"
+            min={0}
+            max={100}
+            step={0.1}
+            value={progress}
+            onChange={handleSeek}
+            disabled={!playable}
+            aria-label={`Seek audio${label}`}
+            aria-valuetext={`${displayDuration(secondsElapsed)} of ${totalLabel}`}
+          />
+        </div>
+
+        <span className="shrink-0 text-xs leading-4 tracking-[0.24px] tabular-nums">
+          {displayedLabel}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        onClick={
+          trailingAction.kind === 'dismiss'
+            ? trailingAction.onDismiss
+            : () => {
+                void triggerDownload(item.src, item.filename)
+              }
+        }
+        aria-label={
+          trailingAction.kind === 'dismiss'
+            ? 'Remove attachment'
+            : `Download audio${label}`
+        }
+        className={classNames(CONTROL_CLASS, TRAILING_BUTTON_BY_VARIANT[variant])}
+      >
+        {trailingAction.kind === 'dismiss' ? (
+          <XIcon className="size-3" weight="bold" aria-hidden />
+        ) : (
+          <DownloadSimpleIcon className="size-3" weight="bold" aria-hidden />
+        )}
+      </button>
+    </div>
+  )
+}
+
+export default WaveformAudioRow

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

@@ -1,93 +1,74 @@
 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 — 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 +80,63 @@ 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 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 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' }
 
   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={requester}
+            trailingAction={trailingAction}
           />
         ))}
       </div>
@@ -164,8 +156,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