fix(player): Added missing workflows to show/hide captions correctly …

…in multiple scenarios; set default value to force native HLS to false; added new GitHub action to process coveralls command
openplayerjs · May 12, 2024 · 7f97fd5 · 7f97fd5
1 parent 4420189
commit 7f97fd5
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 718 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.github/workflows/coveralls.yml b/.github/workflows/coveralls.yml
@@ -0,0 +1,23 @@
+on: ['push', 'pull_request']
+
+name: Test Coveralls
+
+jobs:
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v1
+
+            - name: Use Node.js 20.x
+              uses: actions/setup-node@v4.0.2
+              with:
+                  node-version: 20.x
+
+            - name: npm install, make test-coverage
+              run: |
+                  npm install
+                  npm test
+            - name: Coveralls
+              uses: coverallsapp/github-action@v2.3.0
+              with:
+                  allow-empty: true
diff --git a/dist/esm/controls/captions.js b/dist/esm/controls/captions.js
@@ -34,6 +34,8 @@ class Captions {
         __classPrivateFieldSet(this, _Captions_controlLayer, layer, "f");
         this._formatMenuItems = this._formatMenuItems.bind(this);
         this._setDefaultTrack = this._setDefaultTrack.bind(this);
+        this._showCaptions = this._showCaptions.bind(this);
+        this._hideCaptions = this._hideCaptions.bind(this);
     }
     create() {
         var _a;
@@ -111,10 +113,12 @@ class Captions {
                 if (button.classList.contains('op-controls__captions--on')) {
                     button.classList.remove('op-controls__captions--on');
                     button.setAttribute('data-active-captions', 'off');
+                    this._hideCaptions();
                 }
                 else {
                     button.classList.add('op-controls__captions--on');
-                    button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || '');
+                    button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || 'off');
+                    this._showCaptions();
                 }
                 for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
                     track.mode = button.getAttribute('data-active-captions') === track.language ? 'showing' : 'hidden';
