Add AirPlay button to overflow menu

build/types/ui

@@ -7,6 +7,7 @@
 +../../ui/externs/ui.js
 +../../ui/play_button.js
 +../../ui/big_play_button.js
++../../ui/airplay_button.js
 +../../ui/cast_button.js
 +../../ui/controls.js
 +../../ui/constants.js

docs/tutorials/ui-customization.md

@@ -75,6 +75,8 @@ The following buttons can be added to the overflow menu:
   that support it. Button is invisible on other browsers.
 * loop: adds a button that controls if the currently selected video is played in a loop.
 * playback_rate: adds a button that controls the playback rate selection.
+* airplay: adds a button that opens a AirPlay dialog. The button is visible only if the browser
+  supports AirPlay.
 <!-- TODO: If we add more buttons that can be put in the order this way, list them here. -->
 
 Example:

externs/airplay.js

@@ -0,0 +1,30 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Externs for HTMLMediaElement which were missing in the
+ * Closure compiler.
+ *
+ * @externs
+ */
+
+
+/** @const */
+var WebKitPlaybackTargetAvailabilityEvent = {};
+
+
+/** @type {boolean} */
+HTMLMediaElement.prototype.webkitCurrentPlaybackTargetIsWireless;
+
+
+/** @type {Function} */
+HTMLMediaElement.prototype.webkitShowPlaybackTargetPicker = function() {};
+
+
+var AirPlayEvent = class extends Event {};
+
+/** @type {String} */
+AirPlayEvent.prototype.availability;

shaka-player.uncompiled.js

@@ -62,6 +62,7 @@ goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.AudioLanguageSelection');
 goog.require('shaka.ui.AdCounter');
 goog.require('shaka.ui.AdPosition');
+goog.require('shaka.ui.AirPlayButton');
 goog.require('shaka.ui.BigPlayButton');
 goog.require('shaka.ui.CastButton');
 goog.require('shaka.ui.Element');

ui/airplay_button.js

@@ -0,0 +1,155 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.AirPlayButton');
+
+goog.require('goog.asserts');
+goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Locales');
+goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.Utils');
+goog.require('shaka.util.Dom');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.AirPlayButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLButtonElement} */
+    this.airplayButton_ = shaka.util.Dom.createButton();
+    this.airplayButton_.classList.add('shaka-airplay-button');
+    this.airplayButton_.setAttribute('aria-pressed', 'false');
+
+    /** @private {!HTMLElement} */
+    this.airplayIcon_ = shaka.util.Dom.createHTMLElement('i');
+    this.airplayIcon_.classList.add('material-icons-round');
+    this.airplayIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
+    this.airplayButton_.appendChild(this.airplayIcon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+    this.airplayNameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.airplayNameSpan_);
+
+    this.airplayCurrentSelectionSpan_ =
+      shaka.util.Dom.createHTMLElement('span');
+    this.airplayCurrentSelectionSpan_.classList.add(
+        'shaka-current-selection-span');
+    label.appendChild(this.airplayCurrentSelectionSpan_);
+    this.airplayButton_.appendChild(label);
+    this.parent.appendChild(this.airplayButton_);
+
+    // Setup strings in the correct language
+    this.updateLocalizedStrings_();
+
+    // Setup button display and state according to the current airplay status
+    this.onAirPlayStatusChange_();
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          this.updateLocalizedStrings_();
+        });
+
+    this.eventManager.listen(this.airplayButton_, 'click', () => {
+      this.onAirPlayClick_();
+    });
+
+    const video = this.controls.getVideo();
+    goog.asserts.assert(video != null, 'Should have a video!');
+
+    this.eventManager.listen(video,
+        'webkitplaybacktargetavailabilitychanged', (e) => {
+          const event = /** @type {!AirPlayEvent} */ (e);
+          this.onAirPlayAvailabilityChange_(event);
+        });
+
+    this.eventManager.listen(video,
+        'webkitcurrentplaybacktargetiswirelesschanged', () => {
+          this.onAirPlayStatusChange_();
+        });
+  }
+
+
+  /**
+   * @private
+   */
+  onAirPlayClick_() {
+    const video = this.controls.getVideo();
+    goog.asserts.assert(video != null, 'Should have a video!');
+    video.webkitShowPlaybackTargetPicker();
+  }
+
+  /**
+   * @private
+   */
+  onAirPlayAvailabilityChange_(e) {
+    const canCast = e.availability == 'available';
+    const loadMode = this.player.getLoadMode();
+    const srcMode = loadMode == shaka.Player.LoadMode.SRC_EQUALS;
+    shaka.ui.Utils.setDisplay(this.airplayButton_, canCast && srcMode);
+  }
+
+
+  /**
+   * @private
+   */
+  onAirPlayStatusChange_() {
+    const video = this.controls.getVideo();
+    goog.asserts.assert(video != null, 'Should have a video!');
+    const isCasting = video && video.webkitCurrentPlaybackTargetIsWireless;
+
+    // Aria-pressed set to true when casting, set to false otherwise.
+    if (isCasting) {
+      this.airplayButton_.setAttribute('aria-pressed', 'true');
+    } else {
+      this.airplayButton_.setAttribute('aria-pressed', 'false');
+    }
+  }
+
+
+  /**
+   * @private
+   */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+
+    this.airplayButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
+        this.localization.resolve(LocIds.AIRPLAY));
+    this.airplayNameSpan_.textContent =
+        this.localization.resolve(LocIds.AIRPLAY);
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.AirPlayButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.AirPlayButton(rootElement, controls);
+  }
+};
+
+shaka.ui.OverflowMenu.registerElement(
+    'airplay', new shaka.ui.AirPlayButton.Factory());

ui/enums.js

@@ -37,4 +37,5 @@ shaka.ui.Enums.MaterialDesignIcons = {
   'PLAYBACK_RATE': 'slow_motion_video',
   'PAUSE': 'pause',
   'LOOP': 'loop',
+  'AIRPLAY': 'airplay',
 };

ui/locales/en.json

@@ -2,6 +2,7 @@
   "AD_DURATION": "Ad duration",
   "AD_PROGRESS": "Ad [AD_ON] of [NUM_ADS]",
   "AD_TIME": "Ad: [AD_TIME]",
+  "AIRPLAY": "AirPlay",
   "AUTO_QUALITY": "Auto",
   "BACK": "Back",
   "CAPTIONS": "Captions",

ui/locales/source.json

@@ -11,6 +11,10 @@
     "description": "The text content of a label that shows how much time is left in the current ad.",
     "message": "Ad: [AD_TIME:0:05/0:10]"
   },
+  "AIRPLAY": {
+    "description": "Label for a button used to open the native AirPlay dialog in the browser and select a destination to AirPlay to.",
+    "message": "AirPlay"
+  },
   "AUTO_QUALITY": {
     "description": "Label for a button used to allow the video player to select the resolution/quality of the video automatically.",
     "meaning": "Automatic",

ui/ui.js

@@ -203,6 +203,11 @@ shaka.ui.Overlay = class {
       forceLandscapeOnFullscreen: true,
     };
 
+    // Check AirPlay support
+    if (window.WebKitPlaybackTargetAvailabilityEvent) {
+      config.overflowMenuButtons.push('airplay');
+    }
+
     // On mobile, by default, hide the volume slide and the small play/pause
     // button and show the big play/pause button in the center.
     // This is in line with default styles in Chrome.