OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Autoclose settings on outside click

pull/3958/head
Chocobozzz 2021-04-27 10:46:09 +02:00
parent 6d8e1f28e3
commit 75d7495962
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)