Small tweaks

3 files changed, 103 insertions, 67 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index a63c4fa0..7e99bf3f 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -44,41 +44,6 @@
         showPosterOnEnd: false,
         disableContextMenu: true,
 
-        // Quality settings
-        quality: {
-            default: 'auto',
-            selected: 'auto'
-        },
-
-        // Set loops
-        loop: {
-            active: false,
-            start: 0,
-            end: null,
-            indicator: {
-                start: 0,
-                end: 0
-            }
-        },
-
-        // Speed up/down
-        speed: {
-            selected: 1,
-            options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
-        },
-
-        // Keyboard shortcut settings
-        keyboardShortcuts: {
-            focused: true,
-            global: false
-        },
-
-        // Display tooltips
-        tooltips: {
-            controls: false,
-            seek: true
-        },
-
         // Selectors
         // Change these to match your template if using custom HTML
         selectors: {
@@ -164,6 +129,41 @@
             tabFocus: 'tab-focus'
         },
 
+        // Quality settings
+        quality: {
+            default: 'auto',
+            selected: 'auto'
+        },
+
+        // Set loops
+        loop: {
+            active: false,
+            start: 0,
+            end: null,
+            indicator: {
+                start: 0,
+                end: 0
+            }
+        },
+
+        // Speed up/down
+        speed: {
+            selected: 1,
+            options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2]
+        },
+
+        // Keyboard shortcut settings
+        keyboardShortcuts: {
+            focused: true,
+            global: false
+        },
+
+        // Display tooltips
+        tooltips: {
+            controls: false,
+            seek: true
+        },
+
         // Captions settings
         captions: {
             active: false,
@@ -1290,6 +1290,19 @@
             }
         }
 
+        // Add elements to HTML5 media (source, tracks, etc)
+        function insertElements(type, attributes) {
+            if (utils.is.string(attributes)) {
+                utils.insertElement(type, player.media, {
+                    src: attributes
+                });
+            } else if (utils.is.array(attributes)) {
+                attributes.forEach(function(attribute) {
+                    utils.insertElement(type, player.media, attribute);
+                });
+            }
+        }
+
         // Trap focus inside container
         function focusTrap() {
             var tabbables = getElements('input:not([disabled]), button:not([disabled])');
@@ -1315,19 +1328,6 @@
             utils.on(player.elements.container, 'keydown', checkFocus, false);
         }
 
-        // Add elements to HTML5 media (source, tracks, etc)
-        function insertElements(type, attributes) {
-            if (utils.is.string(attributes)) {
-                utils.insertElement(type, player.media, {
-                    src: attributes
-                });
-            } else if (utils.is.array(attributes)) {
-                attributes.forEach(function(attribute) {
-                    utils.insertElement(type, player.media, attribute);
-                });
-            }
-        }
-
         // Get icon URL
         function getIconUrl() {
             return {
@@ -1536,7 +1536,13 @@
         }
 
         // Build the default HTML
+        // TODO: Set order based on order in the config.controls array?
         function createControls(data) {
+            // Do nothing if we want no controls
+            if (utils.is.empty(player.config.controls)) {
+                return;
+            }
+
             // Create the container
             var controls = utils.createElement('div', utils.getAttributesFromSelector(player.config.selectors.controls.wrapper));
 
@@ -1643,7 +1649,7 @@
             }
 
             // Settings button / menu
-            if (utils.inArray(player.config.controls, 'settings')) {
+            if (utils.inArray(player.config.controls, 'settings') && !utils.is.empty(player.config.settings)) {
                 var menu = utils.createElement('div', {
                     class: 'plyr__menu'
                 });
@@ -2269,7 +2275,7 @@
         }
 
         // Find the UI controls and store references in custom controls
-        // TODO: Allow settings menus with custom controls (coming soon!)
+        // TODO: Allow settings menus with custom controls
         function findElements() {
             try {
                 player.elements.controls = getElement(player.config.selectors.controls.wrapper);
@@ -2329,7 +2335,7 @@
             utils.toggleClass(player.elements.container, player.config.selectors.container.replace('.', ''), player.supported.full);
         }
 
-        // Toggle native controls
+        // Toggle native HTML5 media controls
         function toggleNativeControls(toggle) {
             if (toggle && utils.inArray(types.html5, player.type)) {
                 player.media.setAttribute('controls', '');
@@ -2709,10 +2715,14 @@
                                     // YouTube needs a call to `stopVideo` before playing again
                                     instance.stopVideo();
                                     instance.playVideo();
+
                                     break;
                                 }
+
                                 player.media.paused = true;
+
                                 trigger(player.media, 'ended');
+
                                 break;
 
                             case 1:
@@ -2724,6 +2734,7 @@
                                 }
 
                                 player.media.seeking = false;
+
                                 trigger(player.media, 'play');
                                 trigger(player.media, 'playing');
 
@@ -2753,7 +2764,9 @@
 
                             case 2:
                                 player.media.paused = true;
+
                                 trigger(player.media, 'pause');
+
                                 break;
                         }
 
@@ -3208,9 +3221,11 @@
                 }
             }
 
