ESLint, comments, quality and speed menus

6 files changed, 173 insertions, 157 deletions

diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index 3d44b94f..2ff94121 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -142,12 +142,11 @@
                     type: 'audio',
                     title: 'Kishi Bashi – “It All Began With A Burst”',
                     sources: [{
-                            src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-                            type: 'audio/mp3'
-                    },
-                        {
-                            src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-                            type: 'audio/ogg'
+                        src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+                        type: 'audio/mp3'
+                    }, {
+                        src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                        type: 'audio/ogg'
                     }]
                 });
                 break;
@@ -200,15 +199,15 @@ if (window.location.host === 'plyr.io') {
     (function(i, s, o, g, r, a, m) {
         i.GoogleAnalyticsObject = r;
         i[r] = i[r] || function() {
-            (i[r].q = i[r].q || []).push(arguments)
+            (i[r].q = i[r].q || []).push(arguments);
         };
         i[r].l = 1 * new Date();
         a = s.createElement(o);
         m = s.getElementsByTagName(o)[0];
         a.async = 1;
         a.src = g;
-        m.parentNode.insertBefore(a, m)
+        m.parentNode.insertBefore(a, m);
     })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
     window.ga('create', 'UA-40881672-11', 'auto');
     window.ga('send', 'pageview');
-}
+}
\ No newline at end of file
diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less
index 7f71dbb4..7e5f97c6 100644
--- a/demo/src/less/components/base.less
+++ b/demo/src/less/components/base.less
@@ -15,12 +15,17 @@
 
 // Base
 html {
-    background: @body-background;
+    height: 100%;
+    background: @body-background fixed;
 }
 body {
-    max-width: @container-width;
-    margin: auto;
+    margin: 0 auto @padding-base;
     padding: (@padding-base / 2);
+    max-width: @example-width-video;
+
+    @media (min-width: @screen-sm) {
+        margin-bottom: (@padding-base * 2);
+    }
 }
 
 // Header
@@ -31,18 +36,8 @@ header {
     p {
         .font-size(18);
     }
-
     @media (min-width: @screen-sm) {
         padding-top: (@padding-base * 3);
         padding-bottom: (@padding-base * 3);
     }
-}
-
-// Sections
-section {
-    margin-bottom: @padding-base;
-
-    @media (min-width: @screen-sm) {
-        margin-bottom: (@padding-base * 2);
-    }
 }
\ No newline at end of file
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index d1538967..c99a0836 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -3,160 +3,170 @@
 // ==========================================================================
 
 nav {
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        font-size: 0;
-    }
-    li {
-        display: inline-block;
-        margin-top: (@padding-base / 2);
-        .font-size();
-        white-space: nowrap;
-    }
-    li + li {
-        margin-left: @padding-base;
-    }
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		font-size: 0;
+	}
+	li {
+		display: inline-block;
+		margin-top: (@padding-base / 2);
+		.font-size();
+		white-space: nowrap;
+	}
+	li + li {
+		margin-left: @padding-base;
+	}
 }
 
 // Tabs
 .btn__bar {
-    position: relative;
-    margin: 0 auto @padding-base;
-    white-space: nowrap;
-
-    &::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: @off-white;
-    }
-
-    ul {
-        position: relative;
-        z-index: 1;
-        display: inline-block;
-    }
-    li {
-        margin: 0;
-
-        &:first-child .btn {
-            border-radius: 4px 0 0 4px;
-        }
-        &:last-child .btn {
-            border-radius: 0 4px 4px 0;
-        }
-        & + li .btn {
-            margin-left: -1px;
-        }
-
-        &.active .btn {
-            &:extend(.btn--primary);
-            position: relative;
-            z-index: 1;
-
-            .icon {
-                color: inherit;
-            }
-        }
-        &.active + li .btn:hover {
-            z-index: 0;
-        }
-    }
-    .btn {
-        position: relative;
-        display: block;
-        border-radius: 0;
-
-        &:hover,
-        &:focus {
-            z-index: 1;
-        }
-    }
-
-    @media (min-width: 560px) {
-        margin-bottom: (@padding-base * 2);
-    }
+	position: relative;
+	margin: 0 auto @padding-base;
+	max-width: @example-width-video;
+	white-space: nowrap;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background: @gray-lighter;
+	}
+
+	ul {
+		position: relative;
+		z-index: 1;
+		display: inline-block;
+		user-select: none;
+	}
+	li {
+		margin: 0;
+
+		&:first-child .btn {
+			border-radius: 4px 0 0 4px;
+		}
+		&:last-child .btn {
+			border-radius: 0 4px 4px 0;
+		}
+		& + li .btn {
+			margin-left: -1px;
+		}
+
+		&.active .btn {
+			&:extend(.btn--primary);
+			box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
+			position: relative;
+			z-index: 1;
+
+			.icon {
+				color: inherit;
+			}
+		}
+		&.active + li .btn:hover {
+			z-index: 0;
+		}
+	}
+	.btn {
+		position: relative;
+		display: block;
+		border-radius: 0;
+
+		&:hover,
+		&:focus {
+			z-index: 1;
+		}
+	}
+
+	@media (min-width: 560px) {
+		margin-bottom: (@padding-base * 2);
+	}
 }
 
 // Shared
 .btn,
 .btn__count {
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: @border-radius-base;
-    user-select: none;
-    font-weight: @font-weight-bold;
+	display: inline-block;
+	vertical-align: middle;
+	border-radius: @border-radius-base;
+	user-select: none;
+	font-weight: @font-weight-bold;
 }
 
 // Buttons
 .btn {
-    padding: (@padding-base / 2) ((@padding-base / 2) + 2);
-    background: #fff;
-    border: 1px solid @gray-lighter;
-    color: @gray;
-    transition: all .2s ease;
-    .font-size(@font-size-small);
-
-    &:hover,
-    &:focus {
-        border-color: @gray-light;
-    }
+	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
+	background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
+	border: 1px solid @gray-light;
+	box-shadow: 0 1px 1px rgba(0,0,0, .05);
+	text-shadow: 0 1px 1px #fff;
+	color: @gray;
+	transition: background .1s ease, color .1s ease;
+	.font-size(@font-size-small);
+
+	&:hover,
+	&:focus {
+		border-color: darken(@gray-light, 8%);
+		color: @gray;
+		outline: 0;
+	}
 }
 
 // Sizes
 .btn--large {
-    padding: (@padding-base / 2) @padding-base;
-    .font-size();
+	padding: (@padding-base / 2) @padding-base;
+	.font-size();
 }
 
 // Styles
 .btn--primary {
-    background-color: @link-color;
-    border-color: @link-color;
-    color: #fff;
-
-    &:hover,
-    &:focus {
-        color: #fff;
-        border-color: darken(@link-color, 5%);
-    }
+	background-image: linear-gradient(@link-color, darken(@link-color, 5%));
+	background-color: @link-color;
+	border-color: darken(@link-color, 10%);
+	box-shadow: 0 1px 1px rgba(0,0,0, .15);
+	text-shadow: 0 1px 1px rgba(0,0,0, .1);
+	color: #fff;
+
+	&:hover,
+	&:focus {
+		color: #fff;
+		border-color: darken(@link-color, 20%);
+	}
 }
 .btn--youtube .icon {
-    color: @color-youtube;
+	color: @color-youtube;
 }
 .btn--vimeo .icon {
-    color: @color-vimeo;
+	color: @color-vimeo;
 }
 .btn--twitter .icon {
-    color: @color-twitter;
+	color: @color-twitter;
 }
 
 // Count bubble
 .btn__count {
-    position: relative;
-    margin-left: (@padding-base / 2);
-    padding: (@padding-base / 2) (@padding-base * .75);
-    background: #fff;
-    border: 1px solid @gray-lighter;
-
-    &::before {
-        content: "";
-        position: absolute;
-        display: block;
-        width: @arrow-size;
-        height: @arrow-size;
-        left: 1px;
-        top: 50%;
-        margin-top: -(@arrow-size / 2);
-
-        background: inherit;
-        border: inherit;
-        border-width: 1px 0 0 1px;
-        transform: rotate(-45deg) translate(-50%, -50%);
-    }
+	position: relative;
+	margin-left: (@padding-base / 2);
+	padding: (@padding-base / 2) (@padding-base * .75);
+	background: #fff;
+	border: 1px solid @gray-light;
+
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: @arrow-size;
+		height: @arrow-size;
+		left: 1px;
+		top: 50%;
+		margin-top: -(@arrow-size / 2);
+
+		background: inherit;
+		border: inherit;
+		border-width: 1px 0 0 1px;
+		transform: rotate(-45deg) translate(-50%, -50%);
+	}
 }
diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less
index ff22e37b..a9e72d21 100644
--- a/demo/src/less/components/examples.less
+++ b/demo/src/less/components/examples.less
@@ -30,5 +30,17 @@ video {
 
 // Style full supported player
 .plyr__cite {
+    display: none;
     margin-top: @padding-base;
+
+    .icon {
+        margin-right: (@padding-base / 4);
+    }
+}
+
+.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
+.plyr--audio ~ ul .plyr__cite--audio,
+.plyr--youtube ~ ul .plyr__cite--youtube,
+.plyr--vimeo ~ ul .plyr__cite--vimeo {
+    display: block;
 }
diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less
index 1f16161a..951be36d 100644
--- a/demo/src/less/components/type.less
+++ b/demo/src/less/components/type.less
@@ -51,22 +51,22 @@ li {
 a {
     text-decoration: none;
     color: @link-color;
-    transition: color .3s ease;
+    border-bottom: 1px dotted currentColor;
+    transition: background .3s ease, color .3s ease, border .3s ease;
 
     &:hover,
     &:focus {
         color: @gray-dark;
+        border-bottom-color: rgba(0,0,0,0);
+    }
+    &:focus {
+        .tab-focus();
     }
     &.logo {
         border: 0;
     }
 }
 
-a:focus,
-button:focus {
-    .tab-focus();
-}
-
 .color--vimeo {
     color: @color-vimeo;
 }
diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less
index 25e91674..4768cdd6 100644
--- a/demo/src/less/variables.less
+++ b/demo/src/less/variables.less
@@ -9,7 +9,7 @@
 @gray-lighter:              #dbe3e8;
 @off-white:                 #f2f5f7;
 
-@brand-primary:             #1aafff;
+@brand-primary:             #3498db;
 @brand-secondary:           #02BD9B;
 
 // Brands
@@ -18,14 +18,14 @@
 @color-vimeo:               #19b7ed;
 
 // Base
-@body-background:           #fff;
+@body-background:           @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
 
 // Type
 @font-size-base:            16;
 @font-size-small:           14;
 @font-size-h1:              64;
 @font-weight-base:          500;
-@font-weight-bold:          600;
+@font-weight-bold:          700;
 
 // Elements
 @link-color:                @brand-primary;
@@ -45,4 +45,4 @@
 
 // Examples
 @example-width-audio:       520px;
-@container-width:       	800px;
+@example-width-video:       1200px;