Implement "expand/collapse artwork" button in audio player.

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 16 matching lines @@
    * Whether if the playlist is expanded or not. This value is changed by
    * this.syncPlaylistExpanded().
    * True: expanded, false: collapsed, null: unset.
    *
    * @type {?boolean}
    * @private
    */
   // Initial value is null. It'll be set in load().
   this.isPlaylistExpanded_ = null;
 
+  /**
+   * Whether if the trackinfo is expanded or not.
+   * True: expanded, false: collapsed, null: unset.
+   *
+   * @type {?boolean}
+   * @private
+   */
+  // Initial value is null. It'll be set in load().
+  this.isTrackInfoExpanded_ = null;
+
   this.player_ =
     /** @type {AudioPlayerElement} */ (document.querySelector('audio-player'));
   this.player_.tracks = [];
 
   // Restore the saved state from local storage, and update the local storage
   // if the states are changed.
   var STORAGE_PREFIX = 'audioplayer-';
   var KEYS_TO_SAVE_STATES =
-      ['shuffle', 'repeat', 'volume', 'playlist-expanded'];
+      ['shuffle',
+       'repeat',
+       'volume',
+       'playlist-expanded',
+       'track-info-expanded'];
   var storageKeys = KEYS_TO_SAVE_STATES.map(a => STORAGE_PREFIX + a);
   chrome.storage.local.get(storageKeys, function(results) {
     // Update the UI by loaded state.
     for (var storageKey in results) {
       var key = storageKey.substr(STORAGE_PREFIX.length);
       this.player_[Polymer.CaseMap.dashToCamelCase(key)] = results[storageKey];
     }
     // Start listening to UI changes to write back the states to local storage.
     for (var i = 0; i < KEYS_TO_SAVE_STATES.length; i++) {
       this.player_.addEventListener(
           KEYS_TO_SAVE_STATES[i] + '-changed',
           function(storageKey, event) {
             var objectToBeSaved = {};
             objectToBeSaved[storageKey] = event.detail.value;
             chrome.storage.local.set(objectToBeSaved);
           }.bind(this, storageKeys[i]));
     }
   }.bind(this));
 
-  // Update the window size when UI's 'expanded' state is changed.
+  // Update the window size when UI's 'playlist-expanded' state is changed.
   this.player_.addEventListener('playlist-expanded-changed', function(event) {
     this.onPlaylistExpandedChanged_(event.detail.value);
   }.bind(this));
 
