Video Player: Supports multiple files

ui/file_manager/video_player/js/video_player.js

Index: ui/file_manager/video_player/js/video_player.js
diff --git a/ui/file_manager/video_player/js/video_player.js b/ui/file_manager/video_player/js/video_player.js
index 9794215638e53f8668189da8f61d3d71aea19f9d..eb574ac31f779909e56736c86bced2dc3718ffda 100644
--- a/ui/file_manager/video_player/js/video_player.js
+++ b/ui/file_manager/video_player/js/video_player.js
@@ -110,6 +110,7 @@ function VideoPlayer() {
   this.controls_ = null;
   this.videoElement_ = null;
   this.videos_ = null;
+  this.currentPos_ = 0;
 
   Object.seal(this);
 }
@@ -167,11 +168,22 @@ VideoPlayer.prototype.prepare = function(videos) {
     if (this.controls_.decodeErrorOccured &&
         // Ignore shortcut keys
         !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-      this.playVideo();
+      this.reloadCurrentVideo_();
       e.preventDefault();
     }
   }.wrap(this);
 
+  var arrowRight = document.querySelector('.arrow-box .arrow.right');
+  arrowRight.addEventListener('click', this.advance_.wrap(this, 1));
+  var arrowLeft = document.querySelector('.arrow-box .arrow.left');
+  arrowLeft.addEventListener('click', this.advance_.wrap(this, 0));
+
+  var videoPlayerElement = document.querySelector('#video-player');
+  if (videos.length > 1)
+    videoPlayerElement.setAttribute('multiple', true);
+  else
+    videoPlayerElement.removeAttribute('multiple');
+
   document.addEventListener('keydown', reloadVideo, true);
   document.addEventListener('click', reloadVideo, true);
 };
@@ -191,7 +203,7 @@ function unload() {
  * Loads the video file.
  * @param {string} url URL of the video file.
  * @param {string} title Title of the video file.
- * @param {function(number, number)=} opt_callback Completion callback.
+ * @param {function()=} opt_callback Completion callback.
  * @private
  */
 VideoPlayer.prototype.loadVideo_ = function(url, title, opt_callback) {
@@ -201,6 +213,17 @@ VideoPlayer.prototype.loadVideo_ = function(url, title, opt_callback) {
 
   document.querySelector('#title').innerText = title;
 
+  var videoPlayerElement = document.querySelector('#video-player');
+  if (this.currentPos_ == (this.videos_.length - 1))

[mtomasz, 2014/06/06 03:41:43]

nit: == -> ===

[yoshiki, 2014/06/06 08:02:23]

Done.

+    videoPlayerElement.setAttribute('last-video', true);
+  else
+    videoPlayerElement.removeAttribute('last-video');
+
+  if (this.currentPos_ == 0)
+    videoPlayerElement.setAttribute('first-video', true);
+  else
+    videoPlayerElement.removeAttribute('first-video');
+
   // Re-enables ui and hides error message if already displayed.
   document.querySelector('#video-player').removeAttribute('disabled');
   document.querySelector('#error').removeAttribute('visible');
@@ -213,18 +236,24 @@ VideoPlayer.prototype.loadVideo_ = function(url, title, opt_callback) {
 
   this.videoElement_.src = url;
   this.videoElement_.load();
-  if (opt_callback)
-    this.videoElement_.addEventListener('loadedmetadata', opt_callback);
+
+  if (opt_callback) {
+    var handler = function(currentPos) {
+      if (currentPos === this.currentPos_)
+        opt_callback();
+      this.videoElement_.removeEventListener('loadedmetadata', handler);
+    }.wrap(this, this.currentPos_);
+
+    this.videoElement_.addEventListener('loadedmetadata', handler);
+  }
 };
 
 /**
- * Plays the video.
+ * Plays the first video.
  */
-VideoPlayer.prototype.playVideo = function() {
-  var currentVideo = this.videos_[0];
-  this.loadVideo_(currentVideo.fileUrl,
-                  currentVideo.entry.name,
-                  this.onVideoReady_.wrap(this));
+VideoPlayer.prototype.playFirstVideo = function() {
+  this.currentPos_ = 0;
+  this.reloadCurrentVideo_(this.onFirstVideoReady_.wrap(this));
 };
 
 /**
@@ -238,10 +267,10 @@ VideoPlayer.prototype.unloadVideo = function() {
 };
 
 /**
- * Called when the video is ready after starting to load.
+ * Called when the first video is ready after starting to load.
  * @private
  */
-VideoPlayer.prototype.onVideoReady_ = function() {
+VideoPlayer.prototype.onFirstVideoReady_ = function() {
   // TODO: chrome.app.window soon will be able to resize the content area.
   // Until then use approximate title bar height.
   var TITLE_HEIGHT = 33;
@@ -285,10 +314,38 @@ VideoPlayer.prototype.onVideoReady_ = function() {
 };
 
 /**
+ * Advances to the next (or previous) track.
+ *
+ * @param {boolean} direction True to the next, false to the previous.
+ * @private
+ */
+VideoPlayer.prototype.advance_ = function(direction) {
+  var newPos = this.currentPos_ + (direction ? 1 : -1);
+  if (newPos < 0 || this.videos_.length <= newPos)

[mtomasz, 2014/06/06 03:41:43]

optional: newPos <= this.videos_.length? It is hard to read the other way. But
it is up to your preference.

[yoshiki, 2014/06/06 08:02:23]

Done. I don't have a strong opinion.

+    return;
+
+  this.currentPos_ = newPos;
+  this.reloadCurrentVideo_(function() {
+    this.videoElement_.play();
+  }.wrap(this));
+};
+
+/**
+ * Reloads the current video.
+ *

[mtomasz, 2014/06/06 03:41:43]

Please be consistent with \n in jsdoc. In #344 the style is different.

[yoshiki, 2014/06/06 08:02:22]

Done.

+ * @param {function()=} opt_callback Completion callback.
+ * @private
+ */
+VideoPlayer.prototype.reloadCurrentVideo_ = function(opt_callback) {
+  var currentVideo = this.videos_[this.currentPos_];
+  this.loadVideo_(currentVideo.fileUrl, currentVideo.entry.name, opt_callback);
+};
+
+/**
  * Initialize the list of videos.
  * @param {function(Array.<Object>)} callback Called with the video list when
  *     it is ready.
- **/
+ */
 function initVideos(callback) {
   if (window.videos) {
     var videos = window.videos;
@@ -310,7 +367,7 @@ var player = new VideoPlayer();
 /**
  * Initializes the strings.
  * @param {function()} callback Called when the sting data is ready.
- **/
+ */
 function initStrings(callback) {
   chrome.fileBrowserPrivate.getStrings(function(strings) {
     loadTimeData.data = strings;
@@ -326,5 +383,5 @@ var initPromise = Promise.all(
 initPromise.then(function(results) {
   var videos = results[0];
   player.prepare(videos);
-  return new Promise(player.playVideo.wrap(player));
+  return new Promise(player.playFirstVideo.wrap(player));
 });