matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-07 10:46:24 +03:00
Code Activity

Set a max width on waveform-less tiles

Browse Source
This commit is contained in:
Travis Ralston
2021-07-13 19:02:12 -06:00
parent 5a75539b93
commit 1f131db216
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
res/css/views/audio_messages/_PlaybackContainer.scss
View File

@@ -49,4 +49,8 @@ limitations under the License.
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended. padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
padding-left: 8px; // isolate from recording circle / play control padding-left: 8px; // isolate from recording circle / play control
} }
&.mx_VoiceMessagePrimaryContainer_noWaveform {
max-width: 162px; // with all the padding this results in 185px wide
}
} }

3
src/components/views/audio_messages/RecordingPlayback.tsx
View File

@@ -64,7 +64,8 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
}; };
public render(): ReactNode { public render(): ReactNode {
return <div className='mx_MediaBody mx_VoiceMessagePrimaryContainer'> const shapeClass = !this.isWaveformable ? 'mx_VoiceMessagePrimaryContainer_noWaveform' : '';
return <div className={'mx_MediaBody mx_VoiceMessagePrimaryContainer ' + shapeClass}>
<PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} /> <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
<PlaybackClock playback={this.props.playback} /> <PlaybackClock playback={this.props.playback} />
{ this.isWaveformable && <PlaybackWaveform playback={this.props.playback} /> } { this.isWaveformable && <PlaybackWaveform playback={this.props.playback} /> }