v5.5.2 dist

CHANGELOG.md

@@ -6,6 +6,25 @@ _(none)_
 
 --------------------
 
+## 5.5.2 (2016-01-14)
+* make sure that styleEl_ is in DOM before removing on dispose ([view](https://github.com/videojs/video.js/pull/3004))
+
+## 5.5.1 (2016-01-08)
+* @gkatsev fixed sass if else for icons ([view](https://github.com/videojs/video.js/pull/2988))
+
+## 5.5.0 (2016-01-07)
+* @hartman fixed usage of lighten in progress component. Fixes #2793 ([view](https://github.com/videojs/video.js/pull/2875))
+* @misteroneill exposed createEl on videojs ([view](https://github.com/videojs/video.js/pull/2926))
+* @huitsing updated docstrings for autoplay and loop methods ([view](https://github.com/videojs/video.js/pull/2960))
+* @rcrooks fixed some broken links in guides ([view](https://github.com/videojs/video.js/pull/2965))
+* @forbesjo fixed errorDisplay erroring on subsequent openings ([view](https://github.com/videojs/video.js/pull/2966))
+* @incompl updated build command in CONTRIBUTING.md ([view](https://github.com/videojs/video.js/pull/2967))
+* @forbesjo updated player to not autoplay if there is no source ([view](https://github.com/videojs/video.js/pull/2971))
+* @gkatsev updated css to have ascii codepoints for fonticons. Expose new scss file ([view](https://github.com/videojs/video.js/pull/2973))
+
+## 5.4.6 (2015-12-22)
+* @gkatsev fixed vertical slider alignment in volume menu button ([view](https://github.com/videojs/video.js/pull/2943))
+
 ## 5.4.5 (2015-12-15)
 * @gkatsev added mouse/touch listeners to volume menu button ([view](https://github.com/videojs/video.js/pull/2638))
 * @gkatsev updated styles for inline menu and volume bar ([view](https://github.com/videojs/video.js/pull/2913))

CONTRIBUTING.md

@@ -144,7 +144,7 @@ npm install
 Build a local copy of video.js and run tests
 
 ```bash
-grunt
+grunt dist
 grunt test
 ```
 

build/grunt.js

@@ -151,7 +151,7 @@ module.exports = function(grunt) {
     watch: {
       skin: {
         files: ['src/css/**/*'],
-        tasks: 'sass'
+        tasks: ['sass', 'wrapcodepoints']
       },
       jshint: {
         files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
@@ -196,7 +196,7 @@ module.exports = function(grunt) {
     sass: {
       build: {
         files: {
-          'build/temp/video-js.css': 'src/css/video-js.scss'
+          'build/temp/video-js.css': 'src/css/vjs.scss'
         }
       }
     },
@@ -455,6 +455,7 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
+    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -479,6 +480,17 @@ module.exports = function(grunt) {
     'zip:dist'
   ]);
 
+  // Sass turns unicode codepoints into utf8 characters.
+  // We don't want that so we unwrapped them in the templates/scss.hbs file.
+  // After sass has generated our css file, we need to wrap the codepoints
+  // in quotes for it to work.
+  grunt.registerTask('wrapcodepoints', function() {
+    const sassConfig = grunt.config.get('sass.build.files');
+    const cssPath = Object.keys(sassConfig)[0];
+    const css = grunt.file.read(cssPath);
+    grunt.file.write(cssPath, css.replace(/(\\f\w+);/g, "'$1';"));
+  });
+
   // Default task - build and test
   grunt.registerTask('default', ['test']);
 

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": "5.4.5",
+  "version": "5.5.2",
   "keywords": [
     "videojs",
     "html5",

dist/alt/video.novtt.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.4.5 <http://videojs.com/>
+ * Video.js 5.5.2 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/master/LICENSE>
@@ -7664,6 +7664,7 @@ var ErrorDisplay = (function (_ModalDialog) {
 
 ErrorDisplay.prototype.options_ = _utilsMergeOptions2['default'](_modalDialog2['default'].prototype.options_, {
   fillAlways: true,
+  temporary: false,
   uncloseable: true
 });
 
@@ -9251,7 +9252,7 @@ var Player = (function (_Component) {
     // prevent dispose from being called twice
     this.off('dispose');
 
-    if (this.styleEl_) {
+    if (this.styleEl_ && this.styleEl_.parentNode) {
       this.styleEl_.parentNode.removeChild(this.styleEl_);
     }
 
@@ -9752,7 +9753,7 @@ var Player = (function (_Component) {
     // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
     // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
     // This fixes both issues. Need to wait for API, so it updates displays correctly
-    if (this.tag && this.options_.autoplay && this.paused()) {
+    if (this.src() && this.tag && this.options_.autoplay && this.paused()) {
       delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
       this.play();
     }
@@ -11079,7 +11080,7 @@ var Player = (function (_Component) {
   /**
    * Get or set the autoplay attribute.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should autoplay
    * @return {String} The autoplay attribute value when getting
    * @return {Player} Returns the player when setting
    * @method autoplay
@@ -11097,7 +11098,7 @@ var Player = (function (_Component) {
   /**
    * Get or set the loop attribute on the video element.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should loop
    * @return {String} The loop attribute value when getting
    * @return {Player} Returns the player when setting
    * @method loop
@@ -17356,8 +17357,9 @@ function getEl(id) {
 /**
  * Creates an element and applies properties.
  *
- * @param  {String=} tagName    Name of tag to be created.
- * @param  {Object=} properties Element properties to be applied.
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
  * @return {Element}
  * @function createEl
  */
@@ -19097,7 +19099,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.4.5';
+videojs.VERSION = '5.5.2';
 
 /**
  * The global options object. These are the settings that take effect
@@ -19537,6 +19539,17 @@ videojs.isEl = Dom.isEl;
  */
 videojs.isTextNode = Dom.isTextNode;
 
+/**
+ * Creates an element and applies properties.
+ *
+ * @method createEl
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
+ * @return {Element}
+ */
+videojs.createEl = Dom.createEl;
+
 /**
  * Check if an element has a CSS class
  *

dist/video.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.4.5 <http://videojs.com/>
+ * Video.js 5.5.2 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/master/LICENSE>
@@ -7668,6 +7668,7 @@ var ErrorDisplay = (function (_ModalDialog) {
 
 ErrorDisplay.prototype.options_ = _utilsMergeOptions2['default'](_modalDialog2['default'].prototype.options_, {
   fillAlways: true,
+  temporary: false,
   uncloseable: true
 });
 
@@ -9255,7 +9256,7 @@ var Player = (function (_Component) {
     // prevent dispose from being called twice
     this.off('dispose');
 
-    if (this.styleEl_) {
+    if (this.styleEl_ && this.styleEl_.parentNode) {
       this.styleEl_.parentNode.removeChild(this.styleEl_);
     }
 
@@ -9756,7 +9757,7 @@ var Player = (function (_Component) {
     // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
     // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
     // This fixes both issues. Need to wait for API, so it updates displays correctly
-    if (this.tag && this.options_.autoplay && this.paused()) {
+    if (this.src() && this.tag && this.options_.autoplay && this.paused()) {
       delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
       this.play();
     }
@@ -11083,7 +11084,7 @@ var Player = (function (_Component) {
   /**
    * Get or set the autoplay attribute.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should autoplay
    * @return {String} The autoplay attribute value when getting
    * @return {Player} Returns the player when setting
    * @method autoplay
@@ -11101,7 +11102,7 @@ var Player = (function (_Component) {
   /**
    * Get or set the loop attribute on the video element.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should loop
    * @return {String} The loop attribute value when getting
    * @return {Player} Returns the player when setting
    * @method loop
@@ -17360,8 +17361,9 @@ function getEl(id) {
 /**
  * Creates an element and applies properties.
  *
- * @param  {String=} tagName    Name of tag to be created.
- * @param  {Object=} properties Element properties to be applied.
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
  * @return {Element}
  * @function createEl
  */
@@ -19101,7 +19103,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.4.5';
+videojs.VERSION = '5.5.2';
 
 /**
  * The global options object. These are the settings that take effect
@@ -19541,6 +19543,17 @@ videojs.isEl = Dom.isEl;
  */
 videojs.isTextNode = Dom.isTextNode;
 
+/**
+ * Creates an element and applies properties.
+ *
+ * @method createEl
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
+ * @return {Element}
+ */
+videojs.createEl = Dom.createEl;
+
 /**
  * Check if an element has a CSS class
  *

docs/guides/languages.md

@@ -153,7 +153,7 @@ Language Codes
 --------------
 The following is a list of official language codes.
 
-**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](../../lang) folder located in the project root.
+**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the project root.
 
 <table border="0" cellspacing="5" cellpadding="5">
   <tr>

docs/guides/removing-players.md

@@ -6,11 +6,11 @@ Sometimes, you want to remove players after page load (in single page apps or mo
 Call `.dispose()`
 -----------------
 
-To remove the html associated with your videojs player from the page always call the player's [`dispose()`](https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#dispose) method:
+To remove the html associated with your videojs player from the page always call the player's [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose) method:
 
 ```javascript```
 var oldPlayer = document.getElementById('my-player');
-videojs(oldPlayer).dispose(); 
+videojs(oldPlayer).dispose();
 ```
 
 This method will:

docs/guides/skins.md

@@ -9,7 +9,7 @@ enabled, you'll need to manually include them.
 
 ## Icons
 
-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.
+You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory.
 
 ## Customization
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.4.5",
+  "version": "5.5.2",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [
@@ -28,7 +28,7 @@
     "object.assign": "^4.0.1",
     "safe-json-parse": "^4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "1.4.0",
+    "videojs-font": "1.5.1",
     "videojs-ie8": "1.1.1",
     "videojs-swf": "5.0.1",
     "videojs-vtt.js": "^0.12.1",

src/css/_variables.scss

@@ -1 +1,2 @@
 $icon-font-path: 'font' !default;
+$icon-codepoints: false !default;

src/css/components/_progress.scss

@@ -102,7 +102,7 @@
 
 .video-js .vjs-load-progress {
   // For IE8 we'll lighten the color
-  background: ligthen($secondary-background-color, 25%);
+  background: lighten($secondary-background-color, 25%);
   // Otherwise we'll rely on stacked opacities
   background: rgba($secondary-background-color, $secondary-background-transparency);
 }
@@ -111,7 +111,7 @@
 // specific time ranges that have been buffered
 .video-js .vjs-load-progress div {
   // For IE8 we'll lighten the color
-  background: ligthen($secondary-background-color, 50%);
+  background: lighten($secondary-background-color, 50%);
   // Otherwise we'll rely on stacked opacities
   background: rgba($secondary-background-color, 0.75);
 }

src/css/components/_volume.scss

@@ -36,6 +36,7 @@
 .vjs-volume-bar.vjs-slider-vertical {
   width: 0.3em;
   height: 5em;
+  margin: 1.35em auto;
 }
 
 .video-js .vjs-volume-level {

src/css/video-js.scss

@@ -2,7 +2,11 @@
 @import "private-variables";
 @import "utilities";
 
-@import "../../node_modules/videojs-font/scss/icons";
+@if $icon-codepoints {
+  @import "../../node_modules/videojs-font/scss/icons-codepoints";
+} @else {
+  @import "../../node_modules/videojs-font/scss/icons";
+}
 
 @import "components/layout";
 @import "components/big-play";

src/css/vjs.scss

@@ -0,0 +1,3 @@
+$icon-codepoints: true;
+
+@import "video-js";

src/js/error-display.js

@@ -52,6 +52,7 @@ class ErrorDisplay extends ModalDialog {
 
 ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
   fillAlways: true,
+  temporary: false,
   uncloseable: true
 });
 

src/js/player.js

@@ -224,7 +224,7 @@ class Player extends Component {
     // prevent dispose from being called twice
     this.off('dispose');
 
-    if (this.styleEl_) {
+    if (this.styleEl_ && this.styleEl_.parentNode) {
       this.styleEl_.parentNode.removeChild(this.styleEl_);
     }
 
@@ -720,7 +720,7 @@ class Player extends Component {
     // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
     // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
     // This fixes both issues. Need to wait for API, so it updates displays correctly
-    if (this.tag && this.options_.autoplay && this.paused()) {
+    if (this.src() && this.tag && this.options_.autoplay && this.paused()) {
       delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
       this.play();
     }
@@ -1979,7 +1979,7 @@ class Player extends Component {
   /**
    * Get or set the autoplay attribute.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should autoplay
    * @return {String} The autoplay attribute value when getting
    * @return {Player} Returns the player when setting
    * @method autoplay
@@ -1996,7 +1996,7 @@ class Player extends Component {
   /**
    * Get or set the loop attribute on the video element.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should loop
    * @return {String} The loop attribute value when getting
    * @return {Player} Returns the player when setting
    * @method loop

src/js/utils/dom.js

@@ -79,8 +79,9 @@ export function getEl(id){
 /**
  * Creates an element and applies properties.
  *
- * @param  {String=} tagName    Name of tag to be created.
- * @param  {Object=} properties Element properties to be applied.
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
  * @return {Element}
  * @function createEl
  */

src/js/video.js

@@ -563,6 +563,17 @@ videojs.isEl = Dom.isEl;
  */
 videojs.isTextNode = Dom.isTextNode;
 
+/**
+ * Creates an element and applies properties.
+ *
+ * @method createEl
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
+ * @return {Element}
+ */
+videojs.createEl = Dom.createEl;
+
 /**
  * Check if an element has a CSS class
  *

test/unit/player.test.js

@@ -30,6 +30,15 @@ test('should create player instance that inherits from component and dispose it'
   ok(player.el() === null, 'element disposed');
 });
 
+test('dispose should not throw if styleEl is missing', function(){
+  var player = TestHelpers.makePlayer();
+
+  player.styleEl_.parentNode.removeChild(player.styleEl_);
+
+  player.dispose();
+  ok(player.el() === null, 'element disposed');
+});
+
 // technically, all uses of videojs.options should be replaced with
 // Player.prototype.options_ in this file and a equivalent test using
 // videojs.options should be made in video.test.js. Keeping this here

test/unit/video.test.js

@@ -86,6 +86,7 @@ test('should expose DOM functions', function() {
   let methods = {
     isEl: 'isEl',
     isTextNode: 'isTextNode',
+    createEl: 'createEl',
     hasClass: 'hasElClass',
     addClass: 'addElClass',
     removeClass: 'removeElClass',