PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Bring back waveform for voice messages and retain seeking (#8843)

Browse source 
* Crude way of layering the waveform and seek bar

Not intended for production.

* Use a layout prop instead of something less descriptive

* Fix alignment properly, and play with styles

* Convert back to a ball

* Use `transparent` which makes NVDA happy enough

* Allow keyboards in the seek bar

* Try to make the clock behave more correctly with screen readers

MIDNIGHT

* Remove legacy export

* Remove redundant attr

* Appease the linter
This commit is contained in:
Travis Ralston 2022-06-14 18:13:13 -06:00 committed by GitHub
parent d81e2cea14
commit 39f2bbaaf4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
res/css/views/audio_messages/_PlaybackContainer.scss
View file

@ -52,16 +52,57 @@ limitations under the License.
padding-left: 8px; // isolate from recording circle / play control
}
// For timeline-rendered playback, mirror the values for where the clock is in
// the waveform version.
.mx_SeekBar {
.mx_RecordingPlayback_timelineLayoutMiddle {
margin-left: 8px;
margin-right: 6px;
position: relative;
display: inline-block;
flex: 1;
height: 30px; // same height as mx_Waveform, needed for automatic vertical centering
.mx_Waveform {
position: absolute;
left: 0;
top: 0;
}
.mx_SeekBar {
position: absolute;
left: 0;
height: 30px;
top: -2px; // visually vertically centered
// Hide the hairline progress bar since we're at 100% height. Need to have distinct rules
// because CSS is weird.
background: none;
&::before {
background: none;
}
&::-moz-range-progress {
background: none;
}
// Make the thumb easier to see. Like the SeekBar original styles, these need to be
// distinct. We make it transparent so it doesn't show up on the UI, but also larger
// so it's easier to grab by mouse users in some browsers. Most browsers let the user
// move and drag the thumb regardless of hitting the thumb, however.
&::-webkit-slider-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
&::-moz-range-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
}
// For timeline-rendered playback, the clock is on the other side of the waveform.
& + .mx_Clock {
text-align: right;
// Take the padding off the clock because it's accounted for in the seek bar
// Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle`
padding: 0;
}
}

6
src/components/views/audio_messages/Clock.tsx
View file

@ -18,7 +18,7 @@ import React, { HTMLProps } from "react";
import { formatSeconds } from "../../../DateUtils";
export interface IProps extends Pick<HTMLProps<HTMLSpanElement>, "aria-live"> {
interface IProps extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "role"> {
seconds: number;
}
@ -31,14 +31,14 @@ export default class Clock extends React.Component<IProps> {
super(props);
}
shouldComponentUpdate(nextProps: Readonly<IProps>): boolean {
public shouldComponentUpdate(nextProps: Readonly<IProps>): boolean {
const currentFloor = Math.floor(this.props.seconds);
const nextFloor = Math.floor(nextProps.seconds);
return currentFloor !== nextFloor;
}
public render() {
return <span aria-live={this.props["aria-live"]} className='mx_Clock'>
return <span aria-live={this.props["aria-live"]} role={this.props.role} className='mx_Clock'>
{ formatSeconds(this.props.seconds) }
</span>;
}

2
src/components/views/audio_messages/PlaybackClock.tsx
View file

@ -76,7 +76,7 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
}
return <Clock
seconds={seconds}
aria-live={this.state.playbackPhase === PlaybackState.Playing ? "off" : undefined}
role="timer"
/>;
}
}

37
src/components/views/audio_messages/RecordingPlayback.tsx
View file

