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

Tab focus and caption position fixes (fixes #61, fixes #92)

Browse Source
This commit is contained in:
Sam Potts
2015-07-25 18:30:47 +10:00
parent 4dbbbd04cc
commit df64fdac9e
12 changed files with 98 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.2.1
// plyr.js v1.2.2
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -59,7 +59,7 @@
loading: "loading",
tooltip: "player-tooltip",
hidden: "sr-only",
hover: "hover",
hover: "player-hover",
captions: {
enabled: "captions-enabled",
active: "captions-active"
@ -1322,7 +1322,7 @@
// Show the player controls
function _showControls() {
// Set shown class
_toggleClass(player.controls, config.classes.hover, true);
_toggleClass(player.container, config.classes.hover, true);
// Clear timer every movement
window.clearTimeout(hoverTimer);
@ -1330,7 +1330,7 @@
// If the mouse is not over the controls, set a timeout to hide them
if(!isMouseOver) {
hoverTimer = window.setTimeout(function() {
_toggleClass(player.controls, config.classes.hover, false);
_toggleClass(player.container, config.classes.hover, false);
}, 2000);
}
}
@ -1675,6 +1675,32 @@
// IE doesn't support input event, so we fallback to change
var inputEvent = (player.browser.name == "IE" ? "change" : "input");
// Detect tab focus
function checkFocus() {
var focused = document.activeElement;
if (!focused || focused == document.body) {
focused = null;
}
else if (document.querySelector){
focused = document.querySelector(":focus");
}
for (var button in player.buttons) {
var element = player.buttons[button];
_toggleClass(element, "tab-focus", (element === focused));
}
}
_on(window, "keyup", function(event) {
var code = (event.keyCode ? event.keyCode : event.which);
if(code == 9) { checkFocus(); }
});
for (var button in player.buttons) {
var element = player.buttons[button];
_on(element, "blur", function() {
_toggleClass(element, "tab-focus", false);
});
}
// Play
_on(player.buttons.play, "click", function() {
_play();

41
src/less/plyr.less
View File

@ -351,9 +351,9 @@
}
}
label:hover .player-tooltip,
input:focus + label .player-tooltip,
input.tab-focus:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
button.tab-focus:focus .player-tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0) scale(1);
@ -596,16 +596,7 @@
.player-video-wrapper {
height: 100%;
width: 100%;
.player-captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
}
}
}
}
.player-controls {
position: absolute;
bottom: 0;
@ -614,13 +605,29 @@
}
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
&.hover {
&.fullscreen-hide-controls.playing {
.player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
}
&.player-hover .player-controls {
transform: translateY(0);
}
.player-captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
.player-captions,
&.fullscreen-hide-controls.playing.player-hover .player-captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
}
}
}

35
src/sass/plyr.scss
View File

@ -594,15 +594,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
.player-video-wrapper {
height: 100%;
width: 100%;
.player-captions {
top: auto;
bottom: 90px;
@media (min-width: $bp-control-split) {
bottom: 60px;
}
}
}
.player-controls {
position: absolute;
@ -612,13 +603,29 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
}
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s .2s ease;
&.hover {
&.fullscreen-hide-controls.playing {
.player-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s .2s ease;
}
&.player-hover .player-controls {
transform: translateY(0);
}
.player-captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
.player-captions,
&.fullscreen-hide-controls.playing.player-hover .player-captions {
top: auto;
bottom: 90px;
@media (min-width: $bp-control-split) {
bottom: 60px;
}
}
}