Carry duration update changes into a seperatte PR

src/components/MediaPlayer/MediaPlayer.js

@@ -263,7 +263,6 @@ const MediaPlayer = ({
           timeFragment = { start: 0, end: duration };
         }
         timeFragment.altStart = timeFragment.start;
-        timeFragment.duration = duration;
         manifestDispatch({
           canvasTargets: [timeFragment],
           type: 'canvasTargets',

src/components/MediaPlayer/VideoJS/VideoJSPlayer.js

@@ -339,6 +339,7 @@ function VideoJSPlayer({
     player.src(options.sources);
     player.poster(options.poster);
     player.canvasIndex = cIndexRef.current;
+    player.canvasDuration = canvasDurationRef.current;
     player.srcIndex = srcIndex;
     player.targets = targets;
     player.canvasIsEmpty = canvasIsEmptyRef.current;
@@ -466,6 +467,11 @@ function VideoJSPlayer({
       console.log('Player loadedmetadata');
 
       player.duration(canvasDurationRef.current);
+      /**
+       * Set property canvasDuration in the player to use in videoJSProgress component.
+       * This updates the property when player.src() is updates.
+       */
+      player.canvasDuration = canvasDurationRef.current;
 
       // Reveal player once metadata is loaded
       player.removeClass('vjs-disabled');
@@ -545,6 +551,14 @@ function VideoJSPlayer({
       player.srcIndex = srcIndex;
       player.duration(canvasDurationRef.current);
 
+      /**
+       * Set property canvasDuration in the player to use in videoJSProgress component.
+       * Video.js' in-built duration function doesn't seem to update as fast as
+       * we expect to be used in videoJSProgress component.
+       * Setting this in the ready callback makes sure this is updated to the
+       * correct value before 'loadstart' event is fired in videoJSProgress component.
+       */
+      player.canvasDuration = canvasDurationRef.current;
       if (enableTitleLink) { player.canvasLink = canvasLinkRef.current; }
       // Need to set this once experimentalSvgIcons option in Video.js options was enabled
       player.getChild('controlBar').qualitySelector.setIcon('cog');

src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js

@@ -46,7 +46,8 @@ class VideoJSProgress extends vjsComponent {
   /** Build progress bar elements from the options */
   initProgressBar() {
     const { targets, srcIndex } = this.options;
-    const { start, end, duration } = targets[srcIndex];
+    const { start, end } = targets[srcIndex];
+    const duration = this.player.canvasDuration;
     let startTime = start,
       endTime = end;