Video Player: Supports multiple files

ui/file_manager/video_player/js/video_player.js

 // Copyright 2014 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.
 
 'use strict';
 
 /**
  * @param {Element} playerContainer Main container.
  * @param {Element} videoContainer Container for the video element.
  * @param {Element} controlsContainer Container for video controls.
@@ skipping 92 matching lines @@
   util.toggleFullScreen(appWindow, !util.isFullScreen(appWindow));
 };
 
 /**
  * @constructor
  */
 function VideoPlayer() {
   this.controls_ = null;
   this.videoElement_ = null;
   this.videos_ = null;
+  this.currentPos_ = 0;
 
   Object.seal(this);
 }
 
 VideoPlayer.prototype = {
   get controls() {
     return this.controls_;
   }
 };
 
@@ skipping 37 matching lines @@
 
   this.controls_ = new FullWindowVideoControls(
       document.querySelector('#video-player'),
       document.querySelector('#video-container'),
       document.querySelector('#controls'));
 
   var reloadVideo = function(e) {
     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);
 };
 
 /**
  * Unloads the player.
  */
 function unload() {
   if (!player.controls || !player.controls.getMedia())
     return;
 
   player.controls.savePosition(true /* exiting */);
   player.controls.cleanup();
 }
 
 /**
  * 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) {
   this.unloadVideo();
 
   document.title = title;
 
   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');
   this.controls.inactivityWatcher.disabled = false;
   this.controls.decodeErrorOccured = false;
 
   this.videoElement_ = document.createElement('video');
   document.querySelector('#video-container').appendChild(this.videoElement_);
   this.controls.attachMedia(this.videoElement_);
 
   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));
 };
 
 /**
  * Unloads the current video.
  */
 VideoPlayer.prototype.unloadVideo = function() {
   // Detach the previous video element, if exists.
   if (this.videoElement_)
     this.videoElement_.parentNode.removeChild(this.videoElement_);
   this.videoElement_ = null;
 };
 
 /**
- * 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;
 
   var videoWidth = this.videoElement_.videoWidth;
   var videoHeight = this.videoElement_.videoHeight;
 
   var aspect = videoWidth / videoHeight;
   var newWidth = videoWidth;
   var newHeight = videoHeight + TITLE_HEIGHT;
@@ skipping 23 matching lines @@
   var appWindow = chrome.app.window.current();
   appWindow.resizeTo(newWidth, newHeight);
   appWindow.moveTo(oldLeft - (newWidth - oldWidth) / 2,
                    oldTop - (newHeight - oldHeight) / 2);
   appWindow.show();
 
   this.videoElement_.play();
 };
 
 /**
+ * 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;
     window.videos = null;
     callback(videos);
     return;
   }
 
   chrome.runtime.onMessage.addListener(
       function(request, sender, sendResponse) {
         var videos = window.videos;
         window.videos = null;
         callback(videos);
       });
 }
 
 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;
     callback();
   });
 }
 
 var initPromise = Promise.all(
     [new Promise(initVideos.wrap(null)),
      new Promise(initStrings.wrap(null)),
      new Promise(util.addPageLoadHandler.wrap(null))]);
 
 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));
 });