imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix arrow seeking

Browse source
This commit is contained in:
Travis Ralston 2021-06-24 20:26:40 -06:00
parent ebb6f1b602
commit c5a72ee6ad
2 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/audio_messages/AudioPlayer.tsx
View file

@ -63,10 +63,13 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
this.setState({ playbackPhase: ev }); 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) { if (ev.key === Key.SPACE) {
ev.stopPropagation(); ev.stopPropagation();
this.playPauseRef.current?.toggle(); this.playPauseRef.current?.toggleState();
} else if (ev.key === Key.ARROW_LEFT) { } else if (ev.key === Key.ARROW_LEFT) {
ev.stopPropagation(); ev.stopPropagation();
this.seekRef.current?.left(); this.seekRef.current?.left();
@ -87,7 +90,7 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
public render(): ReactNode { public render(): ReactNode {
// tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard // tabIndex=0 to ensure that the whole component becomes a tab stop, where we handle keyboard
// events for accessibility // 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'> <div className='mx_AudioPlayer_primaryContainer'>
<PlayPauseButton <PlayPauseButton
playback={this.props.playback} playback={this.props.playback}
@ -107,7 +110,12 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
</div> </div>
</div> </div>
<div className='mx_AudioPlayer_seek'> <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} /> <PlaybackClock playback={this.props.playback} defaultDisplaySeconds={0} />
</div> </div>
</div> </div>

4
src/components/views/audio_messages/PlayPauseButton.tsx
View file

@ -42,10 +42,10 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
private onClick = () => { private onClick = () => {
// noinspection JSIgnoredPromiseFromCall // noinspection JSIgnoredPromiseFromCall
this.toggle(); this.toggleState();
}; };
public async toggle() { public async toggleState() {
await this.props.playback.toggle(); await this.props.playback.toggle();
} }