681548 - Media controls visual refresh

Status: VERIFIED FIXED

(Toolkit :: Themes, defect)

Description

[Justin Dolske [:Dolske]]

We're working on a collection of small fixes to improve the browser's default HTML5 video/audio controls. They haven't changed much since the original landing for Firefox 3.5, and have accumulated bugs and dust.

I'd like to freshen the visual design of the controls. This could be as simple as just tweaking existing icons and colors. The only limit of this smallish-project is that large functional changes (eg, make UI for streaming suck less) should be done later.


See also: https://wiki.mozilla.org/Firefox/Features/Media_Controls_Refresh

Comment 1

[Justin Dolske [:Dolske]]

One nitpicky tweak is that I'd like to fix the throbber, it's a little janky in the pixels/antialiasing (eg, some of the circles look pointy or fuzzy). Or maybe we want an entirely new throbber look.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Potential design of new media controls mocked up by shorlander

Comment 3

[Ken Saunders]

+1
Very sharp
Perhaps increase the drop shadow (opacity? length?) in case the first frame or poster image is white?

Comment 4

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 564714 [details]
Potential design of new media controls mocked up by shorlander

I'm curious as to how we would draw the thumb when it is near the ends of the bar, since the thumb wouldn't be in the middle of the time box?

Like so?
At time 00:00 of 01:00:
{[|    ]---------}

At time 00:30 of 01:00:
{----[  |  ]-----}

At time 01:00 of 01:00:
{---------[    |]}

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

Stephen: Can you please provide the graphics for the different parts of the controls?

Comment 6

[Sonny Piers [:sonny]]

Any update?

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 681548

This is a simple patch that is just an image replacement of the previous graphics for the video controls. The padding-top of the timeLabel is adjusted to keep the time vertically centered within the thumb.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] from comment #7)
> Created attachment 592211 [details] [diff] [review]
> Patch for bug 681548

I forgot to note that these graphics are from shorlander :)

Comment 9

[Dão Gottwald [:dao]]

Comment on attachment 592211 [details] [diff] [review]
Patch for bug 681548

The volume scrubber looks like it could use some polish too...

Comment 10

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Dão Gottwald [:dao] from comment #9)
> Comment on attachment 592211 [details] [diff] [review]
> Patch for bug 681548
> 
> The volume scrubber looks like it could use some polish too...

I talked with shorlander and he was OK with the volume slider not getting updated in this bug since it's secondary UI.

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

https://hg.mozilla.org/integration/fx-team/rev/4c5e22a03a25

Comment 12

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/4c5e22a03a25

Comment 13

[Mihaela Velimiroviciu (:mihaelav)]

Attachment: new controls screenshot

Mozilla/5.0 (Windows NT 6.1; rv:12.0a2) Gecko/20120206 Firefox/12.0a2
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0a2) Gecko/20120206 Firefox/12.0a2
Mozilla/5.0 (X11; Linux i686; rv:12.0a2) Gecko/20120207 Firefox/12.0a2

Verified that timer label has cornered edges, volume button is changed, play button is larger and there is a new play button (overlaying the video) which fades in at mouse hover (and video image fades out) and fades out when mouse hover is removed (and video fades in). This button is displayed only before video is started to play, butit is not displayed when video is paused - shouldn't it be? 
Also, controls bar is displayed permanently before vidoe playing starts, so there is a redundant "play" button. Is this intended?

Are there an other UI changes to the video controls (except the ones mentioned) that were made for this bug? If so, can anyone please post some images for the new design?

Thank you!

Comment 14

[Mihaela Velimiroviciu (:mihaelav)]

Marking verified based on previous comment