AudioPlayer: Update volume controls.

ui/file_manager/audio_player/js/audio_player.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * Overrided metadata worker's path.
  * @type {string}
  */
 ContentMetadataProvider.WORKER_SCRIPT = '/js/metadata_worker.js';
 
@@ skipping 10 matching lines @@
   this.invalidTracks_ = {};
 
   this.model_ = new AudioPlayerModel();
   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')) {
         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));
 
   this.entries_ = [];
   this.currentTrackIndex_ = -1;
   this.playlistGeneration_ = 0;
 
   /**
    * Whether if the playlist is expanded or not. This value is changed by
@@ skipping 236 matching lines @@
 };
 
 /**
  * Toggles the expanded mode when resizing.
  *
  * @param {Event} event Resize event.
  * @private
  */
 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;
   }
 };
 
 /**
  * Handles keydown event to open inspector with shortcut keys.
  *
  * @param {Event} event KeyDown event.
  * @private
@@ skipping 26 matching lines @@
 AudioPlayer.HEADER_HEIGHT = 33;  // 32px + border 1px
 
 /**
  * Track height in pixels.
  * @type {number}
  * @const
  */
 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;
+
+/**
+ * Height of the control which has buttons such as play, next, shffule, etc...
+ * @type {number}
+ * @const
+ */
+AudioPlayer.BUTTONS_CONTROL_HEIGHT = 48;
+
+/**
+ * Height of the control which has progress slider, time, and duration.
+ * @type {number}
+ * @const
+ */
+AudioPlayer.TIME_CONTROL_HEIGHT = 48;
 
 /**
  * Default number of items in the expanded mode.
  * @type {number}
  * @const
  */
 AudioPlayer.DEFAULT_EXPANDED_ITEMS = 5;
 
 /**
- * Minimum size of the window in the expanded mode in pixels.
- * @type {number}
- * @const
- */
-AudioPlayer.EXPANDED_MODE_MIN_HEIGHT = AudioPlayer.CONTROLS_HEIGHT +
-                                       AudioPlayer.TRACK_HEIGHT * 2;
-
-/**
  * Invoked when the 'expanded' property in the model is changed.
  * @param {boolean} oldValue Old value.
  * @param {boolean} newValue New value.
  */
 AudioPlayer.prototype.onModelExpandedChanged = function(oldValue, newValue) {
   if (this.isExpanded_ !== null &&
       this.isExpanded_ === newValue)
     return;
 
   if (this.isExpanded_ && !newValue)
     this.lastExpandedHeight_ = window.innerHeight;
 
   if (this.isExpanded_ !== newValue) {
     this.isExpanded_ = newValue;
     this.syncHeight_();
 
     // Saves new state.
     window.appState.expanded = newValue;
     util.saveAppState();
   }
 };
 
 /**
+ * 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() {
   var targetHeight;
 
   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.
  * @constructor
  */
 AudioPlayer.TrackInfo = function(entry) {
   this.url = entry.toURL();
   this.title = this.getDefaultTitle();
   this.artist = this.getDefaultArtist();
 
@@ skipping 34 matching lines @@
   // TODO(yoshiki): Handle error in better way.
   // TODO(yoshiki): implement artwork (metadata.thumbnail)
   this.title = metadata.mediaTitle || this.getDefaultTitle();
   this.artist = error || metadata.mediaArtist || this.getDefaultArtist();
 };
 
 // Starts loading the audio player.
 window.addEventListener('DOMContentLoaded', function(e) {
   AudioPlayer.load();
 });