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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
changelog.md
View File

@ -1,7 +1,14 @@
# Changelog # Changelog
## v1.2.2
- Fix for :focus keyboard vs mouse (Fixes #61)
- Fix for caption positioning in full screen (Fixes #92)
## v1.2.1
- Tooltip bug fix
## v1.2.0 ## v1.2.0
- Added YouTube support. - Added YouTube support
## v1.1.13 ## v1.1.13
- Added icon prefix option for when using default controls - Added icon prefix option for when using default controls

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

2
docs/dist/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.2.1/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.2.2/docs.css">
</head> </head>
<body> <body>
<main> <main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/plyr.css?1"> <link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/plyr.css?1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/docs.css?4"> <link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/docs.css?4">
</head> </head>
<body> <body>
<header> <header>
@ -97,13 +97,13 @@
b.insertBefore(c, b.childNodes[0]); b.insertBefore(c, b.childNodes[0]);
} }
} }
})(document, "https://cdn.plyr.io/1.2.1/sprite.svg"); })(document, "https://cdn.plyr.io/1.2.2/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="https://cdn.plyr.io/1.2.1/plyr.js?1"></script> <script src="https://cdn.plyr.io/1.2.2/plyr.js?1"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="https://cdn.plyr.io/1.2.1/docs.js?1"></script> <script src="https://cdn.plyr.io/1.2.2/docs.js?1"></script>
</body> </body>
</html> </html>

1
docs/src/js/docs.js
View File

@ -10,6 +10,7 @@ plyr.setup({
volume: 9, volume: 9,
title: "Video demo", title: "Video demo",
html: templates.controls.render({}), html: templates.controls.render({}),
tooltips: true,
captions: { captions: {
defaultActive: true defaultActive: true
}, },

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.2.1", "version": "1.2.2",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

8
readme.md
View File

@ -39,7 +39,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup. Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.2.1/plyr.js` to `https://cdn.plyr.io/1.2.1/plyr.js` **Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.2.2/plyr.js` to `https://cdn.plyr.io/1.2.2/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -59,11 +59,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/plyr.css">
<script src="https://cdn.plyr.io/1.2.1/plyr.js"></script> <script src="https://cdn.plyr.io/1.2.2/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.1/sprite.svg`. You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.2/sprite.svg`.
### CSS ### CSS
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.

34
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.2.1 // plyr.js v1.2.2
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -59,7 +59,7 @@
loading: "loading", loading: "loading",
tooltip: "player-tooltip", tooltip: "player-tooltip",
hidden: "sr-only", hidden: "sr-only",
hover: "hover", hover: "player-hover",
captions: { captions: {
enabled: "captions-enabled", enabled: "captions-enabled",
active: "captions-active" active: "captions-active"
@ -1322,7 +1322,7 @@
// Show the player controls // Show the player controls
function _showControls() { function _showControls() {
// Set shown class // Set shown class
_toggleClass(player.controls, config.classes.hover, true); _toggleClass(player.container, config.classes.hover, true);
// Clear timer every movement // Clear timer every movement
window.clearTimeout(hoverTimer); window.clearTimeout(hoverTimer);
@ -1330,7 +1330,7 @@
// If the mouse is not over the controls, set a timeout to hide them // If the mouse is not over the controls, set a timeout to hide them
if(!isMouseOver) { if(!isMouseOver) {
hoverTimer = window.setTimeout(function() { hoverTimer = window.setTimeout(function() {
_toggleClass(player.controls, config.classes.hover, false); _toggleClass(player.container, config.classes.hover, false);
}, 2000); }, 2000);
} }
} }
@ -1675,6 +1675,32 @@
// IE doesn't support input event, so we fallback to change // IE doesn't support input event, so we fallback to change
var inputEvent = (player.browser.name == "IE" ? "change" : "input"); 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 // Play
_on(player.buttons.play, "click", function() { _on(player.buttons.play, "click", function() {
_play(); _play();

41
src/less/plyr.less
View File

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