[Files.app] Initial implementation of new audio player

chrome/browser/resources/file_manager/audio_player/elements/control_panel.js

Index: chrome/browser/resources/file_manager/audio_player/elements/control_panel.js
diff --git a/chrome/browser/resources/file_manager/audio_player/elements/control_panel.js b/chrome/browser/resources/file_manager/audio_player/elements/control_panel.js
new file mode 100644
index 0000000000000000000000000000000000000000..5acaea9285339c2a1a92df7a60b0ed0726cef81f
--- /dev/null
+++ b/chrome/browser/resources/file_manager/audio_player/elements/control_panel.js
@@ -0,0 +1,177 @@
+// Cpyright (c) 2013 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.
+
+(function() {
+  'use strict';
+
+  /**
+   * Move |target| element above |anchor| element, in order to match the
+   * bottom lines.
+   * @param {HTMLElement} target Target element.
+   * @param {HTMLElement} anchor Anchor element.
+   */
+  function matchBottomLine(target, anchor) {
+    var targetRect = target.getBoundingClientRect();
+    var anchorRect = anchor.getBoundingClientRect();
+
+    var pos = {
+      left: anchorRect.left + anchorRect.width / 2 - targetRect.width / 2,
+      bottom: window.innerHeight - anchorRect.bottom,
+    };
+
+    target.style.position = 'fixed';
+    target.style.left = pos.left + 'px';
+    target.style.bottom = pos.bottom + 'px';
+  }
+
+  /**
+   * Convert the time into human friendly string.
+   * @param {number} time Time to be converted.
+   * @return {string} String representation of the given time
+   */
+  function time2string(time) {
+    return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2);

[mtomasz, 2014/01/23 08:05:09]

How about using toLocaleTimeString() on Date? It should simplify this crazy
expression, and would be also locale friendly.

[yoshiki, 2014/01/24 15:34:19]

This "time" here is not a time of date but time duration (length of time). I
think toLocaleTimeString() is not good to use here.

[mtomasz, 2014/01/27 01:09:24]

toLocaleTimeString() whould work very well with durations. The current code is
cool, but very complicated and not readable. It is like reinventing the wheel
IMHO. Also, I'm not sure if all locales use : as a time separator.

+  }
+
+  Polymer('control-panel', {
+    /**
+     * Initialize an element. This method is called automatically when the
+     * element is ready.
+     */
+    ready: function() {
+      this.$.volumeSlider.value = this.volume || 50;
+      this.$.playlistButton.querySelector('input').checked =
+          this.playlistExpanded;
+    },
+
+    /**
+     * Current elapsed time in the current music in second.

[mtomasz, 2014/01/23 08:05:09]

Seconds or milliseconds? Please confirm.

[yoshiki, 2014/01/24 15:34:19]

Milliseconds. Fixed.

+     * @type {number}
+     */
+    time: 0,
+
+    /**
+     * String representation of 'time'.
+     * @type {number}
+     * @private
+     */
+    get timeString_() {
+      return time2string(this.time);
+    },
+
+    /**
+     * Total length of the current music in second.
+     * @type {number}
+     */
+    duration: 0,
+
+    /**
+     * String representation of 'duration'.
+     * @type {string}
+     * @private
+     */
+    get durationString_() {
+      return time2string(this.duration);
+    },
+
+    /**
+     * Current volume. Must be between 0 to 100.
+     * @type {number}
+     */
+    volume: 50,
+
+    /**
+     * Flag whether the playlist is expanded or not.
+     * @type {boolean}
+     */
+    playlistExpanded: true,
+
+    /**
+     * Flag whether the volume slider is expanded or not.
+     * @type {boolean}
+     */
+    volumeSliderShown: false,
+
+    /**
+     * Flag to enable shuffle mode.
+     * @type {boolean}
+     */
+    shuffle: false,
+
+    /*
+     * Flag to enable repeat mode.
+     * @type {boolean}
+     */
+    repeat: false,
+
+    /*
+     * Flag if the audio is playing or paused. True if playing, or false paused.
+     * @type {boolean}
+     */
+    playing: false,
+
+    /**
+     * Invoked when the 'playlistExpanded' property is changed.
+     * @param {boolean} oldValue old value.
+     * @param {boolean} newValue new value.
+     */
+    playlistExpandedChanged: function(oldValue, newValue) {
+      this.$.playlistButton.querySelector('input').checked = !!newValue;
+    },
+
+    /**
+     * Invoked when the 'duration' property is changed.
+     * @param {number} oldValue old value.
+     * @param {number} newValue new value.
+     */
+    durationChanged: function(oldValue, newValue) {
+      // Reset the current playback position.
+      this.time = 0;
+    },
+
+    /**
+     * Invoked when the next button is clicked.
+     */
+    nextClick: function() {
+      this.fire('next-clicked');
+    },
+
+    /**
+     * Invoked when the play button is clicked.
+     */
+    playClick: function() {
+      this.playing = !this.playing;
+    },
+
+    /**
+     * Invoked when the previous button is clicked.
+     */
+    previousClick: function() {
+      this.fire('next-clicked');
+    },
+
+    /**
+     * Invoked the volume button is clicked.
+     * @type {Event} event The event.
+     */
+    volumeButtonClick: function(event) {
+      if (this.volumeSliderShown) {
+        matchBottomLine(this.$.volumeContainer, this.$.volumeButton);
+        this.$.volumeContainer.style.visibility = 'visible';
+      } else {
+        this.$.volumeContainer.style.visibility = 'hidden';
+      }
+      event.stopPropagation();
+    },
+
+    /**
+     * Invoked the value of the volume slider is changed.
+     * @type {number}
+     */
+    volumeSliderChanged: function() {
+      this.volume = this.$.volumeSlider.value;
+      this.fire('volume-changed');
+    },
+  });
+})();  // Anonymous closure