From c5a72ee6ad1c75307132ffe063450c77f77d51f7 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Thu, 24 Jun 2021 20:26:40 -0600
Subject: [PATCH] Fix arrow seeking

---
 .../views/audio_messages/AudioPlayer.tsx         | 16 ++++++++++++----
 .../views/audio_messages/PlayPauseButton.tsx     |  4 ++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/views/audio_messages/AudioPlayer.tsx b/src/components/views/audio_messages/AudioPlayer.tsx
index 0767c814d8..2f74c7b069 100644
--- a/src/components/views/audio_messages/AudioPlayer.tsx
+++ b/src/components/views/audio_messages/AudioPlayer.tsx
@@ -63,10 +63,13 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
         this.setState({ playbackPhase: ev });
     };
 
-    private onKeyPress = (ev: React.KeyboardEvent) => {
+    private onKeyDown = (ev: React.KeyboardEvent) => {
+        // stopPropagation() prevents the FocusComposer catch-all from triggering,
+        // but we need to do it on key down instead of press (even though the user
+        // interaction is typically on press).
         if (ev.key === Key.SPACE) {
             ev.stopPropagation();
-            this.playPauseRef.current?.toggle();
+            this.playPauseRef.current?.toggleState();
         } else if (ev.key === Key.ARROW_LEFT) {
             ev.stopPropagation();
             this.seekRef.current?.left();
@@ -87,7 +90,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
     public render(): ReactNode {
         // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
         // events for accessibility
-        return <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyPress={this.onKeyPress}>
+        return <div className='mx_MediaBody mx_AudioPlayer_container' tabIndex={0} onKeyDown={this.onKeyDown}>
             <div className='mx_AudioPlayer_primaryContainer'>
                 <PlayPauseButton
                     playback={this.props.playback}
@@ -107,7 +110,12 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
                 </div>
             </div>
             <div className='mx_AudioPlayer_seek'>
-                <SeekBar playback={this.props.playback} tabIndex={-1} playbackPhase={this.state.playbackPhase} />
+                <SeekBar
+                    playback={this.props.playback}
+                    tabIndex={-1} // prevent tabbing into the bar
+                    playbackPhase={this.state.playbackPhase}
+                    ref={this.seekRef}
+                />
                 <PlaybackClock playback={this.props.playback} defaultDisplaySeconds={0} />
             </div>
         </div>
diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx
index 7d881a10e5..a4f1e770f2 100644
--- a/src/components/views/audio_messages/PlayPauseButton.tsx
+++ b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -42,10 +42,10 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
 
     private onClick = () => {
         // noinspection JSIgnoredPromiseFromCall
-        this.toggle();
+        this.toggleState();
     };
 
-    public async toggle() {
+    public async toggleState() {
         await this.props.playback.toggle();
     }