From 7da634728699f8d6a06f5c2d5a9bc839f323f907 Mon Sep 17 00:00:00 2001
From: Dananji Withana <dwithana@iu.edu>
Date: Mon, 11 Nov 2024 09:37:39 -0500
Subject: [PATCH] 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 | 13 ++++++++-----
 .../VideoJS/components/js/VideoJSProgress.js        |  9 +++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
index d31e5d86..2fb7f6dd 100644
--- a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
+++ b/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) {
         /*
diff --git a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js b/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js
index 371a6651..b79994bc 100644
--- a/src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js
+++ b/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