fix(captions): Added workflow to verify that tracks match the track…

… tag(s) (if any) to avoid extra TextTracks to be included
openplayerjs · Apr 30, 2019 · f424dbd · f424dbd
1 parent 06281c7
commit f424dbd
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -4538,7 +4538,25 @@ var Captions = function () {
     this.player = player;
     this.labels = player.getOptions().labels;
     this.detachMenu = player.getOptions().detachMenus;
-    this.trackList = this.player.getElement().textTracks;
+    var trackList = this.player.getElement().textTracks;
+    var tracks = [];
+
+    for (var i = 0, total = trackList.length; i < total; i++) {
+      var selector = "track[kind=\"subtitles\"][srclang=\"".concat(trackList[i].language, "\"][label=\"").concat(trackList[i].label, "\"]");
+      var tag = this.player.getElement().querySelector(selector);
+
+      if (tag) {
+        tracks.push(trackList[i]);
+      }
+    }
+
+    if (!tracks.length) {
+      for (var _i = 0, _total = trackList.length; _i < _total; _i++) {
+        tracks.push(trackList[_i]);
+      }
+    }
+
+    this.trackList = tracks;
     this.hasTracks = !!this.trackList.length;
     return this;
   }
@@ -4562,8 +4580,8 @@ var Captions = function () {
       this.button.setAttribute('data-active-captions', 'off');
       this.button.innerHTML = "<span class=\"op-sr\">".concat(this.labels.toggleCaptions, "</span>");
 
-      var _loop = function _loop(i, tracks, total) {
-        var element = tracks[i];
+      var _loop = function _loop(i, total, _tracks) {
+        var element = _tracks[i];
 
         if (element.kind === 'subtitles') {
           if (element.default) {
@@ -4608,8 +4626,8 @@ var Captions = function () {
         }
       };
 
-      for (var i = 0, tracks = this.player.getElement().querySelectorAll('track'), total = tracks.length; i < total; i++) {
-        _loop(i, tracks, total);
+      for (var i = 0, _tracks = this.player.getElement().querySelectorAll('track'), total = _tracks.length; i < total; i++) {
+        _loop(i, total, _tracks);
       }
 
       this.captions = document.createElement('div');

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/controls/captions.ts b/src/js/controls/captions.ts
@@ -85,10 +85,10 @@ class Captions implements PlayerComponent {
      * List of tracks found in current media.
      *
      * @private
-     * @type TextTrackList
+     * @type TextTrack[]
      * @memberof Captions
      */
-    private trackList: TextTrackList;
+    private trackList: TextTrack[];
 
     /**
      * List of remote/local track sources in case no cues are detected natively.
@@ -157,7 +157,24 @@ class Captions implements PlayerComponent {
         this.player = player;
         this.labels = player.getOptions().labels;
         this.detachMenu = player.getOptions().detachMenus;
-        this.trackList = this.player.getElement().textTracks;
+        const trackList = this.player.getElement().textTracks;
+
+        // Check that `trackList` matches with track tags (if any)
+        const tracks = [];
+        for (let i = 0, total = trackList.length; i < total; i++) {
+            const selector = `track[kind="subtitles"][srclang="${trackList[i].language}"][label="${trackList[i].label}"]`;
+            const tag = this.player.getElement().querySelector(selector);
+            if (tag) {
+                tracks.push(trackList[i]);
+            }
+        }
+
+        if (!tracks.length) {
+            for (let i = 0, total = trackList.length; i < total; i++) {
+                tracks.push(trackList[i]);
+            }
+        }
+        this.trackList = tracks;
         this.hasTracks = !!this.trackList.length;
         return this;
     }