-            if (utils.is.number(player.config.loop.start) && utils.is.number(player.config.loop.end) && player.media.currentTime >= player.config.loop.end) {
+            // TODO: Loop - this shouldn't be here
+            /*if (utils.is.number(player.config.loop.start) && utils.is.number(player.config.loop.end) && player.media.currentTime >= player.config.loop.end) {
+                console.warn('Looping');
                 player.seek(player.config.loop.start);
-            }
+            }*/
 
             setProgress(progress, value);
         }
@@ -4988,7 +5003,7 @@
         return player;
     };
 
-    // Event listener
+    // Event listeners
     Plyr.prototype.on = function(event, callback) {
         var player = this;
 
@@ -4999,6 +5014,16 @@
         return player;
     };
 
+    Plyr.prototype.off = function(event, callback) {
+        var player = this;
+
+        // Listen for events on container
+        utils.off(player.elements.container, event, callback);
+
+        // Allow chaining
+        return player;
+    };
+
     // Check for support
     Plyr.prototype.supports = function(mimeType) {
         return support.mime(this, mimeType);
@@ -5102,4 +5127,4 @@
     };
 
     return Plyr;
-});
+});
\ No newline at end of file
diff --git a/src/less/plyr.less b/src/less/plyr.less
index a829da74..16d8fa25 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -78,14 +78,13 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        vertical-align: middle;
-
-        appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
 
         // WebKit
+        -webkit-appearance: none;
+
         &::-webkit-slider-runnable-track {
             .plyr-range-track();
         }
@@ -413,9 +412,9 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    padding: @plyr-control-spacing;
-    background: @plyr-video-control-bg-hover;
-    border: 4px solid currentColor;
+    padding: ceil(@plyr-control-spacing * 1.25);
+    background: fade(@plyr-video-control-bg-hover, 80%);
+    border: 3px solid currentColor;
     border-radius: 100%;
     box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
@@ -431,6 +430,11 @@
         pointer-events: none;
     }
 
+    &:hover,
+    &:focus {
+        background: @plyr-video-control-bg-hover;
+    }
+
     &:focus {
         outline: 1px dotted fade(@plyr-video-control-color, 50%);
     }
@@ -759,10 +763,13 @@
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
     vertical-align: top;
-    appearance: none;
+    
     border: none;
     border-radius: 100px;
 
+    // WebKit
+    -webkit-appearance: none;
+
     &::-webkit-progress-bar {
         background: transparent;
     }
@@ -771,11 +778,15 @@
         border-radius: 100px;
         min-width: @plyr-range-track-height;
     }
+
+    // Mozilla
     &::-moz-progress-bar {
         background: currentColor;
         border-radius: 100px;
         min-width: @plyr-range-track-height;
     }
+
+    // Microsoft
     &::-ms-fill {
         border-radius: 100px;
     }
diff --git a/src/less/variables.less b/src/less/variables.less
index 39a083a3..dd6c9e0f 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -15,11 +15,11 @@
 @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-weight-normal:               400;
+@plyr-font-weight-normal:               500;
 @plyr-font-weight-bold:                 600;
 
 // Captions
-@plyr-captions-bg:                      fade(#000, 60%);
+@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);
@@ -29,13 +29,13 @@
 @plyr-control-icon-size:                18px;
 @plyr-control-spacing:                  10px;
 @plyr-control-padding:                  (@plyr-control-spacing * .7);
-@plyr-video-controls-bg:                #000;
+@plyr-video-controls-bg:                #343f4a;
 @plyr-video-control-color:              #fff;
 @plyr-video-control-color-hover:        #fff;
 @plyr-video-control-bg-hover:           @plyr-color-main;
 @plyr-audio-controls-bg:                #fff;
 @plyr-audio-controls-border:            1px solid #dbe3e8;
-@plyr-audio-control-color:              #565D64;
+@plyr-audio-control-color:              #565d64;
 @plyr-audio-control-color-hover:        #fff;
 @plyr-audio-control-bg-hover:           @plyr-color-main;
 
@@ -56,7 +56,7 @@
 @plyr-progress-loading-bg:              fade(#343f4a, 20%);
 @plyr-video-progress-bg:                fade(#fff, 25%);
 @plyr-video-progress-buffered-bg:       @plyr-video-progress-bg;
-@plyr-audio-progress-bg:                fade(#C6D6DB, 66%);
+@plyr-audio-progress-bg:                fade(#c6d6db, 66%);
 @plyr-audio-progress-buffered-bg:       @plyr-audio-progress-bg;
 
 // Range sliders