Fix bug with vjs 4.9. Fixes #16.

dominic-p · Oct 21, 2014 · c6876a4 · c6876a4
1 parent 0fcd2db
commit c6876a4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/button-styles.css b/button-styles.css
@@ -21,4 +21,11 @@ ul li.vjs-menu-title.vjs-res-menu-title:hover {
 	-moz-box-shadow: none;
 	-webkit-box-shadow: none;
 	box-shadow: none;
+}
+
+/* Needed to keep text visible in video.js 4.9 */ 
+.vjs-res-button .vjs-control-text {
+	width: auto;
+	height: auto;
+	clip: auto;
 }
diff --git a/video-quality-selector.js b/video-quality-selector.js
@@ -117,11 +117,17 @@
 
 			// Call the parent constructor
 			_V_.MenuButton.call( this, player, options );
+
+			// Set the button text based on the option provided
+			this.el().firstChild.firstChild.innerHTML = options.buttonText;
 		}
 	});
 
+	// Set class for resolution selector button
+	_V_.ResolutionSelector.prototype.className = 'vjs-res-button';
+
 	// Create a menu item for each available resolution
-	_V_.ResolutionSelector.prototype.createItems = function() {		
+	_V_.ResolutionSelector.prototype.createItems = function() {
 
 		var player = this.player(),
 			items = [],
@@ -338,7 +344,7 @@
 
 					button_node_count--;
 
-					if ( 'vjs-current-res' == button_nodes[button_node_count].className ) {
+					if ( 'vjs-control-text' == button_nodes[button_node_count].className ) {
 
 						button_nodes[button_node_count].innerHTML = methods.res_label( target_resolution );
 						break;
@@ -361,16 +367,7 @@
 
 		// Add the resolution selector button
 		resolutionSelector = new _V_.ResolutionSelector( player, {
-
-			el : _V_.Component.prototype.createEl( null, {
-
-				className	: 'vjs-res-button vjs-menu-button vjs-control',
-				innerHTML	: '<div class="vjs-control-content"><span class="vjs-current-res">' + ( current_res || 'Quality' ) + '</span></div>',
-				role		: 'button',
-				'aria-live'	: 'polite', // let the screen reader user know that the text of the button may change
-				tabIndex	: 0
-
-			}),
+			buttonText		: ( current_res || 'Quality' ),
 			available_res	: available_res
 		});