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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- 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> </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.1.12/plyr.css?1"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.13/plyr.css?1">
<!-- Docs styles --> <!-- 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> </head>
<body> <body>
<header> <header>
@ -88,13 +88,13 @@
b.insertBefore(c, b.childNodes[0]); 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> </script>
<!-- Plyr core 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 --> <!-- 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> </body>
</html> </html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.1.12", "version": "1.1.13",
"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

@ -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. 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 ### Bower
If bower is your thang, you can grab Plyr using: 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: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.12/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.13/plyr.css">
<script src="https://cdn.plyr.io/1.1.12/plyr.js"></script> <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 ### 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.

46
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.1.11 // plyr.js v1.1.13
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -902,8 +902,7 @@
_showCaptions(player); _showCaptions(player);
// Disable unsupported browsers than report false positive // Disable unsupported browsers than report false positive
if ((player.browser.name === "IE" && player.browser.version === 10) || 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 === "Firefox" && player.browser.version >= 31) ||
(player.browser.name === "Chrome" && player.browser.version >= 43) || (player.browser.name === "Chrome" && player.browser.version >= 43) ||
(player.browser.name === "Safari" && player.browser.version >= 7)) { (player.browser.name === "Safari" && player.browser.version >= 7)) {
@ -1147,9 +1146,39 @@
// Set class hook // Set class hook
_toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen); _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
// Remove hover class because mouseleave doesn't occur // Toggle controls visibility based on mouse movement and location
if (player.isFullscreen) { 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); _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 // Destroy an instance

8
src/less/plyr.less
View File

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