mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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 });
};
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>

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

@ -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();
}