Prep for v1.5

2 files changed, 122 insertions, 94 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 55bfd62e..cd6d9bc7 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,13 +1,26 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.4.0
+// plyr.js v1.5.0
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
 
-(function (api) {
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(null, factory);
+    } else if (typeof exports === 'object') {
+        // Node, CommonJS-like
+        module.exports = factory();
+    } else {
+        // Browser globals (root is window)
+        root.plyr = factory();
+    }
+}(this, function () {
+    var api = {};
+
     'use strict';
     /*global YT,$f*/
 
@@ -103,7 +116,7 @@
         },
         types: {
             embed:              ['youtube','vimeo'],
-            html5:              ['video', 'audio'] 
+            html5:              ['video', 'audio']
         },
         urls: {
             vimeo: {
@@ -298,7 +311,7 @@
             name = 'Firefox';
             fullVersion = nAgt.substring(verOffset + 8);
         }
-        // In most other browsers, 'name/version' is at the end of userAgent 
+        // In most other browsers, 'name/version' is at the end of userAgent
         else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) {
             name = nAgt.substring(nameOffset,verOffset);
             fullVersion = nAgt.substring(verOffset + 1);
@@ -330,7 +343,7 @@
     }
 
     // Check for mime type support against a player instance
-    // Credits: http://diveintohtml5.info/everything.html 
+    // Credits: http://diveintohtml5.info/everything.html
     // Related: http://www.leanbackplyr.com/test/h5mt.html
     function _supportMime(plyr, mimeType) {
         var media = plyr.media;
@@ -353,7 +366,7 @@
                 case 'audio/ogg':    return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
                 case 'audio/wav':    return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
             }
-        }        
+        }
 
         // If we got this far, we're stuffed
         return false;
@@ -375,7 +388,7 @@
     function _inArray(haystack, needle) {
         return Array.prototype.indexOf && (haystack.indexOf(needle) != -1);
     }
-    
+
     // Replace all
     function _replaceAll(string, find, replace) {
         return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
@@ -386,28 +399,28 @@
         // Convert `elements` to an array, if necessary.
         if (!elements.length) {
             elements = [elements];
-        } 
-        
+        }
+
         // Loops backwards to prevent having to clone the wrapper on the
         // first element (see `child` below).
         for (var i = elements.length - 1; i >= 0; i--) {
             var child   = (i > 0) ? wrapper.cloneNode(true) : wrapper;
             var element = elements[i];
-            
+
             // Cache the current parent and sibling.
             var parent  = element.parentNode;
             var sibling = element.nextSibling;
-            
+
             // Wrap the element (is automatically removed from its current
             // parent).
             child.appendChild(element);
-            
+
             // If the element had a sibling, insert the wrapper before
             // the sibling to maintain the HTML structure; otherwise, just
             // append it to the parent.
             if (sibling) {
                 parent.insertBefore(child, sibling);
-            } 
+            }
             else {
                 parent.appendChild(child);
             }
@@ -526,10 +539,10 @@
     function _toggleState(target, state) {
         // Get state
         state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed'));
-        
+
         // Set the attribute on target
         target.setAttribute('aria-pressed', state);
-        
+
         return state;
     }
 
@@ -549,7 +562,7 @@
             if (source[property] && source[property].constructor && source[property].constructor === Object) {
                 destination[property] = destination[property] || {};
                 _extend(destination[property], source[property]);
-            } 
+            }
             else {
                 destination[property] = source[property];
             }
@@ -634,7 +647,7 @@
             supported: (function() {
                 try {
                     return 'localStorage' in window && window.localStorage !== null;
-                } 
+                }
                 catch(e) {
                     return false;
                 }
@@ -678,7 +691,7 @@
             }
 
             // Check if the next caption is in the current time range
