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

Fix for generated IDs for controls, UI tweak for audio

Browse Source
This commit is contained in:
Sam Potts 2015-04-06 13:25:36 +10:00
parent 1f7f7b10de
commit 99cabd545d
10 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.md
View File

@ -1,5 +1,9 @@
# Changelog
## v1.1.3
- Fixes for random id used in controls with multiple instances and one call to setup
- Audio player UI improvements
## v1.1.2
- Added an onSetup callback option
- Added fullscreen API methods toggleFullscreen() (must be user iniated), and isFullscreen()

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.2/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.1.3/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="//cdn.plyr.io/1.1.2/plyr.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.1.3/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.1.2/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.1.3/docs.css">
</head>
<body>
<header>
@ -83,13 +83,13 @@
b.insertBefore(c, b.childNodes[0]);
}
}
})(document, "https://cdn.plyr.io/1.1.2/sprite.svg");
})(document, "https://cdn.plyr.io/1.1.3/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="//cdn.plyr.io/1.1.2/plyr.js"></script>
<script src="//cdn.plyr.io/1.1.3/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.1.2/docs.js"></script>
<script src="//cdn.plyr.io/1.1.3/docs.js"></script>
</body>
</html>

2
package.json
View File

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

8
readme.md
View File

@ -38,7 +38,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.2/plyr.js` to `https://cdn.plyr.io/1.1.2/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.3/plyr.js` to `https://cdn.plyr.io/1.1.3/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@ -58,11 +58,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. HTTPS (SSL) is supported.
```html
<link rel="stylesheet" href="//cdn.plyr.io/1.1.2/plyr.css">
<script src="//cdn.plyr.io/1.1.2/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.1.3/plyr.css">
<script src="//cdn.plyr.io/1.1.3/plyr.js"></script>
```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.2/sprite.svg`.
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.3/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.

31
src/js/plyr.js
View File

@ -680,22 +680,25 @@
// Insert controls
function _injectControls() {
// Make a copy of the html
var html = config.html;
// Insert custom video controls
_log("Injecting custom controls.");
// If no controls are specified, create default
if(!config.html) {
config.html = _buildControls();
if(!html) {
html = _buildControls();
}
// Replace seek time instances
config.html = _replaceAll(config.html, "{seektime}", config.seekTime);
html = _replaceAll(html, "{seektime}", config.seekTime);
// Replace all id references
config.html = _replaceAll(config.html, "{id}", player.random);
// Replace all id references with random numbers
html = _replaceAll(html, "{id}", Math.floor(Math.random() * (10000)));
// Inject into the container
player.container.insertAdjacentHTML("beforeend", config.html);
player.container.insertAdjacentHTML("beforeend", html);
// Setup tooltips
if(config.tooltips) {
@ -1071,18 +1074,17 @@
// Toggle fullscreen
function _toggleFullscreen(event) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen,
container = player.container;
var nativeSupport = fullscreen.supportsFullScreen;
// If it's a fullscreen change event, it's probably a native close
if(event && event.type === fullscreen.fullScreenEventName) {
player.isFullscreen = fullscreen.isFullScreen(container);
player.isFullscreen = fullscreen.isFullScreen(player.container);
}
// If there's native support, use it
else if(nativeSupport) {
// Request fullscreen
if(!fullscreen.isFullScreen(container)) {
fullscreen.requestFullScreen(container);
if(!fullscreen.isFullScreen(player.container)) {
fullscreen.requestFullScreen(player.container);
}
// Bail from fullscreen
else {
@ -1090,7 +1092,7 @@
}
// Check if we're actually full screen (it could fail)
player.isFullscreen = fullscreen.isFullScreen(container);
player.isFullscreen = fullscreen.isFullScreen(player.container);
}
else {
// Otherwise, it's a simple toggle
@ -1108,7 +1110,7 @@
}
// Set class hook
_toggleClass(container, config.classes.fullscreen.active, player.isFullscreen);
_toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
}
// Bail from faux-fullscreen
@ -1530,9 +1532,6 @@
// Setup media
_setupMedia();
// Generate random number for id/for attribute values for controls
player.random = Math.floor(Math.random() * (10000));
// If there's full support
if(player.supported.full) {
// Inject custom controls

12
src/less/plyr.less
View File

@ -9,6 +9,7 @@
@gray-dark: #343f4a;
@gray: #565d64;
@gray-light: #cbd0d3;
@off-white: #f9fafb;
// Font sizes
@font-size-small: 14px;
@ -527,6 +528,17 @@
float: none;
}
// Audio specific styles
// Position the progress within the container
&-audio .player-controls {
padding-top: (@control-spacing * 2);
}
&-audio .player-progress {
bottom: auto;
top: 0;
background: @off-white;
}
// Full screen mode
&-fullscreen,
&.fullscreen-active {

12
src/sass/plyr.scss
View File

@ -9,6 +9,7 @@ $blue: #3498DB;
$gray-dark: #343f4a;
$gray: #565d64;
$gray-light: #cbd0d3;
$off-white: #f9fafb;
// Font sizes
$font-size-small: 14px;
@ -535,6 +536,17 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
float: none;
}
// Audio specific styles
// Position the progress within the container
&-audio .player-controls {
padding-top: ($control-spacing * 2);
}
&-audio .player-progress {
bottom: auto;
top: 0;
background: $off-white;
}
// Full screen mode
&-fullscreen,
&.fullscreen-active {