Merge branch 'develop' of github.com:selz/plyr into develop

Conflicts:
	.gitignore

1 files changed, 106 insertions, 56 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 034b4d56..86144e9d 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,7 +1,8 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.17
+// plyr.js v1.0.20
 // https://github.com/sampotts/plyr
+// License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
@@ -23,6 +24,7 @@
             container:          ".player",
             controls:           ".player-controls",
             buttons: {
+                seek:           "[data-player='seek']",
                 play:           "[data-player='play']",
                 pause:          "[data-player='pause']",
                 restart:        "[data-player='restart']",
@@ -39,8 +41,7 @@
                 played:         ".player-progress-played"
             },
             captions:           ".player-captions",
-            duration:           ".player-duration",
-            seekTime:           ".player-seek-time"
+            duration:           ".player-duration"
         },
         classes: {
             video:              "player-video",
@@ -67,7 +68,68 @@
         },
         storage: {
             enabled:            true
-        }
+        },
+        html: (function() {
+                return ["<div class='player-controls'>",
+                "<div class='player-progress'>",
+                    "<label for='seek{id}' class='sr-only'>Seek</label>",
+                    "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
+                    "<progress class='player-progress-played' max='100' value='0'>",
+                        "<span>0</span>% played",
+                    "</progress>",
+                    "<progress class='player-progress-buffer' max='100' value='0'>",
+                        "<span>0</span>% buffered",
+                    "</progress>",
+                "</div>",
+                "<span class='player-controls-playback'>",
+                    "<button type='button' data-player='restart'>",
+                        "<svg><use xlink:href='#icon-restart'></use></svg>",
+                        "<span class='sr-only'>Restart</span>",
+                    "</button>",
+                    "<button type='button' data-player='rewind'>",
+                        "<svg><use xlink:href='#icon-rewind'></use></svg>",
+                        "<span class='sr-only'>Rewind {seektime} seconds</span>",
+                    "</button>",
+                    "<button type='button' data-player='play'>",
+                        "<svg><use xlink:href='#icon-play'></use></svg>",
+                        "<span class='sr-only'>Play</span>",
+                    "</button>",
+                    "<button type='button' data-player='pause'>",
+                        "<svg><use xlink:href='#icon-pause'></use></svg>",
+                        "<span class='sr-only'>Pause</span>",
+                    "</button>",
+                    "<button type='button' data-player='fast-forward'>",
+                        "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
+                        "<span class='sr-only'>Fast forward {seektime} seconds</span>",
+                    "</button>",
+                    "<span class='player-time'>",
+                        "<span class='sr-only'>Time</span>",
+                        "<span class='player-duration'>00:00</span>",
+                    "</span>",
+                "</span>",
+                "<span class='player-controls-sound'>",
+                    "<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>",
+                        "<span class='sr-only'>Toggle Mute</span>",
+                    "</label>",
+                    "<label for='volume{id}' class='sr-only'>Volume</label>",
+                    "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
+                    "<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>",
+                        "<span class='sr-only'>Toggle Captions</span>",
+                    "</label>",
+                    "<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>",
+                        "<span class='sr-only'>Toggle fullscreen</span>",
+                    "</button>",
+                "</span>",
+            "</div>"].join("\n");
+        })()
     };
 
     // Debugging
@@ -215,33 +277,6 @@
         return Math.floor((current / max) * 100);
     }
 
-    // Get click position relative to parent
-    // http://www.kirupa.com/html5/getting_mouse_click_position.htm
-    function _getClickPosition(event) {
-        var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
-
-        return {
-            x: event.clientX - parentPosition.x,
-            y: event.clientY - parentPosition.y
-        };
-    }
-    // Get element position
-    function _getPosition(element) {
-        var xPosition = 0;
-        var yPosition = 0;
-
-        while (element) {
-            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
-            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
-            element = element.offsetParent;
-        }
-        
-        return { 
-            x: xPosition, 
-            y: yPosition 
-        };
-    }
-
     // Deep extend/merge two Objects
     // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
     // Removed call to arguments.callee (used explicit function name instead)
@@ -449,6 +484,7 @@
 
                 // Buttons
                 player.buttons = {};
