v5.2.4 dist

CHANGELOG.md

@@ -6,6 +6,25 @@ _(none)_
 
 --------------------
 
+## 5.2.4 (2015-11-25)
+* @gesinger checked for track changes before tech started listening ([view](https://github.com/videojs/video.js/pull/2835))
+* @gesinger fixed handler explosion for cuechange events ([view](https://github.com/videojs/video.js/pull/2849))
+* @mmcc fixed vertical volume ([view](https://github.com/videojs/video.js/pull/2859))
+
+## 5.2.3 (2015-11-24)
+* @gkatsev fixed clearing out errors ([view](https://github.com/videojs/video.js/pull/2850))
+
+## 5.2.2 (2015-11-23)
+* @DatTran fixed bower paths. Fixes #2740 ([view](https://github.com/videojs/video.js/pull/2775))
+* @nbibler ensured classes begin with alpha characters. Fixes #2828 ([view](https://github.com/videojs/video.js/pull/2829))
+* @bcvio fixed returning current source rather than blob url ([view](https://github.com/videojs/video.js/pull/2833))
+* @tomaspinho added ended event to API docs ([view](https://github.com/videojs/video.js/pull/2836))
+* @paladox updated xhr from deprecated ver to v2.2 ([view](https://github.com/videojs/video.js/pull/2837))
+
+## 5.2.1 (2015-11-16)
+* @dmlap Check a component is a function before new-ing ([view](https://github.com/videojs/video.js/pull/2814))
+* @ksjun corrected the registerTech export ([view](https://github.com/videojs/video.js/pull/2816))
+
 ## 5.2.0 (2015-11-10)
 * @gkatsev made initListeners more general and added Tech.isTech. Fixes #2767 ([view](https://github.com/videojs/video.js/pull/2773))
 * @dmlap updated swf to 5.0.1 ([view](https://github.com/videojs/video.js/pull/2795))

bower.json

@@ -2,8 +2,8 @@
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
   "main": [
-    "src/js/video.js",
-    "src/css/video-js.scss"
+    "dist/video.js",
+    "dist/video-js.css"
   ],
   "moduleType": "es6",
   "keywords": [

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.2.0",
+  "version": "5.2.4",
   "keywords": [
     "videojs",
     "html5",

dist/video-js.css

@@ -499,7 +499,7 @@ about what's required to play video. */
   /* Same as ul background */ }
 
 /* Button Pop-up Menu */
-.vjs-menu-button-popup .vjs-menu ul {
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   background-color: #2B333F;
   background-color: rgba(43, 51, 63, 0.7);
   position: absolute;
@@ -911,7 +911,8 @@ width and height to zero. */
   border-top-color: transparent; }
 
 .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
-  left: 0.5em; }
+  left: 0.5em;
+  height: 8em; }
 
 .vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
   left: -2em; }

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.2.0",
+  "version": "5.2.4",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [
@@ -32,7 +32,7 @@
     "videojs-ie8": "1.1.0",
     "videojs-swf": "5.0.1",
     "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#vjs-v0.12.1",
-    "xhr": "2.1.0"
+    "xhr": "~2.2.0"
   },
   "devDependencies": {
     "babel": "^5.2.2",

src/css/components/_volume.scss

@@ -96,6 +96,7 @@ width and height to zero. */
 
 .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
   left: 0.5em;
+  height: 8em;
 }
 .vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
   left: -2em;

src/css/components/menu/_menu-popup.scss

@@ -10,7 +10,7 @@
 }
 
 /* Button Pop-up Menu */
-.vjs-menu-button-popup .vjs-menu ul {
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 
   position: absolute;

src/js/component.js

@@ -373,6 +373,14 @@ class Component {
         throw new Error(`Component ${componentClassName} does not exist`);
       }
 
+      // data stored directly on the videojs object may be
+      // misidentified as a component to retain
+      // backwards-compatibility with 4.x. check to make sure the
+      // component class can be instantiated.
+      if (typeof ComponentClass !== 'function') {
+        return null;
+      }
+
       component = new ComponentClass(this.player_ || this, options);
 
     // child is a component instance

src/js/player.js

@@ -415,6 +415,7 @@ class Player extends Component {
     let width;
     let height;
     let aspectRatio;
+    let idClass;
 
     // The aspect ratio is either used directly or to calculate width and height.
     if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
@@ -451,7 +452,12 @@ class Player extends Component {
       height = width  * ratioMultiplier;
     }
 
-    let idClass = this.id()+'-dimensions';
+    // Ensure the CSS class is valid by starting with an alpha character
+    if (/^[^a-zA-Z]/.test(this.id())) {
+      idClass = 'dimensions-'+this.id();
+    } else {
+      idClass = this.id()+'-dimensions';
+    }
 
     // Ensure the right class is still on the player for the style element
     this.addClass(idClass);
@@ -2101,6 +2107,7 @@ class Player extends Component {
     if (err === null) {
       this.error_ = err;
       this.removeClass('vjs-error');
+      this.errorDisplay.close();
       return this;
     }
 
@@ -2111,9 +2118,6 @@ class Player extends Component {
       this.error_ = new MediaError(err);
     }
 
-    // fire an error event on the player
-    this.trigger('error');
-
     // add the vjs-error classname to the player
     this.addClass('vjs-error');
 
@@ -2121,6 +2125,9 @@ class Player extends Component {
     // ie8 just logs "[object object]" if you just log the error object
     log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
 
+    // fire an error event on the player
+    this.trigger('error');
+
     return this;
   }
 
@@ -2711,6 +2718,13 @@ Player.prototype.handleUserInactive_;
  */
 Player.prototype.handleTimeUpdate_;
 
+/**
+ * Fired when video playback ends
+ *
+ * @event ended
+ */
+Player.prototype.handleTechEnded_;
+
 /**
  * Fired when the volume changes
  *

src/js/tech/html5.js

@@ -492,7 +492,13 @@ class Html5 extends Tech {
    * @return {Object}
    * @method currentSrc
    */
-  currentSrc() { return this.el_.currentSrc; }
+  currentSrc() { 
+    if (this.currentSource_) {
+      return this.currentSource_.src;
+    } else {
+      return this.el_.currentSrc;
+    }
+  }
 
   /**
    * Get poster

src/js/tech/tech.js

@@ -321,9 +321,8 @@ class Tech extends Component {
       window['WebVTT'] = true;
     }
 
-    let textTracksChanges = Fn.bind(this, function() {
-      let updateDisplay = () => this.trigger('texttrackchange');
-
+    let updateDisplay = () => this.trigger('texttrackchange');
+    let textTracksChanges = () => {
       updateDisplay();
 
       for (let i = 0; i < tracks.length; i++) {
@@ -333,8 +332,9 @@ class Tech extends Component {
           track.addEventListener('cuechange', updateDisplay);
         }
       }
-    });
+    };
 
+    textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
 
     this.on('dispose', function() {

src/js/video.js

@@ -246,7 +246,7 @@ videojs.getTech = Tech.getTech;
  * @mixes videojs
  * @method registerTech
  */
-videojs.registerTech = Component.registerTech;
+videojs.registerTech = Tech.registerTech;
 
 /**
  * A suite of browser and device tests

test/unit/player.test.js

@@ -17,36 +17,6 @@ q.module('Player', {
   }
 });
 
-// Compiler doesn't like using 'this' in setup/teardown.
-// module("Player", {
-//   /**
-//    * @this {*}
-//    */
-//   setup: function(){
-//     window.player1 = true; // using window works
-//   },
-
-//   /**
-//    * @this {*}
-//    */
-//   teardown: function(){
-//     // if (this.player && this.player.el() !== null) {
-//     //   this.player.dispose();
-//     //   this.player = null;
-//     // }
-//   }
-// });
-
-// Object.size = function(obj) {
-//     var size = 0, key;
-//     for (key in obj) {
-//         console.log('key', key)
-//         if (obj.hasOwnProperty(key)) size++;
-//     }
-//     return size;
-// };
-
-
 test('should create player instance that inherits from component and dispose it', function(){
   var player = TestHelpers.makePlayer();
 
@@ -199,6 +169,21 @@ test('should set the width, height, and aspect ratio via a css class', function(
   ok(confirmSetting('padding-top', '25%'), 'aspect ratio percent should match the newly set aspect ratio');
 });
 
+test('should use an class name that begins with an alpha character', function(){
+  let alphaPlayer = TestHelpers.makePlayer({ id: 'alpha1' });
+  let numericPlayer = TestHelpers.makePlayer({ id: '1numeric' });
+
+  let getStyleText = function(styleEl){
+    return (styleEl.styleSheet && styleEl.styleSheet.cssText) || styleEl.innerHTML;
+  };
+
+  alphaPlayer.width(100);
+  numericPlayer.width(100);
+
+  ok(/\s*\.alpha1-dimensions\s*\{/.test(getStyleText(alphaPlayer.styleEl_)), 'appends -dimensions to an alpha player ID');
+  ok(/\s*\.dimensions-1numeric\s*\{/.test(getStyleText(numericPlayer.styleEl_)), 'prepends dimensions- to a numeric player ID');
+});
+
 test('should wrap the original tag in the player div', function(){
   var tag = TestHelpers.makeTag();
   var container = document.createElement('div');
@@ -324,24 +309,6 @@ test('should set controls and trigger events', function() {
   player.dispose();
 });
 
-// Can't figure out how to test fullscreen events with tests
-// Browsers aren't triggering the events at least
-// asyncTest('should trigger the fullscreenchange event', function() {
-//   expect(3);
-
-//   var player = TestHelpers.makePlayer();
-//   player.on('fullscreenchange', function(){
-//     ok(true, 'fullscreenchange event fired');
-//     ok(this.isFullscreen() === true, 'isFullscreen is true');
-//     ok(this.el().className.indexOf('vjs-fullscreen') !== -1, 'vjs-fullscreen class added');
-
-//     player.dispose();
-//     start();
-//   });
-
-//   player.requestFullscreen();
-// });
-
 test('should toggle user the user state between active and inactive', function(){
   var player = TestHelpers.makePlayer({});
 
@@ -441,28 +408,6 @@ test('make sure that controls listeners do not get added too many times', functi
   player.dispose();
 });
 
-// test('should use custom message when encountering an unsupported video type',
-//     function() {
-//   videojs.options['notSupportedMessage'] = 'Video no go <a href="">link</a>';
-//   var fixture = document.getElementById('qunit-fixture');
-
-//   var html =
-//       '<video id="example_1">' +
-//           '<source src="fake.foo" type="video/foo">' +
-//           '</video>';
-
-//   fixture.innerHTML += html;
-
-//   var tag = document.getElementById('example_1');
-//   var player = new Player(tag, { techOrder: ['techFaker'] });
-
-//   var incompatibilityMessage = player.el().getElementsByTagName('p')[0];
-//   // ie8 capitalizes tag names
-//   equal(incompatibilityMessage.innerHTML.toLowerCase(), 'video no go <a href="">link</a>');
-
-//   player.dispose();
-// });
-
 test('should register players with generated ids', function(){
   var fixture, video, player, id;
   fixture = document.getElementById('qunit-fixture');
@@ -859,3 +804,21 @@ test('createModal() options object', function() {
   strictEqual(modal.options_.label, 'boo', 'modal options are set properly');
   modal.close();
 });
+
+test('you can clear error in the error event', function() {
+  let player = TestHelpers.makePlayer();
+
+  sinon.stub(log, 'error');
+
+  player.error({code: 4});
+  ok(player.error(), 'we have an error');
+  player.error(null);
+
+  player.one('error', function() {
+    player.error(null);
+  });
+  player.error({code: 4});
+  ok(!player.error(), 'we no longer have an error');
+
+  log.error.restore();
+});

test/unit/tech/html5.test.js

@@ -249,6 +249,12 @@ if (Html5.supportsNativeTextTracks()) {
     equal(adds[2][0], rems[2][0], 'removetrack event handler removed');
   });
 }
+test('should always return currentSource_ if set', function(){
+  let currentSrc = Html5.prototype.currentSrc;
+  equal(currentSrc.call({el_: {currentSrc:'test1'}}), 'test1', 'sould return source from element if nothing else set');
+  equal(currentSrc.call({currentSource_:{src: 'test2'}}), 'test2', 'sould return source from currentSource_, if nothing else set');
+  equal(currentSrc.call({currentSource_:{src: 'test2'}, el_:{currentSrc:'test1'}}), 'test2', 'sould return source from  source set, not from element');
+});
 
 test('should fire makeup events when a video tag is initialized late', function(){
   let lateInit = Html5.prototype.handleLateInit_;

test/unit/tracks/tracks.test.js

@@ -2,6 +2,7 @@ import ChaptersButton from '../../../src/js/control-bar/text-track-controls/chap
 import SubtitlesButton from '../../../src/js/control-bar/text-track-controls/subtitles-button.js';
 import CaptionsButton from '../../../src/js/control-bar/text-track-controls/captions-button.js';
 
+import TextTrack from '../../../src/js/tracks/text-track.js';
 import TextTrackDisplay from '../../../src/js/tracks/text-track-display.js';
 import Html5 from '../../../src/js/tech/html5.js';
 import Flash from '../../../src/js/tech/flash.js';
@@ -342,3 +343,58 @@ if (Html5.supportsNativeTextTracks()) {
     emulatedTt.on('addtrack', addtrack);
   });
 }
+
+test('should check for text track changes when emulating text tracks', function() {
+  let tech = new Tech();
+  let numTextTrackChanges = 0;
+  tech.on('texttrackchange', function() {
+    numTextTrackChanges++;
+  });
+  tech.emulateTextTracks();
+  equal(numTextTrackChanges, 1, 'we got a texttrackchange event');
+});
+
+test('removes cuechange event when text track is hidden for emulated tracks', function() {
+  let player = TestHelpers.makePlayer();
+  let tt = new TextTrack({
+    tech: player.tech_,
+    mode: 'showing'
+  });
+  tt.addCue({
+    id: '1',
+    startTime: 2,
+    endTime: 5
+  });
+  player.tech_.textTracks().addTrack_(tt);
+  player.tech_.emulateTextTracks();
+
+  let numTextTrackChanges = 0;
+  player.tech_.on('texttrackchange', function() {
+    numTextTrackChanges++;
+  });
+
+  tt.mode = 'showing';
+  equal(numTextTrackChanges, 1,
+    'texttrackchange should be called once for mode change');
+  tt.mode = 'showing';
+  equal(numTextTrackChanges, 2,
+    'texttrackchange should be called once for mode change');
+
+  player.tech_.currentTime = function() {
+    return 3;
+  };
+  player.tech_.trigger('timeupdate');
+  equal(numTextTrackChanges, 3,
+    'texttrackchange should be triggered once for the cuechange');
+
+  tt.mode = 'hidden';
+  equal(numTextTrackChanges, 4,
+    'texttrackchange should be called once for the mode change');
+
+  player.tech_.currentTime = function() {
+    return 7;
+  };
+  player.tech_.trigger('timeupdate');
+  equal(numTextTrackChanges, 4,
+    'texttrackchange should be not be called since mode is hidden');
+});