ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://github.com/Selz/plyr into develop

Browse Source 
# Conflicts:
#	dist/plyr.js
This commit is contained in:
Sam Potts 2017-10-08 19:12:55 +11:00
commit 4392abfc49
4 changed files with 51 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

66
src/js/plyr.js
View File

@ -3974,18 +3974,11 @@
var play = player.togglePlay(); var play = player.togglePlay();
// Determine which buttons // Determine which buttons
var trigger = player.elements.buttons[play ? 'play' : 'pause'];
var target = player.elements.buttons[play ? 'pause' : 'play']; var target = player.elements.buttons[play ? 'pause' : 'play'];
// Transfer focus // Transfer focus
if (target && trigger) { if (target) {
if (utils.hasClass(trigger, player.config.classNames.tabFocus)) { target.focus();
setTimeout(function() {
target.focus();
utils.toggleClass(trigger, player.config.classNames.tabFocus, false);
utils.toggleClass(target, player.config.classNames.tabFocus, true);
}, 0);
}
} }
} }
@ -3994,19 +3987,6 @@
return event.keyCode ? event.keyCode : event.which; return event.keyCode ? event.keyCode : event.which;
} }
// Detect tab focus
function checkTabFocus(focused) {
utils.toggleClass(
getElements('.' + player.config.classNames.tabFocus),
player.config.classNames.tabFocus,
false
);
if (player.elements.container.contains(focused)) {
utils.toggleClass(focused, player.config.classNames.tabFocus, true);
}
}
// Keyboard shortcuts // Keyboard shortcuts
if (player.config.keyboard.focused) { if (player.config.keyboard.focused) {
var last = null; var last = null;
@ -4198,31 +4178,24 @@
} }
} }
// Focus/tab management // Detect tab focus
utils.on(window, 'keyup', function(event) { // Remove class on blur/focusout
var code = getKeyCode(event); utils.on(player.elements.container, 'focusout', function(event) {
var focused = utils.getFocusElement();
if (code === 9) {
checkTabFocus(focused);
}
});
utils.on(document.body, 'click', function() {
utils.toggleClass(
getElement('.' + player.config.classNames.tabFocus),
player.config.classNames.tabFocus,
false
);
});
for (var button in player.elements.buttons) {
utils.on(player.elements.buttons[button], 'blur', onBlur);
}
function onBlur(event) {
utils.toggleClass(event.target, player.config.classNames.tabFocus, false); utils.toggleClass(event.target, player.config.classNames.tabFocus, false);
} });
// Add classname to tabbed elements
utils.on(player.elements.container, 'keydown', function(event) {
if (event.keyCode !== 9) {
return;
}
// Delay the adding of classname until the focus has changed
// This event fires before the focusin event
window.setTimeout(function () {
utils.toggleClass(utils.getFocusElement(), player.config.classNames.tabFocus, true);
}, 0);
});
// Trigger custom and default handlers // Trigger custom and default handlers
var handlerProxy = function(event, customHandler, defaultHandler) { var handlerProxy = function(event, customHandler, defaultHandler) {
@ -4372,7 +4345,6 @@
function(event) { function(event) {
player.toggleControls(event); player.toggleControls(event);
}, },
true,
true true
); );
} }

60
src/less/plyr.less
View File

