fix: disable track mode to force clear active cues

src/plugins/htmlVideoPlayer/plugin.js

@@ -245,6 +245,12 @@ function tryRemoveElement(elem) {
          * @type {any | null | undefined}
          */
         #currentSecondaryTrackEvents;
+        /**
+         * Used to temporarily store the text track when
+         * force-clearing the `activeCue` for certain browsers
+         * @type {TextTrack | null | undefined}
+         */
+        #currentTextTrack;
         /**
          * @type {string[] | undefined}
          */
@@ -624,8 +630,8 @@ function tryRemoveElement(elem) {
          * @private
          * These browsers will not clear the existing active cue when setting an offset
          * for native TextTracks.
-         * Any previous text tracks that are on the screen when the offset changes will
+         * Any previous text tracks that are on the screen when the offset changes will remain next
-         * remain next to the new tracks until they reach the new offset's instance of the track.
+         * to the new tracks until they reach the end time of the new offset's instance of the track.
          */
         requiresHidingActiveCuesOnOffsetChange() {
             return !!browser.firefox;
@@ -634,11 +640,30 @@ function tryRemoveElement(elem) {
         /**
          * @private
          */
-        hideTextTrackActiveCues(currentTrack) {
+        hideTextTrackWithActiveCues(currentTrack) {
             if (currentTrack.activeCues) {
-                Array.from(currentTrack.activeCues).forEach((cue) => {
+                currentTrack.mode = 'hidden';
-                    cue.text = '';
+            }
-                });
+        }
+
+        /**
+         * Forces the active cue to clear by disabling then re-enabling the track.
+         * The track mode is reverted inside of a 0ms timeout to free up the track
+         * and allow it to disable and clear the active cue.
+         * The track needs to be temporarily stored in order for us to access it
+         * inside the timeout. The stored value is reset after it is used.
+         * @private
+         */
+        forceClearTextTrackActiveCues(currentTrack) {
+            if (currentTrack.activeCues) {
+                this.#currentTextTrack = currentTrack;
+                currentTrack.mode = 'disabled';
+                setTimeout(() => {
+                    if (this.#currentTextTrack) {
+                        this.#currentTextTrack.mode = 'showing';
+                        this.#currentTextTrack = null;
+                    }
+                }, 0);
             }
         }
 
@@ -651,14 +676,21 @@ function tryRemoveElement(elem) {
                 if (offsetValue === 0) {
                     return;
                 }
-                if (this.requiresHidingActiveCuesOnOffsetChange()) {
+
-                    this.hideTextTrackActiveCues(currentTrack);
+                const shouldClearActiveCues = this.requiresClearingActiveCuesOnOffsetChange();
+                if (shouldClearActiveCues) {
+                    this.hideTextTrackWithActiveCues(currentTrack);
                 }
+
                 Array.from(currentTrack.cues)
                     .forEach(function (cue) {
                         cue.startTime -= offsetValue;
                         cue.endTime -= offsetValue;
                     });
+
+                if (shouldClearActiveCues) {
+                    this.forceClearTextTrackActiveCues(currentTrack);
+                }
             }
         }