// 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'
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
// 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()
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
}
}
}
+ dispose () {
+ document.removeEventListener('click', this.documentClickHandler)
+
+ if (this.isInIframe()) {
+ window.removeEventListener('blur', this.documentClickHandler)
+ }
+ }
+
onAddSettingsItem (event: any, data: any) {
const [ entry, options ] = data
}
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)
}
}
+ isInIframe () {
+ return window.self !== window.top
+ }
+
}
Component.registerComponent('SettingsButton', SettingsButton)