fix(settings): Added new event to remove items from settings; impleme…

…nted event in captions when no cues are detected

dist/openplayer.js

@@ -3830,9 +3830,21 @@ var Captions = function () {
               }, function () {
                 delete _this.trackList[i];
                 element.remove();
-                var e = events_1.addEvent('controlschanged');
+                var details = {
+                  detail: {
+                    id: element.srclang,
+                    type: 'captions'
+                  }
+                };
+                var e = events_1.addEvent('settingremoved', details);
 
                 _this.player.getElement().dispatchEvent(e);
+
+                setTimeout(function () {
+                  var ev = events_1.addEvent('controlschanged');
+
+                  _this.player.getElement().dispatchEvent(ev);
+                }, 200);
               });
             }
           }
@@ -3951,13 +3963,10 @@ var Captions = function () {
         subitems = subitems.filter(function (el) {
           return el.key !== track.language;
         });
-
-        if (_this2.trackList[i].cues) {
-          subitems.push({
-            key: track.language,
-            label: _this2.trackList[i].label
-          });
-        }
+        subitems.push({
+          key: track.language,
+          label: _this2.trackList[i].label
+        });
       };
 
       for (var i = 0, total = this.trackList.length; i < total; i++) {
@@ -4846,7 +4855,16 @@ var Settings = function () {
         });
       };
 
-      this.events.media['controlshidden'] = this.hideEvent.bind(this);
+      this.removeEvent = function (e) {
+        var _e$detail = e.detail,
+            id = _e$detail.id,
+            type = _e$detail.type;
+
+        _this.removeItem(id, type);
+      };
+
+      this.events.media.controlshidden = this.hideEvent.bind(this);
+      this.events.media.settingremoved = this.removeEvent.bind(this);
       this.events.media.play = this.hideEvent.bind(this);
       this.events.media.pause = this.hideEvent.bind(this);
 
@@ -5005,6 +5023,21 @@ var Settings = function () {
       document.addEventListener('click', this.events.global['settings.submenu']);
       this.player.getElement().addEventListener('controlshidden', this.hideEvent);
     }
+  }, {
+    key: "removeItem",
+    value: function removeItem(id, type) {
+      var minItems = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+      var target = this.player.getElement().querySelector(".om-settings__submenu-label[data-value=".concat(type, "-").concat(id, "]"));
+
+      if (target) {
+        target.remove();
+      }
+
+      if (this.player.getElement().querySelectorAll(".om-settings__submenu-label[data-value^=".concat(type, "]")).length < minItems) {
+        delete this.submenu[type];
+        this.player.getElement().querySelector(".om-settings__menu-label[data-value^=".concat(type, "]")).closest('.om-settings__menu-item').remove();
+      }
+    }
   }]);
 
   return Settings;
@@ -5672,7 +5705,7 @@ var DashMedia = function (_native_1$default) {
     }
 
     _this.promise = typeof dashjs === 'undefined' ? general_1.loadScript('https://cdn.dashjs.org/latest/dash.all.min.js') : new Promise(function (resolve) {
-      resolve();
+      return resolve();
     });
 
     _this.promise.then(createInstance.bind(_assertThisInitialized(_assertThisInitialized(_this))));
@@ -5847,7 +5880,7 @@ var HlsMedia = function (_native_1$default) {
     _this.media = mediaSource;
     _this.autoplay = autoplay;
     _this.promise = typeof Hls === 'undefined' ? general_1.loadScript('https://cdn.jsdelivr.net/npm/hls.js@latest') : new Promise(function (resolve) {
-      resolve();
+      return resolve();
     });
 
     _this.promise.then(_this._create.bind(_assertThisInitialized(_assertThisInitialized(_this))));
@@ -6199,7 +6232,7 @@ var Ads = function () {
         }
 
         _this.promise = typeof google === 'undefined' || typeof google.ima === 'undefined' ? general_1.loadScript(_this.adsOptions.url) : new Promise(function (resolve) {
-          resolve();
+          return resolve();
         });
 
         _this.promise.then(_this.load.bind(_this));
@@ -6210,7 +6243,7 @@ var Ads = function () {
       }
 
       this.promise = typeof google === 'undefined' || typeof google.ima === 'undefined' ? general_1.loadScript(this.adsOptions.url) : new Promise(function (resolve) {
-        resolve();
+        return resolve();
       });
       this.promise.then(this.load.bind(this));
     }

src/js/controls/captions.ts

