Merge branch 'upstream_hls.js/master' into release

* upstream_hls.js/master:
  Bump @types/mocha from 8.0.2 to 8.0.3
  Bump netlify-cli from 2.59.0 to 2.59.1
  Bump @types/mocha from 8.0.1 to 8.0.2
  Fix demo buffer-bar scaling and repaint issues
  Bump sinon from 9.0.2 to 9.0.3
  Bump @babel/core from 7.11.0 to 7.11.1
  Bump mocha from 8.1.0 to 8.1.1
  Only apply minimum ID3 cue duration when cue has none resolves video-dev#2963

demo/index.html

@@ -81,7 +81,7 @@ <h3>
               <option value="854px">854 x 480</option>
               <option value="1280px">1280 x 720</option>
               <option value="1920px">1920 x 1080</option>
-              <option value="50%">Responsive (50%)</option>
+              <option value="80%">Responsive (80%)</option>
               <option value="100%">Responsive (100%)</option>
             </select>
           </label>
@@ -116,7 +116,7 @@ <h3>
 
       <video id="video" controls autoplay class="videoCentered"></video>
       <br>
-      <canvas id="bufferedCanvas" height="15" class="videoCentered" onclick="onClickBufferedRange(event);"></canvas>
+      <canvas id="bufferedCanvas" width="720" height="15" class="videoCentered" onclick="onClickBufferedRange(event);" style="height: fit-content;"></canvas>
       <br>
       <br>
       <label class="center">Status:</label>

demo/main.js

@@ -82,6 +82,7 @@ $(document).ready(function () {
   $('#videoSize').change(function () {
     $('#video').width($('#videoSize').val());
     $('#bufferedCanvas').width($('#videoSize').val());
+    checkBuffer();
   });
 
   $('#enableStreaming').click(function () {
@@ -860,19 +861,18 @@ function checkBuffer () {
   const r = v.buffered;
   let bufferingDuration;
   ctx.fillStyle = 'black';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = 'gray';
   if (r) {
     if (!canvas.width || canvas.width !== v.clientWidth) {
       canvas.width = v.clientWidth;
     }
-
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
     const pos = v.currentTime;
     let bufferLen = 0;
+    ctx.fillStyle = 'gray';
     for (let i = 0; i < r.length; i++) {
       const start = r.start(i) / v.duration * canvas.width;
       const end = r.end(i) / v.duration * canvas.width;
-      ctx.fillRect(start, 3, Math.max(2, end - start), 10);
+      ctx.fillRect(start, 2, Math.max(2, end - start), 11);
       if (pos >= r.start(i) && pos < r.end(i)) {
         // play position is inside this buffer TimeRange, retrieve end of buffer position and buffer length
         bufferLen = r.end(i) - pos;
@@ -957,6 +957,8 @@ function checkBuffer () {
     ctx.fillStyle = 'blue';
     const x = v.currentTime / v.duration * canvas.width;
     ctx.fillRect(x, 0, 2, 15);
+  } else {
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
 }