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
videojs · May 29, 2015 · 2979272 · 2979272
1 parent bcc5d4e
commit 2979272
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -76,12 +76,6 @@ class MenuButton extends Button {
    */
   createItems(){}
 
-  // createEl() {
-  //   return super.createEl('div', {
-  //     className: this.buildCSSClass(),
-  //     innerHTML: `<span class="vjs-control-text">${this.localize(this.buttonText())}</span>`
-  //   });
-  // }
   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