Airplay and PiP

src/js/plyr.js

@@ -150,6 +150,10 @@
                 enabled: 'plyr--pip-enabled',
                 active: 'plyr--pip-active'
             },
+            airplay: {
+                enabled: 'plyr--airplay-enabled',
+                active: 'plyr--airplay-active'
+            },
             tabFocus: 'tab-focus'
         },
         captions: {
@@ -609,6 +613,19 @@
         return matches.call(element, selector);
     }
 
+    // Get the focused element
+    function getFocusElement() {
+        var focused = document.activeElement;
+
+        if (!focused || focused === document.body) {
+            focused = null;
+        } else {
+            focused = document.querySelector(':focus');
+        }
+
+        return focused;
+    }
+
     // Bind along with custom handler
     function proxy(element, eventName, customListener, defaultListener, useCapture) {
         on(element, eventName, function(event) {
@@ -2399,7 +2416,10 @@
                 }
 
                 // Check for picture-in-picture support
-                toggleClass(player.elements.container, config.classes.pip.enabled, support.pip);
+                toggleClass(player.elements.container, config.classes.pip.enabled, support.pip && player.type === 'video');
+
+                // Check for airplay support
+                toggleClass(player.elements.container, config.classes.airplay.enabled, support.airplay && player.type === 'video');
 
                 // If there's no autoplay attribute, assume the video is stopped and add state class
                 toggleClass(player.elements.container, config.classes.stopped, config.autoplay);
@@ -3922,19 +3942,6 @@
                 }
             }
 
-            // Get the focused element
-            function getFocusElement() {
-                var focused = document.activeElement;
-
-                if (!focused || focused === document.body) {
-                    focused = null;
-                } else {
-                    focused = document.querySelector(':focus');
-                }
-
-                return focused;
-            }
-
             // Get the key code for an event
             function getKeyCode(event) {
                 return event.keyCode ? event.keyCode : event.which;
@@ -4174,10 +4181,20 @@
 
             // Picture-in-Picture
             proxy(player.elements.buttons.pip, 'click', config.listeners.pip, function(event) {
-                // TODO: Check support here
+                if (!support.pip) {
+                    return;
+                }
                 player.elements.media.webkitSetPresentationMode(player.elements.media.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
             });
 
+            // Airplay
+            proxy(player.elements.buttons.airplay, 'click', config.listeners.airplay, function(event) {
+                if (!support.airplay) {
+                    return;
+                }
+                player.elements.media.webkitShowPlaybackTargetPicker();
+            });
+
             // Settings menu
             on(player.elements.settings.menu, 'click', function(event) {
                 // Settings menu

src/less/plyr.less

@@ -466,11 +466,15 @@
 
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'] {
+.plyr [data-plyr='fullscreen'],
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'] {
     display: none;
 }
 .plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--fullscreen-enabled [data-plyr='fullscreen'],
+.plyr--pip-enabled [data-plyr='pip'],
+.plyr--airplay-enabled [data-plyr='airplay'] {
     display: inline-block;
 }
 
@@ -502,7 +506,6 @@
         animation: plyr-popup .2s ease;
 
         background: @plyr-menu-bg;
-        box-shadow: 0 1px 0 fade(#000, 20%);
         border-radius: 4px;
 
         white-space: nowrap;