4 files changed, 15 insertions, 6 deletions
diff --git a/src/js/controls.js b/src/js/controls.js
index 5bdb5b0a..ad126de1 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -1263,7 +1263,7 @@ const controls = {
     this.elements.controls = null;
 
     // Larger overlaid play button
-    if (this.config.controls.includes('play-large')) {
+    if (is.array(this.config.controls) && this.config.controls.includes('play-large')) {
       this.elements.container.appendChild(createButton.call(this, 'play-large'));
     }
 
@@ -1275,7 +1275,7 @@ const controls = {
     const defaultAttributes = { class: 'plyr__controls__item' };
 
     // Loop through controls in order
-    dedupe(this.config.controls).forEach(control => {
+    dedupe(is.array(this.config.controls) ? this.config.controls: []).forEach(control => {
       // Restart button
       if (control === 'restart') {
         container.appendChild(createButton.call(this, 'restart', defaultAttributes));
@@ -1675,8 +1675,6 @@ const controls = {
     if (update) {
       if (is.string(this.config.controls)) {
         container = replace(container);
-      } else if (is.element(container)) {
-        container.innerHTML = replace(container.innerHTML);
       }
     }
 
diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts
index 9e336017..cdd5cd4c 100644
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@@ -496,6 +496,11 @@ declare namespace Plyr {
      * Youtube Player Options.
      */
     youtube?: object;
+
+    /**
+     * Preview Thumbnails Options.
+     */
+    previewThumbnails?: PreviewThumbnailsOptions;
   }
 
   interface QualityOptions {
@@ -545,6 +550,11 @@ declare namespace Plyr {
     key?: string;
   }
 
+  interface PreviewThumbnailsOptions {
+    enabled?: boolean;
+    src?: string;
+  }
+
   interface SourceInfo {
     /**
      * Note: YouTube and Vimeo are currently not supported as audio sources.
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 3a5afc05..e924ac78 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1054,7 +1054,7 @@ class Plyr {
       const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
 
       // Close menu
-      if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
+      if (hiding && is.array(this.config.controls) && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
         controls.toggleMenu.call(this, false);
       }
 
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index 64882f4e..f1e90dd5 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -4,7 +4,8 @@
 
 $plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
 $plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
-$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
+$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
+$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
 $plyr-control-radius: var(--plyr-control-radius, 3px) !default;
 
 $plyr-control-toggle-checked-background: var(