@@ -150,22 +154,15 @@ class Captions {
             const option = e.target;
             if (option.closest(`#${__classPrivateFieldGet(this, _Captions_player, "f").id}`) && option.classList.contains('op-subtitles__option')) {
                 const language = option.getAttribute('data-value').replace('captions-', '');
+                this._hideCaptions();
+                if (language === 'off') {
+                    __classPrivateFieldSet(this, _Captions_currentTrack, undefined, "f");
+                }
                 for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
                     track.mode = track.language === language ? 'showing' : 'hidden';
                     if (track.language === language) {
                         __classPrivateFieldSet(this, _Captions_currentTrack, track, "f");
-                        while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
-                            __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
-                        }
-                        for (const cue of Array.from(__classPrivateFieldGet(this, _Captions_currentTrack, "f").activeCues || [])) {
-                            const content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
-                            if (content) {
-                                __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
-                                const caption = document.createElement('span');
-                                caption.innerHTML = content;
-                                __classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption);
-                            }
-                        }
+                        this._showCaptions();
                     }
                 }
                 if (detachMenus) {
@@ -193,33 +190,13 @@ class Captions {
         };
         __classPrivateFieldGet(this, _Captions_events, "f").global.cuechange = (e) => {
             var _a;
-            while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
-                __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
-            }
+            this._hideCaptions();
             const t = e.target;
-            if (t.mode !== 'showing') {
+            if (t.mode !== 'showing' || __classPrivateFieldGet(this, _Captions_button, "f").getAttribute('data-active-captions') === 'off') {
                 return;
             }
             if (t.activeCues && ((_a = t.activeCues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                for (const cue of Array.from(t.activeCues)) {
-                    const content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
-                    if (content) {
-                        __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
-                        const caption = document.createElement('span');
-                        caption.innerHTML = content;
-                        __classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption);
-                    }
-                    else {
-                        while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
-                            __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
-                        }
-                    }
-                }
-            }
-            else {
-                while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
-                    __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
-                }
+                this._showCaptions();
             }
         };
         if (detachMenus) {
@@ -297,6 +274,7 @@ class Captions {
         __classPrivateFieldSet(this, _Captions_default, track.language, "f");
         __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', __classPrivateFieldGet(this, _Captions_default, "f"));
         __classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-controls__captions--on');
+        __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
         __classPrivateFieldSet(this, _Captions_currentTrack, track, "f");
         const options = document.querySelectorAll('.op-settings__submenu-item') || [];
         for (const option of Array.from(options)) {
@@ -305,6 +283,27 @@ class Captions {
         (_b = (_a = document
             .querySelector(`.op-subtitles__option[data-value="captions-${track.language}"]`)) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-checked', 'true');
     }
+    _showCaptions() {
+        var _a;
+        for (const cue of Array.from(((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.activeCues) || [])) {
+            const content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
+            if (content && __classPrivateFieldGet(this, _Captions_captions, "f")) {
+                const caption = document.createElement('span');
+                caption.innerHTML = content;
+                __classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption);
+                __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
+            }
+            else {
+                this._hideCaptions();
+            }
+        }
+    }
+    _hideCaptions() {
+        var _a;
+        while ((_a = __classPrivateFieldGet(this, _Captions_captions, "f")) === null || _a === void 0 ? void 0 : _a.lastChild) {
+            __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
+        }
+    }
 }
 _Captions_player = new WeakMap(), _Captions_button = new WeakMap(), _Captions_captions = new WeakMap(), _Captions_menu = new WeakMap(), _Captions_events = new WeakMap(), _Captions_mediaTrackList = new WeakMap(), _Captions_hasTracks = new WeakMap(), _Captions_currentTrack = new WeakMap(), _Captions_default = new WeakMap(), _Captions_controlPosition = new WeakMap(), _Captions_controlLayer = new WeakMap();
 export default Captions;
diff --git a/dist/esm/player.js b/dist/esm/player.js
@@ -56,7 +56,7 @@ class Player {
             },
             defaultLevel: undefined,
             detachMenus: false,
-            forceNative: true,
+            forceNative: false,
             height: 0,
             hidePlayBtnTimer: 350,
             labels: {

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -792,6 +792,8 @@ var Captions = function () {
     __classPrivateFieldSet(this, _Captions_controlLayer, layer, "f");
     this._formatMenuItems = this._formatMenuItems.bind(this);
     this._setDefaultTrack = this._setDefaultTrack.bind(this);
+    this._showCaptions = this._showCaptions.bind(this);
+    this._hideCaptions = this._hideCaptions.bind(this);
   }
   _createClass(Captions, [{
     key: "create",
@@ -877,9 +879,11 @@ var Captions = function () {
           if (button.classList.contains('op-controls__captions--on')) {
             button.classList.remove('op-controls__captions--on');
             button.setAttribute('data-active-captions', 'off');
+            _this._hideCaptions();
           } else {
             button.classList.add('op-controls__captions--on');
-            button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(_this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || '');
+            button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(_this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || 'off');
+            _this._showCaptions();
           }
           var _iterator2 = _createForOfIteratorHelper(__classPrivateFieldGet(_this, _Captions_mediaTrackList, "f")),
             _step2;
@@ -924,6 +928,10 @@ var Captions = function () {
         var option = e.target;
         if (option.closest("#".concat(__classPrivateFieldGet(_this, _Captions_player, "f").id)) && option.classList.contains('op-subtitles__option')) {
           var language = option.getAttribute('data-value').replace('captions-', '');
+          _this._hideCaptions();
+          if (language === 'off') {
+            __classPrivateFieldSet(_this, _Captions_currentTrack, undefined, "f");
+          }
           var _iterator3 = _createForOfIteratorHelper(__classPrivateFieldGet(_this, _Captions_mediaTrackList, "f")),
             _step3;
           try {
@@ -932,19 +940,7 @@ var Captions = function () {
               _track2.mode = _track2.language === language ? 'showing' : 'hidden';
               if (_track2.language === language) {
                 __classPrivateFieldSet(_this, _Captions_currentTrack, _track2, "f");
-                while (__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild) {
-                  __classPrivateFieldGet(_this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild);
-                }
-                for (var _i3 = 0, _Array$from3 = Array.from(__classPrivateFieldGet(_this, _Captions_currentTrack, "f").activeCues || []); _i3 < _Array$from3.length; _i3++) {
-                  var cue = _Array$from3[_i3];
-                  var content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
-                  if (content) {
-                    __classPrivateFieldGet(_this, _Captions_captions, "f").classList.add('op-captions--on');
-                    var _caption = document.createElement('span');
-                    _caption.innerHTML = content;
-                    __classPrivateFieldGet(_this, _Captions_captions, "f").prepend(_caption);
-                  }
-                }
+                _this._showCaptions();
               }
             }
           } catch (err) {
@@ -976,32 +972,13 @@ var Captions = function () {
       };
       __classPrivateFieldGet(this, _Captions_events, "f").global.cuechange = function (e) {
         var _a;
-        while (__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild) {
-          __classPrivateFieldGet(_this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild);
-        }
+        _this._hideCaptions();
         var t = e.target;
-        if (t.mode !== 'showing') {
+        if (t.mode !== 'showing' || __classPrivateFieldGet(_this, _Captions_button, "f").getAttribute('data-active-captions') === 'off') {
           return;
         }
         if (t.activeCues && ((_a = t.activeCues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-          for (var _i4 = 0, _Array$from4 = Array.from(t.activeCues); _i4 < _Array$from4.length; _i4++) {
-            var cue = _Array$from4[_i4];
-            var content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
-            if (content) {
-              __classPrivateFieldGet(_this, _Captions_captions, "f").classList.add('op-captions--on');
-              var caption = document.createElement('span');
-              caption.innerHTML = content;
-              __classPrivateFieldGet(_this, _Captions_captions, "f").prepend(caption);
-            } else {
-              while (__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild) {
-                __classPrivateFieldGet(_this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild);
-              }
-            }
-          }
-        } else {
-          while (__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild) {
-            __classPrivateFieldGet(_this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(_this, _Captions_captions, "f").lastChild);
-          }
+          _this._showCaptions();
         }
       };
       if (detachMenus) {
@@ -1128,14 +1105,40 @@ var Captions = function () {
       __classPrivateFieldSet(this, _Captions_default, track.language, "f");
       __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', __classPrivateFieldGet(this, _Captions_default, "f"));
       __classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-controls__captions--on');
+      __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
       __classPrivateFieldSet(this, _Captions_currentTrack, track, "f");
       var options = document.querySelectorAll('.op-settings__submenu-item') || [];
-      for (var _i5 = 0, _Array$from5 = Array.from(options); _i5 < _Array$from5.length; _i5++) {
-        var option = _Array$from5[_i5];
+      for (var _i3 = 0, _Array$from3 = Array.from(options); _i3 < _Array$from3.length; _i3++) {
+        var option = _Array$from3[_i3];
         option.setAttribute('aria-checked', 'false');
       }
       (_b = (_a = document.querySelector(".op-subtitles__option[data-value=\"captions-".concat(track.language, "\"]"))) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-checked', 'true');
     }
+  }, {
+    key: "_showCaptions",
+    value: function _showCaptions() {
+      var _a;
+      for (var _i4 = 0, _Array$from4 = Array.from(((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.activeCues) || []); _i4 < _Array$from4.length; _i4++) {
+        var cue = _Array$from4[_i4];
+        var content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
+        if (content && __classPrivateFieldGet(this, _Captions_captions, "f")) {
+          var caption = document.createElement('span');
+          caption.innerHTML = content;
+          __classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption);
+          __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
+        } else {
+          this._hideCaptions();
+        }
+      }
+    }
+  }, {
+    key: "_hideCaptions",
+    value: function _hideCaptions() {
+      var _a;
+      while ((_a = __classPrivateFieldGet(this, _Captions_captions, "f")) === null || _a === void 0 ? void 0 : _a.lastChild) {
+        __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
+      }
+    }
   }]);
   return Captions;
 }();
@@ -5967,7 +5970,7 @@ var Player = function () {
       },
       defaultLevel: undefined,
       detachMenus: false,
-      forceNative: true,
+      forceNative: false,
       height: 0,
       hidePlayBtnTimer: 350,
       labels: {

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/dist/openplayer.min.js.map b/dist/openplayer.min.js.map