diff --git a/src/js/control-bar/time-controls/current-time-display.js b/src/js/control-bar/time-controls/current-time-display.js index 904f424bfe..c6bff29b95 100644 --- a/src/js/control-bar/time-controls/current-time-display.js +++ b/src/js/control-bar/time-controls/current-time-display.js @@ -11,6 +11,20 @@ import Component from '../../component.js'; */ class CurrentTimeDisplay extends TimeDisplay { + /** + * Creates an instance of this class. + * + * @param {Player} player + * The `Player` that this class should be attached to. + * + * @param {Object} [options] + * The key/value store of player options. + */ + constructor(player, options) { + super(player, options); + this.on(player, 'ended', this.handleEnded); + } + /** * Builds the default DOM `className`. * @@ -36,6 +50,23 @@ class CurrentTimeDisplay extends TimeDisplay { this.updateFormattedTime_(time); } + /** + * When the player fires ended there should be no time left. Sadly + * this is not always the case, lets make it seem like that is the case + * for users. + * + * @param {EventTarget~Event} [event] + * The `ended` event that caused this to run. + * + * @listens Player#ended + */ + handleEnded(event) { + if (!this.player_.duration()) { + return; + } + this.updateFormattedTime_(this.player.duration()); + } + } /** diff --git a/src/js/control-bar/time-controls/remaining-time-display.js b/src/js/control-bar/time-controls/remaining-time-display.js index 244620ad43..b402ce83f9 100644 --- a/src/js/control-bar/time-controls/remaining-time-display.js +++ b/src/js/control-bar/time-controls/remaining-time-display.js @@ -22,6 +22,7 @@ class RemainingTimeDisplay extends TimeDisplay { constructor(player, options) { super(player, options); this.on(player, 'durationchange', this.throttledUpdateContent); + this.on(player, 'ended', this.handleEnded); } /** @@ -50,6 +51,23 @@ class RemainingTimeDisplay extends TimeDisplay { this.updateFormattedTime_(this.player_.remainingTime()); } + + /** + * When the player fires ended there should be no time left. Sadly + * this is not always the case, lets make it seem like that is the case + * for users. + * + * @param {EventTarget~Event} [event] + * The `ended` event that caused this to run. + * + * @listens Player#ended + */ + handleEnded(event) { + if (!this.player_.duration()) { + return; + } + this.updateFormattedTime_(0); + } } /**