Highlight times when buffer hits zero

Place a semi-transparent rectangle over any time interval where the buffer is totally empty.

@@ -432,6 +432,11 @@ form label {
   stroke-dasharray: 5, 5;
   stroke-dasharray: 5, 5;
 }
 }
 
 
+.buffer-empty {
+  fill: #e44d26;
+  opacity: 0.4;
+}
+
 .timeline {
 .timeline {
   color: #888;
   color: #888;
   height: 500px;
   height: 500px;

@@ -143,7 +143,7 @@
             buffered = 0,
             buffered = 0,
             currentTime = 0;
             currentTime = 0;
 
 
-        // mock out buffered and currentTime
+        // simulate buffered and currentTime during playback
         player.buffered = function() {
         player.buffered = function() {
           return videojs.createTimeRange(0, currentTime + buffered);
           return videojs.createTimeRange(0, currentTime + buffered);
         };
         };
@@ -204,10 +204,13 @@
                   if (remaining - value.bandwidth <= 0) {
                   if (remaining - value.bandwidth <= 0) {
                     // send the response body once all bytes have been delivered
                     // send the response body once all bytes have been delivered
                     setTimeout(function() {
                     setTimeout(function() {
-                      buffered += segmentDuration;
                       request.status = 200;
                       request.status = 200;
                       request.response = new Uint8Array(segmentSize * 0.125);
                       request.response = new Uint8Array(segmentSize * 0.125);
                       request.setResponseBody('');
                       request.setResponseBody('');
+
+                      buffered += segmentDuration;
+                      // update the buffered value
+                      results.buffered[results.buffered.length - 1].buffered = buffered;
                       results.effectiveBandwidth.push({
                       results.effectiveBandwidth.push({
                         time: Math.ceil(+new Date() * 0.001),
                         time: Math.ceil(+new Date() * 0.001),
                         bandwidth: player.hls.bandwidth
                         bandwidth: player.hls.bandwidth
@@ -368,6 +371,40 @@
         .attr('cy', function(playlist) {
         .attr('cy', function(playlist) {
           return y(playlist.bitrate);
           return y(playlist.bitrate);
         });
         });
+
+      // highlight intervals when the buffer is empty
+      svg.selectAll('.buffer-empty').remove();
+      svg.selectAll('.buffer-empty')
+        .data(data.buffered.reduce(function(result, sample) {
+          var last = result[result.length - 1];
+          if (sample.buffered === 0) {
+            if (last && sample.time === last.end + 1) {
+              // add this sample to the interval we're accumulating
+              return result.slice(0, result.length - 1).concat({
+                start: last.start,
+                end: sample.time
+              });
+            } else {
+              // this sample starts a new interval
+              return result.concat({
+                start: sample.time,
+                end: sample.time
+              });
+            }
+          }
+          // filter out time periods where the buffer isn't empty
+          return result;
+        }, []))
+        .enter().append('rect')
+        .attr('class', 'buffer-empty')
+        .attr('x', function(data) {
+          return x(data.start);
+        })
+        .attr('width', function(data) {
+          return x(1 + data.end - data.start);
+        })
+        .attr('y', 0)
+        .attr('height', y(height));
     };
     };
   })();
   })();