ES6-ified

5 files changed, 125 insertions, 340 deletions

diff --git a/demo/src/js/main.js b/demo/src/js/demo.js
index bc2ea0aa..eef49596 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/demo.js
@@ -4,9 +4,7 @@
 // Please see readme.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
-/*global Plyr*/
-
-(function() {
+document.addEventListener('DOMContentLoaded', () => {
     if (window.shr) {
         window.shr.setup({
             count: {
@@ -15,12 +13,33 @@
         });
     }
 
-    /*document.body.addEventListener('ready', function(event) {
+    // Setup tab focus
+    const tabClassName = 'tab-focus';
+
+    // Remove class on blur
+    document.addEventListener('focusout', event => {
+        event.target.classList.remove(tabClassName);
+    });
+
+    // Add classname to tabbed elements
+    document.addEventListener('keydown', event => {
+        if (event.keyCode !== 9) {
+            return;
+        }
+
+        // Delay the adding of classname until the focus has changed
+        // This event fires before the focusin event
+        window.setTimeout(() => {
+            document.activeElement.classList.add(tabClassName);
+        }, 0);
+    });
+
+    /* document.body.addEventListener('ready', function(event) {
         console.log(event);
-    });*/
+    }); */
 
     // Setup the player
-    var player = new Plyr('#player', {
+    const player = new window.Plyr('#player', {
         debug: true,
         title: 'View From A Blue Moon',
         iconUrl: '../dist/plyr.svg',
@@ -28,70 +47,36 @@
             controls: true,
         },
         captions: {
-            defaultActive: true,
+            active: true,
         },
-        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],
+        controls: [
+            'play-large',
+            'play',
+            'progress',
+            'current-time',
+            'mute',
+            'volume',
+            'captions',
+            'settings',
+            'fullscreen',
+            'pip',
+            'airplay',
+        ],
     });
 
     // Expose for testing
     window.player = player;
 
     // Setup type toggle
-    var buttons = document.querySelectorAll('[data-source]');
-    var types = {
+    const buttons = document.querySelectorAll('[data-source]');
+    const types = {
         video: 'video',
         audio: 'audio',
         youtube: 'youtube',
         vimeo: 'vimeo',
     };
-    var currentType = window.location.hash.replace('#', '');
-    var historySupport = window.history && window.history.pushState;
-
-    // Bind to each button
-    [].forEach.call(buttons, function(button) {
-        button.addEventListener('click', function() {
-            var type = this.getAttribute('data-source');
-
-            newSource(type);
-
-            if (historySupport) {
-                history.pushState({ type: type }, '', '#' + type);
-            }
-        });
-    });
-
-    // List for backwards/forwards
-    window.addEventListener('popstate', function(event) {
-        if (event.state && 'type' in event.state) {
-            newSource(event.state.type);
-        }
-    });
-
-    // On load
-    if (historySupport) {
-        var video = !currentType.length;
-
-        // If there's no current type set, assume video
-        if (video) {
-            currentType = types.video;
-        }
-
-        // Replace current history state
-        if (currentType in types) {
-            history.replaceState(
-                {
-                    type: currentType,
-                },
-                '',
-                video ? '' : '#' + currentType
-            );
-        }
-
-        // If it's not video, load the source
-        if (currentType !== types.video) {
-            newSource(currentType, true);
-        }
-    }
+    let currentType = window.location.hash.replace('#', '');
+    const historySupport = window.history && window.history.pushState;
 
     // Toggle class on an element
     function toggleClass(element, className, state) {
@@ -109,7 +94,7 @@
 
         switch (type) {
             case types.video:
-                player.source({
+                player.src = {
                     type: 'video',
                     title: 'View From A Blue Moon',
                     sources: [
@@ -134,11 +119,12 @@
                             src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
                         },
                     ],
-                });
+                };
+
                 break;
 
             case types.audio:
-                player.source({
+                player.src = {
                     type: 'audio',
                     title: 'Kishi Bashi – “It All Began With A Burst”',
                     sources: [
@@ -151,11 +137,12 @@
                             type: 'audio/ogg',
                         },
                     ],
-                });
+                };
+
                 break;
 
             case types.youtube:
-                player.source({
+                player.src = {
                     type: 'video',
                     title: 'View From A Blue Moon',
                     sources: [
@@ -164,11 +151,12 @@
                             type: 'youtube',
                         },
                     ],
-                });
+                };
+
                 break;
 
             case types.vimeo:
-                player.source({
+                player.src = {
                     type: 'video',
                     title: 'View From A Blue Moon',
                     sources: [
@@ -177,7 +165,11 @@
                             type: 'vimeo',
                         },
                     ],
-                });
+                };
+
+                break;
+
+            default:
                 break;
         }
 
@@ -185,23 +177,68 @@
         currentType = type;
 
         // Remove active classes
-        for (var x = buttons.length - 1; x >= 0; x--) {
-            toggleClass(buttons[x].parentElement, 'active', false);
-        }
+        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
 
         // Set active on parent
-        toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true);
+        toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
 
         // Show cite
