Add initial AirPlay support (#659)

src/components/htmlvideoplayer/plugin.js

@@ -1523,6 +1523,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             }
         }
 
+        if (browser.safari || browser.iOS || browser.iPad) {
+            list.push('AirPlay')
+        }
+
         list.push('SetBrightness');
         list.push("SetAspectRatio")
 
@@ -1631,6 +1635,31 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         return false;
     };
 
+    HtmlVideoPlayer.prototype.isAirPlayEnabled = function () {
+
+        if (document.AirPlayEnabled) {
+            return document.AirplayElement ? true : false;
+        }
+
+        return false;
+    };
+
+    HtmlVideoPlayer.prototype.setAirPlayEnabled = function (isEnabled) {
+        var video = this._mediaElement;
+
+        if (document.AirPlayEnabled) {
+            if (video) {
+                if (isEnabled) {
+                    video.requestAirPlay().catch(onAirPlayError);
+                } else {
+                    document.exitAirPLay().catch(onAirPlayError);
+                }
+            }
+        } else {
+            video.webkitShowPlaybackTargetPicker();
+        }
+    };
+
     HtmlVideoPlayer.prototype.setBrightness = function (val) {
 
         var elem = this._mediaElement;
@@ -1784,6 +1813,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         return this.setPictureInPictureEnabled(!this.isPictureInPictureEnabled());
     };
 
+    HtmlVideoPlayer.prototype.toggleAirPlay = function () {
+        return this.setAirPlayEnabled(!this.isAirPlayEnabled());
+    };
+
     HtmlVideoPlayer.prototype.getBufferedRanges = function () {
         var mediaElement = this._mediaElement;
         if (mediaElement) {

src/components/playback/playbackmanager.js

@@ -1540,6 +1540,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             return player.togglePictureInPicture();
         };
 
+        self.toggleAirPlay = function (player) {
+            player = player || self._currentPlayer;
+            return player.toggleAirPlay();
+        };
+
         self.getSubtitleStreamIndex = function (player) {
 
             player = player || self._currentPlayer;
@@ -3854,6 +3859,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 if (player.supports('PictureInPicture')) {
                     list.push('PictureInPicture');
                 }
+                if (player.supports('AirPlay')) {
+                    list.push('AirPlay');
+                }
                 if (player.supports('SetBrightness')) {
                     list.push('SetBrightness');
                 }

src/controllers/videoosd.js

@@ -789,6 +789,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
                 view.querySelector(".btnPip").classList.remove("hide");
             }
 
+            if (-1 === supportedCommands.indexOf("AirPlay")) {
+                view.querySelector(".btnAirPlay").classList.add("hide");
+            } else {
+                view.querySelector(".btnAirPlay").classList.remove("hide");
+            }
+
             updateFullscreenIcon();
         }
 
@@ -1306,6 +1312,9 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         view.querySelector(".btnPip").addEventListener("click", function () {
             playbackManager.togglePictureInPicture(currentPlayer);
         });
+        view.querySelector(".btnAirPlay").addEventListener("click", function () {
+            playbackManager.toggleAirPlay(currentPlayer);
+        });
         view.querySelector(".btnVideoOsdSettings").addEventListener("click", onSettingsButtonClick);
         view.addEventListener("viewhide", function () {
             headerElement.classList.remove("hide");

src/videoosd.html

@@ -72,6 +72,9 @@
                 <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
                     <i class="xlargePaperIconButton md-icon">picture_in_picture_alt</i>
                 </button>
+                <button is="paper-icon-button-light" class="btnAirPlay hide autoSize" title="${AirPlay}">
+                    <i class="xlargePaperIconButton md-icon">airplay</i>
+                </button>
 
                 <div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>