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

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,26 +39,24 @@ export default class AudioPlayer extends AudioPlayerBase {
// 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} onKeyDown={this.onKeyDown}>
<div className='mx_AudioPlayer_primaryContainer'>
<div className="mx_MediaBody mx_AudioPlayer_container" tabIndex={0} onKeyDown={this.onKeyDown}>
<div className="mx_AudioPlayer_primaryContainer">
<PlayPauseButton
playback={this.props.playback}
playbackPhase={this.state.playbackPhase}
tabIndex={-1} // prevent tabbing into the button
ref={this.playPauseRef}
/>
<div className='mx_AudioPlayer_mediaInfo'>
<span className='mx_AudioPlayer_mediaName'>
{ this.props.mediaName || _t("Unnamed audio") }
</span>
<div className='mx_AudioPlayer_byline'>
<div className="mx_AudioPlayer_mediaInfo">
<span className="mx_AudioPlayer_mediaName">{this.props.mediaName || _t("Unnamed audio")}</span>
<div className="mx_AudioPlayer_byline">
<DurationClock playback={this.props.playback} />
&nbsp; { /* easiest way to introduce a gap between the components */ }
{ this.renderFileSize() }
&nbsp; {/* easiest way to introduce a gap between the components */}
{this.renderFileSize()}
</div>
</div>
</div>
<div className='mx_AudioPlayer_seek'>
<div className="mx_AudioPlayer_seek">
<SeekBar
playback={this.props.playback}
tabIndex={-1} // prevent tabbing into the bar

12
src/components/views/audio_messages/AudioPlayerBase.tsx
View file

@ -55,7 +55,7 @@ export default abstract class AudioPlayerBase<T extends IProps = IProps> extends
// Don't wait for the promise to complete - it will emit a progress update when it
// is done, and it's not meant to take long anyhow.
this.props.playback.prepare().catch(e => {
this.props.playback.prepare().catch((e) => {
logger.error("Error processing audio file:", e);
this.setState({ error: true });
});
@ -95,9 +95,11 @@ export default abstract class AudioPlayerBase<T extends IProps = IProps> extends
protected abstract renderComponent(): ReactNode;
public render(): ReactNode {
return <>
{ this.renderComponent() }
{ this.state.error && <div className="text-warning">{ _t("Error downloading audio") }</div> }
</>;
return (
<>
{this.renderComponent()}
{this.state.error && <div className="text-warning">{_t("Error downloading audio")}</div>}
</>
);
}
}

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

@ -44,8 +44,10 @@ export default class Clock extends React.Component<Props> {
}
public render() {
return <span aria-live={this.props["aria-live"]} role={this.props.role} className='mx_Clock'>
{ this.props.formatFn(this.props.seconds) }
</span>;
return (
<span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
{this.props.formatFn(this.props.seconds)}
</span>
);
}
}

39
src/components/views/audio_messages/DevicesContextMenu.tsx
View file

@ -29,28 +29,25 @@ interface Props {
onDeviceSelect: (device: MediaDeviceInfo) => void;
}
export const DevicesContextMenu: React.FC<Props> = ({
containerRef,
currentDevice,
devices,
onDeviceSelect,
}) => {
export const DevicesContextMenu: React.FC<Props> = ({ containerRef, currentDevice, devices, onDeviceSelect }) => {
const deviceOptions = devices.map((d: MediaDeviceInfo) => {
return <IconizedContextMenuRadio
key={d.deviceId}
active={d.deviceId === currentDevice?.deviceId}
onClick={() => onDeviceSelect(d)}
label={d.label}
/>;
return (
<IconizedContextMenuRadio
key={d.deviceId}
active={d.deviceId === currentDevice?.deviceId}
onClick={() => onDeviceSelect(d)}
label={d.label}
/>
);
});
return <IconizedContextMenu
mountAsChild={false}
onFinished={() => {}}
{...toLeftOrRightOf(containerRef.current.getBoundingClientRect(), 0)}
>
<IconizedContextMenuOptionList>
{ deviceOptions }
</IconizedContextMenuOptionList>
</IconizedContextMenu>;
return (
<IconizedContextMenu
mountAsChild={false}
onFinished={() => {}}
{...toLeftOrRightOf(containerRef.current.getBoundingClientRect(), 0)}
>
<IconizedContextMenuOptionList>{deviceOptions}</IconizedContextMenuOptionList>
</IconizedContextMenu>
);
};

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

@ -52,19 +52,21 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
const { playback, playbackPhase, ...restProps } = this.props;
const isPlaying = playback.isPlaying;
const isDisabled = playbackPhase === PlaybackState.Decoding;
const classes = classNames('mx_PlayPauseButton', {
'mx_PlayPauseButton_play': !isPlaying,
'mx_PlayPauseButton_pause': isPlaying,
'mx_PlayPauseButton_disabled': isDisabled,
const classes = classNames("mx_PlayPauseButton", {
mx_PlayPauseButton_play: !isPlaying,
mx_PlayPauseButton_pause: isPlaying,
mx_PlayPauseButton_disabled: isDisabled,
});
return <AccessibleTooltipButton
data-test-id='play-pause-button'
className={classes}
title={isPlaying ? _t("Pause") : _t("Play")}
onClick={this.onClick}
disabled={isDisabled}
{...restProps}
/>;
return (
<AccessibleTooltipButton
data-test-id="play-pause-button"
className={classes}
title={isPlaying ? _t("Pause") : _t("Play")}
onClick={this.onClick}
disabled={isDisabled}
{...restProps}
/>
);
}
}

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

@ -74,9 +74,6 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
seconds = this.state.durationSeconds;
}
}
return <Clock
seconds={seconds}
role="timer"
/>;
return <Clock seconds={seconds} role="timer" />;
}
}

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