@ -35,7 +35,7 @@
font-weight: @plyr-font-weight-normal; font-weight: @plyr-font-weight-normal;
direction: ltr; direction: ltr;
& when (@plyr-border-box = true) { & when(@plyr-border-box = true) {
// border-box everything // border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/ // http://paulirish.com/2012/box-sizing-border-box-ftw/
&, &,
@ -46,7 +46,7 @@
} }
} }
& when (@plyr-touch-action = true) { & when(@plyr-touch-action = true) {
// Fix 300ms delay // Fix 300ms delay
a, a,
button, button,
@ -57,7 +57,7 @@
} }
// ARIA // ARIA
[aria-hidden='true'] { [aria-hidden="true"] {
display: none; display: none;
} }
@ -77,7 +77,7 @@
// Range inputs // Range inputs
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
input[type='range'] { input[type="range"] {
display: block; display: block;
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%; width: 100%;
@ -137,7 +137,7 @@
&::-moz-focus-outer { &::-moz-focus-outer {
border: 0; border: 0;
} }
&.tab-focus:focus { &.tab-focus {
outline-offset: 3px; outline-offset: 3px;
} }
@ -157,12 +157,12 @@
} }
// Video range inputs // Video range inputs
.plyr--video input[type='range'].tab-focus:focus { .plyr--video input[type="range"].tab-focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%); outline: 1px dotted fade(@plyr-video-control-color, 50%);
} }
// Audio range inputs // Audio range inputs
.plyr--audio input[type='range'].tab-focus:focus { .plyr--audio input[type="range"].tab-focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%); outline: 1px dotted fade(@plyr-audio-control-color, 50%);
} }
@ -172,14 +172,14 @@
overflow: hidden; overflow: hidden;
// !important is not always needed // !important is not always needed
& when (@plyr-sr-only-important = true) { & when(@plyr-sr-only-important = true) {
position: absolute !important; position: absolute !important;
padding: 0 !important; padding: 0 !important;
border: 0 !important; border: 0 !important;
height: 1px !important; height: 1px !important;
width: 1px !important; width: 1px !important;
} }
& when (@plyr-sr-only-important = false) { & when(@plyr-sr-only-important = false) {
position: absolute; position: absolute;
padding: 0; padding: 0;
border: 0; border: 0;
@ -386,9 +386,9 @@
.plyr__control { .plyr__control {
// Hover and tab focus // Hover and tab focus
&.tab-focus:focus, &.tab-focus,
&:hover, &:hover,
&[aria-expanded='true'] { &[aria-expanded="true"] {
background: @plyr-video-control-bg-hover; background: @plyr-video-control-bg-hover;
color: @plyr-video-control-color-hover; color: @plyr-video-control-color-hover;
} }
@ -405,9 +405,9 @@
.plyr__control { .plyr__control {
// Hover and tab focus // Hover and tab focus
&.tab-focus:focus, &.tab-focus,
&:hover, &:hover,
&[aria-expanded='true'] { &[aria-expanded="true"] {
background: @plyr-audio-control-bg-hover; background: @plyr-audio-control-bg-hover;
color: @plyr-audio-control-color-hover; color: @plyr-audio-control-color-hover;
} }
@ -461,11 +461,11 @@
} }
// States // States
.plyr__controls [data-plyr='pause'], .plyr__controls [data-plyr="pause"],
.plyr--playing .plyr__controls [data-plyr='play'] { .plyr--playing .plyr__controls [data-plyr="play"] {
display: none; display: none;
} }
.plyr--playing .plyr__controls [data-plyr='pause'] { .plyr--playing .plyr__controls [data-plyr="pause"] {
display: inline-block; display: inline-block;
} }
@ -481,16 +481,16 @@
} }
// Some options are hidden by default // Some options are hidden by default
.plyr [data-plyr='captions'], .plyr [data-plyr="captions"],
.plyr [data-plyr='fullscreen'], .plyr [data-plyr="fullscreen"],
.plyr [data-plyr='pip'], .plyr [data-plyr="pip"],
.plyr [data-plyr='airplay'] { .plyr [data-plyr="airplay"] {
display: none; display: none;
} }
.plyr--captions-enabled [data-plyr='captions'], .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--pip-enabled [data-plyr="pip"],
.plyr--airplay-enabled [data-plyr='airplay'] { .plyr--airplay-enabled [data-plyr="airplay"] {
display: inline-block; display: inline-block;
} }
@ -503,7 +503,7 @@
.plyr__control svg { .plyr__control svg {
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.plyr__control[aria-expanded='true'] { .plyr__control[aria-expanded="true"] {
svg { svg {
transform: rotate(45deg); transform: rotate(45deg);
} }
@ -668,7 +668,7 @@
&::before { &::before {
// Arrows // Arrows
content: ''; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
@ -684,7 +684,7 @@
} }
} }
.plyr .plyr__control:hover .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.tab-focus:focus .plyr__tooltip, .plyr .plyr__control.tab-focus .plyr__tooltip,
.plyr__tooltip--visible { .plyr__tooltip--visible {
opacity: 1; opacity: 1;
transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1);
@ -722,7 +722,7 @@
.plyr__controls > .plyr__control:first-child + .plyr__control, .plyr__controls > .plyr__control:first-child + .plyr__control,
.plyr__controls > .plyr__control:last-child { .plyr__controls > .plyr__control:last-child {
&:hover .plyr__tooltip, &:hover .plyr__tooltip,
&.tab-focus:focus .plyr__tooltip, &.tab-focus .plyr__tooltip,
.plyr__tooltip--visible { .plyr__tooltip--visible {
transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1);
} }
@ -892,7 +892,7 @@
// Add a slash in before // Add a slash in before
&::before { &::before {
content: '\2044'; content: "\2044";
margin-right: @plyr-control-spacing; margin-right: @plyr-control-spacing;
} }
} }
@ -926,7 +926,7 @@
// It's not supported to change volume using JavaScript: // It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume, .plyr--is-ios .plyr__volume,
.plyr--is-ios [data-plyr='mute'] { .plyr--is-ios [data-plyr="mute"] {
display: none !important; display: none !important;
} }