feat: reset player ui on Player#reset (videojs#5684)

reeckset · gkatsev · commit 175f77325346 · 2019-01-08T14:15:51.000-05:00
Fixes videojs#4683
diff --git a/src/js/control-bar/time-controls/remaining-time-display.js b/src/js/control-bar/time-controls/remaining-time-display.js
@@ -60,7 +60,7 @@ class RemainingTimeDisplay extends TimeDisplay {
    * @listens Player#durationchange
    */
   updateContent(event) {
-    if (!this.player_.duration()) {
+    if (typeof this.player_.duration() !== 'number') {
       return;
     }
 
diff --git a/src/js/player.js b/src/js/player.js
@@ -2996,11 +2996,47 @@ class Player extends Component {
     this.poster('');
     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.controlBar.durationDisplay.updateContent();
+    this.controlBar.remainingTimeDisplay.updateContent();
+  }
+
+  /**
+   * 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.
    *
diff --git a/test/unit/player.test.js b/test/unit/player.test.js
@@ -1444,6 +1444,7 @@ QUnit.test('player#reset loads the Html5 tech and then techCalls reset', functio
     techCall_(method) {
       techCallMethod = method;
     },
+    resetControlBarUI_() {},
     poster() {}
   };
 
@@ -1471,6 +1472,7 @@ QUnit.test('player#reset loads the first item in the techOrder and then techCall
     techCall_(method) {
       techCallMethod = method;
     },
+    resetControlBarUI_() {},
     poster() {}
   };
 
diff --git a/test/unit/reset-ui.test.js b/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();
+});

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ class RemainingTimeDisplay extends TimeDisplay {`
`60`	`60`	`* @listens Player#durationchange`
`61`	`61`	`*/`
`62`	`62`	`updateContent(event) {`
`63`		`- if (!this.player_.duration()) {`
	`63`	`+ if (typeof this.player_.duration() !== 'number') {`
`64`	`64`	`return;`
`65`	`65`	`}`
`66`	`66`