Audio Playback

import { WithAudioPlayback } from "stream-chat-react";

const TopLevelComponent = ({ children }) => {
  return (
    <WithAudioPlayback allowConcurrentPlayback={false}>
      {children}
    </WithAudioPlayback>
  );
};

import type {
  AudioPlayer,
  AudioPlayerDescriptor,
  AudioPlayerState,
} from "stream-chat-react";
import {
  FileSizeIndicator,
  PlayButton,
  PlaybackRateButton,
  useAudioPlayer,
  useStateStore,
  WaveProgressBar,
} from "stream-chat-react";

// Provide a stable ID so you get a stable AudioPlayer instance
// (for example: message ID + parent ID or any other stable key).
import { useStableComponentId } from "./useStableComponentId";
import { FileIcon } from "stream-chat-react";

type AudioPlayerComponentProps = Omit<AudioPlayerDescriptor, "id"> & {
  playbackRates: number[];
};

const AudioPlayerComponent = (props: AudioPlayerComponentProps) => {
  const componentID = useStableComponentId();

  // Retrieve the AudioPlayer instance.
  const audioPlayer = useAudioPlayer({
    durationSeconds: props.durationSeconds,
    fileSize: props.fileSize,
    mimeType: props.mimeType,
    playbackRates: props.playbackRates,
    requester: componentID,
    src: props.src,
    title: props.title,
    waveformData: props.waveformData,
  });

  return audioPlayer ? <AudioPlayerUI audioPlayer={audioPlayer} /> : null;
};

type AudioPlayerUIProps = {
  audioPlayer: AudioPlayer;
};

// Select the data you need from AudioPlayer state.
const audioPlayerStateSelector = (state: AudioPlayerState) => ({
  canPlayRecord: state.canPlayRecord,
  isPlaying: state.isPlaying,
  playbackRate: state.currentPlaybackRate,
  progress: state.progressPercent,
  secondsElapsed: state.secondsElapsed,
});

const AudioPlayerUI = ({ audioPlayer }: AudioPlayerUIProps) => {
  // Subscribe to AudioPlayer state changes.
  const { canPlayRecord, isPlaying, playbackRate, progress, secondsElapsed } =
    useStateStore(audioPlayer.state, audioPlayerStateSelector);

  const displayedDuration = secondsElapsed || audioPlayer.durationSeconds;

  return (
    <div className="audio-player-root">
      <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />

      <div className="audio-player-body">
        {audioPlayer.title && (
          <div className="audio-player-title">{audioPlayer.title}</div>
        )}

        {typeof displayedDuration === "number" && (
          <div className="audio-player-duration">{displayedDuration}</div>
        )}

        {typeof audioPlayer.fileSize !== "undefined" && (
          <FileSizeIndicator
            fileSize={audioPlayer.fileSize}
            maximumFractionDigits={0}
          />
        )}

        {!!audioPlayer.waveformData && (
          <WaveProgressBar
            progress={progress}
            seek={audioPlayer.seek}
            waveformData={audioPlayer.waveformData}
          />
        )}

        {isPlaying ? (
          <PlaybackRateButton
            disabled={!canPlayRecord}
            onClick={audioPlayer.increasePlaybackRate}
          >
            {playbackRate?.toFixed(1)}x
          </PlaybackRateButton>
        ) : (
          <FileIcon
            className="audio-player-file-icon"
            fileName={audioPlayer.title}
            mimeType={audioPlayer.mimeType}
          />
        )}
      </div>
    </div>
  );
};

.audio-player-file-icon {
  inline-size: 40px;
  block-size: 40px;
}

// determines which properties we want to observe
const audioPlayerStateSelector = (state: AudioPlayerState) => ({
  canPlayRecord: state.canPlayRecord,
  isPlaying: state.isPlaying,
  playbackRate: state.currentPlaybackRate,
  progress: state.progressPercent,
  secondsElapsed: state.secondsElapsed,
  // ...
});

const selectedState = useStateStore(
  audioPlayer.state,
  audioPlayerStateSelector,
);

type AudioPlayerState = {
  /** Signals whether the browser can play the record. */
  canPlayRecord: boolean;
  /** Current playback speed. Initiated with the first item of the playbackRates array. */
  currentPlaybackRate: number;
  /** The audio element ref */
  elementRef: HTMLAudioElement | null;
  /** Signals whether the playback is in progress. */
  isPlaying: boolean;
  /** Keeps the latest playback error reference. */
  playbackError: Error | null;
  /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
  playbackRates: number[];
  /** Playback progress expressed in percent. */
  progressPercent: number;
  /** Playback progress expressed in seconds. */
  secondsElapsed: number;
};

import { useEffect, useState } from "react";
import { useActiveAudioPlayer } from "stream-chat-react";
import { AudioPlayerUI } from "./MyAudioPlayerUI";

const Player = () => {
  const activePlayer = useActiveAudioPlayer();
  const [open, setOpen] = useState<boolean>(!!activePlayer);

  useEffect(() => {
    setOpen(!!activePlayer);

    if (!activePlayer) return;
    const element = activePlayer?.elementRef;
    if (!element) return;

    const handleEnded = () => {
      setOpen(false);
    };

    // optionally we can hide the player once the playback ended
    element.addEventListener("ended", handleEnded);
    return () => {
      element.removeEventListener("ended", handleEnded);
    };
  }, [activePlayer]);

  if (!activePlayer || !open) return null;

  return (
    <div>
      <AudioPlayerUI audioPlayer={activePlayer} />
      <button onClick={() => setOpen(false)}>Close</button>
    </div>
  );
};