Linting and minor changes

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-    "extends": ["eslint:recommended"],
+    "extends": ["eslint:recommended", "prettier"],
     "env": {
         "browser": true
     },

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "useTabs": false,
+    "tabWidth": 4,
+    "printWidth": 160,
+    "singleQuote": true,
+    "trailingComma": "es5"
+}

.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+    "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+    "rules": {
+        "indentation": 4,
+        "string-quotes": "single"
+    }
+}

.vscode/settings.json

@@ -9,17 +9,22 @@
         "dist/": true
     },
 
+    // Linting
+    "stylelint.enable": true,
+    "css.validate": false,
+    "scss.validate": false,
+    "javascript.validate.enable": false,
+
+    // Prettier
+    "prettier.eslintIntegration": true,
+    "prettier.cssEnable": ["css", "less"],
+    "prettier.stylelintIntegration": true,
+
     // Formatting
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
     "editor.formatOnSave": true,
 
     // Trim on save
-    "files.trimTrailingWhitespace": true,
+    "files.trimTrailingWhitespace": true
-
+}
-    // Prettier settings
-    "prettier.tabWidth": 4,
-    "prettier.eslintIntegration": true,
-    "prettier.printWidth": 120,
-    "prettier.cssEnable": ["css", "less", "scss"]
-}

demo/index.html

@@ -117,7 +117,7 @@
        c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
             />
         </svg>
-        <p>If you like Plyr, get the word out and
+        <p>If you think others would like Plyr,
             <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
                 target="_blank" data-shr-network="twitter">tweet it</a>
         </p>

demo/src/js/main.js

@@ -30,19 +30,7 @@
         captions: {
             defaultActive: true,
         },
-        controls: [
+        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],
-            'play-large',
-            'play',
-            'progress',
-            'current-time',
-            'mute',
-            'volume',
-            'captions',
-            'settings',
-            'fullscreen',
-            'pip',
-            'airplay',
-        ],
     });
 
     // Expose for testing
@@ -67,13 +55,7 @@
             newSource(type);
 
             if (historySupport) {
-                history.pushState(
+                history.pushState({ type: type }, '', '#' + type);
-                    {
-                        type: type,
-                    },
-                    '',
-                    '#' + type
-                );
             }
         });
     });

demo/src/less/components/buttons.less

@@ -51,16 +51,14 @@
     &::before {
         content: '';
         position: absolute;
-        display: block;
+        width: 0;
-        width: @arrow-size;
+        height: 0;
-        height: @arrow-size;
+        right: 100%;
-        left: 1px;
         top: 50%;
-        margin-top: -(@arrow-size / 2);
+        transform: translateY(-50%);
 
-        background: inherit;
+        border: @arrow-size solid transparent;
-        border: inherit;
+        border-right-color: #fff;
-        border-width: 1px 0 0 1px;
+        border-left-width: 0;
-        transform: rotate(-45deg) translate(-50%, -50%);
     }
 }

demo/src/less/components/header.less

@@ -3,22 +3,18 @@
 // ==========================================================================
 
 header {
-    padding: @spacing-base;
+    padding-bottom: @spacing-base;
     text-align: center;
 
     p {
         .font-size(@font-size-large);
-        margin-bottom: @spacing-base * 1.5;
+        margin-bottom: (@spacing-base * 1.5);
-    }
-
-    @media @mq-sm {
-        padding-top: (@spacing-base * 3);
-        padding-bottom: (@spacing-base * 3);
     }
 
     @media @mq-md {
         max-width: 400px;
         margin-right: (@spacing-base * 2);
+        padding-bottom: (@spacing-base * 2);
         text-align: left;
     }
 }

demo/src/less/layout/core.less

@@ -7,13 +7,13 @@ html {
     background-attachment: fixed;
 }
 
-html,
+html {
-body {
     height: 100%;
 }
 
 body {
     display: flex;
+    min-height: 100%;
     align-items: center;
     flex-direction: column;
 }

demo/src/less/settings/cosmetic.less

@@ -3,7 +3,7 @@
 // ==========================================================================
 
 // Button count arrow size
-@arrow-size: 8px;
+@arrow-size: 5px;
 
 // Radii
 @border-radius-base: 4px;

demo/src/less/type/headings.less

@@ -4,7 +4,7 @@
 
 h1 {
     margin: 0 0 (@spacing-base / 2);
-    .font-size(@font-size-h1);
     font-weight: @font-weight-heavy;
     letter-spacing: @letter-spacing-headings;
+    .font-size(@font-size-h1);
 }

package.json

@@ -6,23 +6,28 @@
     "main": "src/js/plyr.js",
     "dependencies": {},
     "devDependencies": {
+        "eslint": "^4.9.0",
+        "eslint-config-prettier": "^2.6.0",
         "gulp": "^3.9.1",
         "gulp-autoprefixer": "^4.0.0",
-        "gulp-clean-css": "^3.7.0",
+        "gulp-clean-css": "^3.9.0",
-        "gulp-concat": "^2.3.3",
+        "gulp-concat": "^2.6.1",
         "gulp-less": "^3.3.2",
         "gulp-open": "^2.0.0",
-        "gulp-rename": "^1.2.0",
+        "gulp-rename": "^1.2.2",
         "gulp-replace": "^0.6.1",
         "gulp-s3": "^0.11.0",
         "gulp-sass": "^3.1.0",
         "gulp-size": "^2.1.0",
         "gulp-svgmin": "^1.2.4",
-        "gulp-svgstore": "^6.0.0",
+        "gulp-svgstore": "^6.1.0",
         "gulp-uglify": "^3.0.0",
-        "gulp-util": "^3.0.7",
+        "gulp-util": "^3.0.8",
-        "run-sequence": "^1.2.2",
+        "run-sequence": "^2.2.0",
-        "through2": "^2.0.1"
+        "stylelint": "^8.2.0",
+        "stylelint-config-prettier": "^1.0.2",
+        "stylelint-config-standard": "^17.0.0",
+        "through2": "^2.0.3"
     },
     "keywords": [
         "HTML5 Video",
@@ -48,4 +53,4 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Sam Potts <sam@potts.es>"
-}
+}

