From c09715dc00ebe43f24355cfcee1babef5f028cbe Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Wed, 28 May 2014 11:04:55 +0400
Subject: [PATCH 1/8] Fix buffered and bufferedPercent to support multiple
 regions

---
 src/js/player.js | 50 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/js/player.js b/src/js/player.js
index cb6798943c..64af7acae1 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -349,13 +349,17 @@ vjs.Player.prototype.trackProgress = function(){
 
   this.progressInterval = setInterval(vjs.bind(this, function(){
     // Don't trigger unless buffered amount is greater than last time
-    // log(this.cache_.bufferEnd, this.buffered().end(0), this.duration())
-    /* TODO: update for multiple buffered regions */
-    if (this.cache_.bufferEnd < this.buffered().end(0)) {
+
+    var bufferedPercent = this.bufferedPercent();
+
+    if (this.cache_.bufferedPercent != bufferedPercent) {
       this.trigger('progress');
-    } else if (this.bufferedPercent() == 1) {
+    }
+
+    this.cache_.bufferedPercent = bufferedPercent;
+
+    if (bufferedPercent == 1) {
       this.stopTrackingProgress();
-      this.trigger('progress'); // Last update
     }
   }), 500);
 };
@@ -742,7 +746,6 @@ vjs.Player.prototype.remainingTime = function(){
 // http://dev.w3.org/html5/spec/video.html#dom-media-buffered
 // Buffered returns a timerange object.
 // Kind of like an array of portions of the video that have been downloaded.
-// So far no browsers return more than one range (portion)
 
 /**
  * Get a TimeRange object with the times of the video that have been downloaded
@@ -765,19 +768,13 @@ vjs.Player.prototype.remainingTime = function(){
  * @return {Object} A mock TimeRange object (following HTML spec)
  */
 vjs.Player.prototype.buffered = function(){
-  var buffered = this.techGet('buffered'),
-      start = 0,
-      buflast = buffered.length - 1,
-      // Default end to 0 and store in values
-      end = this.cache_.bufferEnd = this.cache_.bufferEnd || 0;
-
-  if (buffered && buflast >= 0 && buffered.end(buflast) !== end) {
-    end = buffered.end(buflast);
-    // Storing values allows them be overridden by setBufferedFromProgress
-    this.cache_.bufferEnd = end;
+  var buffered = this.techGet('buffered');
+
+  if (!buffered || !buffered.length) {
+    buffered = vjs.createTimeRange(0,0);
   }
 
-  return vjs.createTimeRange(start, end);
+  return buffered;
 };
 
 /**
@@ -791,7 +788,24 @@ vjs.Player.prototype.buffered = function(){
  * @return {Number} A decimal between 0 and 1 representing the percent
  */
 vjs.Player.prototype.bufferedPercent = function(){
-  return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
+  var duration = this.duration(),
+      buffered = this.buffered(),
+      bufferedDuration = 0,
+      start, end;
+
+  if (!duration) return 0;
+
+  for (var i=0; i<buffered.length; i++){
+    start = buffered.start(i);
+    end   = buffered.end(i);
+
+    // buffered end can be bigger than duration by a very small fraction
+    if (end > duration) end = duration;
+
+    bufferedDuration += end - start;
+  }
+
+  return bufferedDuration / duration;
 };
 
 /**

From d09cec80a0c328467c71cc2ba81a4b411c786f9d Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Thu, 29 May 2014 00:28:52 +0400
Subject: [PATCH 2/8] Display a true load progress (with accounting all
 buffered regions)

---
 src/css/video-js.less                  |  4 ++--
 src/js/control-bar/progress-control.js | 29 +++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 81fad22495..287fbe8ccb 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -396,7 +396,7 @@ fonts to show/hide properly.
 
 /* Progress Bars */
 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
-.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
   position: absolute;
   display: block;
   height: 100%;
@@ -422,7 +422,7 @@ fonts to show/hide properly.
     url(@slider-bar-pattern)
     -50% 0 repeat;
 }
-.vjs-default-skin .vjs-load-progress {
+.vjs-default-skin .vjs-load-progress div {
   background: rgb(100, 100, 100) /* IE8- Fallback */;
   background: rgba(255, 255, 255, 0.4);
 }
diff --git a/src/js/control-bar/progress-control.js b/src/js/control-bar/progress-control.js
index 7c0dee699e..ea710aef81 100644
--- a/src/js/control-bar/progress-control.js
+++ b/src/js/control-bar/progress-control.js
@@ -125,15 +125,38 @@ vjs.LoadProgressBar = vjs.Component.extend({
 
 vjs.LoadProgressBar.prototype.createEl = function(){
   return vjs.Component.prototype.createEl.call(this, 'div', {
-    className: 'vjs-load-progress',
-    innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
+    className: 'vjs-load-progress'
   });
 };
 
 vjs.LoadProgressBar.prototype.update = function(){
-  if (this.el_.style) { this.el_.style.width = vjs.round(this.player_.bufferedPercent() * 100, 2) + '%'; }
+  if (this.el_.style) {
+    var buffered = this.player_.buffered(),
+        children = this.el_.children;
+
+    for (var i=0; i<buffered.length; i++) {
+      var start = buffered.start(i),
+          end = buffered.end(i),
+          part = children[i];
+
+      if (!part) {
+        part = this.el_.appendChild(vjs.createEl())
+      };
+
+      part.style.left = this.percentify(start);
+      part.style.width = this.percentify(end - start);
+    };
+
+    // remove unloaded buffered ranges
+    for (var i=0; i < (children.length - buffered.length); i++) {
+      this.el_.removeChild(children[buffered.length + i]);
+    }
+  }
 };
 
+vjs.LoadProgressBar.prototype.percentify = function(time) {
+  return vjs.round(time / this.player_.duration() * 100, 2) + '%'
+}
 
 /**
  * Shows play progress

From 6d8bf982c23c85b0e17edf93d7b2d02ded8ff611 Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Thu, 29 May 2014 13:52:55 +0400
Subject: [PATCH 3/8] Add played property for player

---
 src/js/media/flash.js |  4 ++++
 src/js/media/html5.js |  1 +
 src/js/player.js      | 19 +++++++++++++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/js/media/flash.js b/src/js/media/flash.js
index 7b9dd70536..0d5dccdcfd 100644
--- a/src/js/media/flash.js
+++ b/src/js/media/flash.js
@@ -313,6 +313,10 @@ vjs.Flash.prototype.buffered = function(){
   return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered'));
 };
 
+vjs.Flash.prototype.played = function(){
+  return vjs.createTimeRange(0, this.el_.vjs_getProperty('currentTime'));
+};
+
 vjs.Flash.prototype.supportsFullScreen = function(){
   return false; // Flash does not allow fullscreen through javascript
 };
diff --git a/src/js/media/html5.js b/src/js/media/html5.js
index 66fcdb1586..776c26c710 100644
--- a/src/js/media/html5.js
+++ b/src/js/media/html5.js
@@ -180,6 +180,7 @@ vjs.Html5.prototype.setCurrentTime = function(seconds){
 
 vjs.Html5.prototype.duration = function(){ return this.el_.duration || 0; };
 vjs.Html5.prototype.buffered = function(){ return this.el_.buffered; };
+vjs.Html5.prototype.played = function(){ return this.el_.played; };
 
 vjs.Html5.prototype.volume = function(){ return this.el_.volume; };
 vjs.Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; };
diff --git a/src/js/player.js b/src/js/player.js
index 64af7acae1..2aa55cc4be 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -743,7 +743,7 @@ vjs.Player.prototype.remainingTime = function(){
   return this.duration() - this.currentTime();
 };
 
-// http://dev.w3.org/html5/spec/video.html#dom-media-buffered
+// http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#dom-media-buffered
 // Buffered returns a timerange object.
 // Kind of like an array of portions of the video that have been downloaded.
 
@@ -777,6 +777,22 @@ vjs.Player.prototype.buffered = function(){
   return buffered;
 };
 
+/**
+ * Get a TimeRange object with the times of the video that have been played.
+ * http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#dom-media-played
+ *
+ * @return {Object} A mock TimeRange object (following HTML spec)
+ */
+vjs.Player.prototype.played = function(){
+  var played = this.techGet('played');
+
+  if (!played || !played.length) {
+    played = vjs.createTimeRange(0,this.cache_.currentTime);
+  }
+
+  return played;
+};
+
 /**
  * Get the percent (as a decimal) of the video that's been downloaded
  *
@@ -1531,7 +1547,6 @@ vjs.Player.prototype.playbackRate = function(rate) {
 // readyState: function(){ return this.techCall('readyState'); },
 // initialTime: function(){ return this.techCall('initialTime'); },
 // startOffsetTime: function(){ return this.techCall('startOffsetTime'); },
-// played: function(){ return this.techCall('played'); },
 // seekable: function(){ return this.techCall('seekable'); },
 // videoTracks: function(){ return this.techCall('videoTracks'); },
 // audioTracks: function(){ return this.techCall('audioTracks'); },

From 7a4515fc756f39b7fdbca5c1c38cb172af1e94a7 Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Thu, 29 May 2014 21:49:27 +0400
Subject: [PATCH 4/8] Correctly display played regions in progress-bar

---
 src/css/video-js.less                  |  4 ++--
 src/js/control-bar/progress-control.js | 28 ++++++++++++++++++++++----
 src/js/slider.js                       |  4 +++-
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 287fbe8ccb..525f9cadc2 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -395,7 +395,7 @@ fonts to show/hide properly.
 }
 
 /* Progress Bars */
-.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress div,
 .vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
   position: absolute;
   display: block;
@@ -409,7 +409,7 @@ fonts to show/hide properly.
   top: 0;
 }
 
-.vjs-default-skin .vjs-play-progress {
+.vjs-default-skin .vjs-play-progress div {
   /*
     Using a data URI to create the white diagonal lines with a transparent
       background. Surprisingly works in IE8.
diff --git a/src/js/control-bar/progress-control.js b/src/js/control-bar/progress-control.js
index ea710aef81..1c7b6d4f26 100644
--- a/src/js/control-bar/progress-control.js
+++ b/src/js/control-bar/progress-control.js
@@ -47,7 +47,6 @@ vjs.SeekBar.prototype.options_ = {
     'playProgressBar': {},
     'seekHandle': {}
   },
-  'barName': 'playProgressBar',
   'handleName': 'seekHandle'
 };
 
@@ -107,7 +106,6 @@ vjs.SeekBar.prototype.stepBack = function(){
   this.player_.currentTime(this.player_.currentTime() - 5); // more quickly rewind for keyboard-only users
 };
 
-
 /**
  * Shows load progress
  *
@@ -169,16 +167,38 @@ vjs.PlayProgressBar = vjs.Component.extend({
   /** @constructor */
   init: function(player, options){
     vjs.Component.call(this, player, options);
+    player.on('timeupdate', vjs.bind(this, this.update));
   }
 });
 
 vjs.PlayProgressBar.prototype.createEl = function(){
   return vjs.Component.prototype.createEl.call(this, 'div', {
-    className: 'vjs-play-progress',
-    innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
+    className: 'vjs-play-progress'
   });
 };
 
+vjs.PlayProgressBar.prototype.update = function(){
+  if (this.el_.style) {
+    var played = this.player_.played(),
+        children = this.el_.children;
+
+    for (var i=0; i<played.length; i++) {
+      var start = played.start(i),
+          end = played.end(i),
+          part = children[i];
+
+      if (!part) {
+        part = this.el_.appendChild(vjs.createEl())
+      };
+
+      part.style.left = this.percentify(start);
+      part.style.width = this.percentify(end - start);
+    };
+  }
+};
+
+vjs.PlayProgressBar.prototype.percentify = vjs.LoadProgressBar.prototype.percentify;
+
 /**
  * The Seek Handle shows the current position of the playhead during playback,
  * and can be dragged to adjust the playhead.
diff --git a/src/js/slider.js b/src/js/slider.js
index cc3654f84a..6b1d46123f 100644
--- a/src/js/slider.js
+++ b/src/js/slider.js
@@ -117,7 +117,9 @@ vjs.Slider.prototype.update = function(){
   }
 
   // Set the new bar width
-  bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
+  if (bar) {
+    bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
+  }
 };
 
 vjs.Slider.prototype.calculateDistance = function(event){

From d31702323066a3d6b5219a92825547758cbdb027 Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Fri, 30 May 2014 08:59:54 +0400
Subject: [PATCH 5/8] Support #played in MediaFaker so tests would pass

---
 test/unit/mediafaker.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/unit/mediafaker.js b/test/unit/mediafaker.js
index 222a9c10e1..364ffa5baf 100644
--- a/test/unit/mediafaker.js
+++ b/test/unit/mediafaker.js
@@ -44,6 +44,7 @@ vjs.MediaFaker.prototype.paused = function(){ return true; };
 vjs.MediaFaker.prototype.supportsFullScreen = function(){ return false; };
 vjs.MediaFaker.prototype.features = {};
 vjs.MediaFaker.prototype.buffered = function(){ return {}; };
+vjs.MediaFaker.prototype.played = function(){ return {}; };
 vjs.MediaFaker.prototype.duration = function(){ return {}; };
 
 // Export vars for Closure Compiler

From a5dbaf5cc56727cfeb2862dd321edc0a6838e1e5 Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Mon, 16 Jun 2014 09:01:02 +0400
Subject: [PATCH 6/8] Remove play-progress regions but add some opacity to
 play-progress

---
 src/css/video-js.less                  |  5 +++--
 src/js/control-bar/progress-control.js | 28 +++-----------------------
 2 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 525f9cadc2..f342f6dd7b 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -395,7 +395,7 @@ fonts to show/hide properly.
 }
 
 /* Progress Bars */
-.vjs-default-skin .vjs-progress-holder .vjs-play-progress div,
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 .vjs-default-skin .vjs-progress-holder .vjs-load-progress div {
   position: absolute;
   display: block;
@@ -409,7 +409,7 @@ fonts to show/hide properly.
   top: 0;
 }
 
-.vjs-default-skin .vjs-play-progress div {
+.vjs-default-skin .vjs-play-progress {
   /*
     Using a data URI to create the white diagonal lines with a transparent
       background. Surprisingly works in IE8.
@@ -421,6 +421,7 @@ fonts to show/hide properly.
   background: @slider-bar-color
     url(@slider-bar-pattern)
     -50% 0 repeat;
+  opacity: 0.8;
 }
 .vjs-default-skin .vjs-load-progress div {
   background: rgb(100, 100, 100) /* IE8- Fallback */;
diff --git a/src/js/control-bar/progress-control.js b/src/js/control-bar/progress-control.js
index 1c7b6d4f26..e7f7a0b03d 100644
--- a/src/js/control-bar/progress-control.js
+++ b/src/js/control-bar/progress-control.js
@@ -47,6 +47,7 @@ vjs.SeekBar.prototype.options_ = {
     'playProgressBar': {},
     'seekHandle': {}
   },
+  'barName': 'playProgressBar',
   'handleName': 'seekHandle'
 };
 
@@ -146,8 +147,8 @@ vjs.LoadProgressBar.prototype.update = function(){
     };
 
     // remove unloaded buffered ranges
-    for (var i=0; i < (children.length - buffered.length); i++) {
-      this.el_.removeChild(children[buffered.length + i]);
+    for (var i=children.length; i > buffered.length; i--) {
+      this.el_.removeChild(children[i-1]);
     }
   }
 };
@@ -167,7 +168,6 @@ vjs.PlayProgressBar = vjs.Component.extend({
   /** @constructor */
   init: function(player, options){
     vjs.Component.call(this, player, options);
-    player.on('timeupdate', vjs.bind(this, this.update));
   }
 });
 
@@ -177,28 +177,6 @@ vjs.PlayProgressBar.prototype.createEl = function(){
   });
 };
 
-vjs.PlayProgressBar.prototype.update = function(){
-  if (this.el_.style) {
-    var played = this.player_.played(),
-        children = this.el_.children;
-
-    for (var i=0; i<played.length; i++) {
-      var start = played.start(i),
-          end = played.end(i),
-          part = children[i];
-
-      if (!part) {
-        part = this.el_.appendChild(vjs.createEl())
-      };
-
-      part.style.left = this.percentify(start);
-      part.style.width = this.percentify(end - start);
-    };
-  }
-};
-
-vjs.PlayProgressBar.prototype.percentify = vjs.LoadProgressBar.prototype.percentify;
-
 /**
  * The Seek Handle shows the current position of the playhead during playback,
  * and can be dragged to adjust the playhead.

From 9fec55ff1a97304f569949f41df3944a3f44b627 Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Tue, 17 Jun 2014 09:33:20 +0400
Subject: [PATCH 7/8] Remove opacity

---
 src/css/video-js.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index f342f6dd7b..287fbe8ccb 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -421,7 +421,6 @@ fonts to show/hide properly.
   background: @slider-bar-color
     url(@slider-bar-pattern)
     -50% 0 repeat;
-  opacity: 0.8;
 }
 .vjs-default-skin .vjs-load-progress div {
   background: rgb(100, 100, 100) /* IE8- Fallback */;

From 791ddb21aba600d67eab698df8d27b82337bf378 Mon Sep 17 00:00:00 2001
From: brainopia <brainopia@evilmartians.com>
Date: Tue, 8 Jul 2014 23:53:22 +0400
Subject: [PATCH 8/8] Revert "Add played property for player"

This reverts commit 6d8bf982c23c85b0e17edf93d7b2d02ded8ff611.
---
 src/js/media/flash.js |  4 ----
 src/js/media/html5.js |  1 -
 src/js/player.js      | 19 ++-----------------
 3 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/js/media/flash.js b/src/js/media/flash.js
index 0d5dccdcfd..7b9dd70536 100644
--- a/src/js/media/flash.js
+++ b/src/js/media/flash.js
@@ -313,10 +313,6 @@ vjs.Flash.prototype.buffered = function(){
   return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered'));
 };
 
-vjs.Flash.prototype.played = function(){
-  return vjs.createTimeRange(0, this.el_.vjs_getProperty('currentTime'));
-};
-
 vjs.Flash.prototype.supportsFullScreen = function(){
   return false; // Flash does not allow fullscreen through javascript
 };
diff --git a/src/js/media/html5.js b/src/js/media/html5.js
index 776c26c710..66fcdb1586 100644
--- a/src/js/media/html5.js
+++ b/src/js/media/html5.js
@@ -180,7 +180,6 @@ vjs.Html5.prototype.setCurrentTime = function(seconds){
 
 vjs.Html5.prototype.duration = function(){ return this.el_.duration || 0; };
 vjs.Html5.prototype.buffered = function(){ return this.el_.buffered; };
-vjs.Html5.prototype.played = function(){ return this.el_.played; };
 
 vjs.Html5.prototype.volume = function(){ return this.el_.volume; };
 vjs.Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; };
diff --git a/src/js/player.js b/src/js/player.js
index 2aa55cc4be..64af7acae1 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -743,7 +743,7 @@ vjs.Player.prototype.remainingTime = function(){
   return this.duration() - this.currentTime();
 };
 
-// http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#dom-media-buffered
+// http://dev.w3.org/html5/spec/video.html#dom-media-buffered
 // Buffered returns a timerange object.
 // Kind of like an array of portions of the video that have been downloaded.
 
@@ -777,22 +777,6 @@ vjs.Player.prototype.buffered = function(){
   return buffered;
 };
 
-/**
- * Get a TimeRange object with the times of the video that have been played.
- * http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#dom-media-played
- *
- * @return {Object} A mock TimeRange object (following HTML spec)
- */
-vjs.Player.prototype.played = function(){
-  var played = this.techGet('played');
-
-  if (!played || !played.length) {
-    played = vjs.createTimeRange(0,this.cache_.currentTime);
-  }
-
-  return played;
-};
-
 /**
  * Get the percent (as a decimal) of the video that's been downloaded
  *
@@ -1547,6 +1531,7 @@ vjs.Player.prototype.playbackRate = function(rate) {
 // readyState: function(){ return this.techCall('readyState'); },
 // initialTime: function(){ return this.techCall('initialTime'); },
 // startOffsetTime: function(){ return this.techCall('startOffsetTime'); },
+// played: function(){ return this.techCall('played'); },
 // seekable: function(){ return this.techCall('seekable'); },
 // videoTracks: function(){ return this.techCall('videoTracks'); },
 // audioTracks: function(){ return this.techCall('audioTracks'); },