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 256 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;
+    videoElementInitializePromise = new Promise(function(fulfill, reject) {

[hirono, 2014/07/24 02:12:37]

To relay rejected states, the videoElementInitializePromise should be composed
from the other promises.

1. Assign the returning value of 'then' at 304 to the variable.
2. Wrap chrome.cast.request at #308 with 'new Promise' and return the promise as
the result value of the callback function for then at 304.

[yoshiki, 2014/07/24 02:57:32]

I'm not sure but can't we call the outer reject inside the inner promise
directly?

[hirono, 2014/07/24 03:42:49]

We can. But currently if downloadUrlPromise or mimePromise is rejected, the
outer promise does not fulfilled/rejected because
Promise.all([downloadUrlPromise, mimePromise]) is also rejected, and thus the
following then's callback is not invoked.

Composing promises is a good practice (I think) to ensure to convey rejected
states to the last promise.

[yoshiki, 2014/07/24 05:19:00]

I agree this. How about the current code?

[hirono, 2014/07/24 05:46:09]

It looks good. But I would rather stop nesting 'new Promise'. It makes the
indent shallow and frees us from having both fulfill/reject and
innerFulfill/innerReject. 

[yoshiki, 2014/07/24 06:03:22]

Done.

+      videoPlayerElement.setAttribute('casting', true);
+
+      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(innerFulfill, innerReject) {
+        chrome.fileBrowserPrivate.getDownloadUrl(video.url, innerFulfill);
+      }.wrap());

[hirono, 2014/07/24 02:12:36]

We don't need to wrap the function for Promise. Because Promise is rejected
automatically if the function throw an exception.
Instead, you should call 'catch' function for the eventual composed promise,
which is the return value of then at #331 in this case.

[yoshiki, 2014/07/24 02:57:32]

Done.

+
+      var mimePromise = new Promise(function(innerFulfill, innerReject) {
+        chrome.fileBrowserPrivate.getDriveEntryProperties(
+            [video.entry.toURL()],
+            function(props) {
+              if (!props || props.length === 0 || !props[0].contentMimeType) {
+                // TODO(yoshiki): Adds a logic to guess the mime.
+                innerFulfill('');
+              }
+              innerFulfill(props[0].contentMimeType);
+            }.wrap());
+      }.wrap());
+
+      Promise.all([downloadUrlPromise, mimePromise]).then(function(results) {
+        var downloadUrl = results[0];
+        var mime = results[1];
+
+        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);
+      }.wrap(this));
+    }.wrap(this));
   } else {
-    videoPlayerElement.removeAttribute('casting');
+    videoElementInitializePromise = new Promise(function(fulfill, reject) {
+      videoPlayerElement.removeAttribute('casting');
 
-    this.videoElement_ = document.createElement('video');
-    document.querySelector('#video-container').appendChild(this.videoElement_);
+      this.videoElement_ = document.createElement('video');
+      document.querySelector('#video-container').appendChild(
+          this.videoElement_);
 
-    this.controls.attachMedia(this.videoElement_);
-    this.videoElement_.src = url;
+      this.controls.attachMedia(this.videoElement_);
+      this.videoElement_.src = video.url;
+      fulfill();
+    }.wrap(this));
   }
 
-  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) {
+        console.log('loaded: ', currentPos, this.currentPos_);

[hirono, 2014/07/24 02:12:37]

nit: debug log?

[yoshiki, 2014/07/24 02:57:32]

Done.

+        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);
+    }
+  }.wrap(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));