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..85b31246487570840c795e781cea38094158f1e1 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -26,21 +26,87 @@
   }
 
   /**
-   * 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,
+        value: false,
+        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
+      },
+
+      /**
+       * Whether the shuffle button is ON.
+       */
+      shuffle: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * Whether the repeat button is ON.
+       */
+      repeat: {
+        type: Boolean,
+        value: false,
+        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,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * Whether the volume slider is expanded or not.
+       */
+      volumeSliderShown: {
+        type: Boolean,
+        value: false,
+        notify: true
+      }
+    },
+
     /**
      * Initializes an element. This method is called automatically when the
      * element is ready.
@@ -57,64 +123,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 +182,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