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/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} />