Video Player: Support casting a video

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 57 matching lines @@
 
   this.inactivityWatcher_.check();
 }
 
 FullWindowVideoControls.prototype = { __proto__: VideoControls.prototype };
 
 /**
  * Displays error message.
  *
  * @param {string} message Message id.
- * @private
  */
-FullWindowVideoControls.prototype.showErrorMessage_ = function(message) {
+FullWindowVideoControls.prototype.showErrorMessage = function(message) {
   var errorBanner = document.querySelector('#error');
   errorBanner.textContent =
       loadTimeData.getString(message);
   errorBanner.setAttribute('visible', 'true');
 
   // The window is hidden if the video has not loaded yet.
   chrome.app.window.current().show();
 };
 
 /**
  * Handles playback (decoder) errors.
  * @private
  */
 FullWindowVideoControls.prototype.onPlaybackError_ = function() {
-  this.showErrorMessage_('GALLERY_VIDEO_DECODING_ERROR');
+  this.showErrorMessage('GALLERY_VIDEO_DECODING_ERROR');
   this.decodeErrorOccured = true;
 
   // Disable inactivity watcher, and disable the ui, by hiding tools manually.
   this.inactivityWatcher.disabled = true;
   document.querySelector('#video-player').setAttribute('disabled', 'true');
 
   // Detach the video element, since it may be unreliable and reset stored
   // current playback time.
   this.cleanup();
   this.clearState();
@@ skipping 160 matching lines @@
     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;
 
+  var videoElementInitializePromise;
   if (this.currentCast_) {
     videoPlayerElement.setAttribute('casting', true);
-    this.videoElement_ = new CastVideoElement();
-    this.controls.attachMedia(this.videoElement_);
 
     document.querySelector('#cast-name-label').textContent =
         loadTimeData.getString('VIDEO_PLAYER_PLAYING_ON');
     document.querySelector('#cast-name').textContent =
         this.currentCast_.friendlyName;
+
+    var downloadUrlPromise = new Promise(function(fulfill, reject) {
+      chrome.fileBrowserPrivate.getDownloadUrl(video.url, fulfill);
+    });
+
+    var mimePromise = new Promise(function(fulfill, reject) {
+      chrome.fileBrowserPrivate.getDriveEntryProperties(
+          [video.entry.toURL()], fulfill);
+    });
+
+    videoElementInitializePromise =
+        Promise.all([downloadUrlPromise, mimePromise]).then(function(results) {
+          var downloadUrl = results[0];
+          var props = results[1];
+          var mime = '';
+          if (!props || props.length === 0 || !props[0].contentMimeType) {
+            // TODO(yoshiki): Adds a logic to guess the mime.
+          } else {
+            mime = props[0].contentMimeType;
+          }
+
+          return new Promise(function(fulfill, reject) {
+            chrome.cast.requestSession(function(session) {
+              var mediaInfo = new chrome.cast.media.MediaInfo(downloadUrl);
+              mediaInfo.contentType = mime;
+              this.videoElement_ = new CastVideoElement(mediaInfo, session);
+              this.controls.attachMedia(this.videoElement_);
+              fulfill();
+            }.wrap(this), reject, undefined, this.currentCast_.label);

[hirono, 2014/07/24 06:10:38]

This is the last. Could you remove the wrap as well? Thank you!

[yoshiki, 2014/07/24 06:16:52]

I think this is necessary. An exception in a callback of chrome APIs doesn't
provide detailed information or are sometimes just ignored. To let us know the
information of error, this wrap is useful.

[hirono, 2014/07/24 06:35:55]

Though I didn't noticed it before, if an exception is thrown in the callback of
requestSession, it does not turn the promise rejected because the caller of the
callback function is the chrome API, not the constructor of Promise.

Maybe we should:

return new Promise(function(fulfill, reject) {
  chrome.cast.requestSession(fulfill, reject, undefined,
this.currentCast_.lable);
}).then(function(session) {
  ...
}.bind(this));

[yoshiki, 2014/07/24 08:35:54]

I got it. Thanks for clear explanation.

+          }.bind(this));
+        }.bind(this));
   } else {
     videoPlayerElement.removeAttribute('casting');
 
     this.videoElement_ = document.createElement('video');
-    document.querySelector('#video-container').appendChild(this.videoElement_);
+    document.querySelector('#video-container').appendChild(
+        this.videoElement_);
 
     this.controls.attachMedia(this.videoElement_);
     this.videoElement_.src = video.url;
+
+    videoElementInitializePromise = Promise.resolve();
   }
 
-  this.videoElement_.load();
+  videoElementInitializePromise.then(
+      function() {
+        this.videoElement_.load();
 
-  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_);
+        if (opt_callback) {
+          var handler = function(currentPos, event) {
+            if (currentPos === this.currentPos_)
+              opt_callback();
+            this.videoElement_.removeEventListener('loadedmetadata', handler);
+          }.wrap(this, this.currentPos_);
 
-    this.videoElement_.addEventListener('loadedmetadata', handler);
-  }
+          this.videoElement_.addEventListener('loadedmetadata', handler);
+        }
+      }.bind(this),
+      function videoElementInitializePromiseRejected() {
+        console.error('Failed to initialize the video element.',
+                      error.stack || error);
+        this.controls_.showErrorMessage('GALLERY_VIDEO_ERROR');
+      }.bind(this));
 };
 
 /**
  * Plays the first video.
  */
 VideoPlayer.prototype.playFirstVideo = function() {
   this.currentPos_ = 0;
   this.reloadCurrentVideo_(this.onFirstVideoReady_.wrap(this));
 };
 
@@ skipping 162 matching lines @@
 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.playFirstVideo.wrap(player));
 }.wrap(null));