Progress bar Styling Changes

[joncameron]

Description

The current behavior of the progress bar often makes it difficult to interact with. Changes like removing the animation to provide a stable area of interaction in favor of increasing the initial height of the progress bar will make these events fire over a larger area.

Done Looks Like

• Remove animation that changes height of the progress bar
• Increase general height value of the progress bar (match full height on hover)
• Broader area for progress bar for interaction events
• Progress ball appears in front of transparent load progress bar

Examples

The target area for the mouseover is too small, making actions unavailable for users even in some cases where the mouse cursor is over progress bar:

The playhead/ball icon is behind the colored strips representing load progress:

Mockup of the progress bar with a greater height value:

[joncameron]

Increasing the height of the progress bar element should be easy; increasing the area of interaction might be more difficult.

[elynema]

I have noticed one issue. When I scrub by clicking on the progress bar or dragging the playhead, the progress bar gets a sort of yellow glow around it. This remains until I pause and restart the audio/video or click elsewhere on the page. This doesn't happen when just playing / pausing / starting the playback or when using structure to navigate. Observed in Chrome and Safari on desktop. Also observed in Safari on iPhone and iPad with an audio item (but only on the second click in the progress bar) as well as on Android Chrome.

progress-bar-highlighted.mov

Desired behavior would be to remove that highlighting on the progress bard when the user scrubs (clicks in progress bar or drags the playhead).

[elynema]

@joncameron Original styling requests in Done Looks Like look good to me across all platforms. You may want to take a quick look to see if you are happy as well.

Still need to QA the highlighting fix, which is currently on Ramp demo site only.

[joncameron]

Yes, this looks good! I'm happier with this, and comparing between avalon-dev and the Ramp demo site makes it clear the progress bar looks better without the highlighting as well.