@@ -154,7 +154,7 @@ class Captions implements PlayerComponent {
         this.button.innerHTML = '<span class="om-sr">Toggle Captions</span>';
 
         // Determine if tracks are valid (have valid URLs and contain cues); if so include them in the list of available tracks.
-        // Otherwise, remove the markup asscoiated with them
+        // Otherwise, remove the markup associated with them
         for (let i = 0, tracks = this.player.getElement().querySelectorAll('track'), total = tracks.length; i < total; i++) {
             const element = (tracks[i] as HTMLTrackElement);
             if (element.kind === 'subtitles') {
@@ -174,10 +174,21 @@ class Captions implements PlayerComponent {
                         }, () => {
                             delete this.trackList[i];
                             element.remove();
-                            // This will allow the recreation of Settings elements and the caption button
-                            // if none of the captions are valid
-                            const e = addEvent('controlschanged');
+
+                            // Remove element from Settings menu
+                            const details = {
+                                detail: {
+                                    id: element.srclang,
+                                    type: 'captions',
+                                },
+                            };
+                            const e = addEvent('settingremoved', details);
                             this.player.getElement().dispatchEvent(e);
+
+                            setTimeout(() => {
+                                const ev = addEvent('controlschanged');
+                                this.player.getElement().dispatchEvent(ev);
+                            }, 200);
                         });
                     }
                 }
@@ -284,9 +295,7 @@ class Captions implements PlayerComponent {
             const track = this.trackList[i];
             // Override language item if duplicated when passing list of settings subitems
             subitems = subitems.filter(el => el.key !== track.language);
-            if (this.trackList[i].cues) {
-                subitems.push({key: track.language, label: this.trackList[i].label});
-            }
+            subitems.push({key: track.language, label: this.trackList[i].label});
         }
 
         // Avoid implementing submenu for captions if only 2 options were available

src/js/controls/settings.ts

@@ -95,6 +95,8 @@ class Settings implements PlayerComponent {
      */
     private hideEvent: () => void;
 
+    private removeEvent: (e: CustomEvent) => void;
+
     /**
      * Create an instance of Settings.
      *
@@ -143,7 +145,13 @@ class Settings implements PlayerComponent {
             });
         };
 
-        this.events.media['controlshidden'] = this.hideEvent.bind(this);
+        this.removeEvent = (e: CustomEvent) => {
+            const { id, type } = e.detail;
+            this.removeItem(id, type);
+        };
+
+        this.events.media.controlshidden = this.hideEvent.bind(this);
+        this.events.media.settingremoved = this.removeEvent.bind(this);
         this.events.media.play = this.hideEvent.bind(this);
         this.events.media.pause = this.hideEvent.bind(this);
 
@@ -310,6 +318,27 @@ class Settings implements PlayerComponent {
         document.addEventListener('click', this.events.global['settings.submenu']);
         this.player.getElement().addEventListener('controlshidden', this.hideEvent);
     }
+
+    /**
+     *
+     *
+     * @param {(string|number)} id
+     * @param {string} type
+     * @param {number} [minItems=2]
+     * @memberof Settings
+     */
+    public removeItem(id: string|number, type: string, minItems: number = 2) {
+        const target = this.player.getElement().querySelector(`.om-settings__submenu-label[data-value=${type}-${id}]`);
+        if (target) {
+            target.remove();
+        }
+
+        if (this.player.getElement().querySelectorAll(`.om-settings__submenu-label[data-value^=${type}]`).length < minItems) {
+            delete this.submenu[type];
+            this.player.getElement().querySelector(`.om-settings__menu-label[data-value^=${type}]`)
+                .closest('.om-settings__menu-item').remove();
+        }
+    }
 }
 
 export default Settings;

src/js/media/ads.ts

@@ -279,9 +279,7 @@ class Ads {
 
                 this.promise = (typeof google === 'undefined' || typeof google.ima === 'undefined') ?
                     loadScript(this.adsOptions.url) :
-                    new Promise(resolve => {
-                        resolve();
-                    });
+                    new Promise(resolve => resolve());
 
                 this.promise.then(this.load.bind(this));
             });
@@ -292,9 +290,7 @@ class Ads {
 
             this.promise = (typeof google === 'undefined' || typeof google.ima === 'undefined') ?
                 loadScript(this.adsOptions.url) :
-                new Promise(resolve => {
-                    resolve();
-                });
+                new Promise(resolve => resolve());
 
             this.promise.then(this.load.bind(this));
         }

src/js/media/dash.ts

@@ -56,9 +56,7 @@ class DashMedia extends Native {
         this.promise = (typeof dashjs === 'undefined') ?
             // Ever-green script
             loadScript('https://cdn.dashjs.org/latest/dash.all.min.js') :
-            new Promise(resolve => {
-                resolve();
-            });
+            new Promise(resolve => resolve());
 
         this.promise.then(createInstance.bind(this));
         return this;

src/js/media/hls.ts

@@ -84,9 +84,7 @@ class HlsMedia extends Native {
         this.promise = (typeof Hls === 'undefined') ?
             // Ever-green script
             loadScript('https://cdn.jsdelivr.net/npm/hls.js@latest') :
-            new Promise(resolve => {
-                resolve();
-            });
+            new Promise(resolve => resolve());
 
         this.promise.then(this._create.bind(this));
         return this;

test/index.js

@@ -129,6 +129,7 @@ describe('OpenPlayer.js', () => {
         });
 
         setTimeout(() => {
+            expect(player.getContainer().querySelector('.om-controls__captions').getAttribute('data-active-captions')).to.equal('br_PT');
             expect(player.getContainer().querySelector('.om-settings__menu-label[data-value="captions-br_PT"]')).to.not.equal(null);
             done();
         }, 1000);