fix: duration reset and allow duration NaN or 0 for duration display (#…

…5348)

This allows the duration NaN or 0 to update the duration display.
This also resets the duration display when a new media item is loaded with `preload` set to 'none'.

Fixes #5347

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

@@ -28,6 +28,11 @@ class DurationDisplay extends TimeDisplay {
    // it has changed
    this.on(player, 'durationchange', this.updateContent);

    // Listen to loadstart because the player duration is reset when a new media element is loaded,
    // but the durationchange on the user agent will not fire.
    // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
    this.on(player, 'loadstart', this.updateContent);

    // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
    // listeners could have broken dependent applications/libraries. These
    // can likely be removed for 7.0.
@@ -58,7 +63,7 @@ class DurationDisplay extends TimeDisplay {
  updateContent(event) {
    const duration = this.player_.duration();

    if (duration && this.duration_ !== duration) {
    if (this.duration_ !== duration) {
      this.duration_ = duration;
      this.updateFormattedTime_(duration);
    }

src/js/player.js

@@ -1290,6 +1290,9 @@ class Player extends Component {
    // reset the error state
    this.error(null);

    // Update the duration
    this.handleTechDurationChange_();

    // If it's already playing we want to trigger a firstplay event now.
    // The firstplay event relies on both the play and loadstart events
    // which can happen in any order for a new source
@@ -2288,11 +2291,16 @@ class Player extends Component {
      } else {
        this.removeClass('vjs-live');
      }
      /**
       * @event Player#durationchange
       * @type {EventTarget~Event}
       */
      this.trigger('durationchange');
      if (!isNaN(seconds)) {
         // Do not fire durationchange unless the duration value is known.
         // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}

        /**
         * @event Player#durationchange
         * @type {EventTarget~Event}
         */
        this.trigger('durationchange');
      }
    }
  }