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

Fix float operations to make a little more sense.

Browse source
This commit is contained in:
Travis Ralston 2021-03-29 21:25:06 -06:00
parent a848febd3d
commit e523ce6036
3 changed files with 18 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/voice_messages/LiveRecordingWaveform.tsx
View file

@ -49,16 +49,14 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
const bars = arrayFastResample(Array.from(update.waveform), DOWNSAMPLE_TARGET);
this.setState({
// The incoming data is between zero and one, but typically even screaming into a
// microphone won't send you over 0.6, so we "cap" the graph at about 0.50 for a
// point where the average user can still see feedback and be perceived as peaking
// when talking "loudly".
//
// We multiply by 100 because the Waveform component wants values in 0-100 (percentages)
heights: bars.map(b => percentageOf(b, 0, 0.50) * 100),
// microphone won't send you over 0.6, so we artificially adjust the gain for the
// waveform. This results in a slightly more cinematic/animated waveform for the
// user.
heights: bars.map(b => percentageOf(b, 0, 0.50)),
});
};
public render() {
return <Waveform heights={this.state.heights} />;
return <Waveform relHeights={this.state.heights} />;
}
}

6
src/components/views/voice_messages/Waveform.tsx
View file

@ -18,7 +18,7 @@ import React from "react";
import {replaceableComponent} from "../../../utils/replaceableComponent";
interface IProps {
heights: number[]; // percentages as integers (0-100)
relHeights: number[]; // relative heights (0-1)
}
interface IState {
@ -37,8 +37,8 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
public render() {
return <div className='mx_Waveform'>
{this.props.heights.map((h, i) => {
return <span key={i} style={{height: h + '%'}} className='mx_Waveform_bar' />;
{this.props.relHeights.map((h, i) => {
return <span key={i} style={{height: (h * 100) + '%'}} className='mx_Waveform_bar' />;
})}
</div>;
}