-            if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && 
+            if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) &&
                 plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) {
                     plyr.currentCaption = plyr.captions[plyr.subcount][1];
 
@@ -755,7 +768,7 @@
         function _inFrame() {
             try {
                 return window.self !== window.top;
-            } 
+            }
             catch (e) {
                 return true;
             }
@@ -879,13 +892,13 @@
             if (plyr.supported.full) {
                 // Remove native video controls
                 plyr.media.removeAttribute('controls');
-        
+
                 // Add type class
                 _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
 
                 // If there's no autoplay attribute, assume the video is stopped and add state class
                 _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
-            
+
                 // Add iOS class
                 if (plyr.browser.ios) {
                     _toggleClass(plyr.container, 'ios', true);
@@ -974,7 +987,7 @@
                 });
                 container.appendChild(iframe);
                 plyr.media.appendChild(container);
-                
+
                 // Setup API
                 if (typeof Froogaloop === 'function') {
                     _on(iframe, 'load', _vimeoReady);
@@ -1058,7 +1071,7 @@
                         plyr.timer.buffering = window.setInterval(function() {
                             // Get loaded % from YouTube
                             plyr.media.buffered = instance.getVideoLoadedFraction();
-                            
+
                             // Trigger progress
                             _triggerEvent(plyr.media, 'progress');
 
@@ -1089,9 +1102,9 @@
                         // 1    Playing
                         // 2    Paused
                         // 3    Buffering
-                        // 5    Video cued    
+                        // 5    Video cued
                         switch (event.data) {
-                            case 0: 
+                            case 0:
                                 plyr.media.paused = true;
                                 _triggerEvent(plyr.media, 'ended');
                                 break;
@@ -1185,7 +1198,7 @@
                 // Prevent autoplay if needed (seek will play)
                 //if (!config.autoplay) {
                 //    plyr.embed.api('pause');
-                //}                
+                //}
             });
         }
 
@@ -1236,7 +1249,7 @@
                 }
                 // If caption file exists, process captions
                 else {
-                    // Turn off native caption rendering to avoid double captions 
+                    // Turn off native caption rendering to avoid double captions
                     // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
                     var tracks = plyr.media.textTracks;
                     for (var x = 0; x < tracks.length; x++) {
@@ -1247,9 +1260,9 @@
                     _showCaptions(plyr);
 
                     // Disable unsupported browsers than report false positive
-                    if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || 
-                        (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) || 
-                        (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) || 
+                    if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
+                        (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
+                        (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
                         (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
                         // Debugging
                         _log('Detected unsupported browser for HTML5 captions. Using fallback.');
@@ -1262,7 +1275,7 @@
                     // Native support required - http://caniuse.com/webvtt
                     if (plyr.usingTextTracks) {
                         _log('TextTracks supported.');
-            
+
                         for (var y = 0; y < tracks.length; y++) {
                             var track = tracks[y];
 
@@ -1310,13 +1323,13 @@
                                         plyr.captions.shift();
 
                                         _log('Successfully loaded the caption file via AJAX.');
-                                    } 
+                                    }
                                     else {
                                         _log('There was a problem loading the caption file via AJAX.', true);
                                     }
                                 }
                             };
-                            
+
                             xhr.open('get', captionSrc, true);
 
                             xhr.send();
@@ -1329,7 +1342,7 @@
 
                         // Find all <track> elements
                         tracks = plyr.media.getElementsByTagName('track');
-                        
+
                         // Loop through and remove one by one
                         for (var t = 0; t < tracks.length; t++) {
                             plyr.media.removeChild(tracks[t]);
@@ -1362,7 +1375,7 @@
                 if (config.fullscreen.hideControls) {
                     _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
                 }
-            }   
+            }
         }
 
         // Play media
@@ -1517,7 +1530,7 @@
 
             // Set button state
             _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
-            
+
             // Toggle controls visibility based on mouse movement and location
             var hoverTimer, isMouseOver = false;
 
@@ -1554,7 +1567,7 @@
             }
         }
 