-        [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
+        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
             cite.setAttribute('hidden', '');
         });
-        document.querySelector('.plyr__cite--' + type).removeAttribute('hidden');
+        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
+    }
+
+    // Bind to each button
+    Array.from(buttons).forEach(button => {
+        button.addEventListener('click', () => {
+            const type = button.getAttribute('data-source');
+
+            newSource(type);
+
+            if (historySupport) {
+                window.history.pushState({ type }, '', `#${type}`);
+            }
+        });
+    });
+
+    // List for backwards/forwards
+    window.addEventListener('popstate', event => {
+        if (event.state && 'type' in event.state) {
+            newSource(event.state.type);
+        }
+    });
+
+    // On load
+    if (historySupport) {
+        const video = !currentType.length;
+
+        // If there's no current type set, assume video
+        if (video) {
+            currentType = types.video;
+        }
+
+        // Replace current history state
+        if (currentType in types) {
+            window.history.replaceState(
+                {
+                    type: currentType,
+                },
+                '',
+                video ? '' : `#${currentType}`
+            );
+        }
+
+        // If it's not video, load the source
+        if (currentType !== types.video) {
+            newSource(currentType, true);
+        }
     }
-})();
+});
 
 // Google analytics
 // For demo site (https://plyr.io) only
+/* eslint-disable */
 if (window.location.host === 'plyr.io') {
     (function(i, s, o, g, r, a, m) {
         i.GoogleAnalyticsObject = r;
@@ -220,3 +257,4 @@ if (window.location.host === 'plyr.io') {
     window.ga('create', 'UA-40881672-11', 'auto');
     window.ga('send', 'pageview');
 }
+/* eslint-enable */
diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js
deleted file mode 100644
index eac1e99e..00000000
--- a/demo/src/js/lib/classlist.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/*
- * classList.js: Cross-browser full element.classList implementation.
- * 1.1.20150312
- *
- * By Eli Grey, http://eligrey.com
- * License: Dedicated to the public domain.
- *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
- */
-
-/*global self, document, DOMException */
-
-/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
-
-if ("document" in self) {
-
-// Full polyfill for browsers with no classList support
-if (!("classList" in document.createElement("_"))) {
-
-(function (view) {
-
-"use strict";
-
-if (!('Element' in view)) return;
-
-var
-	  classListProp = "classList"
-	, protoProp = "prototype"
-	, elemCtrProto = view.Element[protoProp]
-	, objCtr = Object
-	, strTrim = String[protoProp].trim || function () {
-		return this.replace(/^\s+|\s+$/g, "");
-	}
-	, arrIndexOf = Array[protoProp].indexOf || function (item) {
-		var
-			  i = 0
-			, len = this.length
-		;
-		for (; i < len; i++) {
-			if (i in this && this[i] === item) {
-				return i;
-			}
-		}
-		return -1;
-	}
-	// Vendors: please allow content code to instantiate DOMExceptions
-	, DOMEx = function (type, message) {
-		this.name = type;
-		this.code = DOMException[type];
-		this.message = message;
-	}
-	, checkTokenAndGetIndex = function (classList, token) {
-		if (token === "") {
-			throw new DOMEx(
-				  "SYNTAX_ERR"
-				, "An invalid or illegal string was specified"
-			);
-		}
-		if (/\s/.test(token)) {
-			throw new DOMEx(
-				  "INVALID_CHARACTER_ERR"
-				, "String contains an invalid character"
-			);
-		}
-		return arrIndexOf.call(classList, token);
-	}
-	, ClassList = function (elem) {
-		var
-			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
-			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
-			, i = 0
-			, len = classes.length
-		;
-		for (; i < len; i++) {
-			this.push(classes[i]);
-		}
-		this._updateClassName = function () {
-			elem.setAttribute("class", this.toString());
-		};
-	}
-	, classListProto = ClassList[protoProp] = []
-	, classListGetter = function () {
-		return new ClassList(this);
-	}
-;
-// Most DOMException implementations don't allow calling DOMException's toString()
-// on non-DOMExceptions. Error's toString() is sufficient here.
-DOMEx[protoProp] = Error[protoProp];
-classListProto.item = function (i) {
-	return this[i] || null;
-};
-classListProto.contains = function (token) {
-	token += "";
-	return checkTokenAndGetIndex(this, token) !== -1;
-};
-classListProto.add = function () {
-	var
-		  tokens = arguments
-		, i = 0
-		, l = tokens.length
-		, token
-		, updated = false
-	;
-	do {
-		token = tokens[i] + "";
-		if (checkTokenAndGetIndex(this, token) === -1) {
-			this.push(token);
-			updated = true;
-		}
-	}
-	while (++i < l);
-
-	if (updated) {
-		this._updateClassName();
-	}
-};
-classListProto.remove = function () {
-	var
-		  tokens = arguments
-		, i = 0
-		, l = tokens.length
-		, token
-		, updated = false
-		, index
-	;
-	do {
-		token = tokens[i] + "";
-		index = checkTokenAndGetIndex(this, token);
-		while (index !== -1) {
-			this.splice(index, 1);
-			updated = true;
-			index = checkTokenAndGetIndex(this, token);
-		}
-	}
-	while (++i < l);
-
-	if (updated) {
-		this._updateClassName();
-	}
-};
-classListProto.toggle = function (token, force) {
-	token += "";
-
-	var
-		  result = this.contains(token)
-		, method = result ?
-			force !== true && "remove"
-		:
-			force !== false && "add"
-	;
-
-	if (method) {
-		this[method](token);
-	}
-
-	if (force === true || force === false) {
-		return force;
-	} else {
-		return !result;
-	}
-};
-classListProto.toString = function () {
-	return this.join(" ");
-};
-
-if (objCtr.defineProperty) {
-	var classListPropDesc = {
-		  get: classListGetter
-		, enumerable: true
-		, configurable: true
-	};
-	try {
-		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
-	} catch (ex) { // IE 8 doesn't support enumerable:true
-		if (ex.number === -0x7FF5EC54) {
-			classListPropDesc.enumerable = false;
-			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
-		}
-	}
-} else if (objCtr[protoProp].__defineGetter__) {
-	elemCtrProto.__defineGetter__(classListProp, classListGetter);
-}
-
-}(self));
-
-} else {
-// There is full or partial native classList support, so just check if we need
-// to normalize the add/remove and toggle APIs.
-
-(function () {
-	"use strict";
-
-	var testElement = document.createElement("_");
-
-	testElement.classList.add("c1", "c2");
-
-	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
-	// classList.remove exist but support only one argument at a time.
-	if (!testElement.classList.contains("c2")) {
-		var createMethod = function(method) {
-			var original = DOMTokenList.prototype[method];
-
-			DOMTokenList.prototype[method] = function(token) {
-				var i, len = arguments.length;
-
-				for (i = 0; i < len; i++) {
-					token = arguments[i];
-					original.call(this, token);
-				}
-			};
-		};
-		createMethod('add');
-		createMethod('remove');
-	}
-
-	testElement.classList.toggle("c3", false);
-
-	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
-	// support the second argument.
-	if (testElement.classList.contains("c3")) {
-		var _toggle = DOMTokenList.prototype.toggle;
-
-		DOMTokenList.prototype.toggle = function(token, force) {
-			if (1 in arguments && !this.contains(token) === !force) {
-				return force;
-			} else {
-				return _toggle.call(this, token);
-			}
-		};
-
-	}
-
-	testElement = null;
-}());
-
-}
-
-}
\ No newline at end of file
diff --git a/demo/src/js/lib/tab-focus.js b/demo/src/js/lib/tab-focus.js
deleted file mode 100644
index 06e51203..00000000
--- a/demo/src/js/lib/tab-focus.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// ==========================================================================
-// tab-focus.js
-// Detect keyboard tabbing
-// ==========================================================================
-
-(function() {
-    var className = 'tab-focus';
-
-    // Remove class on blur
-    document.addEventListener('focusout', function(event) {
-        event.target.classList.remove(className);
-    });
-
-    // Add classname to tabbed elements
-    document.addEventListener('keydown', function(event) {
-        if (event.keyCode !== 9) {
-            return;
-        }
-
-        // Delay the adding of classname until the focus has changed
-        // This event fires before the focusin event
-        window.setTimeout(function() {
-            document.activeElement.classList.add(className);
-        }, 0);
-    });
-})();
diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less
index 29f185bd..9180e4b3 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/less/components/icons.less
@@ -7,6 +7,7 @@
     fill: currentColor;
     width: @icon-size;
     height: @icon-size;
+    vertical-align: -0.15em;
 }
 
 // Within elements
@@ -18,5 +19,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-    margin-right: (@spacing-base / 2);
+    margin-right: (@spacing-base / 4);
 }
diff --git a/demo/src/less/layout/core.less b/demo/src/less/layout/core.less
index dc177088..7f1a93e4 100644
--- a/demo/src/less/layout/core.less
+++ b/demo/src/less/layout/core.less
@@ -2,12 +2,21 @@
 // Core
 // ==========================================================================
 
-html {
-    background: @page-background;
-    background-attachment: fixed;
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    display: flex;
+    width: 100%;
 }
 
 html {
+    background: @page-background;
+    background-attachment: fixed;
     height: 100%;
 }