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..e06808ad067411b119cc84b1ce70e6e2b2ee65f8 100644
--- a/ui/file_manager/audio_player/js/audio_player.js
+++ b/ui/file_manager/audio_player/js/audio_player.js
@@ -28,6 +28,11 @@ function AudioPlayer(container) {
           (change.type == 'add' || change.type == 'update')) {
         this.onModelExpandedChanged(change.oldValue, change.object.expanded);
         break;
+      } else if (change.name == 'volumeSliderShown' &&

[yawano, 2015/10/30 08:28:25]

small nit: use === instead of ==.

[fukino, 2015/10/30 09:05:25]

Done.

+          (change.type == 'add' || change.type == 'update')) {
+        this.onModelVolumeSliderShownChanged(
+            change.oldValue, change.object.expanded);

[yawano, 2015/10/30 08:28:25]

change.object.volumeSliderShown?

[fukino, 2015/10/30 09:05:25]

Sorry! Actually these arguments are not used.
I removed them.

+        break;
       }
     }
   }.bind(this));
@@ -284,11 +289,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 +340,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;

[fukino, 2015/10/30 07:50:07]

Since the control panels' height is not static anymore, I added
getControlHeight_() instead.
(Same for EXPANDED_MODE_MIN_HEIGHT)

+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;
+
+/**
+ * Height of the control which has progress slider, time, and duration.
+ * @type {number}
+ * @const
+ */
+AudioPlayer.TIME_CONTROL_HEIGHT = 48;
 
 /**
- * Minimum size of the window in the expanded mode in pixels.
+ * Default number of items in the expanded mode.
  * @type {number}
  * @const
  */
-AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT +
-                                       AudioPlayer.TRACK_HEIGHT * 2;
+AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
 
 /**
  * Invoked when the 'expanded' property in the model is changed.
@@ -380,6 +391,16 @@ AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) {
 };
 
 /**
+ * Invoked when the 'volumeSliderShwon' property in the model is changed.

[yawano, 2015/10/30 08:28:25]

typo: volumeSliderShwon -> volumeSliderShown

[fukino, 2015/10/30 09:05:25]

Done.

+ * @param {boolean} oldValue Old value.
+ * @param {boolean} newValue New value.
+ */
+AudioPlayer.prototype.onModelVolumeSliderShownChanged =
+    function(oldValue, newValue) {
+  this.syncHeight_();
+};
+
+/**
  * @private
  */
 AudioPlayer.prototype.syncHeight_ = function() {
@@ -388,24 +409,48 @@ 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);
 };
 
 /**
+ * Calculate the height of control panel.

[yawano, 2015/10/30 08:28:25]

nit: Calculate -> Calculates

[fukino, 2015/10/30 09:05:25]

Done.

+ * @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;
+};
+
+/**
+ * Calculate the minium height of the app to show the playlist in expanded mode.

[yawano, 2015/10/30 08:28:25]

nit: Calculate -> Calculates

[fukino, 2015/10/30 09:05:25]

Done.

+ * @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.