+  // Update the window size when UI's 'track-info-expanded' state is changed.
+  this.player_.addEventListener('track-info-expanded-changed', function(event) {
+    this.onTrackInfoExpandedChanged_(event.detail.value);
+  }.bind(this));
+
   // Run asynchronously after an event of model change is delivered.
   setTimeout(function() {
     this.errorString_ = '';
     this.offlineString_ = '';
     chrome.fileManagerPrivate.getStrings(function(strings) {
       container.ownerDocument.title = strings['AUDIO_PLAYER_TITLE'];
       this.errorString_ = strings['AUDIO_ERROR'];
       this.offlineString_ = strings['AUDIO_OFFLINE'];
       AudioPlayer.TrackInfo.DEFAULT_ARTIST =
           strings['AUDIO_PLAYER_DEFAULT_ARTIST'];
@@ skipping 61 matching lines @@
   this.playlistGeneration_++;
   this.currentTrackIndex_ = -1;
 
   // Save the app state, in case of restart. Make a copy of the object, so the
   // playlist member is not changed after entries are resolved.
   window.appState = /** @type {Playlist} */ (
       JSON.parse(JSON.stringify(playlist)));  // cloning
   util.saveAppState();
 
   this.isPlaylistExpanded_ = this.player_.playlistExpanded;
+  this.isTrackInfoExpanded_ = this.player_.trackInfoExpanded;
 
   // Resolving entries has to be done after the volume manager is initialized.
   this.volumeManager_.ensureInitialized(function() {
     util.URLsToEntries(playlist.items || [], function(entries) {
       this.entries_ = entries;
 
       var position = playlist.position || 0;
       var time = playlist.time || 0;
 
       if (this.entries_.length == 0)
@@ skipping 144 matching lines @@
       }.bind(this));
 };
 
 /**
  * Toggles the expanded mode when resizing.
  *
  * @param {Event} event Resize event.
  * @private
  */
 AudioPlayer.prototype.onResize_ = function(event) {
-  if (!this.isPlaylistExpanded_ &&
-      window.innerHeight > AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+  var trackListHeight = this.player_.$.trackList.clientHeight;
+  if (trackListHeight > AudioPlayer.TOP_PADDING_HEIGHT) {
     this.isPlaylistExpanded_ = true;
     this.player_.playlistExpanded = true;
-  } else if (this.isPlaylistExpanded_ &&
-             window.innerHeight <= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
+  } else {
     this.isPlaylistExpanded_ = false;
     this.player_.playlistExpanded = false;
   }
 };
 
 /**
  * Handles keydown event to open inspector with shortcut keys.
  *
  * @param {Event} event KeyDown event.
  * @private
@@ skipping 44 matching lines @@
 AudioPlayer.TRACK_HEIGHT = 48;
 
 /**
  * artwork panel height in pixels, when it's closed.
  * @type {number}
  * @const
  */
 AudioPlayer.CLOSED_ARTWORK_HEIGHT = 48;
 
 /**
+ * artwork panel height in pixels, when it's opened.
+ * @type {number}
+ * @const
+ */
+AudioPlayer.EXPANDED_ARTWORK_HEIGHT = 320;
+
+/**
  * Controls bar height in pixels.
  * @type {number}
  * @const
  */
 AudioPlayer.CONTROLS_HEIGHT = 96;
 
 /**
  * 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.TOP_PADDING_HEIGHT +
-                                       AudioPlayer.CLOSED_ARTWORK_HEIGHT +
+                                       AudioPlayer.EXPANDED_ARTWORK_HEIGHT +
                                        AudioPlayer.CONTROLS_HEIGHT;
 
 /**
- * Invoked when the 'expanded' property in the model is changed.
+ * Minimum size of the window in the mode in pixels.
+ * @type {number}
+ * @const
+ */
+AudioPlayer.CLOSED_MODE_MIN_HEIGHT = AudioPlayer.TOP_PADDING_HEIGHT +
+                                     AudioPlayer.CLOSED_ARTWORK_HEIGHT +
+                                     AudioPlayer.CONTROLS_HEIGHT;
+
+/**
+ * Invoked when the 'playlist-expanded' property in the model is changed.
  * @param {boolean} newValue New value.
  * @private
  */
 AudioPlayer.prototype.onPlaylistExpandedChanged_ = function(newValue) {
   if (this.isPlaylistExpanded_ !== null &&
       this.isPlaylistExpanded_ === newValue)
     return;
 
   if (this.isPlaylistExpanded_ && !newValue)
     this.lastExpandedInnerHeight_ = window.innerHeight;
 
   if (this.isPlaylistExpanded_ !== newValue) {
     this.isPlaylistExpanded_ = newValue;
-    this.syncHeight_();
+    this.syncHeightForPlaylist_();
 
     // Saves new state.
     window.appState.playlistExpanded = newValue;
     util.saveAppState();
   }
 };
 
 /**
+ * Invoked when the 'track-info-expanded' property in the model is changed.
+ * @param {boolean} newValue New value.
+ * @private
+ */
+AudioPlayer.prototype.onTrackInfoExpandedChanged_ = function(newValue) {
+  if (this.isTrackInfoExpanded_ !== null &&
+      this.isTrackInfoExpanded_ === newValue)
+    return;
+
+  this.lastExpandedInnerHeight_ = window.innerHeight;
+
+  if (this.isTrackInfoExpanded_ !== newValue) {
+    this.isTrackInfoExpanded_ = newValue;
+    var state = chrome.app.window.current()
+    var newHeight = window.outerHeight;
+    if (newValue) {
+      state.innerBounds.minHeight = AudioPlayer.EXPANDED_MODE_MIN_HEIGHT;
+      newHeight += AudioPlayer.EXPANDED_MODE_MIN_HEIGHT -
+          AudioPlayer.CLOSED_MODE_MIN_HEIGHT;
+    } else {
+      state.innerBounds.minHeight = AudioPlayer.CLOSED_MODE_MIN_HEIGHT;
+      newHeight -= AudioPlayer.EXPANDED_MODE_MIN_HEIGHT -
+          AudioPlayer.CLOSED_MODE_MIN_HEIGHT;
+    }
+    window.resizeTo(window.outerWidth, newHeight);
+
+    // Saves new state.
+    window.appState.isTrackInfoExpanded_ = newValue;
+    util.saveAppState();
+  }
+};
+
+/**
  * @private
  */
-AudioPlayer.prototype.syncHeight_ = function() {
+AudioPlayer.prototype.syncHeightForPlaylist_ = function() {

[fukino, 2016/02/02 06:24:20]

Somehow I see extra 4 or 5 pixel margin above the playlist.

[ryoh, 2016/02/02 08:15:49]

Done.

   var targetInnerHeight;
 
   if (this.player_.playlistExpanded) {
-    // Expanded.
+    // playllist expanded.
     if (!this.lastExpandedInnerHeight_ ||
         this.lastExpandedInnerHeight_ < AudioPlayer.EXPANDED_MODE_MIN_HEIGHT) {
       var expandedListHeight =
           Math.min(this.entries_.length, AudioPlayer.DEFAULT_EXPANDED_ITEMS) *
               AudioPlayer.TRACK_HEIGHT;
-      targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT +
-                          expandedListHeight +
-                          AudioPlayer.CONTROLS_HEIGHT;
+      if (this.player_.trackInfoExpanded) {
+        targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT +
+                            AudioPlayer.EXPANDED_ARTWORK_HEIGHT +
+                            expandedListHeight +
+                            AudioPlayer.CONTROLS_HEIGHT;
+      } else {
+        targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT +
+                            AudioPlayer.TRACK_HEIGHT +
+                            expandedListHeight +
+                            AudioPlayer.CONTROLS_HEIGHT;
+      }
       this.lastExpandedInnerHeight_ = targetInnerHeight;
     } else {
       targetInnerHeight = this.lastExpandedInnerHeight_;
     }
   } else {
-    // Not expanded.
-    targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT +
-                        AudioPlayer.TRACK_HEIGHT +
-                        AudioPlayer.CONTROLS_HEIGHT;
+    // playllist not expanded.
+    if (this.player_.trackInfoExpanded) {
+      targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT +
+                          AudioPlayer.EXPANDED_ARTWORK_HEIGHT +
+                          AudioPlayer.CONTROLS_HEIGHT;
+    } else {
+      targetInnerHeight = AudioPlayer.TOP_PADDING_HEIGHT +
+                          AudioPlayer.TRACK_HEIGHT +
+                          AudioPlayer.CONTROLS_HEIGHT;
+    }
   }
   window.resizeTo(window.outerWidth,
                   AudioPlayer.HEADER_HEIGHT + targetInnerHeight);
 };
 
 /**
  * Create a TrackInfo object encapsulating the information about one track.
  *
  * @param {FileEntry} entry FileEntry to be retrieved the track info from.
  * @constructor
@@ skipping 39 matching lines @@
   // TODO(yoshiki): Handle error in better way.
   this.title = metadata.mediaTitle || this.getDefaultTitle();
   this.artist = error || metadata.mediaArtist || this.getDefaultArtist();
   this.artworkUrl = metadata.contentThumbnailUrl || "";
 };
 
 // Starts loading the audio player.
 window.addEventListener('DOMContentLoaded', function(e) {
   AudioPlayer.load();
 });