feat: add custom rendered secondary tracks

src/plugins/htmlVideoPlayer/plugin.js

@@ -222,10 +222,18 @@ function tryRemoveElement(elem) {
          * @type {HTMLElement | null | undefined}
          */
         #videoSubtitlesElem;
+        /**
+         * @type {HTMLElement | null | undefined}
+         */
+        #videoSecondarySubtitlesElem;
         /**
          * @type {any | null | undefined}
          */
         #currentTrackEvents;
+        /**
+         * @type {any | null | undefined}
+         */
+        #currentSecondaryTrackEvents;
         /**
          * @type {string[] | undefined}
          */
@@ -977,16 +985,29 @@ function tryRemoveElement(elem) {
          */
         destroyCustomTrack(videoElement, targetTrackIndex) {
             const destroySingleTrack = typeof targetTrackIndex === 'number';
+            const destroyPrimaryTrack = targetTrackIndex === this._PRIMARY_TEXT_TRACK_INDEX;
+            const destroySecondaryTrack = targetTrackIndex === this._SECONDARY_TEXT_TRACK_INDEX;
 
+            if (destroyPrimaryTrack) {
+                if (this.#videoSubtitlesElem) {
+                    tryRemoveElement(this.#videoSubtitlesElem);
+                    this.#videoSubtitlesElem = null;
+                }
+            } else if (destroySecondaryTrack) {
+                if (this.#videoSecondarySubtitlesElem) {
+                    tryRemoveElement(this.#videoSecondarySubtitlesElem);
+                    this.#videoSecondarySubtitlesElem = null;
+                }
+            } else {
                 if (this.#videoSubtitlesElem) {
                     const subtitlesContainer = this.#videoSubtitlesElem.parentNode;
                     if (subtitlesContainer) {
                         tryRemoveElement(subtitlesContainer);
                     }
                     this.#videoSubtitlesElem = null;
+                    this.#videoSecondarySubtitlesElem = null;
+                }
             }
-
-            this.#currentTrackEvents = null;
 
             if (videoElement) {
                 const allTracks = videoElement.textTracks || []; // get list of tracks
@@ -1001,7 +1022,19 @@ function tryRemoveElement(elem) {
                 }
             }
 
+            if (destroyPrimaryTrack) {
                 this.#customTrackIndex = -1;
+                this.#currentTrackEvents = null;
+            } else if (destroySecondaryTrack) {
+                this.#customSecondaryTrackIndex = -1;
+                this.#currentSecondaryTrackEvents = null;
+            } else {
+                this.#customTrackIndex = -1;
+                this.#customSecondaryTrackIndex = -1;
+                this.#currentTrackEvents = null;
+                this.#currentSecondaryTrackEvents = null;
+            }
+
             this.#currentClock = null;
             this._currentAspectRatio = null;
 
@@ -1191,9 +1224,10 @@ function tryRemoveElement(elem) {
         /**
          * @private
          */
-        renderSubtitlesWithCustomElement(videoElement, track, item) {
+        renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex) {
             this.fetchSubtitles(track, item).then((data) => {
                 if (!this.#videoSubtitlesElem) {
+                    if (!this.isSecondaryTrack(targetTextTrackIndex)) {
                         const subtitlesContainer = document.createElement('div');
                         subtitlesContainer.classList.add('videoSubtitles');
                         subtitlesContainer.innerHTML = '<div class="videoSubtitlesInner"></div>';
@@ -1202,6 +1236,16 @@ function tryRemoveElement(elem) {
                         videoElement.parentNode.appendChild(subtitlesContainer);
                         this.#currentTrackEvents = data.TrackEvents;
                     }
+                } else if (this.isSecondaryTrack(targetTextTrackIndex)) {
+                    const subtitlesContainer = document.querySelector('.videoSubtitles');
+                    if (!subtitlesContainer) return;
+                    const secondarySubtitlesElement = document.createElement('div');
+                    secondarySubtitlesElement.classList.add('videoSecondarySubtitlesInner');
+                    subtitlesContainer.prepend(secondarySubtitlesElement);
+                    this.#videoSecondarySubtitlesElem = secondarySubtitlesElement;
+                    this.setSubtitleAppearance(subtitlesContainer, this.#videoSecondarySubtitlesElem);
+                    this.#currentSecondaryTrackEvents = data.TrackEvents;
+                }
             });
         }
 
@@ -1324,8 +1368,12 @@ function tryRemoveElement(elem) {
                 return;
             }
 
-            const trackEvents = this.#currentTrackEvents;
+            const allTrackEvents = [this.#currentTrackEvents, this.#currentSecondaryTrackEvents];
-            const subtitleTextElement = this.#videoSubtitlesElem;
+            const subtitleTextElements = [this.#videoSubtitlesElem, this.#videoSecondarySubtitlesElem];
+
+            for (let i = 0; i < allTrackEvents.length; i++) {
+                const trackEvents = allTrackEvents[i];
+                const subtitleTextElement = subtitleTextElements[i];
 
                 if (trackEvents && subtitleTextElement) {
                     const ticks = timeMs * 10000;
@@ -1345,6 +1393,7 @@ function tryRemoveElement(elem) {
                     }
                 }
             }
+        }
 
         /**
          * @private

src/plugins/htmlVideoPlayer/style.scss

@@ -74,6 +74,14 @@ video[controls]::-webkit-media-controls {
     display: inline-block;
 }
 
+.videoSecondarySubtitlesInner {
+    max-width: 70%;
+    background-color: rgba(0, 0, 0, 0.8);
+    margin: auto;
+    display: block;
+    margin-bottom: 0 !important;
+}
+
 @keyframes htmlvideoplayer-zoomin {
     from {
         transform: scale3d(0.2, 0.2, 0.2);