diff options
| author | Sam Potts <sam@selz.com> | 2015-07-20 14:44:51 +1000 |
|---|---|---|
| committer | Sam Potts <sam@selz.com> | 2015-07-20 14:44:51 +1000 |
| commit | 93cc9edd9a7417e744ac17a5c59a37ed64a38d73 (patch) | |
| tree | 565c536444a2263e9ca4a8d6497e9cde60b4ea8c /src | |
| parent | 654e9cd623212a5bebf3930972ef04d5e2d2bbcb (diff) | |
| download | plyr-93cc9edd9a7417e744ac17a5c59a37ed64a38d73.tar.lz plyr-93cc9edd9a7417e744ac17a5c59a37ed64a38d73.tar.xz plyr-93cc9edd9a7417e744ac17a5c59a37ed64a38d73.zip | |
Added icon prefix option for when using default controls
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 25 |
1 files changed, 13 insertions, 12 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index adb35c12..debbecfc 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -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>" ); |