AudioPlayer: Start playing a track when play icon on the track list is clicked.

Clicking a track usually changes tracks but doesn't change the play state. (play / pause)
With this CL, clicking play icon which is shown on hover will force start playing the track.

BUG=488229
TEST=manually

Review URL: https://codereview.chromium.org/1431523003

Cr-Commit-Position: refs/heads/master@{#357071}

4 files changed, 28 insertions, 6 deletions

diff --git a/ui/file_manager/audio_player/elements/audio_player.html b/ui/file_manager/audio_player/elements/audio_player.html
index 63bd746..9caf15a 100644
--- a/ui/file_manager/audio_player/elements/audio_player.html
+++ b/ui/file_manager/audio_player/elements/audio_player.html
@@ -15,7 +15,8 @@
         expanded$="[[expanded]]"
         shuffle="[[shuffle]]"
         current-track-index="{{currentTrackIndex}}"
-        on-replay="onReplayCurrentTrack"></track-list>
+        on-replay="onReplayCurrentTrack"
+        on-play="onPlayCurrentTrack"></track-list>
     <control-panel id="audioController"
         playing="{{playing}}"
         time="{{time}}"
diff --git a/ui/file_manager/audio_player/elements/audio_player.js b/ui/file_manager/audio_player/elements/audio_player.js
index a050d3c..a6b51e9 100644
--- a/ui/file_manager/audio_player/elements/audio_player.js
+++ b/ui/file_manager/audio_player/elements/audio_player.js
@@ -301,6 +301,13 @@ Polymer({
   },
 
   /**
+   * Invoked when receivig a request to start playing the current music.
+   */
+  onPlayCurrentTrack: function() {
+    this.$.audio.play();
+  },
+
+  /**
    * Invoked when receiving a request to replay the current music from the track
    * list element.
    */
diff --git a/ui/file_manager/audio_player/elements/track_list.css b/ui/file_manager/audio_player/elements/track_list.css
index 693b3c4..a2f31a2 100644
--- a/ui/file_manager/audio_player/elements/track_list.css
+++ b/ui/file_manager/audio_player/elements/track_list.css
@@ -46,6 +46,7 @@
   flex: none;
   height: 32px;
   margin: 8px;
+  pointer-events: none;
   width: 32px;
 }
 
@@ -53,6 +54,7 @@
   background-image: -webkit-image-set(
       url(../assets/100/playlist_play.png) 1x,
       url(../assets/200/playlist_play.png) 2x);
+  pointer-events: auto;
 }
 
 .track[active] .icon {
diff --git a/ui/file_manager/audio_player/elements/track_list.js b/ui/file_manager/audio_player/elements/track_list.js
index 95894ed..c611ce6 100644
--- a/ui/file_manager/audio_player/elements/track_list.js
+++ b/ui/file_manager/audio_player/elements/track_list.js
@@ -166,8 +166,15 @@ var TrackInfo;
     trackClicked: function(event) {
       var index = ~~event.currentTarget.getAttribute('index');
       var track = this.tracks[index];
-      if (track)
-        this.selectTrack(track);
+      if (track) {
+        if (event.target.classList.contains('icon')) {
+          // If the play icon on the track is clicked, change the current track
+          // and start playing it regardless of current play state.
+          this.selectTrack(track, true /* force to play */);
+        } else {
+          this.selectTrack(track, false /* force to play */);
+        }
+      }
     },
 
     /**
@@ -250,8 +257,10 @@ var TrackInfo;
      * Sets the current track.
      * @param {!TrackInfo} track TrackInfo to be set as the current
      *     track.
+     * @param {boolean} forcePlay True if the track should be played regardless
+     *     of the current play state (paused/played).
      */
-    selectTrack: function(track) {
+    selectTrack: function(track, forcePlay) {
       var index = -1;
       for (var i = 0; i < this.tracks.length; i++) {
         if (this.tracks[i].url === track.url) {
@@ -261,10 +270,13 @@ var TrackInfo;
       }
       if (index >= 0) {
         // TODO(yoshiki): Clean up the flow and the code around here.
-        if (this.currentTrackIndex == index)
+        if (this.currentTrackIndex === index) {
           this.replayCurrentTrack();
-        else
+        } else {
           this.currentTrackIndex = index;
+          if (forcePlay)
+            this.fire('play');
+        }
       }
     },