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 23524bf6f363f923c3fbcf47778d9c2322369b68..9411822fc64c735887119f17d0d7a546e6d8aacf 100644
--- a/ui/file_manager/video_player/js/video_player.js
+++ b/ui/file_manager/video_player/js/video_player.js
@@ -60,6 +60,7 @@ FullWindowVideoControls.prototype = { __proto__: VideoControls.prototype };
 
 /**
  * Displays error message.
+ *
  * @param {string} message Message id.
  * @private
  */
@@ -110,6 +111,7 @@ function VideoPlayer() {
   this.controls_ = null;
   this.videoElement_ = null;
   this.videos_ = null;
+  this.currentPos_ = 0;
 
   Object.seal(this);
 }
@@ -167,11 +169,24 @@ VideoPlayer.prototype.prepare = function(videos) {
     if (this.controls_.decodeErrorOccured &&
         // Ignore shortcut keys
         !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
-      this.playVideo();
+      this.reloadCurrentVideo_(function() {
+        this.videoElement_.play();
+      }.wrap(this));
       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 +206,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 +216,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))
+    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 +239,25 @@ 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, event) {
+      console.log('loaded: ', currentPos, this.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 +271,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 +318,37 @@ 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 (0 <= newPos && newPos < this.videos_.length) {
+    this.currentPos_ = newPos;
+    this.reloadCurrentVideo_(function() {
+      this.videoElement_.play();
+    }.wrap(this));
+  }
+};
+
+/**
+ * Reloads the current video.
+ *
+ * @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 +370,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 +386,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));
 }.wrap(null));