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,15 @@
 # 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
 

package.json

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

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.10/plyr.js` to `https://cdn.plyr.io/1.6.10/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.10/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.13/plyr.css">
-<script src="https://cdn.plyr.io/1.6.10/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.13/plyr.js"></script>
 ```
 
-The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.10/plyr.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.
@@ -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.10/plyr.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.10/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.13/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -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

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.10
+// plyr.js v1.6.13
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -36,6 +36,9 @@
         loop:                   false,
         seekTime:               10,
         volume:                 5,
+        volumeMin:              0, 
+        volumeMax:              10, 
+        volumeStep:             1,
         duration:               null,
         displayDuration:        true,
         iconPrefix:             'plyr',
@@ -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">',
+                        '<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="10" value="0" role="presentation"></progress>',
+                        '<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
+            // Maximum is volumeMax
-            if (volume > 10) {
+            if (volume > max) {
-                volume = 10;
+                volume = max;
             }
-            // Minimum is 0
+            // Minimum is volumeMin
-            if (volume < 0) {
+            if (volume < min) {
-                volume = 0;
+                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%);
+    }
 }