1291018 - Closed-caption button missing UI states

Status: RESOLVED FIXED

(Toolkit :: Video/Audio Controls, defect, P2)

Description

[Justin Dolske [:Dolske]]

Bug 887934 added a closed-caption button to the default video controls.

Unlike the other buttons on the control bar, I don't see any change upon hover. (This is CSS controlled, normally button images are shown with opacity 0.7, and changed to opacity 1.0 on hover). I see CSS for this in the patch, but it's apparently not working?

Oddly, I _do_ see a change for action (ie, holding down the mousebutton on it), where the opacity is changing to 0.4 and it get darker.

Also, I believe the patch is missing a state to have the button itself indicate if closed-captions are enabled or not. It's basically a toggle button, and so it should have some visibly distinct on/off state. YouTube, for example, shows a small red underline on its controls when enabled (and iirc in the past the icon turned red, but that's probably too visible).

[The captions themselves are not sufficient to show that VTT is enabled; a caption is not constantly show, and an indicator on the bar is still useful so something indicates the state.]

Comment 1

[Justin Dolske [:Dolske]]

Oh, I see part of the problem. The patch is setting opacity to 1.0 when the button is enabled, but that conflicts with the hover state. So when closed-captions are disabled, the hover state works, but when it's enabled, there's no visible change.

Same fix should address both -- have a different image for the enabled state instead of changing the opacity.

Comment 2

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

This will most likely get fixed by bug 1271765 as right now we don't have enough styles to support inactive, hover, active, and on and the combination of those.

Comment 3

[Ray Lin[:ralin]]

Bug 1281414 addressed part of the problem, but is duplicated as Peko was already on the new design. I'll forward this problem to Peko and I believe she can come out with a great approach.

Comment 4

[Justin Dolske [:Dolske]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
> This will most likely get fixed by bug 1271765 as right now we don't have
> enough styles to support inactive, hover, active, and on and the combination
> of those.

I'd note that's a pretty big redesign, and would probably be lucky to land in 51. This button ships in 50.

Comment 5

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

Stephen, since you created the [CC] icon that is shipping in v50, would you be able to create a secondary version of it?

Right now we just have the [CC] icon and show it for all states.

What I'm thinking is when close captioning is on, we could show the [CC] icon but have an animation on it of closed captions actually displaying. The [CC] icon looks like a TV showing the letters CC on its display. We could create a new icon that uses that same TV design but shows caption text on the bottom third of the design. If it was animated it could show one line in one frame, and then another frame of the animation could show two lines of caption text. Note how we're showing an animation in reader view for the text-to-speech now, though this is a smaller icon.

Comment 6

[Justin Dolske [:Dolske]]

Bonus points for doing something fancy, but I think it would be entirely adequate (and simple!) to just have a different image.

As a few examples:

* YouTube changes the icon to red when enabled. Wait, scratch that, seems they've recently updated the design. It's now a red underline (which animates when shown/removed). I think this is an improvement, since a bright red icon is a little distracting. (eg: https://www.youtube.com/watch?v=ff4RWuPx8Co)

* Vimeo changes the icon to blue (eg: https://vimeo.com/76979871)

* Chrome's controls strike-out the icon when disabled. (HTML5 demo, http://html5-demos.appspot.com/static/video/track/index.html)

The color change on YouTube / Vimeo isn't really appropriate for our (colorless) controls, since it's matching colors used elsewhere in their controls, but ours could just become bright(er) white instead of grey.

The strikeout of Chrome feels a little odd / heavy to me... Seems like it should just be a subtle indication of activation; a strikeout almost feels too much like an error indication. (See: broken lock icon on SSL error pages, striked out icons for permission that have been denied.)

Comment 7

[Justin Dolske [:Dolske]]

(tl;dr: how about a white icon for the active state)

Comment 8

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

This was fixed by bug 1271765.