diff --git a/src/js/control-bar/text-track-controls/captions-button.js b/src/js/control-bar/text-track-controls/captions-button.js index 6c77c23bd..46f3f579c 100644 --- a/src/js/control-bar/text-track-controls/captions-button.js +++ b/src/js/control-bar/text-track-controls/captions-button.js @@ -42,33 +42,6 @@ class CaptionsButton extends TextTrackButton { return `vjs-captions-button ${super.buildWrapperCSSClass()}`; } - /** - * Update caption menu items - * - * @param {EventTarget~Event} [event] - * The `addtrack` or `removetrack` event that caused this function to be - * called. - * - * @listens TextTrackList#addtrack - * @listens TextTrackList#removetrack - */ - update(event) { - let threshold = 2; - - super.update(); - - // if native, then threshold is 1 because no settings button - if (this.player().tech_ && this.player().tech_.featuresNativeTextTracks) { - threshold = 1; - } - - if (this.items && this.items.length > threshold) { - this.show(); - } else { - this.hide(); - } - } - /** * Create caption menu items * @@ -80,6 +53,8 @@ class CaptionsButton extends TextTrackButton { if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks)) { items.push(new CaptionSettingsMenuItem(this.player_, {kind: this.kind_})); + + this.hideThreshold_ += 1; } return super.createItems(items); diff --git a/src/js/control-bar/text-track-controls/text-track-button.js b/src/js/control-bar/text-track-controls/text-track-button.js index 3b220d1e7..daf610593 100644 --- a/src/js/control-bar/text-track-controls/text-track-button.js +++ b/src/js/control-bar/text-track-controls/text-track-button.js @@ -57,6 +57,8 @@ class TextTrackButton extends TrackButton { label })); + this.hideThreshold_ += 1; + const tracks = this.player_.textTracks(); for (let i = 0; i < tracks.length; i++) { diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 87def6a96..107089b65 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -75,9 +75,9 @@ class MenuButton extends Component { this.buttonPressed_ = false; this.menuButton_.el_.setAttribute('aria-expanded', 'false'); - if (this.items && this.items.length === 0) { + if (this.items && this.items.length <= this.hideThreshold_) { this.hide(); - } else if (this.items && this.items.length > 1) { + } else { this.show(); } } @@ -91,6 +91,16 @@ class MenuButton extends Component { createMenu() { const menu = new Menu(this.player_, { menuButton: this }); + /** + * Hide the menu if the number of items is less than or equal to this threshold. This defaults + * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list + * it here because every time we run `createMenu` we need to reset the value. + * + * @protected + * @type {Number} + */ + this.hideThreshold_ = 0; + // Add a title list item to the top if (this.options_.title) { const title = Dom.createEl('li', { @@ -99,6 +109,8 @@ class MenuButton extends Component { tabIndex: -1 }); + this.hideThreshold_ += 1; + menu.children_.unshift(title); Dom.prependTo(title, menu.contentEl()); }