Fix 347

Hide volume slider and mute toggle when the current tech doesn't support adjusting video volume. Added controls specific test cases. Volume-related controls retest whether to display themselves whenever `loadstart` fires.

src/js/controls.js

@@ -786,6 +786,18 @@ vjs.SeekHandle.prototype.createEl = function(){
  */
 vjs.VolumeControl = function(player, options){
   goog.base(this, player, options);
+
+  // hide volume controls when they're not supported by the current tech
+  if (player.tech && player.tech.features.volumeControl === false) {
+    this.hide();
+  }
+  player.on('loadstart', vjs.bind(this, function(){
+    if (player.tech.features.volumeControl === false) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }));
 };
 goog.inherits(vjs.VolumeControl, vjs.Component);
 
@@ -903,6 +915,18 @@ vjs.MuteToggle = function(player, options){
   goog.base(this, player, options);
 
   player.on('volumechange', vjs.bind(this, this.update));
+
+  // hide mute toggle if the current tech doesn't support volume control
+  if (player.tech && player.tech.features.volumeControl === false) {
+    this.hide();
+  }
+  player.on('loadstart', vjs.bind(this, function(){
+    if (player.tech.features.volumeControl === false) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }));
 };
 goog.inherits(vjs.MuteToggle, vjs.Button);
 

src/js/media.html5.js

@@ -204,6 +204,14 @@ vjs.Html5.canPlaySource = function(srcObj){
   // Check Media Type
 };
 
+vjs.Html5.canControlVolume = function(){
+  var
+    volume =  vjs.TEST_VID.volume,
+    volumeOptions = {};
+  vjs.TEST_VID.volume = (volume / 2) + 0.1;
+  return volume !== vjs.TEST_VID.volume;
+};
+
 // List of all HTML5 events (various uses).
 vjs.Html5.Events = 'loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange'.split(',');
 
@@ -221,8 +229,10 @@ vjs.Html5.prototype.features = {
     : false,
 
   // In iOS, if you move a video element in the DOM, it breaks video playback.
-  movingMediaElementInDOM: !vjs.IS_IOS
+  movingMediaElementInDOM: !vjs.IS_IOS,
 
+  // volume cannot be changed from 1 on iOS
+  volumeControl: vjs.Html5.canControlVolume()
 };
 
 // Android

test/index.html

@@ -26,6 +26,7 @@
         'test/unit/player.js',
         'test/unit/core.js',
         'test/unit/media.html5.js',
+        'test/unit/controls.js',
         'test/unit/plugins.js'
       ];
       var compiledTests = "build/files/test.minified.video.js";

test/unit/component.js

@@ -184,4 +184,4 @@ test('should change the width and height of a component', function(){
 
   comp.width(321);
   ok(comp.width() === 321, 'integer values working');
-});
+});

test/unit/controls.js

@@ -0,0 +1,80 @@
+module('Controls');
+
+
+
+test('should hide volume control if it\'s not supported', function() {
+  var
+    noop = function(){},
+    player = {
+      id: noop,
+      on: noop,
+      ready: noop,
+      tech: {
+        features: {
+          volumeControl: false
+        }
+      }
+    },
+    volumeControl = new vjs.VolumeControl(player),
+    muteToggle = new vjs.MuteToggle(player);
+
+  equal(volumeControl.el().style.display, 'none', 'volumeControl is not hidden');
+  equal(muteToggle.el().style.display, 'none', 'muteToggle is not hidden');
+});
+
+test('should test and toggle volume control on `loadstart`', function(){
+  var
+    noop = function(){},
+    listeners = [],
+    player = {
+      id: noop,
+      on: function(event, callback){
+        listeners.push(callback);
+      },
+      ready: noop,
+      volume: function(){
+        return 1;
+      },
+      muted: function(){
+        return false;
+      },
+      tech: {
+        features: {
+          volumeControl: true
+        }
+      }
+    },
+    volumeControl = new vjs.VolumeControl(player),
+    muteToggle = new vjs.MuteToggle(player);
+
+  equal(volumeControl.el().style.display,
+        '',
+        'volumeControl is hidden initially');
+  equal(muteToggle.el().style.display,
+        '',
+        'muteToggle is hidden initially');
+
+  player.tech.features.volumeControl = false;
+  listeners.forEach(function(listener) {
+    listener();
+  });
+
+  equal(volumeControl.el().style.display,
+        'none',
+        'volumeControl does not hide itself');
+  equal(muteToggle.el().style.display,
+        'none',
+        'muteToggle does not hide itself');
+
+  player.tech.features.volumeControl = true;
+  listeners.forEach(function(listener) {
+    listener();
+  });
+
+  equal(volumeControl.el().style.display,
+        'block',
+        'volumeControl does not show itself');
+  equal(muteToggle.el().style.display,
+        'block',
+        'muteToggle does not show itself');
+});

test/unit/media.html5.js

@@ -1 +1,14 @@
 module('HTML5');
+
+test('should detect whether the volume can be changed', function(){
+  var
+    testVid = vjs.TEST_VID,
+    ConstVolumeVideo = function(){
+      this.volume = 1;
+      this.__defineSetter__('volume', function(){});
+    };
+  vjs.TEST_VID = new ConstVolumeVideo();
+
+  ok(!vjs.Html5.canControlVolume());
+  vjs.TEST_VID = testVid;
+});

test/unit/player.js

@@ -22,6 +22,15 @@ var PlayerTest = {
   }
 };
 
+// Fake the tech so that players can be constructed during tests without HTML
+// or Flash (e.g. when running with PhantomJS)
+if (/phantom/i.test(window.navigator.userAgent)) {
+  vjs.Player.prototype['tech'] = {
+    dispose: function(){},
+    features: {}
+  };
+}
+
 // Compiler doesn't like using 'this' in setup/teardown.
 // module("Player", {
 //   /**