-        // Bail from faux-fullscreen 
+        // Bail from faux-fullscreen
         function _handleEscapeFullscreen(event) {
             // If it's a keypress and not escape, bail
             if ((event.which || event.charCode || event.keyCode) === 27 && plyr.isFullscreen) {
@@ -1606,7 +1619,7 @@
                 }
                 else {
                     volume = config.volume;
-                }                
+                }
             }
 
             // Maximum is 10
@@ -1642,7 +1655,7 @@
             // Toggle muted state
             if (plyr.media.muted && volume > 0) {
                 _toggleMute();
-            } 
+            }
         }
 
         // Update volume UI and storage
@@ -1662,7 +1675,7 @@
 
             // Toggle class if muted
             _toggleClass(plyr.container, config.classes.muted, (volume === 0));
-            
+
             // Update checkbox for mute state
             if (plyr.supported.full && plyr.buttons.mute) {
                 _toggleState(plyr.buttons.mute, (volume === 0));
@@ -1674,7 +1687,7 @@
             // If there's no full support, or there's no caption toggle
             if (!plyr.supported.full || !plyr.buttons.captions) {
                 return;
-            }          
+            }
 
             // If the method is called without parameter, toggle based on current value
             if (typeof show !== 'boolean') {
@@ -1721,7 +1734,7 @@
                         if (event.type == 'timeupdate' && plyr.buttons.seek) {
                             plyr.buttons.seek.value = value;
                         }
-            
+
                         break;
 
                     // Events from seek range
@@ -1780,7 +1793,7 @@
 
             // Do we need to display hours?
             var displayHours = (parseInt(((plyr.media.duration / 60) / 60) % 60) > 0);
-            
+
             // Ensure it's two digits. For example, 03 rather than 3.
             plyr.secs = ('0' + plyr.secs).slice(-2);
             plyr.mins = ('0' + plyr.mins).slice(-2);
@@ -1848,7 +1861,7 @@
                 // Remove video wrapper
                 _remove(plyr.videoContainer);
             }
-            
+
             // Remove the old media
             _remove(plyr.media);
 
@@ -1902,10 +1915,10 @@
 
             // Autoplay the new source?
             config.autoplay = (source.autoplay || config.autoplay);
-               
+
             // Set media id for embeds
             if (_inArray(config.types.embed, plyr.type)) {
-                plyr.embedId = source.sources; 
+                plyr.embedId = source.sources;
             }
 
             // Set new sources for html5
@@ -1914,7 +1927,7 @@
             }
 
             // Set up from scratch
-            _setupMedia();            
+            _setupMedia();
 
             // Trigger media updated
             _mediaUpdated();
@@ -1948,13 +1961,13 @@
                 // Play if autoplay attribute is present
                 if (config.autoplay) {
                     _play();
-                } 
-            } 
+                }
+            }
 
             if ('title' in source) {
                 config.title = source.title;
                 _setupPlayAria();
-            }       
+            }
         }
 
         // Update poster
@@ -2020,7 +2033,7 @@
             // Fast forward
             _on(plyr.buttons.forward, 'click', _forward);
 
-            // Seek 
+            // Seek
             _on(plyr.buttons.seek, inputEvent, _seek);
 
             // Set volume
@@ -2038,7 +2051,7 @@
             if (fullscreen.supportsFullScreen) {
                 _on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
             }
-            
+
             // Time change on media
             _on(plyr.media, 'timeupdate seeking', _timeUpdate);
 
@@ -2053,7 +2066,7 @@
 
             // Handle the media finishing
             _on(plyr.media, 'ended', function() {
-                // Clear 
+                // Clear
                 if (plyr.type === 'video') {
                     plyr.captionsContainer.innerHTML = '';
                 }
@@ -2140,7 +2153,7 @@
                 return null;
             }
 
-            // Setup the fullscreen api 
+            // Setup the fullscreen api
             fullscreen = _fullscreen();
 
             // Sniff out the browser
@@ -2169,7 +2182,7 @@
                 config.autoplay     = (config.autoplay || (plyr.media.getAttribute('autoplay') !== null));
                 config.loop         = (config.loop || (plyr.media.getAttribute('loop') !== null));
             }
