Reset player on source change. closes #1050 closes #1124

CHANGELOG.md

@@ -3,6 +3,7 @@ CHANGELOG
 
 ## HEAD (Unreleased)
 * Updated the UI to support live video ([view](https://github.com/videojs/video.js/pull/1121))
+* The UI now resets after a source change [[view](https://github.com/videojs/video.js/pull/1124)]
 
 --------------------
 

src/js/player.js

@@ -77,20 +77,7 @@ vjs.Player = vjs.Component.extend({
     //   this.addClass('vjs-touch-enabled');
     // }
 
-    // Firstplay event implimentation. Not sold on the event yet.
-    // Could probably just check currentTime==0?
-    this.one('play', function(e){
-      var fpEvent = { type: 'firstplay', target: this.el_ };
-      // Using vjs.trigger so we can check if default was prevented
-      var keepGoing = vjs.trigger(this.el_, fpEvent);
-
-      if (!keepGoing) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-      }
-    });
-
+    this.on('loadstart', this.onLoadStart);
     this.on('ended', this.onEnded);
     this.on('play', this.onPlay);
     this.on('firstplay', this.onFirstPlay);
@@ -407,7 +394,27 @@ vjs.Player.prototype.stopTrackingCurrentTime = function(){ clearInterval(this.cu
  * Fired when the user agent begins looking for media data
  * @event loadstart
  */
-vjs.Player.prototype.onLoadStart;
+vjs.Player.prototype.onLoadStart = function() {
+  // remove any first play listeners that weren't triggered from a previous video.
+  this.off('play', initFirstPlay);
+  this.one('play', initFirstPlay);
+
+  vjs.removeClass(this.el_, 'vjs-has-started');
+};
+
+ // Need to create this outside the scope of onLoadStart so it
+ // can be added and removed (to avoid piling first play listeners).
+function initFirstPlay(e) {
+  var fpEvent = { type: 'firstplay', target: this.el_ };
+  // Using vjs.trigger so we can check if default was prevented
+  var keepGoing = vjs.trigger(this.el_, fpEvent);
+
+  if (!keepGoing) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  }
+}
 
 /**
  * Fired when the player has initial duration and dimension information

test/unit/player.js

@@ -371,3 +371,34 @@ test('should register players with generated ids', function(){
   equal(player.el().id, player.id(), 'the player and element ids are equal');
   ok(vjs.players[id], 'the generated id is registered');
 });
+
+test('should not add multiple first play events despite subsequent loads', function() {
+  expect(1);
+
+  var player = PlayerTest.makePlayer({});
+
+  player.on('firstplay', function(){
+    ok('First play should fire once.');
+  });
+
+  // Checking to make sure onLoadStart removes first play listener before adding a new one.
+  player.trigger('loadstart');
+  player.trigger('loadstart');
+  player.trigger('play');
+});
+
+test('should remove vjs-has-started class', function(){
+  expect(3);
+
+  var player = PlayerTest.makePlayer({});
+
+  player.trigger('loadstart');
+  player.trigger('play');
+  ok(player.el().className.indexOf('vjs-has-started') !== -1, 'vjs-has-started class added');
+
+  player.trigger('loadstart');
+  ok(player.el().className.indexOf('vjs-has-started') === -1, 'vjs-has-started class removed');
+
+  player.trigger('play');
+  ok(player.el().className.indexOf('vjs-has-started') !== -1, 'vjs-has-started class added again');
+});