Small tweaks

bower.json

@@ -6,7 +6,7 @@
         "Audio",
         "Video",
         "HTML5 Audio",
-        "HTml5 Video"
+        "HTML5 Video"
     ],
     "authors": [
         "Sam Potts <sam@potts.es>"
@@ -30,4 +30,4 @@
         "url": "git://github.com/sampotts/plyr.git"
     },
     "license": "MIT"
-}
+}

demo/src/less/lib/fontface.less

@@ -4,15 +4,16 @@
 
 @font-face {
     font-family: "Avenir";
-    src:    url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
+    src:    url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
-            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
+            url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
     font-style:   normal;
     font-weight:  @font-weight-base;
 }
+
 @font-face {
     font-family: "Avenir";
-    src:    url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
+    src:    url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
-            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
+            url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
     font-style:   normal;
     font-weight:  @font-weight-bold;
 }

demo/src/less/variables.less

@@ -24,8 +24,8 @@
 @font-size-base:            16;
 @font-size-small:           14;
 @font-size-h1:              64;
-@font-weight-base:          400;
+@font-weight-base:          500;
-@font-weight-bold:          500;
+@font-weight-bold:          600;
 
 // Elements
 @link-color:                @brand-primary;

notes.md

@@ -8,12 +8,12 @@
 [ ] Handle quality change for YouTube
 [ ] Handle speed change for YouTube
 [ ] Set quality when loading YouTube vid
-[ ] Set "home" values
+[ ] Set default values
-[ ] Hide unsupported menu items (+ on source change)
+[ ] Hide unsupported menu items on source change
 [ ] Test PiP (need MacOS Sierra)
 [ ] Test AirPlay (need MacOS Sierra)
 [ ] Add `controlshidden` and `controlsshown` events
-[ ] Test custom controls (without settings support for now)
+[ ] Test custom controls still works (without settings support for now)
 [ ] Tidy up small UI for iOS inline
 [ ] Finish new loop setup and display in seek bar
 [ ] Update docs for removal of setup
@@ -21,7 +21,7 @@
 #### Later
 [ ] Wistia player
 [ ] Inlined sprite option
-[ ] Start / end options for all players?
+[ ] Start / end time options for all players?
 [ ] Get quality options for HTML5 somehow (multi source?)
 [ ] Download button - grab first <source> or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players
 [ ] Scale captions size based on video size (in lieu of element queries)
@@ -69,12 +69,15 @@
 - decreaseVolume (new)
 - togglePictureInPicture (new)
 - airPlay (new)
+- Added `.off` API method
 
 #### Other breaking changes
 - New config options for loop
 - Selectors changes (new `input` and `display` object) - DOCUMENT
 - Custom HTML option now `controls` which accepts a string (HTML), a function (your own template engine) or array (use built in controls)
-- .setup() is removed in favour of a constructor
+- `.setup()` is removed in favour of a constructor
+- `.loadSprite` removed
+- `.support` removed
 
 #### Added
 - Seek i8n label

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;
-});
+});

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;
+    padding: ceil(@plyr-control-spacing * 1.25);
-    background: @plyr-video-control-bg-hover;
+    background: fade(@plyr-video-control-bg-hover, 80%);
-    border: 4px solid currentColor;
+    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;
     }

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