AudioPlayer: Update volume controls.

ui/file_manager/audio_player/js/audio_player.js

Index: ui/file_manager/audio_player/js/audio_player.js
diff --git a/ui/file_manager/audio_player/js/audio_player.js b/ui/file_manager/audio_player/js/audio_player.js
index eb9459127c86751112d17e8f511045579e0c4aaa..fea6cd4b780226edc7e5f8c227b7265ce2b91d09 100644
--- a/ui/file_manager/audio_player/js/audio_player.js
+++ b/ui/file_manager/audio_player/js/audio_player.js
@@ -24,10 +24,14 @@ function AudioPlayer(container) {
   Object.observe(this.model_, function(changes) {
     for (var i = 0; i < changes.length; i++) {
       var change = changes[i];
-      if (change.name == 'expanded' &&
-          (change.type == 'add' || change.type == 'update')) {
+      if (change.name === 'expanded' &&
+          (change.type === 'add' || change.type === 'update')) {
         this.onModelExpandedChanged(change.oldValue, change.object.expanded);
         break;
+      } else if (change.name === 'volumeSliderShown' &&
+          (change.type === 'add' || change.type === 'update')) {
+        this.onModelVolumeSliderShownChanged();
+        break;
       }
     }
   }.bind(this));
@@ -284,11 +288,11 @@ AudioPlayer.prototype.onError_ = function() {
  */
 AudioPlayer.prototype.onResize_ = function(event) {
   if (!this.isExpanded_ &&
-      window.innerHeight >= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+      window.innerHeight >= this.getExpandedModeMinHeight_()) {
     this.isExpanded_ = true;
     this.player_.expanded = true;
   } else if (this.isExpanded_ &&
-             window.innerHeight < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+      window.innerHeight < this.getExpandedModeMinHeight_()) {
     this.isExpanded_ = false;
     this.player_.expanded = false;
   }
@@ -335,26 +339,32 @@ AudioPlayer.HEADER_HEIGHT = 33;  // 32px + border 1px
 AudioPlayer.TRACK_HEIGHT = 48;
 
 /**
- * Controls bar height in pixels.
+ * Volume slider's height in pixels.
  * @type {number}
  * @const
  */
-AudioPlayer.CONTROLS_HEIGHT = 96;
+AudioPlayer.VOLUME_SLIDER_HEIGHT = 48;
 
 /**
- * Default number of items in the expanded mode.
+ * Height of the control which has buttons such as play, next, shffule, etc...
  * @type {number}
  * @const
  */
-AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
+AudioPlayer.BUTTONS_CONTROL_HEIGHT = 48;
 
 /**
- * Minimum size of the window in the expanded mode in pixels.
+ * Height of the control which has progress slider, time, and duration.
  * @type {number}
  * @const
  */
-AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT +
-                                       AudioPlayer.TRACK_HEIGHT * 2;
+AudioPlayer.TIME_CONTROL_HEIGHT = 48;
+
+/**
+ * Default number of items in the expanded mode.
+ * @type {number}
+ * @const
+ */
+AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
 
 /**
  * Invoked when the 'expanded' property in the model is changed.
@@ -380,6 +390,13 @@ AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) {
 };
 
 /**
+ * Invoked when the 'volumeSliderShown' property in the model is changed.
+ */
+AudioPlayer.prototype.onModelVolumeSliderShownChanged = function() {
+  this.syncHeight_();
+};
+
+/**
  * @private
  */
 AudioPlayer.prototype.syncHeight_ = function() {
@@ -388,24 +405,49 @@ AudioPlayer.prototype.syncHeight_ = function() {
   if (this.player_.expanded) {
     // Expanded.
     if (!this.lastExpandedHeight_ ||
-        this.lastExpandedHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+        this.lastExpandedHeight_ < this.getExpandedModeMinHeight_()) {
       var expandedListHeight =
           Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) *
               AudioPlayer.TRACK_HEIGHT;
-      targetHeight = AudioPlayer.CONTROLS_HEIGHT + expandedListHeight;
+      targetHeight = this.getControlsHeight_() + expandedListHeight;
       this.lastExpandedHeight_ = targetHeight;
     } else {
       targetHeight = this.lastExpandedHeight_;
     }
   } else {
     // Not expanded.
-    targetHeight = AudioPlayer.CONTROLS_HEIGHT + AudioPlayer.TRACK_HEIGHT;
+    targetHeight = this.getControlsHeight_() + AudioPlayer.TRACK_HEIGHT;
   }
 
   window.resizeTo(window.innerWidth, targetHeight + AudioPlayer.HEADER_HEIGHT);
 };
 
 /**
+ * Calculates the height of control panel.
+ * @return {number} Current height of control panel in pixels.
+ * @private
+ */
+AudioPlayer.prototype.getControlsHeight_ = function() {
+  var height = AudioPlayer.BUTTONS_CONTROL_HEIGHT +
+               AudioPlayer.TIME_CONTROL_HEIGHT;
+  if (this.player_.volumeSliderShown)
+    height += AudioPlayer.VOLUME_SLIDER_HEIGHT;
+
+  return height;
+};
+
+/**
+ * Calculates the minium height of the app to show the playlist in expanded
+ * mode.
+ * @return {number} The minimum height of audio app window in which we can show
+ *     the playlist in expanded mode.
+ * @private
+ */
+AudioPlayer.prototype.getExpandedModeMinHeight_ = function() {
+  return this.getControlsHeight_() + AudioPlayer.TRACK_HEIGHT * 2;
+};
+
+/**
  * Create a TrackInfo object encapsulating the information about one track.
  *
  * @param {FileEntry} entry FileEntry to be retrieved the track info from.