AudioPlayer.app: Migrate to Polymer 1.0.

ui/file_manager/audio_player/elements/control_panel.js

Index: ui/file_manager/audio_player/elements/control_panel.js
diff --git a/ui/file_manager/audio_player/elements/control_panel.js b/ui/file_manager/audio_player/elements/control_panel.js
index e4de2f68a077ac742d1dd27c04524ea519e76412..0379ea6c8845188faa156a178e1a94eea43e56ea 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -26,21 +26,84 @@
   }
 
   /**
-   * Converts 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);
-  }
-
-  /**
    * @constructor
    * @extends {PolymerElement}
    */
   var ControlPanelElement = function() {};
 
   ControlPanelElement.prototype = {
+    is: 'control-panel',
+
+    properties: {
+      /**
+       * Flag whether the audio is playing or paused. True if playing, or false
+       * paused.
+       */
+      playing: {
+        type: Boolean,
+        notify: true
+      },
+
+      /**
+       * Current elapsed time in the current music in millisecond.
+       */
+      time: {
+        type: Number,
+        value: 0,
+        notify: true
+      },
+
+      /**
+       * Total length of the current music in millisecond.
+       */
+      duration: {
+        type: Number,
+        value: 0,
+        notify: true

[yawano, 2015/06/10 05:47:48]

notify: false? Since this is property is bound as one-way.

[fukino, 2015/06/10 06:24:03]

Yes, you are right. Done.

+      },
+
+      /**
+       * Whether the shuffle button is ON.
+       */
+      shuffle: {
+        type: Boolean,
+        notify: true
+      },
+
+      /**
+       * Whether the repeat button is ON.
+       */
+      repeat: {
+        type: Boolean,
+        notify: true
+      },
+
+      /**
+       * The audio volume. 0 is silent, and 100 is maximum loud.
+       */
+      volume: {
+        type: Number,
+        notify: true
+      },
+
+      /**
+       * Whether the expanded button is ON.
+       */
+      expanded: {
+        type: Boolean,
+        notify: true
+      },
+
+      /**
+       * Whether the volume slider is expanded or not.
+       */
+      volumeSliderShown: {
+        type: Boolean,
+        value: false,

[yawano, 2015/06/10 05:47:48]

nit: Why some properties have default value and some don't? (consistency).

[fukino, 2015/06/10 06:24:03]

Basically, it was based on whether we have default value before this CL.

However, I rewrote this CL to update default values following this criteria.
- For properties which are intended to be bound to child elements' properties,
omit default values.
- Otherwise, write default values explicitly.
WDYT?

[yawano, 2015/06/10 06:46:18]

SGTM.

+        notify: true
+      }
+    },
+
     /**
      * Initializes an element. This method is called automatically when the
      * element is ready.
@@ -57,64 +120,6 @@
     },
 
     /**
-     * Model object of the Audio Player.
-     * @type {AudioPlayerModel}
-     */
-    model: null,
-
-    /**
-     * Invoked when the model changed.
-     * @param {AudioPlayerModel} oldValue Old Value.
-     * @param {AudioPlayerModel} newValue New Value.
-     */
-    modelChanged: function(oldValue, newValue) {
-      this.volumeSlider.model = newValue;
-    },
-
-    /**
-     * Current elapsed time in the current music in millisecond.
-     * @type {number}
-     */
-    time: 0,
-
-    /**
-     * String representation of 'time'.
-     * @type {number}
-     * @private
-     */
-    get timeString_() {
-      return time2string(this.time);
-    },
-
-    /**
-     * Total length of the current music in millisecond.
-     * @type {number}
-     */
-    duration: 0,
-
-    /**
-     * String representation of 'duration'.
-     * @type {string}
-     * @private
-     */
-    get durationString_() {
-      return time2string(this.duration);
-    },
-
-    /**
-     * Flag whether the volume slider is expanded or not.
-     * @type {boolean}
-     */
-    volumeSliderShown: false,
-
-    /**
-     * Flag whether the audio is playing or paused. True if playing, or false
-     * paused.
-     * @type {boolean}
-     */
-    playing: false,
-
-    /**
      * Invoked when the next button is clicked.
      */
     nextClick: function() {
@@ -174,7 +179,32 @@
         this.volumeContainer.style.visibility = 'hidden';
       }
     },
+
+    /**
+     * Converts the time into human friendly string.
+     * @param {number} time Time to be converted.
+     * @return {string} String representation of the given time
+     */
+    time2string_: function(time) {
+      return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2);
+    },
+
+    /**
+     * Computes state for play button based on 'playing' property.
+     * @return {string}
+     */
+    computePlayState_: function(playing) {
+      return playing ? "playing" : "ended";
+    },
+
+    /**
+     * Computes style for '.filled' element of progress bar.
+     * @return {string}
+     */
+    computeProgressBarStyle_: function(time, duration) {
+      return 'width: ' + (time / duration * 100) + '%;';
+    }
   };
 
-  Polymer('control-panel', ControlPanelElement.prototype);
+  Polymer(ControlPanelElement.prototype);
 })();  // Anonymous closure