diff options
| -rw-r--r-- | controls.md | 2 | ||||
| -rw-r--r-- | src/js/controls.js | 23 |
2 files changed, 14 insertions, 11 deletions
diff --git a/controls.md b/controls.md index 63b17fa3..263e12f3 100644 --- a/controls.md +++ b/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 diff --git a/src/js/controls.js b/src/js/controls.js index e95cfc86..c01e3584 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1117,11 +1117,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', getAttributesFromSelector(this.config.selectors.controls.wrapper)); @@ -1401,13 +1396,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, { |