Decreased sensitivity and inverted scroll on volume slider (scroll up to increase, down to decrease)

# Conflicts:
#	dist/plyr.css
#	dist/plyr.js

changelog.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## v1.6.13
+- Decreased sensitivity and inverted scroll on volume slider (scroll up to increase, down to decrease)
+
+## v1.6.12
+- Fix for undefined buffer error 
+- Add scroll listener on volume slider (PR #227 bty @igoradamenko)
+
+## v1.6.11
+- Fix for Vimeo fullscreen (fixes #214)
+
+## v1.6.10
+- Changed default icon prefix from 'icon' to 'plyr' to avoid clashes
+
+## v1.6.9
+- Added 'latest' CDN option
+- Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files
+
 ## v1.6.8
 - Fix for bug introduced in v1.6.7
 

controls.md

@@ -47,23 +47,23 @@ This is an example `html` option with all controls.
 ```javascript
 var controls = ["<div class='plyr__controls'>",
     "<button type='button' data-plyr='restart'>",
-        "<svg><use xlink:href='#icon-restart'></use></svg>",
+        "<svg><use xlink:href='#plyr-restart'></use></svg>",
         "<span class='plyr__sr-only'>Restart</span>",
     "</button>",
     "<button type='button' data-plyr='rewind'>",
-        "<svg><use xlink:href='#icon-rewind'></use></svg>",
+        "<svg><use xlink:href='#plyr-rewind'></use></svg>",
         "<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
     "</button>",
     "<button type='button' data-plyr='play'>",
-        "<svg><use xlink:href='#icon-play'></use></svg>",
+        "<svg><use xlink:href='#plyr-play'></use></svg>",
         "<span class='plyr__sr-only'>Play</span>",
     "</button>",
     "<button type='button' data-plyr='pause'>",
-        "<svg><use xlink:href='#icon-pause'></use></svg>",
+        "<svg><use xlink:href='#plyr-pause'></use></svg>",
         "<span class='plyr__sr-only'>Pause</span>",
     "</button>",
     "<button type='button' data-plyr='fast-forward'>",
-        "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
+        "<svg><use xlink:href='#plyr-fast-forward'></use></svg>",
         "<span class='plyr__sr-only'>Forward {seektime} secs</span>",
     "</button>",
     "<span class='plyr__progress'>",
@@ -84,8 +84,8 @@ var controls = ["<div class='plyr__controls'>",
         "<span class='plyr__time--duration'>00:00</span>",
     "</span>",
     "<button type='button' data-plyr='mute'>",
-        "<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='#plyr-muted'></use></svg>",
+        "<svg><use xlink:href='#plyr-volume'></use></svg>",
         "<span class='plyr__sr-only'>Toggle Mute</span>",
     "</button>",
     "<span class='plyr__volume'>",
@@ -94,13 +94,13 @@ var controls = ["<div class='plyr__controls'>",
         "<progress class='plyr__volume--display' max='10' value='0' role='presentation'></progress>",
     "</span>",
     "<button type='button' data-plyr='captions'>",
-        "<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='#plyr-captions-on'></use></svg>",
+        "<svg><use xlink:href='#plyr-captions-off'></use></svg>",
         "<span class='plyr__sr-only'>Toggle Captions</span>",
     "</button>",
     "<button type='button' data-plyr='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='#plyr-exit-fullscreen'></use></svg>",
+        "<svg><use xlink:href='#plyr-enter-fullscreen'></use></svg>",
         "<span class='plyr__sr-only'>Toggle Fullscreen</span>",
     "</button>",
 "</div>"].join("");

dist/plyr.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="icon-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>

docs/index.html

@@ -79,7 +79,7 @@
         <script>
         (function() {
             [
-                '../dist/sprite.svg',
+                '../dist/plyr.svg',
                 'dist/docs.svg'
             ]
             .forEach(function(u) {

gulpfile.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Gulp build script
 // ==========================================================================
-/*global require, __dirname*/
+/*global require, __dirname,Buffer*/
 /*jshint -W079 */
 
 var fs          = require("fs"),
@@ -19,10 +19,10 @@ var fs          = require("fs"),
     svgmin      = require("gulp-svgmin"),
     rename      = require("gulp-rename"),
     s3          = require("gulp-s3"),
-    gzip        = require("gulp-gzip"),
     replace     = require("gulp-replace"),
     open        = require("gulp-open"),
-    size        = require("gulp-size");
+    size        = require("gulp-size"),
+    through     = require("through2");
 
 var root = __dirname,
 paths = {
@@ -74,6 +74,29 @@ function loadJSON(path) {
     }
 }
 
+// Create a file from a string
+// http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
+function createFile(filename, string) {
+    var src = require('stream').Readable({ 
+        objectMode: true 
+    });
+    src._read = function () {
+        this.push(new gutil.File({ 
+            cwd: "", 
+            base: "", 
+            path: filename, 
+            contents: new Buffer(string),
+            // stats also required for some functions
+            // https://nodejs.org/api/fs.html#fs_class_fs_stats
+            stat: {
+                size: string.length
+            } 
+        }));
+        this.push(null);
+    }
+    return src
+}
+
 var build = {
     js: function (files, bundle) {
         for (var key in files) {
@@ -143,7 +166,7 @@ var build = {
                     }]
                 }))
                 .pipe(svgstore())
-                .pipe(rename({ basename: (bundle == "plyr" ? "sprite" : bundle) }))
+                .pipe(rename({ basename: bundle }))
                 .pipe(gulp.dest(paths[bundle].output));
         });
     }
@@ -200,15 +223,22 @@ options = {
         headers: {
             "Cache-Control": "max-age=" + maxAge,
             "Vary": "Accept-Encoding"
-        },
-        gzippedOnly: true
+        }
     },
     docs: {
         headers: {
-            "Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
+            "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
             "Vary": "Accept-Encoding"
-        },
-        gzippedOnly: true
+        }
+    },
+    symlinks: function(version, filename) {
+        return {
+            headers: {
+                // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
+                "x-amz-website-redirect-location": "/" + version + "/" + filename,
+                "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
+            }
+        }
     }
 };
 
@@ -217,15 +247,16 @@ if("cdn" in aws) {
     var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
     cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
     semver          = new RegExp("v" + regex, "gi"),
-    localpath       = new RegExp("(\.\.\/)?dist", "gi");
+    localPath       = new RegExp("(\.\.\/)?dist", "gi"),
+    versionPath     = "https://" + aws.cdn.bucket + "/" + version;
 }
 
 // Publish version to CDN bucket
 gulp.task("cdn", function () {
-    console.log("Uploading " + version + " to " + aws.cdn.bucket);
+    console.log("Uploading " + version + " to " + aws.cdn.bucket + "...");
 
     // Upload to CDN
-    gulp.src(paths.upload)
+    return gulp.src(paths.upload)
         .pipe(size({
             showFiles: true,
             gzip: true
@@ -233,13 +264,12 @@ gulp.task("cdn", function () {
         .pipe(rename(function (path) {
             path.dirname = path.dirname.replace(".", version);
         }))
-        .pipe(gzip())
         .pipe(s3(aws.cdn, options.cdn));
 });
 
 // Publish to Docs bucket
 gulp.task("docs", function () {
-    console.log("Uploading " + version + " docs to " + aws.docs.bucket);
+    console.log("Uploading " + version + " docs to " + aws.docs.bucket + "...");
 
     // Replace versioned files in readme.md
     gulp.src([root + "/readme.md"])
@@ -254,17 +284,38 @@ gulp.task("docs", function () {
     // Replace local file paths with remote paths in docs
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
     gulp.src([paths.docs.root + "*.html"])
-        .pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
-        .pipe(gzip())
+        .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.docs, options.docs));
 
     // Upload error.html to cdn (as well as docs site)
-    gulp.src([paths.docs.root + "error.html"])
-        .pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
-        .pipe(gzip())
+    return gulp.src([paths.docs.root + "error.html"])
+        .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.cdn, options.docs));
 });
 
+// Open the docs site to check it's sweet
+gulp.task("symlinks", function () {
+    console.log("Updating symlinks...");
+
+    return gulp.src(paths.upload)
+        .pipe(through.obj(function (chunk, enc, callback) {
+            if (chunk.stat.isFile()) {
+                // Get the filename
+                var filename = chunk.path.split("/").reverse()[0];
+
+                // Create the 0 byte redirect files to upload
+                createFile(filename, "")
+                    .pipe(rename(function (path) {
+                        path.dirname = path.dirname.replace(".", "latest");
+                    }))
+                    // Upload to S3 with correct headers
+                    .pipe(s3(aws.cdn, options.symlinks(version, filename)));
+            }
+
+            callback(null, chunk);
+        }));
+});
+
 // Open the docs site to check it's sweet
 gulp.task("open", function () {
     console.log("Opening " + aws.docs.bucket + "...");
@@ -272,7 +323,7 @@ gulp.task("open", function () {
     // A file must be specified or gulp will skip the task
     // Doesn't matter which file since we set the URL above
     // Weird, I know...
-    gulp.src([paths.docs.root + "index.html"])
+    return gulp.src([paths.docs.root + "index.html"])
         .pipe(open("", {
             url: "http://" + aws.docs.bucket
         }));
@@ -280,5 +331,5 @@ gulp.task("open", function () {
 
 // Do everything
 gulp.task("publish", function () {
-    run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs");
+    run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs", "symlinks");
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.8",
+  "version": "1.6.13",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",
@@ -8,10 +8,9 @@
   "devDependencies": {
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.0",
-    "gulp-concat": "^2.3.3",
-    "gulp-gzip": "^1.0.0",
-    "gulp-less": "^3.0.5",
     "gulp-clean-css": "^2.0.6",
+    "gulp-concat": "^2.3.3",
+    "gulp-less": "^3.0.5",
     "gulp-open": "^2.0.0",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.5.3",
@@ -22,7 +21,8 @@
     "gulp-svgstore": "^5.0.5",
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.7",
-    "run-sequence": "^1.1.5"
+    "run-sequence": "^1.1.5",
+    "through2": "^2.0.1"
   },
   "keywords": [
     "HTML5 Video",

readme.md

@@ -40,11 +40,11 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 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.6.8/plyr.js` to `https://cdn.plyr.io/1.6.8/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.6.13/plyr.js` to `https://cdn.plyr.io/1.6.13/plyr.js`
 
-### Node Package Manager (NPM)
+### npm
 
-Using NPM, you can grab Plyr:
+Using `npm`, you can grab Plyr:
 ```
 npm install plyr
 ```
@@ -71,11 +71,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:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.6.8/plyr.css">
-<script src="https://cdn.plyr.io/1.6.8/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.13/plyr.css">
+<script src="https://cdn.plyr.io/1.6.13/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.8/sprite.svg`.
+The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.13/plyr.svg`.
 
 ### CSS & Styling
 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.scss` file included in `/src` in your build to save a request.
@@ -94,7 +94,7 @@ The SVG sprite for the controls icons can be loaded two ways:
 #### Using the `iconUrl` option
 This method requires the SVG sprite to be hosted on the *same domain* as your page hosting the player. Currently no browser supports cross origin SVG sprites due to XSS issues. Fingers crossed this will come soon though. An example value for this option would be:
 ```
-/path/to/sprite.svg
+/path/to/plyr.svg
 ```
 
 #### Using AJAX
@@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
 		c.innerHTML = a.responseText;
 		b.insertBefore(c, b.childNodes[0]);
 	};
-})(document, 'https://cdn.plyr.io/1.6.8/sprite.svg');
+})(document, 'https://cdn.plyr.io/1.6.13/plyr.svg');
 </script>
 ```
 
@@ -188,7 +188,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.6.8/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.13/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -260,8 +260,8 @@ Options must be passed as an object to the `setup()` method as above or as JSON
   <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>
+    <td><code>plyr</code></td>
+    <td>Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). 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>iconUrl</code></td>
@@ -654,7 +654,7 @@ Some more details on the object parameters
 
 ## Events
 
-You can listen for events on the element you setup Plyr on. Some events only apply to HTML5 audio and video.
+You can listen for events on the target element you setup Plyr on (see example under the table). Some events only apply to HTML5 audio and video.
 
 <table class="table" width="100%">
   <thead>
@@ -788,7 +788,7 @@ Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Event
 Here's an example of binding an event listener:
 
 ```javascript
-document.querySelector('.js-plyr').addEventListener('ready', function() {
+document.querySelector('.js-plyr').addEventListener('ready', function(event) {
 	var player = event.target.plyr;
 });
 ```
@@ -802,7 +802,7 @@ Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have negle
 The native API's can be accessed through the `embed` property of the plyr object. For example:
 
 ```javascript
-document.querySelector('.js-plyr').addEventListener('ready', function() {
+document.querySelector('.js-plyr').addEventListener('ready', function(event) {
 	var player = event.target.plyr;
 
 	// YouTube
@@ -873,6 +873,7 @@ If you find anything weird with Plyr, please let us know using the GitHub issues
 Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)
 
 ## Mentions
+- [ProductHunt](https://www.producthunt.com/tech/plyr)
 - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
 - [HTML5 Weekly #177](http://html5weekly.com/issues/177)
 - [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.8
+// plyr.js v1.6.13
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -36,9 +36,12 @@
         loop:                   false,
         seekTime:               10,
         volume:                 5,
+        volumeMin:              0, 
+        volumeMax:              10, 
+        volumeStep:             1,
         duration:               null,
         displayDuration:        true,
-        iconPrefix:             'icon',
+        iconPrefix:             'plyr',
         iconUrl:                '',
         clickToPlay:            true,
         hideControls:           true,
@@ -194,7 +197,7 @@
         else if ((verOffset=nAgt.indexOf('Safari')) !== -1) {
             name = 'Safari';
             fullVersion = nAgt.substring(verOffset + 7);
-            if ((verOffset=nAgt.indexOf('Version')) !== -1) {
+            if ((verOffset = nAgt.indexOf('Version')) !== -1) {
                 fullVersion = nAgt.substring(verOffset + 8);
             }
         }
@@ -773,8 +776,8 @@
                 html.push(
                     '<span class="plyr__volume">',
                         '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
-                        '<input id="volume{id}" class="plyr__volume--input" type="range" min="0" max="10" value="5" data-plyr="volume">',
-                        '<progress class="plyr__volume--display" max="10" value="0" role="presentation"></progress>',
+                        '<input id="volume{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">',
+                        '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
                     '</span>'
                 );
             }
@@ -1390,7 +1393,7 @@
                     window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
 
                     // Add to queue
-                    window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container) });
+                    window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); });
 
                     // Set callback to process queue
                     window.onYouTubeIframeAPIReady = function () {
@@ -1610,6 +1613,10 @@
                                 _triggerEvent(plyr.media, 'pause');
                                 break;
                         }
+
+                        _triggerEvent(plyr.container, 'statechange', false, {
+                            code: event.data
+                        });
                     }
                 }
             });
