fix: reset progress bar fully when player is reset (#8160)

src/js/player.js

@@ -3587,7 +3587,17 @@ class Player extends Component {
   resetProgressBar_() {
     this.currentTime(0);
 
-    const { durationDisplay, remainingTimeDisplay } = this.controlBar || {};
+    const {
+      currentTimeDisplay,
+      durationDisplay,
+      progressControl,
+      remainingTimeDisplay
+    } = this.controlBar || {};
+    const { seekBar } = progressControl || {};
+
+    if (currentTimeDisplay) {
+      currentTimeDisplay.updateContent();
+    }
 
     if (durationDisplay) {
       durationDisplay.updateContent();
@@ -3596,6 +3606,14 @@ class Player extends Component {
     if (remainingTimeDisplay) {
       remainingTimeDisplay.updateContent();
     }
+
+    if (seekBar) {
+      seekBar.update();
+
+      if (seekBar.loadProgressBar) {
+        seekBar.loadProgressBar.update();
+      }
+    }
   }
 
   /**

test/unit/reset-ui.test.js

@@ -1,21 +1,81 @@
 /* eslint-env qunit */
 import TestHelpers from './test-helpers.js';
+import {createTimeRanges} from '../../src/js/utils/time.js';
+import sinon from 'sinon';
 QUnit.module('player reset-ui');
 
-QUnit.test('Calling resetProgressBar player method should place progress bar at 0% width', function(assert) {
-  const player = TestHelpers.makePlayer();
+QUnit.test('Calling resetProgressBar should reset the components displaying time related values', function(assert) {
+  const clock = sinon.useFakeTimers();
+  const player = TestHelpers.makePlayer({controls: true});
 
+  clock.tick(1000);
+  player.trigger('ready');
+  player.buffered = function() {
+    return createTimeRanges(0, 5);
+  };
+  player.duration(40);
   player.currentTime(20);
+
+  const {
+    currentTimeDisplay,
+    durationDisplay,
+    remainingTimeDisplay,
+    progressControl: {
+      seekBar
+    }
+  } = player.controlBar;
+
+  clock.tick(30);
+
   player.trigger('timeupdate');
+  player.trigger('progress');
+
+  clock.tick(30);
+
+  // Current time display
+  assert.equal(currentTimeDisplay.textNode_.textContent, '0:20', 'current time display is 0:20');
+  // Duration display
+  assert.equal(durationDisplay.textNode_.textContent, '0:40', 'duration display is 0:40');
+  // Remaining time display
+  assert.equal(remainingTimeDisplay.textNode_.textContent, '0:20', 'remaining time display is 0:20');
+  // Seek bar
+  assert.equal(seekBar.getProgress(), '0.5', 'seek bar progress is 0.5');
+  assert.equal(seekBar.getAttribute('aria-valuetext'), '0:20 of 0:40', 'seek bar progress holder aria value text is 0:20 of 0:40');
+  assert.equal(seekBar.getAttribute('aria-valuenow'), '50.00', 'seek bar progress holder aria value now is 50.00');
+  // Load progress
+  assert.equal(seekBar.loadProgressBar.el().textContent, 'Loaded: 12.50%', 'load progress bar textContent is Loaded: 12.50%');
+  assert.equal(seekBar.loadProgressBar.el().style.width, '12.5%', 'load progress bar width is 12.5%');
+  // Play progress
+  assert.equal(seekBar.playProgressBar.el().textContent, '0:20', 'player progress bar textContent is 0:20');
+  assert.equal(seekBar.playProgressBar.el().style.width, '50%', 'player progress bar width is 50%');
+  assert.equal(seekBar.playProgressBar.timeTooltip.el().textContent, '0:20', 'player progress bar time tooltip is 0:20');
+
+  // Do reset
   player.resetProgressBar_();
-  assert.equal(
-    player.controlBar.progressControl.seekBar.playProgressBar.el().offsetWidth, 0,
-    'progress bar is reset to width 0%'
-  );
-  assert.equal(
-    player.currentTime(), 0,
-    'player current time is 0'
-  );
+  player.duration(0);
+  clock.tick(30);
+
+  assert.equal(player.currentTime(), 0, 'player current time is 0');
+
+  // Current time display
+  assert.equal(currentTimeDisplay.textNode_.textContent, '0:00', 'current time display is 0:00');
+  // Duration display
+  assert.equal(durationDisplay.textNode_.textContent, '0:00', 'duration display is 0:00');
+  // Remaining time display
+  assert.equal(remainingTimeDisplay.textNode_.textContent, '0:00', 'remaining time display is 0:00');
+  // Seek bar
+  assert.equal(seekBar.getProgress(), '0', 'seek bar progress is 0');
+  assert.equal(seekBar.getAttribute('aria-valuetext'), '0:00 of 0:00', 'seek bar progress holder aria value text is 0:00 of 0:00');
+  assert.equal(seekBar.getAttribute('aria-valuenow'), '0.00', 'seek bar progress holder aria value now is 0.00');
+  // Load progress
+  assert.equal(seekBar.loadProgressBar.el().textContent, 'Loaded: 0.00%', 'load progress bar textContent is Loaded: 0.00%');
+  assert.equal(seekBar.loadProgressBar.el().style.width, '0%', 'load progress bar width is 0%');
+  // Play progress
+  assert.equal(seekBar.playProgressBar.el().textContent, '0:00', 'player progress bar textContent is 0:00');
+  assert.equal(seekBar.playProgressBar.el().style.width, '0%', 'player progress bar width is 0%');
+  assert.equal(seekBar.playProgressBar.timeTooltip.el().textContent, '0:00', 'player progress bar time tooltip is 0:00');
+
+  clock.restore();
   player.dispose();
 });