Finalize default control bar components (and their options)

[heff]

• Do we show current time in the bar or just on hover
• Vertical/horizontal (inline) volume
• Spinner icon (because Steve doesn't like that it's Picasa)

Followup

• Do we remove the other (hidden) volume components from the codebase

[heff]

@mmcc, @gkatsev, @dmlap, I agree with the following statements. Please give me an agree/disagree for each.

• The controls that are currently shown by default are good and are in the best order
• We should continue to show just the remaining time, with the current time on hover
• We should remove the independent volume and mute controls from the control bar and rely on just the volume menu, which we've made work with at least the two primary volume designs

Default player controls:

With hover states on:

What the player looks like with all control bar components 'turned on'

Notes

• The volume slider needs to be fixed if we keep it, hoping we don't.
• The live control won't ever show now and needs the css to show it added back

And FYI, here's the CSS that was needed to show the ones that aren't showing by default. This uses the minimum strength of selectors required to show the control, in case we want the optional controls any easier to show. I expect to get requests on how to show the other time controls, to match the old way.

    /* Hidden by default, selectively shown. 
       At this point this is how a skin designer would show them. */
    .video-js .vjs-current-time { display: block; }
    .video-js .vjs-time-divider { display: block; }
    .video-js .vjs-duration { display: block; }
    .video-js .vjs-mute-control { display: block; }
    .video-js .vjs-volume-control { display: block; }

    /* Could be broken. Can't find what's supposed to show it now */
    .video-js .vjs-live-control { display: block; }

    /* Programmatically hidden with vjs-hidden when no tracks */
    .video-js .vjs-chapters-button { display: block !important; }
    .video-js .vjs-subtitles-button { display: block !important; }
    .video-js .vjs-captions-button { display: block !important; }

    /* Hidden with state classes */
    .video-js .vjs-control-bar { display: flex; }
    .video-js.vjs-has-started .vjs-big-play-button { display: block; }

[mmcc]

• The controls that are currently shown by default are good and are in the best order

👍

• We should continue to show just the remaining time, with the current time on hover

👍

• We should remove the independent volume and mute controls from the control bar and rely on just the volume menu, which we've made work with at least the two primary volume designs

👍 Other setups would be doable via just CSS as well (just mute, just volume bar) or via setup options (inline, popup, vertical, horizontal, etc).

[heff]

Minor adjustment. I forgot we were aiming to make the volume expand inline. It requires a little more hover smartness to be added, but I like it.

[dmlap]

The controls that are currently shown by default are good and are in the best order

👍

We should continue to show just the remaining time, with the current time on hover

👍

Minor adjustment. I forgot we were aiming to make the volume expand inline. It requires a little more hover smartness to be added, but I like it.

👍

[heff]

Everything in this is done except picking a new spinner. I looked through the other material icons and agree with Matt that the current one is probably the best option of the set. And it looks a little less like Picasa to me now that I've seen both side by side.

The spinner is a signature visual though so I may try to get in one of the following, if there's any favorites.
http://tobiasahlin.com/spinkit/
http://projects.lukehaas.me/css-loaders/

But otherwise I'll push this to 5.1.

[mmcc]

We can use icons from other sets. Our social icons, for example, come from font awesome. We should just make sure they match. 

—
Sent from mobile

On Thu, Sep 10, 2015 at 5:27 PM, Steve Heffernan [email protected]
wrote:

Everything in this is done except picking a new spinner. I looked through the other material icons and agree with Matt that the current one is probably the best option of the set. And it looks a little less like Picasa to me now that I've seen both side by side.
The spinner is a signature visual though so I may try to get in one of the following, if there's any favorites.
http://tobiasahlin.com/spinkit/
http://projects.lukehaas.me/css-loaders/

But otherwise I'll push this to 5.1.

Reply to this email directly or view it on GitHub:
#2507 (comment)

[heff]

Going to close this one since we're just waiting on #2582, which just needs a verbal approval, from anyone.

[tneaves]

@mmcc is there a simple way to move the progress bar back to its original position, i.e. not inline?

[mmcc]

@tneaves You can do it using just CSS. There are other better examples (that are probably more up to date), but I hacked something together for videojs-skin-twitchy. The relevant piece is the progress styles, but you'll also want to set the spacer element to width auto so it automatically resizes to fill the void left by removing the progress bar.