Reduce audio waveform layout trashing

This commit is contained in:
Germain Souquet 2021-06-22 12:27:54 +01:00
parent f56216eec5
commit 27d255f30e
2 changed files with 14 additions and 5 deletions
res/css/views/voice_messages
src/components/views/voice_messages

View file

@ -33,9 +33,13 @@ limitations under the License.
font-size: $font-14px;
line-height: $font-24px;
contain: content;
.mx_Waveform {
.mx_Waveform_bar {
background-color: $voice-record-waveform-incomplete-fg-color;
height: 100%;
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
// Small animation to remove the mechanical feel of progress

View file

@ -34,16 +34,19 @@ interface IState {
* For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
* "filled", as a demonstration of the progress property.
*/
import { CSSProperties } from "react";
export interface WaveformCSSProperties extends CSSProperties {
'--barHeight': number;
}
@replaceableComponent("views.voice_messages.Waveform")
export default class Waveform extends React.PureComponent<IProps, IState> {
public static defaultProps = {
progress: 1,
};
public constructor(props) {
super(props);
}
public render() {
return <div className='mx_Waveform'>
{this.props.relHeights.map((h, i) => {
@ -53,7 +56,9 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
'mx_Waveform_bar': true,
'mx_Waveform_bar_100pct': isCompleteBar,
});
return <span key={i} style={{height: (h * 100) + '%'}} className={classes} />;
return <span key={i} style={{
"--barHeight": h,
} as WaveformCSSProperties} className={classes} />;
})}
</div>;
}