AudioPlayer.app: Migrate to Polymer 1.0.

ui/file_manager/audio_player/elements/control_panel.js

 // Copyright 2014 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';
 
   /**
    * Moves |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';
   }
 
   /**
-   * 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.
      */
     ready: function() {
       var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this);
 
       this.volumeSlider = this.$.volumeSlider;
       this.volumeButton = this.$.volumeButton;
       this.volumeContainer = this.$.volumeContainer;
 
       this.volumeSlider.addEventListener('focusout', onFocusoutBound);
       this.volumeButton.addEventListener('focusout', onFocusoutBound);
     },
 
     /**
-     * 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() {
       this.fire('next-clicked');
     },
 
     /**
      * Invoked when the play button is clicked.
      */
     playClick: function() {
@@ skipping 39 matching lines @@
      * @private
      */
     showVolumeController_: function(show) {
       if (show) {
         matchBottomLine(this.$.volumeContainer, this.$.volumeButton);
         this.volumeContainer.style.visibility = 'visible';
       } else {
         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