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

Autoclose settings on outside click

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