Added the reply/loop icon to the video player.

chrome/browser/resources/file_manager/js/media/media_controls.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview MediaControls class implements media playback controls
  * that exist outside of the audio/video HTML element.
  */
 
 /**
  * @param {HTMLElement} containerElement The container for the controls.
  * @param {function} onMediaError Function to display an error message.
  * @constructor
  */
 function MediaControls(containerElement, onMediaError) {
   this.container_ = containerElement;
   this.document_ = this.container_.ownerDocument;
   this.media_ = null;
 
   this.onMediaPlayBound_ = this.onMediaPlay_.bind(this, true);
   this.onMediaPauseBound_ = this.onMediaPlay_.bind(this, false);
   this.onMediaDurationBound_ = this.onMediaDuration_.bind(this);
   this.onMediaProgressBound_ = this.onMediaProgress_.bind(this);
   this.onMediaError_ = onMediaError || function() {};
 }
 
 /**
+ * Button's state types. Values are used as CSS class names.
+ * @enum {string}
+ */
+MediaControls.ButtonStateType = {
+  DEFAULT: 'default',
+  PLAYING: 'playing',
+  ENDED: 'ended'
+};
+
+/**
  * @return {HTMLAudioElement|HTMLVideoElement} The media element.
  */
 MediaControls.prototype.getMedia = function() { return this.media_ };
 
 /**
  * Format the time in hh:mm:ss format (omitting redundant leading zeros).
  *
  * @param {number} timeInSec Time in seconds.
  * @return {string} Formatted time string.
  * @private
@@ skipping 25 matching lines @@
   parent.appendChild(control);
   return control;
 };
 
 /**
  * Create a custom button.
  *
  * @param {string} className Class name.
  * @param {function(Event)} handler Click handler.
  * @param {HTMLElement=} opt_parent Parent element or container if undefined.
- * @param {boolean=} opt_toggle True if the button has toggle state.
+ * @param {number=} opt_numStates Number of states, default: 1.

[yoshiki, 2013/03/11 04:42:45]

Could you change the type of the last argument to MediaControls.ButtonStateType=
from number=?

[mtomasz, 2013/03/11 04:48:15]

I think it would make the code worse. The enum contains classes. Passing
MediaControls.ButtonStateType.PLAYING doesn't make much sense in my opinion. How
about passing an array of allowed states? Eg.

createButton(..., [MediaControls.ButtonStateType.DEFAULT,
MediaControls.ButtonStateType.PLAYING]);

This is quite long, but logical. WDYT?

[yoshiki, 2013/03/11 05:17:03]

Sorry, I misunderstood. |number=| is ok

  * @return {HTMLElement} The new button element.
  */
 MediaControls.prototype.createButton = function(
-    className, handler, opt_parent, opt_toggle) {
+    className, handler, opt_parent, opt_numStates) {
+  opt_numStates = opt_numStates || 1;
+
   var button = this.createControl(className, opt_parent);
   button.classList.add('media-button');
   button.addEventListener('click', handler);
 
-  var numStates = opt_toggle ? 2 : 1;
-  for (var state = 0; state != numStates; state++) {
-    var stateClass = 'state' + state;
+  var stateTypes = Object.keys(MediaControls.ButtonStateType);
+  for (var state = 0; state != opt_numStates; state++) {
+    var stateClass = MediaControls.ButtonStateType[stateTypes[state]];
     this.createControl('normal ' + stateClass, button);
     this.createControl('hover ' + stateClass, button);
     this.createControl('active ' + stateClass, button);
   }
   this.createControl('disabled', button);
 
-  button.setAttribute('state', 0);
+  button.setAttribute('state', MediaControls.ButtonStateType.DEFAULT);
   button.addEventListener('click', handler);
   return button;
 };
 
 /**
  * Enable/disable controls matching a given selector.
  *
  * @param {string} selector CSS selector.
  * @param {boolean} on True if enable, false if disable.
  * @private
@@ skipping 42 matching lines @@
     this.pause();
   else
     this.play();
 };
 
 /**
  * @param {HTMLElement=} opt_parent Parent container.
  */
 MediaControls.prototype.initPlayButton = function(opt_parent) {
   this.playButton_ = this.createButton('play media-control',
-      this.togglePlayState.bind(this), opt_parent, true /* toggle */);
+      this.togglePlayState.bind(this), opt_parent, 3 /* States. */);

[yoshiki, 2013/03/11 04:42:45]

Could you change "3" to MediaControls.ButtonStateType.ENDED?

And 3 is out of the array :-)

