Reland MD Audio Player.

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 ca7ea24079b16b6f448a595c9eff3c7533358ed9..452b881d073b7746fbf0d703bed18d41029122d2 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -36,7 +36,9 @@
       playing: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
+        reflectToAttribute: true,
+        observer: 'playingChanged_'
       },
 
       /**
@@ -99,6 +101,23 @@
         value: false,
         observer: 'volumeSliderShownChanged',
         notify: true
+      },
+
+      /**
+       * Whether the knob of time slider is being dragged.
+       */
+      dragging: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
+
+      /**
+       * Dictionary which contains aria-labels for each controls.
+       */
+      ariaLabels: {
+        type: Object,
+        observer: 'ariaLabelsChanged_'
       }
     },
 
@@ -112,17 +131,14 @@
       this.$.volumeSlider.addEventListener('focusout', onFocusoutBound);
       this.$.volumeButton.addEventListener('focusout', onFocusoutBound);
 
-      // Prevent the time slider from being moved by arrow keys.
-      this.$.timeInput.addEventListener('keydown', function(event) {
-        switch (event.keyCode) {
-          case 37:  // Left arrow
-          case 38:  // Up arrow
-          case 39:  // Right arrow
-          case 40:  // Down arrow
-            event.preventDefault();
-            break;
-        };
-      });
+      this.$.timeSlider.addEventListener('value-change', function() {
+        if (this.dragging)
+          this.dragging = false;
+      }.bind(this));
+      this.$.timeSlider.addEventListener('immediate-value-change', function() {
+        if (!this.dragging)
+          this.dragging = true;
+      }.bind(this));
     },
 
     /**
@@ -194,19 +210,45 @@
     },
 
     /**
-     * Computes state for play button based on 'playing' property.
-     * @return {string}
+     * Converts the time and duration into human friendly string.
+     * @param {number} time Time to be converted.
+     * @param {number} duration Duration to be converted.
+     * @return {string} String representation of the given time
+     */
+    computeTimeString_: function(time, duration) {
+      return this.time2string_(time) + ' / ' + this.time2string_(duration);
+    },
+
+    /**
+     * Invoked when the playing property is changed.
+     * @param {boolean} playing
+     * @private
      */
-    computePlayState_: function(playing) {
-      return playing ? "playing" : "ended";
+    playingChanged_: function(playing) {
+      if (this.ariaLabels) {
+        this.$.play.setAttribute('aria-label',
+            playing ? this.ariaLabels.pause : this.ariaLabels.play);
+      }
     },
 
     /**
-     * Computes style for '.filled' element of progress bar.
-     * @return {string}
+     * Invoked when the ariaLabels property is changed.
+     * @param {Object} ariaLabels
+     * @private
      */
-    computeProgressBarStyle_: function(time, duration) {
-      return 'width: ' + (time / duration * 100) + '%;';
+    ariaLabelsChanged_: function(ariaLabels) {
+      assert(ariaLabels);
+      // TODO(fukino): Use data bindings.
+      this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider);
+      this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle);
+      this.$.repeat.setAttribute('aria-label', ariaLabels.repeat);
+      this.$.previous.setAttribute('aria-label', ariaLabels.previous);
+      this.$.play.setAttribute('aria-label',
+          this.playing ? ariaLabels.pause : ariaLabels.play);
+      this.$.next.setAttribute('aria-label', ariaLabels.next);
+      this.$.volumeButton.setAttribute('aria-label', ariaLabels.volume);
+      this.$.playList.setAttribute('aria-label', ariaLabels.playList);
+      this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider);
     }
   });
 })();  // Anonymous closure