Show Cast receiver device name

Issue #261

Change-Id: Ia91178810c5ad4d353b9c96e396fda2ba4bfcff2

demo/controls.css

@@ -100,6 +100,21 @@
   cursor: pointer;
 }
 
+#castReceiverName {
+  display: none;
+
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 150%;
+  padding: 5px;
+
+  bottom: 50px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: max-content;
+}
+
 #giantPlayButtonContainer {
   margin: auto;
   width: 200px;

demo/controls.js

@@ -74,6 +74,9 @@ function ShakaControls() {
   /** @private {Element} */
   this.castButton_ = document.getElementById('castButton');
 
+  /** @private {Element} */
+  this.castReceiverName_ = document.getElementById('castReceiverName');
+
   /** @private {Element} */
   this.bufferingSpinner_ = document.getElementById('bufferingSpinner');
 
@@ -477,6 +480,10 @@ ShakaControls.prototype.onCastStatusChange_ = function(event) {
   this.notifyCastStatus_(isCasting);
   this.castButton_.style.display = canCast ? 'inherit' : 'none';
   this.castButton_.textContent = isCasting ? 'cast_connected' : 'cast';
+  this.castReceiverName_.style.display =
+      isCasting ? 'inherit' : 'none';
+  this.castReceiverName_.textContent =
+      isCasting ? 'Casting to ' + this.castProxy_.receiverName() : '';
   this.controls_.classList.toggle('casting', this.castProxy_.isCasting());
 };
 

demo/index.html

@@ -169,6 +169,7 @@ <h1>Shaka Player <span id="version"></span></h1>
                     fill="none" stroke-width="2" stroke-miterlimit="10" />
           </svg>
         </div>
+        <div id="castReceiverName" class="overlay"></div>
         <div id="controlsContainer" class="overlay"><div id="controls">
           <button id="playPauseButton" class="material-icons">play_arrow</button>
           <input id="seekBar" type="range" step="any" min="0" max="1" value="0">

externs/chromecast.js

@@ -233,6 +233,18 @@ chrome.cast.Error.prototype.details;
 
 
 
+/**
+ * @constructor
+ * @struct
+ */
+chrome.cast.Receiver = function() {};
+
+
+/** @const {string} */
+chrome.cast.Receiver.prototype.friendlyName;
+
+
+
 /**
  * @constructor
  * @struct
@@ -248,6 +260,10 @@ chrome.cast.Session.prototype.sessionId;
 chrome.cast.Session.prototype.status;
 
 
+/** @type {chrome.cast.Receiver} */
+chrome.cast.Session.prototype.receiver;
+
+
 /**
  * @param {string} namespace
  * @param {Function} listener

lib/cast/cast_proxy.js

@@ -157,6 +157,15 @@ shaka.cast.CastProxy.prototype.isCasting = function() {
 };
 
 
+/**
+ * @return {string} The name of the Cast receiver device, if isCasting().
+ * @export
+ */
+shaka.cast.CastProxy.prototype.receiverName = function() {
+  return this.sender_ ? this.sender_.receiverName() : '';
+};
+
+
 /**
  * @return {!Promise} Resolved when connected to a receiver.  Rejected if the
  *   connection fails or is canceled by the user.

lib/cast/cast_sender.js

@@ -61,6 +61,9 @@ shaka.cast.CastSender =
   /** @private {boolean} */
   this.isCasting_ = false;
 
+  /** @private {string} */
+  this.receiverName_ = '';
+
   /** @private {Object} */
   this.appData_ = null;
 
@@ -128,6 +131,14 @@ shaka.cast.CastSender.prototype.isCasting = function() {
 };
 
 
+/**
+ * @return {string} The name of the Cast receiver device, if isCasting().
+ */
+shaka.cast.CastSender.prototype.receiverName = function() {
+  return this.receiverName_;
+};
+
+
 /**
  * @return {boolean} True if we have a cache of remote properties from the
  *   receiver.
@@ -449,6 +460,7 @@ shaka.cast.CastSender.prototype.onConnectionStatusChanged_ = function() {
   }
 
   this.isCasting_ = connected;
+  this.receiverName_ = connected ? this.session_.receiver.friendlyName : '';
   this.onStatusChanged_();
 };
 

test/cast/cast_proxy_unit.js

@@ -100,6 +100,15 @@ describe('CastProxy', function() {
     });
   });
 
+  describe('receiverName', function() {
+    it('delegates directly to the sender', function() {
+      mockSender.receiverName.and.returnValue('abc');
+      expect(proxy.receiverName()).toBe('abc');
+      mockSender.receiverName.and.returnValue('xyz');
+      expect(proxy.receiverName()).toBe('xyz');
+    });
+  });
+
   describe('setAppData', function() {
     it('delegates directly to the sender', function() {
       var fakeAppData = {key: 'value'};
@@ -645,6 +654,7 @@ describe('CastProxy', function() {
       apiReady: jasmine.createSpy('apiReady'),
       hasReceivers: jasmine.createSpy('hasReceivers'),
       isCasting: jasmine.createSpy('isCasting'),
+      receiverName: jasmine.createSpy('receiverName'),
       hasRemoteProperties: jasmine.createSpy('hasRemoteProperties'),
       setAppData: jasmine.createSpy('setAppData'),
       disconnect: jasmine.createSpy('disconnect'),

test/cast/cast_sender_unit.js

@@ -619,6 +619,7 @@ describe('CastSender', function() {
     var session = {
       messages: [],
       status: 'connected',
+      receiver: { friendlyName: 'SomeDevice' },
       addUpdateListener: jasmine.createSpy('Session.addUpdateListener'),
       addMessageListener: jasmine.createSpy('Session.addMessageListener'),
       sendMessage: jasmine.createSpy('Session.sendMessage'),