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

Minor tweak to hiding controls in fullscreen

Browse Source
This commit is contained in:
Sam Potts 2015-06-08 21:43:49 +10:00
parent f398266206
commit f41854ebe7
8 changed files with 52 additions and 34 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

2
docs/error.html
View File

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

10
docs/index.html
View File

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

2
package.json
View File

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

8
readme.md
View File

@ -37,7 +37,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.
**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.1.12/plyr.js` to `https://cdn.plyr.io/1.1.12/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.1.13/plyr.js` to `https://cdn.plyr.io/1.1.13/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@ -57,11 +57,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:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.12/plyr.css">
<script src="https://cdn.plyr.io/1.1.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.13/plyr.css">
<script src="https://cdn.plyr.io/1.1.13/plyr.js"></script>
```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.12/sprite.svg`.
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.13/sprite.svg`.
### 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.

52
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.1.11
// plyr.js v1.1.13
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -902,11 +902,10 @@
_showCaptions(player);
// Disable unsupported browsers than report false positive
if ((player.browser.name === "IE" && player.browser.version === 10) ||
(player.browser.name === "IE" && player.browser.version === 11) ||
(player.browser.name === "Firefox" && player.browser.version >= 31) ||
(player.browser.name === "Chrome" && player.browser.version >= 43) ||
(player.browser.name === "Safari" && player.browser.version >= 7)) {
if ((player.browser.name === "IE" && player.browser.version >= 10) ||
(player.browser.name === "Firefox" && player.browser.version >= 31) ||
(player.browser.name === "Chrome" && player.browser.version >= 43) ||
(player.browser.name === "Safari" && player.browser.version >= 7)) {
// Debugging
_log("Detected unsupported browser for HTML5 captions. Using fallback.");
@ -1147,9 +1146,39 @@
// Set class hook
_toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
// Remove hover class because mouseleave doesn't occur
if (player.isFullscreen) {
// Toggle controls visibility based on mouse movement and location
var hoverTimer, isMouseOver = false;
// Show the player controls
function _showControls() {
// Set shown class
_toggleClass(player.controls, config.classes.hover, true);
// Clear timer every movement
window.clearTimeout(hoverTimer);
// 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);
}, 2000);
}
}
// Check mouse is over the controls
function _setMouseOver (event) {
isMouseOver = (event.type === "mouseenter");
}
if(config.fullscreen.hideControls) {
// Hide on entering full screen
_toggleClass(player.controls, config.classes.hover, false);
// Keep an eye on the mouse location in relation to controls
_toggleHandler(player.controls, "mouseenter mouseleave", _setMouseOver, player.isFullscreen);
// Show the controls on mouse move
_toggleHandler(player.container, "mousemove", _showControls, player.isFullscreen);
}
}
@ -1541,13 +1570,6 @@
}
});
}
// Bind to mouse hover
if(config.fullscreen.hideControls) {
_on(player.controls, "mouseenter mouseleave", function(event) {
_toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
});
}
}
// Destroy an instance

8
src/less/plyr.less
View File

@ -564,12 +564,9 @@
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
@media (min-width: @bp-control-split) {
bottom: 60px;
}
@media (min-width: @bp-captions-large) {
bottom: 80px;
}
}
}
.player-controls {
@ -582,11 +579,10 @@
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s 1s ease;
transition: transform .3s .2s ease;
&.hover {
transform: translateY(0);
transition-delay: 0;
}
}
}