Fix console error when watching a video

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / videojs-components / settings-menu-button.ts

diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index eae628e7d05a2933c6ffb752794a8054e27409f0..339420a899bc52cc7366bcf883da9765a5b3b9e2 100644 (file)
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -1,7 +1,7 @@
 // Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { SettingsMenuItem } from './settings-menu-item'
 import { toTitleCase } from '../utils'
-import videojs, { VideoJsPlayer } from 'video.js'
+import videojs from 'video.js'
 
 import { SettingsDialog } from './settings-dialog'
 import { SettingsPanel } from './settings-panel'
@@ -27,12 +27,12 @@ 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
 
-  constructor (player: VideoJsPlayer, options?: SettingsButtonOptions) {
+  constructor (player: videojs.Player, options?: SettingsButtonOptions) {
     super(player, options)
 
     this.settingsButtonOptions = options
@@ -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,10 @@ 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?.classList?.contains('vjs-settings') || element?.parentElement?.classList?.contains('vjs-settings')) {
       return
     }
 
@@ -98,6 +99,14 @@ class SettingsButton extends Button {
     }
   }
 
+  dispose () {
+    document.removeEventListener('click', this.documentClickHandler)
+
+    if (this.isInIframe()) {
+      window.removeEventListener('blur', this.documentClickHandler)
+    }
+  }
+
   onAddSettingsItem (event: any, data: any) {
     const [ entry, options ] = data
 
@@ -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)