dont re-prepare voice messages (#7897)

* dont reprepare voice messages

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove debug

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test Playback

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test RecordingPlayback

Signed-off-by: Kerry Archibald <kerrya@element.io>

* forgotten copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add comments

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/audio/Playback.ts

@@ -133,6 +133,13 @@ export class Playback extends EventEmitter implements IDestroyable {
     }
 
     public async prepare() {
+        // don't attempt to decode the media again
+        // AudioContext.decodeAudioData detaches the array buffer `this.buf`
+        // meaning it cannot be re-read
+        if (this.state !== PlaybackState.Decoding) {
+            return;
+        }
+
         // The point where we use an audio element is fairly arbitrary, though we don't want
         // it to be too low. As of writing, voice messages want to show a waveform but audio
         // messages do not. Using an audio element means we can't show a waveform preview, so

src/components/views/audio_messages/AudioPlayerBase.tsx

@@ -40,8 +40,9 @@ export default abstract class AudioPlayerBase extends React.PureComponent<IProps
     constructor(props: IProps) {
         super(props);
 
+        // Playback instances can be reused in the composer
         this.state = {
-            playbackPhase: PlaybackState.Decoding, // default assumption
+            playbackPhase: this.props.playback.currentState,
         };
 
         // We don't need to de-register: the class handles this for us internally

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -59,7 +59,9 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
             'mx_PlayPauseButton_pause': isPlaying,
             'mx_PlayPauseButton_disabled': isDisabled,
         });
+
         return <AccessibleTooltipButton
+            data-test-id='play-pause-button'
             className={classes}
             title={isPlaying ? _t("Pause") : _t("Play")}
             onClick={this.onClick}

src/components/views/audio_messages/RecordingPlayback.tsx

@@ -36,6 +36,7 @@ export default class RecordingPlayback extends AudioPlayerBase {
 
     protected renderComponent(): ReactNode {
         const shapeClass = !this.isWaveformable ? 'mx_VoiceMessagePrimaryContainer_noWaveform' : '';
+
         return (
             <div className={'mx_MediaBody mx_VoiceMessagePrimaryContainer ' + shapeClass}>
                 <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />