Added icon prefix option for when using default controls

changelog.md

@@ -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)
 

gulpfile.js

@@ -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

package.json

@@ -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",

readme.md

@@ -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>

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 class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>",
-                    "<svg><use xlink:href='#icon-volume'></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 class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>",
-                    "<svg><use xlink:href='#icon-captions-off'></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 class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>",
-                    "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>",
                     "<span class='sr-only'>Toggle Fullscreen</span>",
                 "</button>"
             );