Merge branch 'develop' into a11y-improvements

# Conflicts:
#	src/js/controls.js

controls.md

@@ -3,7 +3,9 @@
 This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option:
 
 -   `Array` of options (this builds the default controls based on your choices)
+-   `Element` with the controls
 -   `String` containing the desired HTML
+-   `false` (or empty string or array) to disable all controls
 -   `Function` that will be executed and should return one of the above
 
 ## Using default controls

src/js/controls.js

@@ -1388,11 +1388,6 @@ const controls = {
     // Build the default HTML
     // TODO: Set order based on order in the config.controls array?
     create(data) {
-        // Do nothing if we want no controls
-        if (is.empty(this.config.controls)) {
-            return null;
-        }
-
         // Create the container
         const container = createElement(
             'div',
@@ -1746,16 +1741,19 @@ const controls = {
         };
         let update = true;
 
-        if (
-            is.string(this.config.controls) ||
-            is.element(this.config.controls)
-        ) {
-            // String or HTMLElement passed as the option
+        // If function, run it and use output
+        if (is.function(this.config.controls)) {
+            this.config.controls = this.config.controls.call(this.props);
+        }
+
+        // Convert falsy controls to empty array (primarily for empty strings)
+        if (!this.config.controls) {
+            this.config.controls = [];
+        }
+
+        if (is.element(this.config.controls) || is.string(this.config.controls)) {
+            // HTMLElement or Non-empty string passed as the option
             container = this.config.controls;
-        } else if (is.function(this.config.controls)) {
-            // A custom function to build controls
-            // The function can return a HTMLElement or String
-            container = this.config.controls.call(this, props);
         } else {
             // Create controls
             container = controls.create.call(this, {

src/sass/components/captions.scss

@@ -17,7 +17,6 @@
     padding: $plyr-control-spacing;
     position: absolute;
     text-align: center;
-    transform: translateY(-($plyr-control-spacing * 4));
     transition: transform 0.4s ease-in-out;
     width: 100%;
 
@@ -53,6 +52,8 @@
     display: block;
 }
 
-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 1.5));
+// If the lower controls are shown and not empty
+.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
+    transform: translateY(-($plyr-control-spacing * 4));
 }
+

src/sass/components/controls.scss

@@ -32,12 +32,9 @@
         margin-left: ($plyr-control-spacing / 2);
     }
 
+    // Hide empty controls
     &:empty {
         display: none;
-
-        ~ .plyr__captions {
-            transform: translateY(0);
-        }
     }
 
     @media (min-width: $plyr-bp-sm) {