c140bf10 by David LaPalomento

Highlight times when buffer hits zero

Place a semi-transparent rectangle over any time interval where the buffer is totally empty.
1 parent 64b2d4f3
......@@ -432,6 +432,11 @@ form label {
stroke-dasharray: 5, 5;
}
.buffer-empty {
fill: #e44d26;
opacity: 0.4;
}
.timeline {
color: #888;
height: 500px;
......
......@@ -143,7 +143,7 @@
buffered = 0,
currentTime = 0;
// mock out buffered and currentTime
// simulate buffered and currentTime during playback
player.buffered = function() {
return videojs.createTimeRange(0, currentTime + buffered);
};
......@@ -204,10 +204,13 @@
if (remaining - value.bandwidth <= 0) {
// send the response body once all bytes have been delivered
setTimeout(function() {
buffered += segmentDuration;
request.status = 200;
request.response = new Uint8Array(segmentSize * 0.125);
request.setResponseBody('');
buffered += segmentDuration;
// update the buffered value
results.buffered[results.buffered.length - 1].buffered = buffered;
results.effectiveBandwidth.push({
time: Math.ceil(+new Date() * 0.001),
bandwidth: player.hls.bandwidth
......@@ -368,6 +371,40 @@
.attr('cy', function(playlist) {
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));
};
})();
......