@ -22,37 +22,60 @@ import AudioPlayerBase, { IProps as IAudioPlayerBaseProps } from "./AudioPlayerB
import SeekBar from "./SeekBar";
import PlaybackWaveform from "./PlaybackWaveform";
interface IProps extends IAudioPlayerBaseProps {
export enum PlaybackLayout {
/**
* When true, use a waveform instead of a seek bar
* Clock on the left side of a waveform, without seek bar.
*/
withWaveform?: boolean;
Composer,
/**
* Clock on the right side of a waveform, with an added seek bar.
*/
Timeline,
}
interface IProps extends IAudioPlayerBaseProps {
layout?: PlaybackLayout; // Defaults to Timeline layout
}
export default class RecordingPlayback extends AudioPlayerBase<IProps> {
// This component is rendered in two ways: the composer and timeline. They have different
// rendering properties (specifically the difference of a waveform or not).
private renderWaveformLook(): ReactNode {
private renderComposerLook(): ReactNode {
return <>
<PlaybackClock playback={this.props.playback} />
<PlaybackWaveform playback={this.props.playback} />
</>;
}
private renderSeekableLook(): ReactNode {
private renderTimelineLook(): ReactNode {
return <>
<div className="mx_RecordingPlayback_timelineLayoutMiddle">
<PlaybackWaveform playback={this.props.playback} />
<SeekBar
playback={this.props.playback}
tabIndex={-1} // prevent tabbing into the bar
tabIndex={0} // allow keyboard users to fall into the seek bar
playbackPhase={this.state.playbackPhase}
ref={this.seekRef}
/>
</div>
<PlaybackClock playback={this.props.playback} />
</>;
}
protected renderComponent(): ReactNode {
let body: ReactNode;
switch (this.props.layout) {
case PlaybackLayout.Composer:
body = this.renderComposerLook();
break;
case PlaybackLayout.Timeline: // default is timeline, fall through.
default:
body = this.renderTimelineLook();
break;
}
return (
<div className="mx_MediaBody mx_VoiceMessagePrimaryContainer" onKeyDown={this.onKeyDown}>
<PlayPauseButton
@ -60,7 +83,7 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
playbackPhase={this.state.playbackPhase}
ref={this.playPauseRef}
/>
{ this.props.withWaveform ? this.renderWaveformLook() : this.renderSeekableLook() }
{ body }
</div>
);
}

7
src/components/views/rooms/VoiceRecordComposerTile.tsx
View file

@ -28,7 +28,7 @@ import LiveRecordingWaveform from "../audio_messages/LiveRecordingWaveform";
import LiveRecordingClock from "../audio_messages/LiveRecordingClock";
import { VoiceRecordingStore } from "../../../stores/VoiceRecordingStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import RecordingPlayback from "../audio_messages/RecordingPlayback";
import RecordingPlayback, { PlaybackLayout } from "../audio_messages/RecordingPlayback";
import Modal from "../../../Modal";
import ErrorDialog from "../dialogs/ErrorDialog";
import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
@ -231,7 +231,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
if (!this.state.recorder) return null; // no recorder means we're not recording: no waveform
if (this.state.recordingPhase !== RecordingState.Started) {
return <RecordingPlayback playback={this.state.recorder.getPlayback()} withWaveform={true} />;
return <RecordingPlayback
playback={this.state.recorder.getPlayback()}
layout={PlaybackLayout.Composer}
/>;
}
// only other UI is the recording-in-progress UI

38
test/components/views/audio_messages/RecordingPlayback-test.tsx
View file

@ -20,13 +20,14 @@ import { mocked } from 'jest-mock';
import { logger } from 'matrix-js-sdk/src/logger';
import { act } from 'react-dom/test-utils';
import RecordingPlayback from '../../../../src/components/views/audio_messages/RecordingPlayback';
import RecordingPlayback, { PlaybackLayout } from '../../../../src/components/views/audio_messages/RecordingPlayback';
import { Playback } from '../../../../src/audio/Playback';
import RoomContext, { TimelineRenderingType } from '../../../../src/contexts/RoomContext';
import { createAudioContext } from '../../../../src/audio/compat';
import { findByTestId, flushPromises } from '../../../test-utils';
import PlaybackWaveform from '../../../../src/components/views/audio_messages/PlaybackWaveform';
import SeekBar from "../../../../src/components/views/audio_messages/SeekBar";
import PlaybackClock from "../../../../src/components/views/audio_messages/PlaybackClock";
jest.mock('../../../../src/audio/compat', () => ({
createAudioContext: jest.fn(),
@ -128,19 +129,34 @@ describe('<RecordingPlayback />', () => {
expect(playback.toggle).toHaveBeenCalled();
});
it('should render a seek bar by default', () => {
describe('Composer Layout', () => {
it('should have a waveform, no seek bar, and clock', () => {
const playback = new Playback(new ArrayBuffer(8));
const component = getComponent({ playback });
expect(component.find(PlaybackWaveform).length).toBeFalsy();
expect(component.find(SeekBar).length).toBeTruthy();
});
it('should render a waveform when requested', () => {
const playback = new Playback(new ArrayBuffer(8));
const component = getComponent({ playback, withWaveform: true });
const component = getComponent({ playback, layout: PlaybackLayout.Composer });
expect(component.find(PlaybackClock).length).toBeTruthy();
expect(component.find(PlaybackWaveform).length).toBeTruthy();
expect(component.find(SeekBar).length).toBeFalsy();
});
});
describe('Timeline Layout', () => {
it('should have a waveform, a seek bar, and clock', () => {
const playback = new Playback(new ArrayBuffer(8));
const component = getComponent({ playback, layout: PlaybackLayout.Timeline });
expect(component.find(PlaybackClock).length).toBeTruthy();
expect(component.find(PlaybackWaveform).length).toBeTruthy();
expect(component.find(SeekBar).length).toBeTruthy();
});
it('should be the default', () => {
const playback = new Playback(new ArrayBuffer(8));
const component = getComponent({ playback }); // no layout set for test
expect(component.find(PlaybackClock).length).toBeTruthy();
expect(component.find(PlaybackWaveform).length).toBeTruthy();
expect(component.find(SeekBar).length).toBeTruthy();
});
});
});