Autoclose settings on outside click

client/src/assets/player/videojs-components/settings-menu-button.ts

@@ -27,7 +27,7 @@ class SettingsButton extends Button {
 
   addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
   disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
-  playerClickHandler: typeof SettingsButton.prototype.onPlayerClick
+  documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
   userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
 
   private settingsButtonOptions: SettingsButtonOptions
@@ -51,7 +51,7 @@ class SettingsButton extends Button {
     // Event handlers
     this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
     this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
-    this.playerClickHandler = this.onPlayerClick.bind(this)
+    this.documentClickHandler = this.onDocumentClick.bind(this)
     this.userInactiveHandler = this.onUserInactive.bind(this)
 
     this.buildMenu()
@@ -61,9 +61,13 @@ class SettingsButton extends Button {
     this.player().one('play', () => this.hideDialog())
   }
 
-  onPlayerClick (event: MouseEvent) {
+  onDocumentClick (event: MouseEvent) {
     const element = event.target as HTMLElement
-    if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) {
+
+    if (
+      element && element.classList &&
+      (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings'))
+    ) {
       return
     }
 
@@ -91,6 +95,11 @@ class SettingsButton extends Button {
       }
     }
 
+    document.removeEventListener('click', this.documentClickHandler)
+    if (this.isInIframe()) {
+      window.removeEventListener('blur', this.documentClickHandler)
+    }
+
     this.hideDialog()
 
     if (this.settingsButtonOptions.entries.length === 0) {
@@ -112,7 +121,11 @@ class SettingsButton extends Button {
   }
 
   bindEvents () {
-    this.player().on('click', this.playerClickHandler)
+    document.addEventListener('click', this.documentClickHandler)
+    if (this.isInIframe()) {
+      window.addEventListener('blur', this.documentClickHandler)
+    }
+
     this.player().on('addsettingsitem', this.addSettingsItemHandler)
     this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
     this.player().on('userinactive', this.userInactiveHandler)
@@ -248,6 +261,10 @@ class SettingsButton extends Button {
     }
   }
 
+  isInIframe () {
+    return window.self !== window.top
+  }
+
 }
 
 Component.registerComponent('SettingsButton', SettingsButton)

client/src/standalone/videos/test-embed.scss

@@ -146,4 +146,4 @@ a {
     width: 50vw;
     height: calc(50vw * 0.5625);
   }
-}
+}