From 4d483bf66c8985ce21b22107653ae0b1a65636c3 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Wed, 4 Mar 2015 08:08:38 +1100
Subject: Bug fixes and improvements

---
 src/js/plyr.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 66 insertions(+), 6 deletions(-)

(limited to 'src/js')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 67d77e20..e8d852e8 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,7 +1,8 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.19
+// plyr.js v1.0.20
 // https://github.com/sampotts/plyr
+// License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
@@ -67,7 +68,65 @@
         },
         storage: {
             enabled:            true
-        }
+        },
+        html: (function() {
+                return ["<div class='player-controls'>",
+                "<div class='player-progress'>",
+                    "<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-refresh'></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 <span class='player-seek-time'>{seektime}</span> 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 <span class='player-seek-time'>{seektime}</span> 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-sound'></use></svg>",
+                        "<span class='sr-only'>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><use xlink:href='#icon-bubble'></use></svg>",
+                        "<span class='sr-only'>Captions</span>",
+                    "</label>",
+                    "<button type='button' data-player='fullscreen'>",
+                        "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-collapse'></use></svg>",
+                        "<svg><use xlink:href='#icon-expand'></use></svg>",
+                        "<span class='sr-only'>Toggle fullscreen</span>",
+                    "</button>",
+                "</span>",
+            "</div>"].join("\n");
+        })()
     };
 
     // Debugging
@@ -489,11 +548,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);
@@ -974,8 +1033,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);
             });
 
-- 
cgit v1.2.3