Trigger ended event when end = duration (#722)

* Trigger ended event when end = duration

* Use player.duration() in place of duration in Manifest for ended event trigger

src/components/MediaPlayer/VideoJS/VideoJSPlayer.js

@@ -356,6 +356,14 @@ function VideoJSPlayer({
       }
     }
 
+    /**
+     * Set structStart variable in the updated player to update the progressBar with the
+     * correct time when using StructuredNavigation to switch between canvases.
+     * Set this before loadedmetadata event, because progress-bar uses this value in the
+     * update() function before that event emits.
+     */
+    player.structStart = currentTimeRef.current;
+
     playerLoadedMetadata(player);
   };
 
@@ -392,11 +400,6 @@ function VideoJSPlayer({
       }
 
       isEndedRef.current ? player.currentTime(0) : player.currentTime(currentTimeRef.current);
-      /**
-       * Set structStart variable in the updated player to update the progressBar with the
-       * correct time when using StructuredNavigation to switch between canvases
-       */
-      player.structStart = currentTimeRef.current;
 
       if (isEndedRef.current || isPlayingRef.current) {
         /*

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

@@ -443,7 +443,7 @@ class CustomSeekBar extends SeekBar {
     if (!el_ || !player || !canvasTargetsRef.current) {
       return;
     }
-    const { start, end, duration } = canvasTargetsRef.current[srcIndexRef.current ?? 0];
+    const { start, end } = canvasTargetsRef.current[srcIndexRef.current ?? 0];
 
     // Restrict access to the intended range in the media file
     if (curTime < start) {
@@ -452,9 +452,14 @@ class CustomSeekBar extends SeekBar {
     if (curTime >= end && !player.paused() && !player.isDisposed()) {
       // Trigger ended event when playable range < duration of the 
       // full media. e.g. clipped playlist items
-      if (end < duration) {
+      if (end < player.duration()) {
         player.trigger('ended');
       }
+      // Reset progress-bar played range
+      document.documentElement.style.setProperty(
+        '--range-progress', `calc(${0}%)`
+      );
+      this.removeClass('played-range');
 
       // On the next play event set the time to start or a seeked time
       // in between the 'ended' event and 'play' event