[mtomasz, 2013/03/11 04:48:15]

It is not out of array. This is not an index, but size. So for 3, states 0, 1, 2
will be created.

[yoshiki, 2013/03/11 05:17:03]

ditto, "3" is ok

 };
 
 /*
  * Time controls
  */
 
 /**
  * The default range of 100 is too coarse for the media progress slider.
  */
 MediaControls.PROGRESS_RANGE = 5000;
@@ skipping 59 matching lines @@
   if (on) {
     this.resumeAfterDrag_ = this.isPlaying();
     this.media_.pause();
   } else {
     if (this.resumeAfterDrag_) {
       if (this.media_.ended)
         this.onMediaPlay_(false);
       else
         this.media_.play();
     }
+    this.updatePlayButtonState_(this.isPlaying());
   }
 };
 
 /*
  * Volume controls
  */
 
 /**
  * @param {HTMLElement=} opt_parent Parent element for the controls.
  */
@@ skipping 114 matching lines @@
 
 /**
  * 'play' and 'pause' event handler.
  * @param {boolean} playing True if playing.
  * @private
  */
 MediaControls.prototype.onMediaPlay_ = function(playing) {
   if (this.progressSlider_.isDragging())
     return;
 
-  this.playButton_.setAttribute('state', playing ? '1' : '0');
+  this.updatePlayButtonState_(playing);
   this.onPlayStateChanged();
 };
 
 /**
  * 'durationchange' event handler.
  * @private
  */
 MediaControls.prototype.onMediaDuration_ = function() {
   if (!this.media_.duration) {
     this.enableControls_('.media-control', false);
@@ skipping 50 matching lines @@
  */
 MediaControls.prototype.onMediaComplete = function() {};
 
 /**
  * Called when play/pause state is changed or on playback progress.
  * This is the right moment to save the play state.
  */
 MediaControls.prototype.onPlayStateChanged = function() {};
 
 /**
+ * Updates the play button state.
+ * @param {boolean} playing If the video is playing.
+ * @private
+ */
+MediaControls.prototype.updatePlayButtonState_ = function(playing) {
+  if (playing) {
+    this.playButton_.setAttribute('state',
+                                  MediaControls.ButtonStateType.PLAYING);
+  } else if (!this.media_.ended) {
+    this.playButton_.setAttribute('state',
+                                  MediaControls.ButtonStateType.DEFAULT);
+  } else {
+    this.playButton_.setAttribute('state',
+                                  MediaControls.ButtonStateType.ENDED);
+  }
+};
+
+/**
  * Restore play state. Base implementation is empty.
  */
 MediaControls.prototype.restorePlayState = function() {};
 
 /**
  * Encode current state into the page URL or the app state.
  */
 MediaControls.prototype.encodeState = function() {
   if (!this.media_.duration)
     return;
@@ skipping 683 matching lines @@
 AudioControls.prototype.onAdvanceClick_ = function(forward) {
   if (!forward &&
       (this.getMedia().currentTime > AudioControls.TRACK_RESTART_THRESHOLD)) {
     // We are far enough from the beginning of the current track.
     // Restart it instead of than skipping to the previous one.
     this.getMedia().currentTime = 0;
   } else {
     this.advanceTrack_(forward);
   }
 };