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

Add seeking and notes about clock desync

Browse source
This commit is contained in:
Travis Ralston 2021-06-24 20:18:50 -06:00
parent 9c752680ba
commit ebb6f1b602
5 changed files with 143 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,6 +41,7 @@ interface IState {
@replaceableComponent("views.audio_messages.AudioPlayer")
export default class AudioPlayer extends React.PureComponent<IProps, IState> {
private playPauseRef: RefObject<PlayPauseButton> = createRef();
private seekRef: RefObject<SeekBar> = createRef();
constructor(props: IProps) {
super(props);
@ -66,6 +67,12 @@ export default class AudioPlayer extends React.PureComponent<IProps, IState> {
if (ev.key === Key.SPACE) {
ev.stopPropagation();
this.playPauseRef.current?.toggle();
} else if (ev.key === Key.ARROW_LEFT) {
ev.stopPropagation();
this.seekRef.current?.left();
} else if (ev.key === Key.ARROW_RIGHT) {
ev.stopPropagation();
this.seekRef.current?.right();
}
};

14
src/components/views/audio_messages/SeekBar.tsx
View file

@ -46,6 +46,8 @@ interface ISeekCSS extends CSSProperties {
'--fillTo': number;
}
const ARROW_SKIP_SECONDS = 5; // arbitrary
@replaceableComponent("views.audio_messages.SeekBar")
export default class SeekBar extends React.PureComponent<IProps, IState> {
// We use an animation frame request to avoid overly spamming prop updates, even if we aren't
@ -80,15 +82,21 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
}
public left() {
console.log("@@ LEFT");
// noinspection JSIgnoredPromiseFromCall
this.props.playback.skipTo(this.props.playback.clockInfo.timeSeconds - ARROW_SKIP_SECONDS);
}
public right() {
console.log("@@ RIGHT");
// noinspection JSIgnoredPromiseFromCall
this.props.playback.skipTo(this.props.playback.clockInfo.timeSeconds + ARROW_SKIP_SECONDS);
}
private onChange = (ev: ChangeEvent<HTMLInputElement>) => {
console.log('@@ CHANGE', ev.target.value);
// Thankfully, onChange is only called when the user changes the value, not when we
// change the value on the component. We can use this as a reliable "skip to X" function.
//
// noinspection JSIgnoredPromiseFromCall
this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.clockInfo.durationSeconds);
};
public render(): ReactNode {