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 # 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 ## v1.1.2
- Added an onSetup callback option - Added an onSetup callback option
- Added fullscreen API methods toggleFullscreen() (must be user iniated), and isFullscreen() - 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- 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> </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="//cdn.plyr.io/1.1.2/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.3/plyr.css">
<!-- Docs styles --> <!-- 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> </head>
<body> <body>
<header> <header>
@ -83,13 +83,13 @@
b.insertBefore(c, b.childNodes[0]); 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> </script>
<!-- Plyr core 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 --> <!-- 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> </body>
</html> </html>

2
package.json
View File

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

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

31
src/js/plyr.js
View File

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

12
src/less/plyr.less
View File

@ -9,6 +9,7 @@
@gray-dark: #343f4a; @gray-dark: #343f4a;
@gray: #565d64; @gray: #565d64;
@gray-light: #cbd0d3; @gray-light: #cbd0d3;
@off-white: #f9fafb;
// Font sizes // Font sizes
@font-size-small: 14px; @font-size-small: 14px;
@ -527,6 +528,17 @@
float: none; 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 // Full screen mode
&-fullscreen, &-fullscreen,
&.fullscreen-active { &.fullscreen-active {

12
src/sass/plyr.scss
View File

@ -9,6 +9,7 @@ $blue: #3498DB;
$gray-dark: #343f4a; $gray-dark: #343f4a;
$gray: #565d64; $gray: #565d64;
$gray-light: #cbd0d3; $gray-light: #cbd0d3;
$off-white: #f9fafb;
// Font sizes // Font sizes
$font-size-small: 14px; $font-size-small: 14px;
@ -535,6 +536,17 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
float: none; 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 // Full screen mode
&-fullscreen, &-fullscreen,
&.fullscreen-active { &.fullscreen-active {