enable airplay for audioplayer

src/components/nowPlayingBar/nowPlayingBar.js

@@ -32,6 +32,7 @@ import { appRouter } from '../appRouter';
     let volumeSliderContainer;
     let playPauseButtons;
     let positionSlider;
+    let toggleAirPlayButton;
     let toggleRepeatButton;
     let toggleRepeatButtonIcon;
 
@@ -80,6 +81,8 @@ import { appRouter } from '../appRouter';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
+        html += '<button is="paper-icon-button-light" class="btnAirPlay mediaButton"><span class="material-icons airplay" aria-hidden="true"></span></button>';
+
         html += '<button is="paper-icon-button-light" class="toggleRepeatButton mediaButton"><span class="material-icons repeat" aria-hidden="true"></span></button>';
         html += '<button is="paper-icon-button-light" class="btnShuffleQueue mediaButton"><span class="material-icons shuffle" aria-hidden="true"></span></button>';
 
@@ -190,6 +193,13 @@ import { appRouter } from '../appRouter';
             }
         });
 
+        toggleAirPlayButton = elem.querySelector('.btnAirPlay');
+        toggleAirPlayButton.addEventListener('click', function () {
+            if (currentPlayer) {
+                playbackManager.toggleAirPlay(currentPlayer);
+            }
+        });
+
         elem.querySelector('.btnShuffleQueue').addEventListener('click', function () {
             if (currentPlayer) {
                 playbackManager.toggleQueueShuffleMode();
@@ -326,6 +336,12 @@ import { appRouter } from '../appRouter';
             toggleRepeatButton.classList.remove('hide');
         }
 
+        if (supportedCommands.indexOf('AirPlay') === -1) {
+            toggleAirPlayButton.classList.add('hide');
+        } else {
+            toggleAirPlayButton.classList.remove('hide');
+        }
+
         updateRepeatModeDisplay(playbackManager.getRepeatMode());
         onQueueShuffleModeChange();
 

src/plugins/htmlAudioPlayer/plugin.js

@@ -347,6 +347,10 @@ class HtmlAudioPlayer {
         return getDefaultProfile();
     }
 
+    toggleAirPlay() {
+        return this.setAirPlayEnabled(!this.isAirPlayEnabled());
+    }
+
     // Save this for when playback stops, because querying the time at that point might return 0
     currentTime(val) {
         const mediaElement = this._mediaElement;
@@ -488,6 +492,33 @@ class HtmlAudioPlayer {
         return false;
     }
 
+    isAirPlayEnabled() {
+        if (document.AirPlayEnabled) {
+            return !!document.AirplayElement;
+        }
+        return false;
+    }
+
+    setAirPlayEnabled(isEnabled) {
+        const mediaElement = this._mediaElement;
+
+        if (document.AirPlayEnabled) {
+            if (mediaElement) {
+                if (isEnabled) {
+                    mediaElement.requestAirPlay().catch(function(err) {
+                        console.error('Error requesting AirPlay', err);
+                    });
+                } else {
+                    document.exitAirPLay().catch(function(err) {
+                        console.error('Error exiting AirPlay', err);
+                    });
+                }
+            }
+        } else {
+            mediaElement.webkitShowPlaybackTargetPicker();
+        }
+    }
+
     supports(feature) {
         if (!supportedFeatures) {
             supportedFeatures = getSupportedFeatures();
@@ -507,6 +538,10 @@ function getSupportedFeatures() {
         list.push('PlaybackRate');
     }
 
+    if (browser.safari || browser.iOS || browser.iPad) {
+        list.push('AirPlay');
+    }
+
     return list;
 }