@@ -2016,11 +2023,11 @@
                         break;
 
                     case 'vimeo':
-                        plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10));
+                        plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
                         break;
 
                     case 'soundcloud':
-                        plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / 10));
+                        plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
                         break;
                 }
 
@@ -2031,6 +2038,9 @@
 
         // Set volume
         function _setVolume(volume) {
+            var max = config.volumeMax,
+                min = config.volumeMin;
+
             // Use default if no value specified
             if (typeof volume === 'undefined') {
                 volume = config.volume;
@@ -2049,17 +2059,17 @@
                 volume = config.volume;
             }
 
-            // Maximum is 10
-            if (volume > 10) {
-                volume = 10;
+            // Maximum is volumeMax
+            if (volume > max) {
+                volume = max;
             }
-            // Minimum is 0
-            if (volume < 0) {
-                volume = 0;
+            // Minimum is volumeMin
+            if (volume < min) {
+                volume = min;
             }
 
             // Set the player volume
-            plyr.media.volume = parseFloat(volume / 10);
+            plyr.media.volume = parseFloat(volume / max);
 
             // Set the display
             if (plyr.volume.display) {
@@ -2093,10 +2103,24 @@
             }
         }
 
+        // Increase volume
+        function _increaseVolume() {
+            var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+
+            _setVolume(volume + (config.volumeStep / 5));
+        }
+
+        // Decrease volume
+        function _decreaseVolume() {
+            var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+
+            _setVolume(volume - (config.volumeStep / 5));
+        }
+
         // Update volume UI and storage
         function _updateVolume() {
             // Get the current volume
-            var volume = plyr.media.muted ? 0 : (plyr.media.volume * 10);
+            var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
 
             // Update the <input type="range"> if present
             if (plyr.supported.full) {
@@ -2221,9 +2245,14 @@
             if (typeof value === 'undefined') {
                 value = 0;
             }
-            // Default to buffer
+            // Default to buffer or bail
             if (typeof progress === 'undefined') {
-                progress = plyr.progress.buffer;
+                if (plyr.progress && plyr.progress.buffer) {
+                    progress = plyr.progress.buffer;
+                }
+                else {
+                    return;
+                }
             }
 
             // One progress element passed
@@ -2684,6 +2713,7 @@
                     }
                 }
             }
+
             _on(window, 'keyup', function(event) {
                 var code = (event.keyCode ? event.keyCode : event.which);
 
@@ -2755,6 +2785,21 @@
                 // Focus in/out on controls
                 _on(plyr.controls, 'focus blur', _toggleControls, true);
             }
+
+            // Adjust volume on scroll
+            _on(plyr.volume.input, 'wheel', function(event) {
+                event.preventDefault();
+
+                // Scroll down to decrease
+                if (event.deltaY < 0 || event.deltaX > 0) {
+                    _decreaseVolume();
+                }
+
+                // Scroll up to increase
+                if (event.deltaY > 0 || event.deltaX < 0) {
+                    _increaseVolume();
+                }
+            });
         }
 
         // Listen for media events

src/less/plyr.less

@@ -375,7 +375,7 @@
     border-radius: 100%;
     box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
     color: @plyr-video-control-color;
-    transition: opacity .3s ease, visibility .3s ease;
+    transition: all .3s ease;
 
     svg {
         position: relative;
@@ -699,4 +699,11 @@
         left: 0;
         right: 0;
     }
+
+    // Vimeo requires some different styling
+    &.plyr--vimeo .plyr__video-wrapper {
+        height: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 }

src/scss/plyr.scss

@@ -374,7 +374,7 @@
     border-radius: 100%;
     box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85);
     color: $plyr-video-control-color;
-    transition: opacity .3s ease, visibility .3s ease;
+    transition: all .3s ease;
 
     svg {
         position: relative;
@@ -698,4 +698,11 @@
         left: 0;
         right: 0;
     }
+
+    // Vimeo requires some different styling
+    &.plyr--vimeo .plyr__video-wrapper {
+        height: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 }