-        
+
             // Check for full support
             plyr.supported = api.supported(plyr.type);
 
@@ -2239,7 +2252,7 @@
             _listeners();
         }
 
-        // Initialize instance 
+        // Initialize instance
         _init();
 
         // If init failed, return an empty object
@@ -2269,7 +2282,7 @@
         };
     }
 
-    // Check for support 
+    // Check for support
     api.supported = function(type) {
         var browser = _browserSniff(),
             oldIE   = (browser.name === 'IE' && browser.version <= 9),
@@ -2279,18 +2292,18 @@
             basic, full;
 
         switch (type) {
-            case 'video': 
+            case 'video':
                 basic = video;
                 full  = (basic && (!oldIE && !iPhone));
                 break;
 
-            case 'audio': 
+            case 'audio':
                 basic = audio;
                 full  = (basic && !oldIE);
                 break;
 
-            case 'vimeo': 
-            case 'youtube': 
+            case 'vimeo':
+            case 'youtube':
                 basic = true;
                 full  = (!oldIE && !iPhone);
                 break;
@@ -2308,8 +2321,8 @@
 
     // Expose setup function
     api.setup = function(elements, options) {
-        // Get the players 
-        var instances = [];
+        // Get the players
+        var instances = [], elements = [];
 
         // Select the elements
         // Assume elements is a NodeList by default
@@ -2336,7 +2349,7 @@
 
         // Bail if disabled or no basic support
         // You may want to disable certain UAs etc
-        if (!config.enabled || !api.supported().basic) {
+        if (!config.enabled || !api.supported().basic || !elements.length) {
             return false;
         }
 
@@ -2366,4 +2379,5 @@
         return instances;
     };
 
-}(this.plyr = this.plyr || {}));
+    return api;
+}));
diff --git a/src/less/plyr.less b/src/less/plyr.less
index c2411ea9..d10458fc 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -21,7 +21,7 @@
 // Captions
 @font-size-captions-base:   ceil(@font-size-base * 1.25);
 @font-size-captions-medium: ceil(@font-size-base * 1.5);
-@font-size-captions-large:  (@font-size-base * 2); 
+@font-size-captions-large:  (@font-size-base * 2);
 
 // Controls
 @control-spacing:           10px;
@@ -36,7 +36,7 @@
 @tooltip-border-width:      1px;
 @tooltip-shadow:            0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color;
 @tooltip-color:             @control-color;
-@tooltip-padding:           @control-spacing;   
+@tooltip-padding:           @control-spacing;
 @tooltip-arrow-size:        6px;
 @tooltip-radius:            3px;
 
@@ -94,7 +94,7 @@
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 .clearfix() {
     zoom: 1;
-    &:before, 
+    &:before,
     &:after { content: ""; display: table; }
     &:after { clear: both; }
 }
@@ -110,9 +110,19 @@
     width: @volume-thumb-width;
     background: @volume-thumb-bg;
     border: 0;
-    border-radius: (@volume-thumb-height / 2);
-    transition: background .3s ease;
+    border-radius: 100%;
+    transition: background .3s ease, transform .2s ease;
     cursor: ew-resize;
