Feature/reset player ui #4683

src/js/control-bar/time-controls/remaining-time-display.js

@@ -61,7 +61,7 @@ class RemainingTimeDisplay extends TimeDisplay {
    * @listens Player#durationchange
    */
   updateContent(event) {
-    if (!this.player_.duration()) {
+    if (!this.player_.duration() && this.player_.duration() !== 0) {
       return;
     }
 

src/js/player.js

@@ -2928,11 +2928,49 @@ class Player extends Component {
     }
     this.loadTech_(this.options_.techOrder[0], null);
     this.techCall_('reset');
+    this.resetControlBarUI();
     if (isEvented(this)) {
       this.trigger('playerreset');
     }
   }
 
+  /**
+   * Reset Control Bar's UI by calling sub-methods that reset
+   * all of Control Bar's components
+   */
+  resetControlBarUI() {
+    this.resetProgressBar_();
+    this.resetPlaybackRate_();
+    this.resetVolumeBar_();
+  }
+
+  /**
+   * Reset tech's progress so progress bar is reset in the UI
+   */
+  resetProgressBar_() {
+    this.currentTime(0);
+    this.duration(0);
+    this.controlBar.durationDisplay.updateContent();
+    this.controlBar.remainingTimeDisplay.updateContent();
+    this.tech_.trigger({ type: 'timeupdate', target: this.tech_, manuallyTriggered: true });
+  }
+
+  /**
+   * Reset Playback ratio
+   */
+  resetPlaybackRate_() {
+    this.playbackRate(this.defaultPlaybackRate());
+    this.handleTechRateChange_();
+  }
+
+  /**
+   * Reset Volume bar
+   */
+  resetVolumeBar_() {
+    this.volume(1.0);
+    this.trigger('volumechange');
+  }
+
   /**
    * Returns all of the current source objects.
    *

test/unit/player.test.js

@@ -1425,7 +1425,8 @@ QUnit.test('player#reset loads the Html5 tech and then techCalls reset', functio
     },
     techCall_(method) {
       techCallMethod = method;
-    }
+    },
+    resetControlBarUI() {}
   };
 
   Player.prototype.reset.call(testPlayer);
@@ -1450,7 +1451,8 @@ QUnit.test('player#reset loads the first item in the techOrder and then techCall
     },
     techCall_(method) {
       techCallMethod = method;
-    }
+    },
+    resetControlBarUI() {}
   };
 
   Player.prototype.reset.call(testPlayer);

test/unit/reset-ui.test.js

@@ -0,0 +1,55 @@
+/* eslint-env qunit */
+import TestHelpers from './test-helpers.js';
+QUnit.module('player reset-ui');
+
+QUnit.test('Calling resetProgressBar player method should place progress bar at 0% width', function(assert) {
+  const player = TestHelpers.makePlayer();
+
+  player.currentTime(20);
+  player.trigger('timeupdate');
+  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.dispose();
+});
+
+QUnit.test('Calling resetPlaybackRate player method should place play rate at 1x', function(assert) {
+  const player = TestHelpers.makePlayer({techOrder: ['html5']});
+
+  player.playbackRate(2);
+  player.handleTechRateChange_();
+  player.resetPlaybackRate_();
+  const defaultRate = player.defaultPlaybackRate();
+
+  assert.equal(
+    player.controlBar.playbackRateMenuButton.labelEl_.textContent, defaultRate + 'x',
+    'Playback rate is the default one on the UI'
+  );
+  assert.equal(
+    player.playbackRate(), defaultRate,
+    'Playback rate is the default one on the player object'
+  );
+  player.dispose();
+});
+
+QUnit.test('Calling resetVolumeBar player method should reset volume bar', function(assert) {
+  const player = TestHelpers.makePlayer({ techOrder: ['html5'] });
+
+  player.volume(0.5);
+
+  player.trigger('volumechange');
+
+  assert.equal(player.controlBar.volumePanel.volumeControl.volumeBar.el_.getAttribute('aria-valuenow'), 50, 'UI value of VolumeBar is 50');
+
+  player.resetVolumeBar_();
+
+  assert.equal(player.controlBar.volumePanel.volumeControl.volumeBar.el_.getAttribute('aria-valuenow'), 100, 'UI value of VolumeBar is 100');
+
+  player.dispose();
+});