Added icon prefix option for when using default controls

This commit is contained in:
Sam Potts 2015-07-20 14:44:51 +10:00
parent 654e9cd623
commit 93cc9edd9a
6 changed files with 50 additions and 16 deletions

View File

@ -1,5 +1,32 @@
# Changelog
## v1.1.13
- Added icon prefix option for when using default controls
## v1.1.13
- Logic tweaks for hiding controls in fullscreen
## v1.1.12
- Bug fix for Chrome Canary
## v1.1.11
- Bug fix
## v1.1.10
- Bug fix
## v1.1.9
- Bug fix for 1.1.8
## v1.1.8
- setVolume API method improvements (Fixes #83)
## v1.1.7
- Restore classname on destroy()
## v1.1.6
- New API methods (fixes #77), Fix for non strict mode (fixes #78)
## v1.1.5
- Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38)

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -185,12 +185,12 @@ gulp.task("watch", function () {
// Plyr core
gulp.watch(paths.plyr.src.js, tasks.js);
gulp.watch(paths.plyr.src.less, tasks.less);
gulp.watch(paths.plyr.src.sprite, "sprite");
gulp.watch(paths.plyr.src.sprite, ["sprite"]);
// Docs
gulp.watch(paths.docs.src.js, tasks.js);
gulp.watch(paths.docs.src.less, tasks.less);
gulp.watch(paths.docs.src.templates, "js");
gulp.watch(paths.docs.src.templates, ["js"]);
});
// Publish a version to CDN and docs

View File

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

View File

@ -172,6 +172,12 @@ You can pass the following options to the setup method using `plyr.setup({...})`
<td><code>["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"]</code></td>
<td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td>
</tr>
<tr>
<td><code>iconPrefix</code></td>
<td>String</td>
<td><code>icon</code></td>
<td>Specify the id prefix for the icons used in the default controls (e.g. "icon-play" would be "icon"). This is to prevent clashes if you're using your own SVG defs file but with the default controls. Most people can ignore this option.</td>
</tr>
<tr>
<td><code>debug</code></td>
<td>Boolean</td>

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.1.13
// plyr.js v1.1.14
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -22,6 +22,7 @@
click: true,
tooltips: false,
displayDuration: true,
iconPrefix: "icon",
selectors: {
container: ".player",
controls: ".player-controls",
@ -105,7 +106,7 @@
if(_inArray(config.controls, "restart")) {
html.push(
"<button type='button' data-player='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>",
"<span class='sr-only'>Restart</span>",
"</button>"
);
@ -115,7 +116,7 @@
if(_inArray(config.controls, "rewind")) {
html.push(
"<button type='button' data-player='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-rewind'></use></svg>",
"<span class='sr-only'>Rewind {seektime} secs</span>",
"</button>"
);
@ -125,11 +126,11 @@
if(_inArray(config.controls, "play")) {
html.push(
"<button type='button' data-player='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-play'></use></svg>",
"<span class='sr-only'>Play</span>",
"</button>",
"<button type='button' data-player='pause'>",
"<svg><use xlink:href='#icon-pause'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-pause'></use></svg>",
"<span class='sr-only'>Pause</span>",
"</button>"
);
@ -139,7 +140,7 @@
if(_inArray(config.controls, "fast-forward")) {
html.push(
"<button type='button' data-player='fast-forward'>",
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-fast-forward'></use></svg>",
"<span class='sr-only'>Forward {seektime} secs</span>",
"</button>"
);
@ -176,8 +177,8 @@
html.push(
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
"<label id='mute{id}' for='mute{id}'>",
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
"<svg><use xlink:href='#icon-volume'></use></svg>",
"<svg class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>",
"<span class='sr-only'>Toggle Mute</span>",
"</label>"
);
@ -196,8 +197,8 @@
html.push(
"<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
"<label for='captions{id}'>",
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
"<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>",
"<span class='sr-only'>Toggle Captions</span>",
"</label>"
);
@ -207,8 +208,8 @@
if(_inArray(config.controls, "fullscreen")) {
html.push(
"<button type='button' data-player='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>",
"<span class='sr-only'>Toggle Fullscreen</span>",
"</button>"
);