Video Player: Prevent showing the status icon on unnecessary timing

Sometimes, the status icon was shown in unexpected timing. This might be because the animation is re-fired when the dom is restyled. This patch fixes it.

BUG=none
TEST=Open window->play video->pause->close window. Repeat it 20 times and observe no issue.

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

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

ui/file_manager/video_player/css/media_controls.css

@@ -521,10 +521,12 @@
 }
 
 .playback-state-icon {
+  -webkit-animation: none;
   background-color: #202020;
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 2.5px;
+  display: none;
   height: 32px;
   left: 50%;
   margin-left: -16px;
@@ -560,7 +562,7 @@
 }
 
 .playback-state-icon[state] {
-  -webkit-animation: blowup 500ms;
+  display: block;
 }
 
 @-webkit-keyframes blowup {
@@ -593,12 +595,14 @@
 }
 
 .playback-state-icon[state='play'] {
+  -webkit-animation: blowup 500ms;
   background-image: -webkit-image-set(
     url('../images/media/media_play.png') 1x,
     url('../images/media/2x/media_play.png') 2x);
 }
 
 .playback-state-icon[state='pause'] {
+  -webkit-animation: blowup 500ms;
   background-image: -webkit-image-set(
     url('../images/media/media_pause.png') 1x,
     url('../images/media/2x/media_pause.png') 2x);

ui/file_manager/video_player/js/media_controls.js

@@ -1013,9 +1013,22 @@ VideoControls.prototype = { __proto__: MediaControls.prototype };
  * @private
  */
 VideoControls.prototype.showIconFeedback_ = function() {
-  this.stateIcon_.removeAttribute('state');
+  var stateIcon = this.stateIcon_;
+  stateIcon.removeAttribute('state');
+
   setTimeout(function() {
-    this.stateIcon_.setAttribute('state', this.isPlaying() ? 'play' : 'pause');
+    var newState = this.isPlaying() ? 'play' : 'pause';
+
+    var onAnimationEnd = function(state, event) {
+      if (stateIcon.getAttribute('state') === state)
+        stateIcon.removeAttribute('state');
+
+      stateIcon.removeEventListener('webkitAnimationEnd', onAnimationEnd);
+    }.bind(null, newState);
+    stateIcon.addEventListener('webkitAnimationEnd', onAnimationEnd);
+
+    // Shows the icon with animation.
+    stateIcon.setAttribute('state', newState);
   }.bind(this), 0);
 };