+
+    &:hover {
+        transform: scale(110%);
+    }
+    &:active {
+        height: @volume-thumb-height + 3;
+        width: @volume-thumb-width + 3;
+        border: 2px solid @control-bg-hover;
+        background: #fff !important;
+    }
 }
 .volume-track() {
     height: @volume-track-height;
@@ -145,7 +155,7 @@
 
 // Styles
 // -------------------------------
-// Base 
+// Base
 .plyr {
     position: relative;
     max-width: 100%;
@@ -156,8 +166,8 @@
     &,
     *,
     *::after,
-    *::before { 
-        box-sizing: border-box; 
+    *::before {
+        box-sizing: border-box;
     }
 
     // For video
@@ -177,7 +187,7 @@
         height: 0;
         overflow: hidden;
         background: #000;
-        
+
         iframe {
             position: absolute;
             top: 0;
@@ -254,7 +264,7 @@
                 margin-top: 0;
             }
         }
-        
+
         // Buttons
         button {
             display: inline-block;
@@ -268,7 +278,7 @@
             cursor: pointer;
             color: @control-color;
             transition: background .3s ease, color .3s ease, opacity .3s ease;
-            
+
             svg {
                 width: 18px;
                 height: 18px;
@@ -276,7 +286,7 @@
                 fill: currentColor;
                 transition: fill .3s ease;
             }
-        
+
             // Hover and tab focus
             &.tab-focus,
             &:hover {
@@ -343,7 +353,7 @@
         transform: translate(-50%, (@tooltip-padding * 3)) scale(.8);
         transform-origin: 50% 100%;
         transition: transform .2s .1s ease, opacity .2s .1s ease;
-      
+
         // Arrows
         &::after,
         &::before {
@@ -363,15 +373,15 @@
             border-top: @border-arrow-size solid @tooltip-border-color;
             border-left: @border-arrow-size solid transparent;
             z-index: 1;
-        } 
-        // The background triangle  
+        }
+        // The background triangle
         &::before {
             bottom: -@tooltip-arrow-size;
             border-right: @tooltip-arrow-size solid transparent;
             border-top: @tooltip-arrow-size solid @tooltip-bg;
             border-left: @tooltip-arrow-size solid transparent;
             z-index: 2;
-        } 
+        }
     }
     button:hover .plyr-tooltip,
     button.tab-focus:focus .plyr-tooltip {
@@ -411,7 +421,7 @@
             background: transparent;
         }
         &-buffer[value],
-        &-played[value] {   
+        &-played[value] {
             &::-webkit-progress-bar {
                 background: transparent;
             }
@@ -457,7 +467,7 @@
                 -moz-appearance: none;
                 .seek-thumb();
             }
-            
+
             // Microsoft
             &::-ms-track {
                 color: transparent;
@@ -487,13 +497,13 @@
         background-repeat: repeat-x;
         background-color: @progress-buffered-bg;
         background-image: linear-gradient(
-            -45deg, 
-            @progress-loading-bg 25%, 
-            transparent 25%, 
-            transparent 50%, 
-            @progress-loading-bg 50%, 
+            -45deg,
+            @progress-loading-bg 25%,
+            transparent 25%,
+            transparent 50%,
+            @progress-loading-bg 50%,
             @progress-loading-bg 75%,
-            transparent 75%, 
+            transparent 75%,
             transparent);
         color: transparent;
     }
@@ -517,11 +527,11 @@
         -moz-appearance: none;
         width: 100px;
         margin: 0 @control-spacing 0 0;
-        padding: 0;     
+        padding: 0;
         cursor: pointer;
         background: transparent;
         border: none;
-        
+
         // Webkit
         &::-webkit-slider-runnable-track {
             .volume-track();
@@ -530,6 +540,10 @@
             -webkit-appearance: none;
             margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
             .volume-thumb();
+
+            &:active {
+                margin-top: -(((@volume-thumb-height - @volume-track-height) / 2) + 1);
+            }
         }
 
         // Mozilla
@@ -539,7 +553,7 @@
         &::-moz-range-thumb {
             .volume-thumb();
         }
-        
+
         // Microsoft
         &::-ms-track {
             height: @volume-track-height;
@@ -614,7 +628,7 @@
         .plyr-video-wrapper {
             height: 100%;
             width: 100%;
-        }  
+        }
         .plyr-controls {
             position: absolute;
             bottom: 0;
@@ -669,4 +683,4 @@
     &.fullscreen-enabled [data-plyr='fullscreen'] {
         display: inline-block;
     }
-}
\ No newline at end of file
+}