Fixing Vimeo captions, WIP on settings menu, prettier and VS code settings

.eslintrc.json

@@ -14,6 +14,7 @@
             "SwitchCase": 1
         }],
         "quotes": ["error", "single"],
-        "semi": ["error", "always"]
+        "semi": ["error", "always"],
+        "eqeqeq": ["error", "always"]
     }
 }

.jsbeautifyrc

@@ -1,32 +0,0 @@
-{
-    "html": {
-        "allowed_file_extensions": []
-    },
-    "css": {
-        "allowed_file_extensions": []
-    },
-    "js": {
-        "allowed_file_extensions": ["js", "json", "jsbeautifyrc"],
-        "brace_style": "collapse",
-        "break_chained_methods": false,
-        "e4x": false,
-        "end_with_newline": false,
-        "indent_char": " ",
-        "indent_level": 0,
-        "indent_size": 4,
-        "indent_with_tabs": false,
-        "jslint_happy": false,
-        "keep_array_indentation": true,
-        "keep_function_indentation": true,
-        "max_preserve_newlines": 2,
-        "preserve_newlines": true,
-        "space_after_anon_function": false,
-        "space_before_conditional": true,
-        "space_in_empty_paren": false,
-        "space_in_paren": false,
-        "unescape_strings": false,
-        "wrap_line_length": 0,
-        "wrap_attributes": "auto",
-        "wrap_attributes_indent_size": 4
-    }
-}

.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+    // Exclude from the editor
+    "files.exclude": {
+        "**/node_modules": true
+    },
+
+    // Exclude from search
+    "search.exclude": {
+        "dist/": true
+    },
+
+    // Formatting
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true,
+
+    // Trim on save
+    "files.trimTrailingWhitespace": true,
+
+    // Prettier settings
+    "prettier.tabWidth": 4,
+    "prettier.eslintIntegration": true,
+    "prettier.printWidth": 120,
+    "prettier.cssEnable": ["css", "less", "scss"]
+}

demo/src/js/main.js

@@ -52,7 +52,7 @@
         vimeo: 'vimeo'
     };
     var currentType = window.location.hash.replace('#', '');
-    var historySupport = (window.history && window.history.pushState);
+    var historySupport = window.history && window.history.pushState;
 
     // Bind to each button
     [].forEach.call(buttons, function(button) {
@@ -62,9 +62,13 @@
             newSource(type);
 
             if (historySupport) {
-                history.pushState({
+                history.pushState(
-                    'type': type
+                    {
-                }, '', '#' + type);
+                        type: type
+                    },
+                    '',
+                    '#' + type
+                );
             }
         });
     });
@@ -87,9 +91,13 @@
 
         // Replace current history state
         if (currentType in types) {
-            history.replaceState({
+            history.replaceState(
-                'type': currentType
+                {
-            }, '', (video ? '' : '#' + currentType));
+                    type: currentType
+                },
+                '',
+                video ? '' : '#' + currentType
+            );
         }
 
         // If it's not video, load the source
@@ -122,18 +130,28 @@
                 player.source({
                     type: 'video',
                     title: 'View From A Blue Moon',
-                    sources: [{
+                    sources: [
+                        {
                             src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
                             type: 'video/mp4'
-                    }],
+                        }
+                    ],
                     poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
-                    tracks: [{
+                    tracks: [
+                        {
                             kind: 'captions',
                             label: 'English',
                             srclang: 'en',
                             src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
                             default: true
-                    }]
+                        },
+                        {
+                            kind: 'captions',
+                            label: 'French',
+                            srclang: 'fr',
+                            src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
+                        }
+                    ]
                 });
                 break;
 
@@ -141,13 +159,16 @@
                 player.source({
                     type: 'audio',
                     title: 'Kishi Bashi – “It All Began With A Burst”',
-                    sources: [{
+                    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'
-                    }]
+                        }
+                    ]
                 });
                 break;
 
@@ -155,10 +176,12 @@
                 player.source({
                     type: 'video',
                     title: 'View From A Blue Moon',
-                    sources: [{
+                    sources: [
+                        {
                             src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
                             type: 'youtube'
-                    }]
+                        }
+                    ]
                 });
                 break;
 
@@ -166,10 +189,12 @@
                 player.source({
                     type: 'video',
                     title: 'View From A Blue Moon',
-                    sources: [{
+                    sources: [
+                        {
                             src: 'https://vimeo.com/76979871',
                             type: 'vimeo'
-                    }]
+                        }
+                    ]
                 });
                 break;
         }
