From 2979272d90e6083748cc0ebdfe680119a310cdf1 Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Thu, 28 May 2015 19:43:08 -0700 Subject: [PATCH] refactored the buttons to use buildCSSClass instead of className removing unnecessary localization fixed the menu button css Simplified controlText() and removed unnecessary override in MenuButton --- src/css/components/_big-play.scss | 2 +- src/css/components/_menu.scss | 6 +++--- src/js/button.js | 7 +++---- src/js/control-bar/fullscreen-toggle.js | 4 ++-- src/js/control-bar/play-toggle.js | 4 ++-- .../playback-rate-menu-button.js | 5 ++++- .../text-track-controls/captions-button.js | 5 ++++- .../text-track-controls/chapters-button.js | 5 ++++- .../text-track-controls/subtitles-button.js | 5 ++++- src/js/control-bar/volume-menu-button.js | 2 +- src/js/menu/menu-button.js | 17 +---------------- 11 files changed, 29 insertions(+), 33 deletions(-) diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss index 3a589a6dd3..69ece87e35 100644 --- a/src/css/components/_big-play.scss +++ b/src/css/components/_big-play.scss @@ -2,7 +2,7 @@ font-size: 3em; line-height: 1.5em; height: 1.5em; - width: 3em; // Firefox bug + width: 3em; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding. display: block; z-index: 2; position: absolute; diff --git a/src/css/components/_menu.scss b/src/css/components/_menu.scss index 273ab90fbc..de79a71d16 100644 --- a/src/css/components/_menu.scss +++ b/src/css/components/_menu.scss @@ -28,12 +28,12 @@ overflow: auto; } -.video-js .vjs-menu-button:hover .vjs-control-content .vjs-menu, -.video-js .vjs-control-content .vjs-menu.vjs-lock-showing { +.video-js .vjs-menu-button:hover .vjs-menu, +.video-js .vjs-menu.vjs-lock-showing { display: block; } /* prevent menus from opening while scrubbing (FF, IE) */ -.video-js.vjs-scrubbing .vjs-menu-button:hover .vjs-control-content .vjs-menu { +.video-js.vjs-scrubbing .vjs-menu-button:hover .vjs-menu { display: none; } .video-js .vjs-menu-button ul li { diff --git a/src/js/button.js b/src/js/button.js index 765c80c8f0..74c2eb9e5c 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -44,16 +44,15 @@ class Button extends Component { el.appendChild(this.controlTextEl_); - this.controlText(); + this.controlText(this.controlText_); return el; } controlText(text) { - if (!text && (this.controlTextEl_ && this.controlTextEl_.innerHTML)) return this.controlText_ || 'Need Text'; - - if (text) this.controlText_ = text; + if (!text) return this.controlText_ || 'Need Text'; + this.controlText_ = text; this.controlTextEl_.innerHTML = this.localize(this.controlText_); return this; diff --git a/src/js/control-bar/fullscreen-toggle.js b/src/js/control-bar/fullscreen-toggle.js index bc80fff181..da287b1e69 100644 --- a/src/js/control-bar/fullscreen-toggle.js +++ b/src/js/control-bar/fullscreen-toggle.js @@ -17,10 +17,10 @@ class FullscreenToggle extends Button { handleClick() { if (!this.player_.isFullscreen()) { this.player_.requestFullscreen(); - this.controlText(this.localize('Non-Fullscreen')); + this.controlText('Non-Fullscreen'); } else { this.player_.exitFullscreen(); - this.controlText(this.localize('Fullscreen')); + this.controlText('Fullscreen'); } } diff --git a/src/js/control-bar/play-toggle.js b/src/js/control-bar/play-toggle.js index 053045ab16..ccc8480c11 100644 --- a/src/js/control-bar/play-toggle.js +++ b/src/js/control-bar/play-toggle.js @@ -34,14 +34,14 @@ class PlayToggle extends Button { handlePlay() { this.removeClass('vjs-paused'); this.addClass('vjs-playing'); - this.controlText(this.localize('Pause')); // change the button text to "Pause" + this.controlText('Pause'); // change the button text to "Pause" } // handlePause - Add the vjs-paused class to the element so it can change appearance handlePause() { this.removeClass('vjs-playing'); this.addClass('vjs-paused'); - this.controlText(this.localize('Play')); // change the button text to "Play" + this.controlText('Play'); // change the button text to "Play" } } diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js index c249561396..22ff038d3c 100644 --- a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js +++ b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js @@ -36,6 +36,10 @@ class PlaybackRateMenuButton extends MenuButton { return el; } + buildCSSClass() { + return `vjs-playback-rate ${super.buildCSSClass()}`; + } + // Menu creation createMenu() { let menu = new Menu(this.player()); @@ -102,7 +106,6 @@ class PlaybackRateMenuButton extends MenuButton { } -PlaybackRateMenuButton.prototype.className = 'vjs-playback-rate'; PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate'; Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton); 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 4769e49ef9..c016117b9e 100644 --- a/src/js/control-bar/text-track-controls/captions-button.js +++ b/src/js/control-bar/text-track-controls/captions-button.js @@ -14,6 +14,10 @@ class CaptionsButton extends TextTrackButton { this.el_.setAttribute('aria-label','Captions Menu'); } + buildCSSClass() { + return `vjs-captions-button ${super.buildCSSClass()}`; + } + update() { let threshold = 2; super.update(); @@ -44,7 +48,6 @@ class CaptionsButton extends TextTrackButton { CaptionsButton.prototype.kind_ = 'captions'; CaptionsButton.prototype.controlText_ = 'Captions'; -CaptionsButton.prototype.className = 'vjs-captions-button'; Component.registerComponent('CaptionsButton', CaptionsButton); export default CaptionsButton; diff --git a/src/js/control-bar/text-track-controls/chapters-button.js b/src/js/control-bar/text-track-controls/chapters-button.js index 9165e76063..cf9ac2fae0 100644 --- a/src/js/control-bar/text-track-controls/chapters-button.js +++ b/src/js/control-bar/text-track-controls/chapters-button.js @@ -22,6 +22,10 @@ class ChaptersButton extends TextTrackButton { this.el_.setAttribute('aria-label','Chapters Menu'); } + buildCSSClass() { + return `vjs-chapters-button ${super.buildCSSClass()}`; + } + // Create a menu item for each text track createItems() { let items = []; @@ -106,7 +110,6 @@ class ChaptersButton extends TextTrackButton { ChaptersButton.prototype.kind_ = 'chapters'; ChaptersButton.prototype.controlText_ = 'Chapters'; -ChaptersButton.prototype.className = 'vjs-chapters-button'; Component.registerComponent('ChaptersButton', ChaptersButton); export default ChaptersButton; diff --git a/src/js/control-bar/text-track-controls/subtitles-button.js b/src/js/control-bar/text-track-controls/subtitles-button.js index b86ac9bfc0..285360cd1c 100644 --- a/src/js/control-bar/text-track-controls/subtitles-button.js +++ b/src/js/control-bar/text-track-controls/subtitles-button.js @@ -13,11 +13,14 @@ class SubtitlesButton extends TextTrackButton { this.el_.setAttribute('aria-label','Subtitles Menu'); } + buildCSSClass() { + return `vjs-subtitles-button ${super.buildCSSClass()}`; + } + } SubtitlesButton.prototype.kind_ = 'subtitles'; SubtitlesButton.prototype.controlText_ = 'Subtitles'; -SubtitlesButton.prototype.className = 'vjs-subtitles-button'; Component.registerComponent('SubtitlesButton', SubtitlesButton); export default SubtitlesButton; diff --git a/src/js/control-bar/volume-menu-button.js b/src/js/control-bar/volume-menu-button.js index feeb430042..a19c2cabf6 100644 --- a/src/js/control-bar/volume-menu-button.js +++ b/src/js/control-bar/volume-menu-button.js @@ -64,7 +64,7 @@ class VolumeMenuButton extends MenuButton { } VolumeMenuButton.prototype.volumeUpdate = MuteToggle.prototype.update; -VolumeMenuButton.prototype.contentText_ = 'Mute'; +VolumeMenuButton.prototype.controlText_ = 'Mute'; Component.registerComponent('VolumeMenuButton', VolumeMenuButton); export default VolumeMenuButton; diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index f8fc5caa5f..f19d999641 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -76,12 +76,6 @@ class MenuButton extends Button { */ createItems(){} - // createEl() { - // return super.createEl('div', { - // className: this.buildCSSClass(), - // innerHTML: `${this.localize(this.buttonText())}` - // }); - // } createEl() { return super.createEl('div', { className: this.buildCSSClass() @@ -90,16 +84,7 @@ class MenuButton extends Button { /** @inheritDoc */ buildCSSClass() { - return `${this.className} vjs-menu-button ${super.buildCSSClass()}`; - } - - controlText(text) { - if (!text) return super.controlText(); - - this.controlText_ = text; - this.el().children[0].children[0].innerHTML = this.controlText_; - - return this; + return `vjs-menu-button ${super.buildCSSClass()}`; } // Focus - Add keyboard functionality to element