Video Player: Add a message which is shown on casting

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 117 matching lines @@
 
 /**
  * @constructor
  */
 function VideoPlayer() {
   this.controls_ = null;
   this.videoElement_ = null;
   this.videos_ = null;
   this.currentPos_ = 0;
 
+  this.currentCast_ = null;
+
   Object.seal(this);
 }
 
 VideoPlayer.prototype = {
   get controls() {
     return this.controls_;
   }
 };
 
 /**
@@ skipping 117 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;
 
-  this.videoElement_ = document.createElement('video');
-  document.querySelector('#video-container').appendChild(this.videoElement_);
-  this.controls.attachMedia(this.videoElement_);
+  if (this.currentCast_) {
+    videoPlayerElement.setAttribute('casting', true);
+    this.videoElement_ = new CastVideoElement();
+    this.controls.attachMedia(this.videoElement_);
 
-  this.videoElement_.src = url;
+    document.querySelector('#cast-name-label').textContent =
+        loadTimeData.getString('VIDEO_PLAYER_PLAYING_ON');;
+    document.querySelector('#cast-name').textContent = this.currentCast_.name;
+  } else {
+    videoPlayerElement.removeAttribute('casting');
+
+    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) {
     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 first video.
  */
 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_)
+  if (this.videoElement_ && this.videoElement_.parentNode)
     this.videoElement_.parentNode.removeChild(this.videoElement_);
   this.videoElement_ = null;
 };
 
 /**
  * Called when the first video is ready after starting to load.
  * @private
  */
 VideoPlayer.prototype.onFirstVideoReady_ = function() {
   var videoWidth = this.videoElement_.videoWidth;
@@ skipping 55 matching lines @@
  *
  * @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);
 };
 
 /**
+ * Invokes when a menuitem in the cast menu is selected.
+ * @param {Object} cast Selected element in the list of casts.
+ */
+VideoPlayer.prototype.onCastSelected_ = function(cast) {
+  // If the selected item is same as the current item, do nothing.
+  if ((this.currentCast_ && this.currentCast_.name) === (cast && cast.name))
+    return;
+
+  this.currentCast_ = cast || null;
+  this.reloadCurrentVideo_();
+};
+
+/**
  * Set the list of casts.
  * @param {Array.<Object>} casts List of casts.
  */
 VideoPlayer.prototype.setCastList = function(casts) {
   var button = document.querySelector('.cast-button');
   var menu = document.querySelector('#cast-menu');
   menu.innerHTML = '';
 
+  // TODO(yoshiki): Handle the case that the current cast disapears.
+
   if (casts.length === 0) {
     button.classList.add('hidden');
+    if (!this.currentCast_) {
+      this.currentCast_ = null;
+      this.reloadCurrentVideo_();
+    }
     return;
   }
 
+  var item = new cr.ui.MenuItem();
+  item.label = loadTimeData.getString('VIDEO_PLAYER_PLAY_THIS_COMPUTER');
+  item.addEventListener('activate', this.onCastSelected_.wrap(this, null));
+  menu.appendChild(item);
+
   for (var i = 0; i < casts.length; i++) {
     var item = new cr.ui.MenuItem();
-    item.textContent = casts[i].name;
+    item.label = casts[i].name;
+    item.addEventListener('activate',
+                          this.onCastSelected_.wrap(this, casts[i]));
     menu.appendChild(item);
   }
   button.classList.remove('hidden');
 };
 
 /**
  * Initialize the list of videos.
  * @param {function(Array.<Object>)} callback Called with the video list when
  *     it is ready.
  */
@@ skipping 29 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));