@@ -198,7 +223,9 @@
 if (window.location.host === 'plyr.io') {
     (function(i, s, o, g, r, a, m) {
         i.GoogleAnalyticsObject = r;
-        i[r] = i[r] || function() {
+        i[r] =
+            i[r] ||
+            function() {
                 (i[r].q = i[r].q || []).push(arguments);
             };
         i[r].l = 1 * new Date();

package.json

@@ -7,19 +7,19 @@
     "dependencies": {},
     "devDependencies": {
         "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.1",
+        "gulp-autoprefixer": "^4.0.0",
-    "gulp-clean-css": "^2.0.12",
+        "gulp-clean-css": "^3.7.0",
         "gulp-concat": "^2.3.3",
-    "gulp-less": "^3.0.5",
+        "gulp-less": "^3.3.2",
         "gulp-open": "^2.0.0",
         "gulp-rename": "^1.2.0",
-    "gulp-replace": "^0.5.3",
+        "gulp-replace": "^0.6.1",
-    "gulp-s3": "^0.3.0",
+        "gulp-s3": "^0.11.0",
-    "gulp-sass": "^2.3.2",
+        "gulp-sass": "^3.1.0",
         "gulp-size": "^2.1.0",
-    "gulp-svgmin": "^1.2.2",
+        "gulp-svgmin": "^1.2.4",
         "gulp-svgstore": "^6.0.0",
-    "gulp-uglify": "^2.0.0",
+        "gulp-uglify": "^3.0.0",
         "gulp-util": "^3.0.7",
         "run-sequence": "^1.2.2",
         "through2": "^2.0.1"

src/less/plyr.less

@@ -9,7 +9,9 @@
 // Animation
 // ---------------------------------------
 @keyframes plyr-progress {
-    to { background-position: @plyr-progress-loading-size 0; }
+    to {
+        background-position: @plyr-progress-loading-size 0;
+    }
 }
 @keyframes plyr-popup {
     from {
@@ -46,7 +48,10 @@
 
     & when (@plyr-touch-action = true) {
         // Fix 300ms delay
-        a, button, input, label {
+        a,
+        button,
+        input,
+        label {
             touch-action: manipulation;
         }
     }
@@ -232,19 +237,20 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: (@plyr-control-spacing * 2);
+    padding: @plyr-control-spacing;
     transform: translateY(-(@plyr-control-spacing * 4));
     transition: transform .3s ease;
     color: @plyr-captions-color;
-    font-size: @plyr-font-size-captions-base;
+    font-size: @plyr-font-size-captions-small;
     text-align: center;
 
     span {
         border-radius: 2px;
-        padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
+        padding: .2em .5em;
         background: @plyr-captions-bg;
         box-decoration-break: clone;
-        line-height: 150%;
+        line-height: 170%;
+        white-space: pre-wrap;
 
         // Firefox adds a <div> when using getCueAsHTML()
         div {
@@ -255,6 +261,10 @@
         display: none;
     }
 
+    @media (min-width: @plyr-bp-screen-sm) {
+        padding: (@plyr-control-spacing * 2);
+        font-size: @plyr-font-size-captions-base;
+    }
     @media (min-width: @plyr-bp-screen-md) {
         font-size: @plyr-font-size-captions-medium;
     }
@@ -335,9 +345,7 @@
     background: transparent;
     border-radius: 3px;
     cursor: pointer;
-    transition: background .3s ease,
+    transition: background .3s ease, color .3s ease, opacity .3s ease;
-                color .3s ease,
-                opacity .3s ease;
     color: inherit;
 
     svg {
@@ -346,7 +354,9 @@
         display: block;
         fill: currentColor;
         pointer-events: none;
+        filter: drop-shadow(0 1px 1px fade(#000, 15%));
     }
+
     // Hide toggle icons by default
     .icon--exit-fullscreen,
     .icon--muted,
@@ -367,8 +377,8 @@
     right: 0;
     bottom: 0;
     z-index: 2;
-    padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
+    padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
-    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
+    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
@@ -521,8 +531,7 @@
 
         > div {
             overflow: hidden;
-            transition: height .35s cubic-bezier(.4, 0, .2, 1),
+            transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
-                        width .35s cubic-bezier(.4, 0, .2, 1);
         }
 
         // Arrow
@@ -719,7 +728,6 @@
     }
 }
 
-
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element
@@ -830,6 +838,7 @@
 .plyr--video .plyr__progress--buffer,
 .plyr--video .plyr__volume--display {
     background: @plyr-video-range-track-bg;
+    box-shadow: 0 1px 1px fade(#000, 15%);
 }
 .plyr--video .plyr__progress--buffer {
     color: @plyr-video-progress-buffered-bg;
@@ -855,7 +864,8 @@
         @plyr-progress-loading-bg 50%,
         @plyr-progress-loading-bg 75%,
         transparent 75%,
-        transparent);
+        transparent
+    );
     color: transparent;
 }
 .plyr--video.plyr--loading .plyr__progress--buffer {
@@ -886,6 +896,9 @@
         margin-right: @plyr-control-spacing;
     }
 }
+.plyr--video .plyr__time {
+    text-shadow: 0 1px 1px fade(#000, 15%);
+}
 
 // Volume
 // --------------------------------------------------------------

src/less/variables.less

@@ -22,8 +22,9 @@
 @plyr-captions-bg: fade(#343f4a, 80%);
 @plyr-captions-color: #fff;
 @plyr-font-size-captions-base: @plyr-font-size-base;
-@plyr-font-size-captions-medium:        ceil(@plyr-font-size-base * 1.5);
+@plyr-font-size-captions-small: @plyr-font-size-small;
-@plyr-font-size-captions-large:         (@plyr-font-size-base * 2);
+@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.25);
+@plyr-font-size-captions-large: (@plyr-font-size-base * 1.5);
 
 // Controls
 @plyr-control-icon-size: 18px;