diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 47 | ||||
| -rw-r--r-- | src/less/plyr.less | 9 |
2 files changed, 38 insertions, 18 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index aa1163d0..42124ea4 100644 --- a/src/js/plyr.js +++ b/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 diff --git a/src/less/plyr.less b/src/less/plyr.less index 45b81d5c..8e08cf40 100644 --- a/src/less/plyr.less +++ b/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; |