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

Author: fketchakeu

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');
+      }
     }
   }