Add Padding to Progress Bar

[joncameron]

Description

The progress bar currently extends to the full width of the media player. Padding around the progress bar would provide easier scrubbing around the beginning and ending around recordings: it's difficult to click and interact with playhead when at 00:00 (and some of the playhead is not visible).

Done Looks Like

• [x] Center align the progress bar (audio player) the top of the control area bar and the player controls
• [x] 12 pixels of margin or padding to the left and right of the progress bar
• [x] Text tooltip for current time can continue floating above the player
• [x] Keep height of the media player the same
• [x] This design needs to be tested as well with the height and width of Avalon embeds in the wild

Mockup

Current audio player

[elynema]

I think the new design is looking much improved! Seeing the left/right padding, new size of progress bar, and vertical centering on all devices.

[elynema]

Dananji reverted this design for the audio player embedded widget because the 2 layer approach was causing a vertical scroll in the embeds. So the embedded audio player has the same design as it used to. Both video and audio are now fitting fine in the embedded environment.

Embedded audio seems to be missing the playback speed and audio quality widgets. Will likely need to create a new issue for that.