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

Bring back waveform for voice messages and retain seeking (#8843)

Browse source 
* Crude way of layering the waveform and seek bar

Not intended for production.

* Use a layout prop instead of something less descriptive

* Fix alignment properly, and play with styles

* Convert back to a ball

* Use `transparent` which makes NVDA happy enough

* Allow keyboards in the seek bar

* Try to make the clock behave more correctly with screen readers

MIDNIGHT

* Remove legacy export

* Remove redundant attr

* Appease the linter
This commit is contained in:
Travis Ralston 2022-06-14 18:13:13 -06:00 • committed by GitHub
parent d81e2cea14
commit 39f2bbaaf4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 116 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

49
res/css/views/audio_messages/_PlaybackContainer.scss
View file

@ -52,16 +52,57 @@ limitations under the License.
padding-left: 8px; // isolate from recording circle / play control
}
// For timeline-rendered playback, mirror the values for where the clock is in
// the waveform version.
.mx_SeekBar {
.mx_RecordingPlayback_timelineLayoutMiddle {
margin-left: 8px;
margin-right: 6px;
position: relative;
display: inline-block;
flex: 1;
height: 30px; // same height as mx_Waveform, needed for automatic vertical centering
.mx_Waveform {
position: absolute;
left: 0;
top: 0;
}
.mx_SeekBar {
position: absolute;
left: 0;
height: 30px;
top: -2px; // visually vertically centered
// Hide the hairline progress bar since we're at 100% height. Need to have distinct rules
// because CSS is weird.
background: none;
&::before {
background: none;
}
&::-moz-range-progress {
background: none;
}
// Make the thumb easier to see. Like the SeekBar original styles, these need to be
// distinct. We make it transparent so it doesn't show up on the UI, but also larger
// so it's easier to grab by mouse users in some browsers. Most browsers let the user
// move and drag the thumb regardless of hitting the thumb, however.
&::-webkit-slider-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
&::-moz-range-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
}
// For timeline-rendered playback, the clock is on the other side of the waveform.
& + .mx_Clock {
text-align: right;
// Take the padding off the clock because it's accounted for in the seek bar
// Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle`
padding: 0;
}
}