diff --git a/.gitignore b/.gitignore index 71329df61..4f3d58320 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ .DS_Store -dist/* build/files/* build/temp/* docs/api/* @@ -26,3 +25,6 @@ sandbox/* test/coverage/* .coveralls.yml +.sass-cache + +dist/* diff --git a/.travis.yml b/.travis.yml index f88fb55fb..8532b27da 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - 0.10 + - "iojs" before_script: - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then curl https://gist.githubusercontent.com/santiycr/5139565/raw/sauce_connect_setup.sh | bash; fi before_install: diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c5350f12..e8c11b135 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,17 @@ CHANGELOG * @dn5 Added new translations (Bosnian, Serbian, Croatian) ([view](https://github.com/videojs/video.js/pull/1897)) * @mmcc (and others) converted the whole project to use ES6, Babel and Browserify ([view](https://github.com/videojs/video.js/pull/1976)) * @heff converted all classes to use ES6 classes ([view](https://github.com/videojs/video.js/pull/1993)) +* @mmcc added ES6 default args and template strings ([view](https://github.com/videojs/video.js/pull/2015)) +* @dconnolly replaced JSON.parse with a safe non-eval JSON parse ([view](https://github.com/videojs/video.js/pull/2077)) +* @mmcc added a new default skin, switched to SASS, modified the html ([view](https://github.com/videojs/video.js/pull/1999)) +* @gkatsev removed event.isDefaultPrevented in favor of event.defaultPrevented ([view](https://github.com/videojs/video.js/pull/2081)) +* @heff added and `extends` function for external subclassing ([view](https://github.com/videojs/video.js/pull/2078)) +* @forbesjo added the `scrubbing` property ([view](https://github.com/videojs/video.js/pull/2080)) +* @heff switched to border-box sizing for all player elements ([view](https://github.com/videojs/video.js/pull/2082)) +* @forbesjo added a vjs-button class to button controls ([view](https://github.com/videojs/video.js/pull/2084)) +* @bc-bbay Load plugins before controls ([view](https://github.com/videojs/video.js/pull/2094)) +* @bc-bbay rename onEvent methods to handleEvent ([view](https://github.com/videojs/video.js/pull/2093)) +* @dmlap added an error message if techOrder is not in options ([view](https://github.com/videojs/video.js/pull/2097)) -------------------- diff --git a/Gruntfile.js b/Gruntfile.js index b2ff8205f..733cff1de 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -53,15 +53,27 @@ module.exports = function(grunt) { }, dist: {}, watch: { - files: [ 'src/**/*', 'test/unit/**/*.js', 'Gruntfile.js' ], - tasks: 'dev' + default: { + files: [ 'src/**/*', 'test/unit/**/*.js', 'Gruntfile.js' ], + tasks: 'dev' + }, + skin: { + files: ['src/css/**/*'], + tasks: 'sass' + } }, connect: { - dev: { + preview: { options: { port: 9999, keepalive: true } + }, + dev: { + options: { + port: 9999, + livereload: true + } } }, copy: { @@ -143,10 +155,10 @@ module.exports = function(grunt) { ext: '.min.css' } }, - less: { - dev: { + sass: { + dist: { files: { - 'build/temp/video-js.css': 'src/css/video-js.less' + 'build/temp/video-js.css': 'src/css/video-js.scss' } } }, @@ -226,6 +238,12 @@ module.exports = function(grunt) { }, src: ['package.json', 'bower.json', 'component.json'] }, + prerelease: { + options: { + release: 'prerelease' + }, + src: ['package.json', 'bower.json', 'component.json'] + }, css: { options: { prefix: '@version\\s*' @@ -251,6 +269,21 @@ module.exports = function(grunt) { } }, browserify: { + options: { + transform: [ + require('babelify').configure({ + sourceMapRelative: './src/js' + }), + ['browserify-versionify', { + placeholder: '__VERSION__', + version: pkg.version + }], + ['browserify-versionify', { + placeholder: '__VERSION_NO_PATCH__', + version: version.majorMinor + }] + ] + }, build: { files: { 'build/temp/video.js': ['src/js/video.js'] @@ -261,18 +294,17 @@ module.exports = function(grunt) { standalone: 'videojs' }, banner: license, - transform: [ - require('babelify').configure({ - sourceMapRelative: './src/js' - }), - ['browserify-versionify', { - placeholder: '__VERSION__', - version: pkg.version - }], - ['browserify-versionify', { - placeholder: '__VERSION_NO_PATCH__', - version: version.majorMinor - }] + plugin: [ + [ 'browserify-derequire' ] + ] + } + }, + test: { + files: { + 'build/temp/tests.js': [ + 'test/globals-shim.js', + 'test/unit/**/*.js', + 'test/api/**.js' ] } }, @@ -288,18 +320,8 @@ module.exports = function(grunt) { standalone: 'videojs' }, banner: license, - transform: [ - require('babelify').configure({ - sourceMapRelative: './src/js' - }), - ['browserify-versionify', { - placeholder: '__VERSION__', - version: pkg.version - }], - ['browserify-versionify', { - placeholder: '__VERSION_NO_PATCH__', - version: version.majorMinor - }] + plugin: [ + [ 'browserify-derequire' ] ] } } @@ -313,6 +335,9 @@ module.exports = function(grunt) { } }, coveralls: { + options: { + force: true + }, all: { src: 'test/coverage/lcov.info' } @@ -335,7 +360,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-karma'); grunt.loadNpmTasks('videojs-doc-generator'); grunt.loadNpmTasks('grunt-zip'); @@ -360,7 +385,7 @@ module.exports = function(grunt) { 'concat:vtt', 'exorcise', 'uglify', - 'less', + 'sass', 'version:css', 'cssmin', 'copy:fonts', @@ -386,10 +411,13 @@ module.exports = function(grunt) { grunt.registerTask('newtest', ['build', 'karma:chrome']); // Default task. - grunt.registerTask('default', ['build', 'test']); + grunt.registerTask('default', ['build', 'test-local']); // Development watch task. Doing the minimum required. - grunt.registerTask('dev', ['jshint', 'less', 'browserify:build', 'karma:chrome']); + grunt.registerTask('dev', ['connect:dev', 'jshint', 'sass', 'browserify:build', 'karma:chrome']); + + // Skin development watch task. + grunt.registerTask('skin-dev', ['connect:dev', 'watch:skin']); // Tests. // We want to run things a little differently if it's coming from Travis vs local diff --git a/README.md b/README.md index a454f26ef..7484b4de7 100644 --- a/README.md +++ b/README.md @@ -61,4 +61,4 @@ To build your own custom version read the section on [contributing code](CONTRIB Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE) -Copyright 2014 Brightcove, Inc. +Copyright 2014-2015 Brightcove, Inc. diff --git a/bower.json b/bower.json index 6e826a4de..4ebf1484e 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "video.js", "description": "An HTML5 and Flash video player with a common API and skin for both.", - "version": "4.12.5", + "version": "5.0.0-1", "main": [ "dist/video-js/video.js", "dist/video-js/video-js.css", diff --git a/build/tasks/style-injection.js b/build/tasks/style-injection.js new file mode 100644 index 000000000..9a2331b00 --- /dev/null +++ b/build/tasks/style-injection.js @@ -0,0 +1,11 @@ +module.exports = function(grunt) { + grunt.registerTask('addStyleInjection', 'Adding base style injection', function() { + var minifiedCss = grunt.file.read('build/files/video-js.min.css'); + // We need to escape any strings + minifiedCss = minifiedCss.replace(/'/g, '\\\''); + + var combinedJs = grunt.file.read('build/files/combined.video.js'); + combinedJs = combinedJs.replace(/\{{GENERATED_STYLES}}/g, minifiedCss); + grunt.file.write('build/files/combined.video.js', combinedJs); + }); +}; diff --git a/component.json b/component.json index 9f4903241..3360b2901 100644 --- a/component.json +++ b/component.json @@ -1,7 +1,7 @@ { "name": "video.js", "description": "An HTML5 and Flash video player with a common API and skin for both.", - "version": "4.12.5", + "version": "5.0.0-1", "keywords": [ "videojs", "html5", diff --git a/docs/examples/simple-embed/index.html b/docs/examples/simple-embed/index.html index f34122870..091d931a2 100644 --- a/docs/examples/simple-embed/index.html +++ b/docs/examples/simple-embed/index.html @@ -4,13 +4,13 @@ Video.js | HTML5 Video Player - + - + diff --git a/docs/guides/setup.md b/docs/guides/setup.md index 6f1153794..c4f221068 100644 --- a/docs/guides/setup.md +++ b/docs/guides/setup.md @@ -20,8 +20,8 @@ You can download the Video.js source and host it on your own servers, or use the ### CDN Version ### ```html - - + + ``` @@ -43,8 +43,8 @@ To entirely self-host, you'll need to pull in the font files and let Video.js kn should Just Work™, but the paths can easily be changed by editing the LESS file and re-building, or by modifying the generated CSS file. ```html - - + + diff --git a/docs/guides/skins.md b/docs/guides/skins.md index c732f223c..0e1d1618d 100644 --- a/docs/guides/skins.md +++ b/docs/guides/skins.md @@ -1,28 +1,29 @@ Skins ===== -The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. +The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding +the styles you'd like to change. + +If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = false` before Video.js is loaded. Keep in mind that without these base styles +enabled, you'll need to manually include them. ## Icons -New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font. - -All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/). - -![available icons](https://i.cloudup.com/wb51GGDDnJ.png) +You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](../../sandbox/icons.html.example) in the sandbox directory. ## Customization -When you create a new skin, you can either override styles in the default skin: +When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. You should include a new class matching the +name of your theme, then just start overriding! ```css -.vjs-default-skin .vjs-play-progress { background: #900; } +.vjs-skin-hotdog-stand { color: #FF0000; } +.vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; } +.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; } ``` -Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch. - -```html -