fix: remove audio elements when VoiceRecordingPreview and AudioRecordingPreview are unmounted

Author: MartinCupela

src/components/AudioPlayer/AudioPlayer.ts

@@ -30,7 +30,7 @@ export type AudioPlayerState = {
   canPlayRecord: boolean;
   /** Current playback speed. Initiated with the first item of the playbackRates array. */
   currentPlaybackRate: number;
-  elementRef: HTMLAudioElement;
+  elementRef: HTMLAudioElement | null;
   isPlaying: boolean;
   playbackError: Error | null;
   /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
@@ -135,7 +135,7 @@ export class AudioPlayer {
   }
 
   get src() {
-    return this.elementRef.src;
+    return this.elementRef?.src;
   }
 
   get secondsElapsed() {
@@ -154,6 +154,12 @@ export class AudioPlayer {
     return this._mimeType;
   }
 
+  private ensureElementRef(): HTMLAudioElement {
+    if (!this.elementRef) {
+      this.setRef(new Audio(this.src));
+    }
+    return this.elementRef as HTMLAudioElement;
+  }
   private setPlaybackStartSafetyTimeout = () => {
     clearTimeout(this.playTimeout);
     this.playTimeout = setTimeout(() => {
@@ -181,15 +187,25 @@ export class AudioPlayer {
     if (durationSeconds !== this._durationSeconds) {
       this._durationSeconds = durationSeconds;
     }
-    if (this.elementRef.src !== src) {
-      this.elementRef.src = src;
+    const elementRef = this.ensureElementRef();
+    if (elementRef.src !== src) {
+      elementRef.src = src;
+      elementRef.load();
+    }
+  }
+
+  private prepareElementRefForGarbageCollection() {
+    this.stop();
+    if (this.elementRef) {
+      this.elementRef.src = '';
       this.elementRef.load();
+      this.setRef(null);
     }
   }
 
-  private setRef = (elementRef: HTMLAudioElement) => {
+  private setRef = (elementRef: HTMLAudioElement | null) => {
     if (elementIsPlaying(this.elementRef)) {
-      this.pause();
+      this.prepareElementRefForGarbageCollection();
     }
     this.state.partialNext({ elementRef });
   };
@@ -217,6 +233,7 @@ export class AudioPlayer {
     !!(mimeType && this.elementRef?.canPlayType(mimeType));
 
   play = async (params?: AudioPlayerPlayAudioParams) => {
+    const elementRef = this.ensureElementRef();
     if (elementIsPlaying(this.elementRef)) {
       if (this.isPlaying) return;
       this.state.partialNext({ isPlaying: true });
@@ -234,12 +251,12 @@ export class AudioPlayer {
       return;
     }
 
-    this.elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;
+    elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;
 
     this.setPlaybackStartSafetyTimeout();
 
     try {
-      await this.elementRef.play();
+      await elementRef.play();
       this.state.partialNext({
         currentPlaybackRate,
         isPlaying: true,
@@ -266,7 +283,7 @@ export class AudioPlayer {
   stop = () => {
     this.pause();
     this.setSecondsElapsed(0);
-    this.elementRef.currentTime = 0;
+    if (this.elementRef) this.elementRef.currentTime = 0;
   };
 
   togglePlay = async () => (this.isPlaying ? this.pause() : await this.play());
@@ -309,7 +326,12 @@ export class AudioPlayer {
     this.plugins.forEach(({ onError }) => onError?.({ player: this, ...params }));
   };
 
-  onRemove = () => {
+  /**
+   * Removes the audio element reference, event listeners and audio player from the player pool.
+   * Helpful when only a single AudioPlayer instance is to be removed from the AudioPlayerPool.
+   */
+  requestRemoval = () => {
+    this.prepareElementRefForGarbageCollection();
     this.unsubscribeEventListeners?.();
     this.unsubscribeEventListeners = null;
     this.plugins.forEach(({ onRemove }) => onRemove?.({ player: this }));
@@ -318,7 +340,7 @@ export class AudioPlayer {
   registerSubscriptions = () => {
     this.unsubscribeEventListeners?.();
 
-    const audioElement = this.elementRef;
+    const audioElement = this.ensureElementRef();
 
     const handleEnded = () => {
       this.state.partialNext({

src/components/AudioPlayer/AudioPlayerPool.ts

@@ -1,4 +1,5 @@
 import { AudioPlayer, type AudioPlayerOptions } from './AudioPlayer';
+import { audioPlayerRequestRemovalFromPoolPluginFactory } from './plugins/AudioPlayerRequestRemovalPlugin';
 
 export class AudioPlayerPool {
   pool = new Map<string, AudioPlayer>();
@@ -10,7 +11,16 @@ export class AudioPlayerPool {
   getOrAdd = (params: AudioPlayerOptions) => {
     let player = this.pool.get(params.id);
     if (player) return player;
-    player = new AudioPlayer(params);
+    const requestRemovalPlugin = audioPlayerRequestRemovalFromPoolPluginFactory({
+      players: this,
+    });
+    player = new AudioPlayer({
+      ...params,
+      plugins: [
+        ...(params.plugins ?? []).filter((p) => p.id !== requestRemovalPlugin.id),
+        requestRemovalPlugin,
+      ],
+    });
     player.registerSubscriptions();
     this.pool.set(params.id, player);
     return player;
@@ -19,11 +29,10 @@ export class AudioPlayerPool {
   remove = (id: string) => {
     const player = this.pool.get(id);
     if (!player) return;
-    player.stop();
-    player.elementRef.src = '';
-    player.elementRef.load();
-    player.onRemove();
-    this.pool.delete(id);
+    player.requestRemoval();
+    if (this.pool.has(id)) {
+      this.pool.delete(id);
+    }
   };
 
   clear = () => {

src/components/AudioPlayer/__tests__/AudioPlayer.test.js

@@ -320,4 +320,38 @@ describe('AudioPlayer', () => {
     endedSpy.mockReturnValue(true);
     expect(elementIsPlaying(el)).toBe(false);
   });
+
+  it('requestRemoval clears element (load called) and nulls elementRef, notifies plugins', () => {
+    const onRemove = jest.fn();
+    const player = makePlayer({ plugins: [{ id: 'TestOnRemove', onRemove }] });
+
+    const el = createdAudios[0];
+    const loadSpy = jest.spyOn(el, 'load');
+
+    expect(player.elementRef).toBe(el);
+
+    player.requestRemoval();
+
+    expect(loadSpy).toHaveBeenCalled();
+    expect(player.elementRef).toBeNull();
+    expect(onRemove).toHaveBeenCalledWith(expect.objectContaining({ player }));
+  });
+
+  it('play() after requestRemoval recreates a fresh HTMLAudioElement via ensureElementRef', async () => {
+    jest.spyOn(HTMLMediaElement.prototype, 'canPlayType').mockReturnValue('maybe');
+    const player = makePlayer();
+
+    const firstEl = createdAudios[0];
+    expect(player.elementRef).toBe(firstEl);
+
+    player.requestRemoval();
+    expect(player.elementRef).toBeNull();
+
+    await player.play();
+
+    const secondEl = player.elementRef;
+    expect(secondEl).toBeTruthy();
+    expect(secondEl).not.toBe(firstEl);
+    expect(createdAudios.length).toBe(2);
+  });
 });

src/components/AudioPlayer/__tests__/WithAudioPlayback.test.js

@@ -287,7 +287,7 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
     unmount();
 
     // cannot do "expect(player.elementRef.src).toBe('');" as player.elementRef.src in JSDOM normalizes to "http://localhost/"
-    expect(player.elementRef.getAttribute('src')).toBe('');
+    expect(player.elementRef).toBeNull();
     expect(loadSpy).toHaveBeenCalled();
   });
 
@@ -318,4 +318,35 @@ describe('WithAudioPlayback + useAudioPlayer', () => {
       expect.arrayContaining(['ended', 'error', 'timeupdate']),
     );
   });
+
+  it('re-mounting provider with same props creates a fresh player and cleans previous element', () => {
+    const params = { mimeType: 'audio/mpeg', src: 'https://example.com/a.mp3' };
+
+    let firstPlayer;
+    const { unmount } = renderWithProvider(
+      <RegisterPlayer onReady={(p) => (firstPlayer = p)} params={params} />,
+    );
+
+    // first mount created one element
+    expect(createdAudios.length).toBe(1);
+    const firstEl = createdAudios[0];
+    expect(firstPlayer).toBeTruthy();
+    expect(firstPlayer.elementRef).toBe(firstEl);
+
+    unmount();
+
+    // After unmount, player was cleaned
+    expect(firstPlayer.elementRef).toBeNull();
+
+    // New provider -> new pool -> new player + new <audio>
+    let secondPlayer;
+    renderWithProvider(
+      <RegisterPlayer onReady={(p) => (secondPlayer = p)} params={params} />,
+    );
+
+    expect(secondPlayer).toBeTruthy();
+    expect(secondPlayer).not.toBe(firstPlayer);
+    expect(createdAudios.length).toBe(2);
+    expect(secondPlayer.elementRef).not.toBe(firstEl);
+  });
 });

src/components/AudioPlayer/plugins/AudioPlayerRequestRemovalPlugin.ts

@@ -0,0 +1,13 @@
+import type { AudioPlayerPlugin } from './AudioPlayerPlugin';
+import type { AudioPlayerPool } from '../AudioPlayerPool';
+
+export const audioPlayerRequestRemovalFromPoolPluginFactory = ({
+  players,
+}: {
+  players: AudioPlayerPool;
+}): AudioPlayerPlugin => ({
+  id: 'AudioPlayerRequestRemovalFromPoolPlugin',
+  onRemove: ({ player }) => {
+    players.pool.delete(player.id);
+  },
+});

src/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PauseIcon, PlayIcon } from '../../MessageInput/icons';
 import { RecordingTimer } from './RecordingTimer';
 import { WaveProgressBar } from '../../Attachment';
@@ -36,6 +36,13 @@ export const AudioRecordingPreview = ({
 
   const displayedDuration = secondsElapsed || durationSeconds;
 
+  useEffect(
+    () => () => {
+      audioPlayer?.requestRemoval();
+    },
+    [audioPlayer],
+  );
+
   if (!audioPlayer) return;
 
   return (

src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecorder.test.js

@@ -33,6 +33,7 @@ import {
 import { generateDataavailableEvent } from '../../../../mock-builders/browser/events/dataavailable';
 import { AudioRecorder } from '../AudioRecorder';
 import { MediaRecordingState } from '../../classes';
+import { WithAudioPlayback } from '../../../AudioPlayer';
 
 const PERM_DENIED_NOTIFICATION_TEXT =
   'To start recording, allow the microphone access in your browser';
@@ -424,13 +425,15 @@ const DEFAULT_RECORDING_CONTROLLER = {
 const renderAudioRecorder = (controller = {}) =>
   render(
     <ChannelActionProvider value={{}}>
-      <MessageInputContextProvider
-        value={{
-          recordingController: { ...DEFAULT_RECORDING_CONTROLLER, ...controller },
-        }}
-      >
-        <AudioRecorder />
-      </MessageInputContextProvider>
+      <WithAudioPlayback>
+        <MessageInputContextProvider
+          value={{
+            recordingController: { ...DEFAULT_RECORDING_CONTROLLER, ...controller },
+          }}
+        >
+          <AudioRecorder />
+        </MessageInputContextProvider>
+      </WithAudioPlayback>
     </ChannelActionProvider>,
   );
 
@@ -463,7 +466,9 @@ describe('AudioRecorder', () => {
       recording: generateVoiceRecordingAttachment(),
       recordingState: MediaRecordingState.STOPPED,
     });
-    expect(container).toMatchSnapshot();
+    await waitFor(() => {
+      expect(container).toMatchSnapshot();
+    });
   });
 
   it.each([MediaRecordingState.PAUSED, MediaRecordingState.RECORDING])(

src/components/MessageInput/AttachmentPreviewList/VoiceRecordingPreview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { PlayButton } from '../../Attachment';
 import { RecordingTimer } from '../../MediaRecorder';
 import { CloseIcon, LoadingIndicatorIcon, RetryIcon } from '../icons';
@@ -33,6 +33,8 @@ export const VoiceRecordingPreview = ({
   const { isPlaying, secondsElapsed } =
     useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
 
+  useEffect(() => () => audioPlayer?.requestRemoval(), [audioPlayer]);
+
   if (!audioPlayer) return null;
 
   return (