src/js/plyr.js

@@ -90,7 +90,7 @@
         // Speed default and options to display
         speed: {
             default: 1,
-            options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+            options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
         },
 
         // Keyboard shortcut settings

src/less/plyr.less

@@ -32,9 +32,11 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
+    overflow: hidden;
     font-family: @plyr-font-family;
     font-weight: @plyr-font-weight-normal;
     direction: ltr;
+    text-shadow: none;
 
     & when(@plyr-border-box = true) {
         // border-box everything
@@ -320,7 +322,6 @@
 .plyr__controls {
     display: flex;
     align-items: center;
-    line-height: 1;
     text-align: center;
 
     // Spacing
@@ -354,11 +355,6 @@
         }
     }
 }
-// Hide controls
-.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-}
 
 // Buttons
 .plyr__control {
@@ -408,7 +404,7 @@
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
-    transition: opacity 0.3s ease;
+    transition: all 0.4s ease-in-out;
 
     .plyr__control {
         svg {
@@ -424,6 +420,12 @@
         }
     }
 }
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    transform: translateY(100%);
+    pointer-events: none;
+}
 
 // Audio controls
 .plyr--audio .plyr__controls {
@@ -552,6 +554,7 @@
 
         background: @plyr-menu-bg;
         border-radius: 4px;
+        box-shadow: 0 1px 2px fade(#000, 20%);
 
         white-space: nowrap;
         text-align: left;
@@ -585,8 +588,9 @@
         // Options
         .plyr__control {
             display: flex;
+            align-items: center;
             width: 100%;
-            padding: @plyr-control-padding (@plyr-control-padding * 2);
+            padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
             color: @plyr-menu-color;
             font-weight: @plyr-font-weight-bold;
             user-select: none;
@@ -597,6 +601,7 @@
                 top: 50%;
                 transform: translateY(-50%);
                 border: 4px solid transparent;
+                transition: border-color 0.2s ease;
             }
 
             &--forward {
@@ -606,6 +611,11 @@
                     right: 5px;
                     border-left-color: fade(@plyr-menu-color, 80%);
                 }
+
+                &.tab-focus::after,
+                &:hover::after {
+                    border-left-color: currentColor;
+                }
             }
 
             &--back {
@@ -615,7 +625,7 @@
                 margin: @plyr-control-padding;
                 margin-bottom: floor(@plyr-control-padding / 2);
                 padding-left: ceil(@plyr-control-padding * 4);
-                font-weight: 500;
+                font-weight: @plyr-font-weight-normal;
 
                 &::after {
                     left: @plyr-control-padding;
@@ -633,6 +643,11 @@
                     background: fade(#000, 15%);
                     box-shadow: 0 1px 0 fade(#fff, 10%);
                 }
+
+                &.tab-focus::after,
+                &:hover::after {
+                    border-right-color: currentColor;
+                }
             }
         }
 
@@ -647,13 +662,13 @@
 
         // Option value
         .plyr__menu__value {
-            display: inherit;
+            display: flex;
+            align-items: center;
             margin-left: auto;
             padding-left: ceil(@plyr-control-padding * 3.5);
             pointer-events: none;
             overflow: hidden;
-            font-weight: 500;
+            font-weight: @plyr-font-weight-normal;
-            color: fade(@plyr-menu-color, 80%);
 
             .plyr__badge {
                 font-weight: @plyr-font-weight-bold;
@@ -665,7 +680,7 @@
 // Badge
 // --------------------------------------------------------------
 .plyr__badge {
-    padding: 2px 4px;
+    padding: 1px 4px;
     border-radius: 2px;
     background: @plyr-menu-color;
     color: @plyr-menu-bg;
@@ -685,10 +700,11 @@
     opacity: 0;
     background: @plyr-tooltip-bg;
     border-radius: @plyr-tooltip-radius;
+    box-shadow: 0 1px 2px fade(#000, 10%);
 
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
-    font-weight: 500;
+    font-weight: @plyr-font-weight-normal;
     line-height: 1.3;
 
     transform: translate(-50%, 10px) scale(0.8);

src/less/variables.less

@@ -13,13 +13,14 @@
 
 // Font
 @plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-@plyr-font-size-small: 14px;
 @plyr-font-size-base: 16px;
+@plyr-font-size-small: 14px;
+@plyr-font-size-tiny: 10px;
 @plyr-font-weight-normal: 500;
 @plyr-font-weight-bold: 600;
 
 // Captions
-@plyr-captions-bg: fade(#343f4a, 80%);
+@plyr-captions-bg: fade(#000, 80%);
 @plyr-captions-color: #fff;
 @plyr-font-size-captions-base: @plyr-font-size-base;
 @plyr-font-size-captions-small: @plyr-font-size-small;
@@ -41,8 +42,8 @@
 @plyr-audio-control-bg-hover: @plyr-color-main;
 
 // Tooltips
-@plyr-tooltip-bg: fade(#343f4a, 90%);
+@plyr-tooltip-bg: fade(#fff, 90%);
-@plyr-tooltip-color: #fff;
+@plyr-tooltip-color: #565d64;
 @plyr-tooltip-padding: (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size: 4px;
 @plyr-tooltip-radius: 3px;