@ -44,25 +44,29 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
// rendering properties (specifically the difference of a waveform or not).
private renderComposerLook(): ReactNode {
return <>
<PlaybackClock playback={this.props.playback} />
<PlaybackWaveform playback={this.props.playback} />
</>;
return (
<>
<PlaybackClock playback={this.props.playback} />
<PlaybackWaveform playback={this.props.playback} />
</>
);
}
private renderTimelineLook(): ReactNode {
return <>
<div className="mx_RecordingPlayback_timelineLayoutMiddle">
<PlaybackWaveform playback={this.props.playback} />
<SeekBar
playback={this.props.playback}
tabIndex={0} // allow keyboard users to fall into the seek bar
disabled={this.state.playbackPhase === PlaybackState.Decoding}
ref={this.seekRef}
/>
</div>
<PlaybackClock playback={this.props.playback} />
</>;
return (
<>
<div className="mx_RecordingPlayback_timelineLayoutMiddle">
<PlaybackWaveform playback={this.props.playback} />
<SeekBar
playback={this.props.playback}
tabIndex={0} // allow keyboard users to fall into the seek bar
disabled={this.state.playbackPhase === PlaybackState.Decoding}
ref={this.seekRef}
/>
</div>
<PlaybackClock playback={this.props.playback} />
</>
);
}
protected renderComponent(): ReactNode {
@ -84,7 +88,7 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
playbackPhase={this.state.playbackPhase}
ref={this.playPauseRef}
/>
{ body }
{body}
</div>
);
}

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

@ -37,7 +37,7 @@ interface IState {
}
interface ISeekCSS extends CSSProperties {
'--fillTo': number;
"--fillTo": number;
}
const ARROW_SKIP_SECONDS = 5; // arbitrary
@ -48,7 +48,8 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
private animationFrameFn = new MarkedExecution(
() => this.doUpdate(),
() => requestAnimationFrame(() => this.animationFrameFn.trigger()));
() => requestAnimationFrame(() => this.animationFrameFn.trigger()),
);
public static defaultProps = {
tabIndex: 0,
@ -68,10 +69,7 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
private doUpdate() {
this.setState({
percentage: percentageOf(
this.props.playback.timeSeconds,
0,
this.props.playback.durationSeconds),
percentage: percentageOf(this.props.playback.timeSeconds, 0, this.props.playback.durationSeconds),
});
}
@ -101,18 +99,20 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
public render(): ReactNode {
// We use a range input to avoid having to re-invent accessibility handling on
// a custom set of divs.
return <input
type="range"
className='mx_SeekBar'
tabIndex={this.props.tabIndex}
onChange={this.onChange}
onMouseDown={this.onMouseDown}
min={0}
max={1}
value={this.state.percentage}
step={0.001}
style={{ '--fillTo': this.state.percentage } as ISeekCSS}
disabled={this.props.disabled}
/>;
return (
<input
type="range"
className="mx_SeekBar"
tabIndex={this.props.tabIndex}
onChange={this.onChange}
onMouseDown={this.onMouseDown}
min={0}
max={1}
value={this.state.percentage}
step={0.001}
style={{ "--fillTo": this.state.percentage } as ISeekCSS}
disabled={this.props.disabled}
/>
);
}
}

45
src/components/views/audio_messages/Waveform.tsx
View file

@ -18,7 +18,7 @@ import React, { CSSProperties } from "react";
import classNames from "classnames";
interface WaveformCSSProperties extends CSSProperties {
'--barHeight': number;
"--barHeight": number;
}
interface IProps {
@ -26,8 +26,7 @@ interface IProps {
progress: number; // percent complete, 0-1, default 100%
}
interface IState {
}
interface IState {}
/**
* A simple waveform component. This renders bars (centered vertically) for each
@ -43,22 +42,28 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
};
public render() {
return <div className='mx_Waveform'>
{ this.props.relHeights.map((h, i) => {
const progress = this.props.progress;
const isCompleteBar = (i / this.props.relHeights.length) <= progress && progress > 0;
const classes = classNames({
'mx_Waveform_bar': true,
'mx_Waveform_bar_100pct': isCompleteBar,
});
return <span
key={i}
style={{
"--barHeight": h,
} as WaveformCSSProperties}
className={classes}
/>;
}) }
</div>;
return (
<div className="mx_Waveform">
{this.props.relHeights.map((h, i) => {
const progress = this.props.progress;
const isCompleteBar = i / this.props.relHeights.length <= progress && progress > 0;
const classes = classNames({
mx_Waveform_bar: true,
mx_Waveform_bar_100pct: isCompleteBar,
});
return (
<span
key={i}
style={
{
"--barHeight": h,
} as WaveformCSSProperties
}
className={classes}
/>
);
})}
</div>
);
}
}