Merge pull request #594 from samvera-labs/duration-update-567

Set accurate duration on progress bar creation

src/components/MediaPlayer/MediaPlayer.js

@@ -263,6 +263,7 @@ 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

@@ -336,7 +336,6 @@ function VideoJSPlayer({
 
   const updatePlayer = (player) => {
     player.duration(canvasDurationRef.current);
-    player.canvasDuration = canvasDurationRef.current;
     player.src(options.sources);
     player.poster(options.poster);
     player.canvasIndex = cIndexRef.current;
@@ -467,11 +466,6 @@ 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');
@@ -550,14 +544,6 @@ function VideoJSPlayer({
       player.volume(startVolume);
       player.srcIndex = srcIndex;
 
-      /**
-       * 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

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