+                player.buttons.seek             = _getElement(config.selectors.buttons.seek);
                 player.buttons.play             = _getElement(config.selectors.buttons.play);
                 player.buttons.pause            = _getElement(config.selectors.buttons.pause);
                 player.buttons.restart          = _getElement(config.selectors.buttons.restart);
@@ -489,11 +525,11 @@
 
         // Setup aria attributes
         function _setupAria() {
-            var label = player.buttons.play.innerText;
+            var label = player.buttons.play.innerText || "Play";
 
             // If there's a media title set, use that for the label
             if (typeof(config.title) !== "undefined" && config.title.length) {
-                label = player.buttons.play.innerText + ", " + config.title;
+                label += ", " + config.title;
             }
 
             player.buttons.play.setAttribute("aria-label", label);
@@ -697,13 +733,6 @@
             }
         }
 
-        // Setup seeking
-        function _setupSeeking() {
-            // Update number of seconds in rewind and fast forward buttons
-            player.seekTime[0].innerHTML = config.seekTime;
-            player.seekTime[1].innerHTML = config.seekTime;
-        }
-
         // Setup fullscreen
         function _setupFullscreen() {
             if(player.type === "video" && config.fullscreen.enabled) {
@@ -795,12 +824,12 @@
         }
 
         // Toggle fullscreen
-        function _toggleFullscreen() {
+        function _toggleFullscreen(event) {
             // Check for native support
             var nativeSupport = fullscreen.supportsFullScreen;
 
             // If it's a fullscreen change event, it's probably a native close
-            if(event.type === fullscreen.fullScreenEventName) {
+            if(event && event.type === fullscreen.fullScreenEventName) {
                 config.fullscreen.active = fullscreen.isFullScreen();
             }
             // If there's native support, use it
@@ -913,8 +942,21 @@
                     progress    = player.progress.played.bar;
                     text        = player.progress.played.text;
                     value       = _getPercentage(player.media.currentTime, player.media.duration);
+
+                    // Set seeking value
+                    player.buttons.seek.value = value;
+
+                    break;
+
+                // Seeking
+                case "change":
+                case "input":
+                    progress    = player.progress.played.bar;
+                    text        = player.progress.played.text;
+                    value       = event.target.value;
                     break;
 
+
                 // Check buffer status
                 case "playing":
                 case "progress":
@@ -936,6 +978,8 @@
                 progress.value = value;
                 text.innerHTML = value;
             }
+
+            //_log(event);
         }
 
         // Update the displayed play time
@@ -974,8 +1018,9 @@
             // Fast forward
             _on(player.buttons.forward, "click", _forward);
 
-            // Get the HTML5 range input element and append audio volume adjustment on change
-            _on(player.volume, "change", function() {
+            // Get the HTML5 range input element and append audio volume adjustment on change/input
+            // IE10 doesn't support the "input" event so they have to wait for change
+            _on(player.volume, "change input", function() {
                 _setVolume(this.value);
             });
 
@@ -1005,17 +1050,25 @@
                 });
             }
             
-            // Duration
-            _on(player.media, "timeupdate", _updateTimeDisplay);
+            // Time change on media
+            _on(player.media, "timeupdate", function(event) {
+                // Duration
+                _updateTimeDisplay();
+                // Playing progress
+                _updateProgress(event);
+            });
+
+            // Seek 
+            _on(player.buttons.seek, "change input", function(event) {
+                // Update progress elements
+                _updateProgress(event);
 
-            // Playing progress
-            _on(player.media, "timeupdate", _updateProgress);
+                // Update the text label
+                _updateTimeDisplay();
+
+                // Seek to the selected time
+                player.media.currentTime = ((this.value / this.max) * player.media.duration);
 
-            // Skip when clicking progress bar
-            _on(player.progress.played.bar, "click", function(event) {
-                player.pos = _getClickPosition(event).x / this.offsetWidth;
-                player.media.currentTime = player.pos * player.media.duration;
-                
                 // Special handling for "manual" captions
                 if (!player.isTextTracks && player.type === "video") {
                     _adjustManualCaptions(player);
@@ -1093,9 +1146,6 @@
             // Setup fullscreen
             _setupFullscreen();
 
-            // Seeking
-            _setupSeeking();
-
             // Listeners
             _listeners();
         }