New Base Theme #1999

mmcc · 2015-04-02T00:35:08Z

Opening the PR so we can start talking about it, but this needs a little more work before it can be pulled in. We should talk about things like:

Do we really want to do style injection by default. I personally love it, but there is a slightly annoying Flash of Unstyled Video Player™.
Some things have changed in the VJS world since I started this, including the separator. That should be removed from this PR in lieu of Feature/control bar separator #1838.
Any stylistic changes we want to make. I promise I'll only cry into my pillow a little if you have mean things to say about it.

I'm almost certain I blew away some necessary stuff in the Gruntfile when I was rebasing from master, but I didn't want to dig through the various tasks and mess with it. There are probably css-specific things from the build task specifically that got blown away. Sorry. 😓

Lastly, this needs to be tested a ton across all the browsers and devices. Seriously. I'm using flexbox with a table fallback, so it's not like anything could possibly go wrong .

For working examples built on top of the skin:

Colors - Simple color themes on top of the base styles
Twitchy - Quickly hacked together in an afternoon to try and mimic the Twitch player

heff · 2015-04-02T03:50:58Z

src/js/control-bar/time-display.js

@@ -94,7 +94,7 @@ vjs.TimeDivider = vjs.Component.extend({

 vjs.TimeDivider.prototype.createEl = function(){
  return vjs.Component.prototype.createEl.call(this, 'div', {
-    className: 'vjs-time-divider',
+    className: 'vjs-time-controls vjs-time-divider',


vis-time-controls should be singular, yeah?

heff · 2015-04-02T04:04:51Z

Another giant 5.0 PR, good luck everybody! :) Good stuff Matt.

For everyone, the commits has a decent list of the overall changes.

@mmcc, can you talk about some of the motivations behind all of this? I'm thinking specifically about breaking up the files, the variables file, and anything else related.

Also since every line of CSS was moved, it's hard to tell what styles changed. What can we do to start a skin migration guide?

heff · 2015-04-02T04:08:09Z

.travis.yml

- 0.10
+  - 0.10
+before_install:
+  - gem install sass


Is gem install sass a dependency for everyone or just for Travis?

Can we use libsass instead? I really don't want to need to have to deal with gems.

Right now this PR is using grunt-contrib-sass, which uses Ruby sass. However, we can try using grunt-sass instead.

Whatever doesn't require me to ever touch gem.

ange007 · 2015-04-23T09:57:08Z

Linux Mint 17, Chrome 42.0.2311.90

heff · 2015-04-24T06:24:39Z

src/css/_utilities.scss

+  -moz-box-ordinal-group: $value;
+  -ms-flex-order: $value;
+  -webkit-order: $value;
+  order: $value;


Why is order red here?

¯_(ツ)_/¯

…n class

…default (and hidden via css

heff · 2015-04-24T21:19:05Z

src/css/components/_progress.scss

+  background: rgba($secondary-bg, 0.1);
+}
+
+.video-js .vjs-slider-handle.vjs-seek-handle {


Could we reorder the includes so this doesn't need the double class? It doesn't look like slider-handle currently sets these values anyway, but it probably should so you can use a default slider.

heff · 2015-04-24T21:59:02Z

src/css/components/_control-bar.scss

+
+// Video has started playing AND user is inactive
+.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  @include display-flex;


I don't think @include display-flex is actually needed here again.

Also added a grunt task specifically for skin development (only watches sass file changes and runs sass)

heff · 2015-04-24T22:45:43Z

src/css/components/_progress.scss

+  @include flex(auto);
+  @include display-flex(center);
+
+  @include transition(all 0.4s);


If the progress bar isn't growing and shrinking anymore then this isn't needed.

This allows the poster image to toggle play / pause on audio-only sources

heff · 2015-04-24T23:19:08Z

All the vjs-caption-settings styles need to make it back into here

heff · 2015-04-24T23:24:50Z

Here's the rest of the notes I took on changes, to be added to the skin migration guide.

Added icon classes to be used externally e.g. vjs-icon-circle
Removed the vis-default-skin class. New skins should just override the defaults. Most people have done that anyway.
Dropped some IE6-specific fixes
Switched the control bar to use flex-box in browsers that support it. Using table styles in older browsers.

These probably aren't finished/correct

Dropped user-select from video.js.
~~SVG font is missing~~ I don't think we should include it - @mmcc
Removed slider focus styles -- need to add better focus styles for all controls, specifically for accessibility

mmcc · 2015-04-24T23:56:41Z

A few notes from Steve's initial comment that I never answered before.

can you talk about some of the motivations behind all of this? I'm thinking specifically about breaking up the files, the variables file, and anything else related.

At the most basic level, I've personally wanted to switch to Sass for a while. A lot of the original decision was motivated by being able to use Less in the browser, which is irrelevant these days. This skin is simpler in some ways, such as being able to let the handle overlap some of the progress bar to avoid the old issues with the diamond.

The new flexbox / table layout gives us the flexibility we had before in terms of being able to add new items to the control bar, without needing too much hackery (besides the whole table thing).

Re: breaking up the files, the old LESS file was massive, which meant doing anything at all in the file was a pain. cmd+fto find what you want, go get something else, remember approximately where you were and scroll back to it...just general pain. Now we have things broken up largely along the lines of each component having its own file, so you can quickly pop open the exact file you need to make a change to the progress bar or volume control.

Particularly with the ES6 / Browserify changes, I think the Sass updates just keep the skin in line with the rest of the project.

mmcc · 2015-04-25T00:02:47Z

@ange007 your issue is fixed with 1c31605

heff · 2015-04-28T17:04:45Z

We're gonna party like it's this issue.

hartman · 2015-12-03T18:38:53Z

@mmcc I'm interested in the adaptive layout stuff (vjs-layout-tiny and friends) that were added with this. What was the thought behind that ? It's not yet in use right ?

mmcc · 2015-12-04T18:14:53Z

@hartman So the thought was we'd use JS to determine the width of the player on resize and add these classes programmatically. We decided not to do that (yet? maybe?), but I left them in for folks that wanted to use them on their own.

Anyway, the thought behind it was that VJS kinda sucked at smaller sizes. Once it got down to a certain point things started falling off the control bar and generally looked bad. Most of those problems should be fixed with the new layout since it resizes better, but at smaller sizes it still looks waaaay too busy imho. So, ultimately, this was an effort to make smaller players more usable.

Thoughts? Would you like to see this added programmatically or is it enough just to have the classes there?

hartman · 2015-12-09T08:05:21Z

@mmcc Experimented a bit with doing this programatically. Took a lot more than I anticipated, though the code can be cleaned up a bit more. But, it works: http://jsfiddle.net/TheDJ/5raorqgy/

mmcc force-pushed the base-styles branch 3 times, most recently from 9c5437e to 24851cc Compare April 2, 2015 01:29

heff reviewed Apr 2, 2015
View reviewed changes

heff mentioned this pull request Apr 2, 2015

VJS 5: Download a custom skin #2003

Closed

mmcc force-pushed the base-styles branch from b510e7f to 00a1a6e Compare April 12, 2015 19:05

mmcc mentioned this pull request Apr 23, 2015

Feature/control bar separator #1838

Merged

heff reviewed Apr 24, 2015
View reviewed changes

mmcc added 16 commits April 24, 2015 11:24

broke apart 4.0 default theme into components

6df2c7f

removed old less style. no going back now.

74ddc57

switched back to video-js.scss naming and added a base-style injectio…

0fb8ee6

…n class

cleaned up and simplified big play btn

27bff92

Flexbox straight flexin.

a2f2080

move to using variables for text and icon font families

b6a3442

use table layout for IE 8 and 9

2092c48

moved volume to be vertical by default

1229a14

moved to using extend for icons

fa545f0

added horizontal classes

6617c42

added connect-watch grunt task

a8003a1

show all the things in the control bar so everything is available by …

b19ce61

…default (and hidden via css

reignore dist for now

1017e5a

removing trailing comma to get the tests passing

9db5a21

Switched to using libsass and removed incompatible "black magic"

13398cd

updating to es6 syntax

f7503ff

removed old separator, added grunt task for dev, and updated example

a518a01

mmcc force-pushed the base-styles branch from 00a1a6e to a518a01 Compare April 24, 2015 21:10

heff reviewed Apr 24, 2015
View reviewed changes

mmcc added 2 commits April 24, 2015 14:26

singular time-control and live-control. remove playing class on pause

964526e

updated separator control styles

d341ef2

heff reviewed Apr 24, 2015
View reviewed changes

Show full control bar when a player goes to fullscreen.

697325e

Also added a grunt task specifically for skin development (only watches sass file changes and runs sass)

heff reviewed Apr 24, 2015
View reviewed changes

mmcc added 2 commits April 24, 2015 16:04

allow poster image to toggle playback

adc5415

This allows the poster image to toggle play / pause on audio-only sources

fixed issue with scrollbars in Chrome on Linux

1c31605

mmcc added 2 commits April 24, 2015 17:13

adding back things @heff found missing

010893c

make the control bar not-quite-black

0a50351

mmcc force-pushed the base-styles branch from bd2b5a8 to 0a50351 Compare April 27, 2015 17:53

mmcc added 2 commits April 27, 2015 17:35

added back some focus highlights until we decide on another path

28bcb7d

re-removing unused grunt things

854f35a

mmcc closed this in 4ac762c Apr 28, 2015

mmcc mentioned this pull request Apr 28, 2015

Chapters button should have a different Icon from subtitles #1954

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Base Theme #1999

New Base Theme #1999

mmcc commented Apr 2, 2015

heff Apr 2, 2015

heff commented Apr 2, 2015

heff Apr 2, 2015

gkatsev Apr 2, 2015

mmcc Apr 2, 2015

gkatsev Apr 2, 2015

mmcc Apr 2, 2015

ange007 commented Apr 23, 2015

heff Apr 24, 2015

mmcc Apr 24, 2015

heff Apr 24, 2015

heff Apr 24, 2015

heff Apr 24, 2015

heff commented Apr 24, 2015

heff commented Apr 24, 2015

mmcc commented Apr 24, 2015

mmcc commented Apr 25, 2015

heff commented Apr 28, 2015

hartman commented Dec 3, 2015

mmcc commented Dec 4, 2015

hartman commented Dec 9, 2015

New Base Theme #1999

New Base Theme #1999

Conversation

mmcc commented Apr 2, 2015

Choose a reason for hiding this comment

heff commented Apr 2, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ange007 commented Apr 23, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

heff commented Apr 24, 2015

heff commented Apr 24, 2015

These probably aren't finished/correct

mmcc commented Apr 24, 2015

mmcc commented Apr 25, 2015

heff commented Apr 28, 2015

hartman commented Dec 3, 2015

mmcc commented Dec 4, 2015

hartman commented Dec 9, 2015