aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-27 10:46:09 +0200
committerChocobozzz <me@florianbigard.com>2021-04-27 10:46:09 +0200
commit75d749596205511e012cecbdd39123277244f462 (patch)
tree35042e13295666336080a3def0d500bdd4aa7dc1
parent6d8e1f28e3a81d88d13a9ce7db51837413904eff (diff)
downloadPeerTube-75d749596205511e012cecbdd39123277244f462.tar.gz
PeerTube-75d749596205511e012cecbdd39123277244f462.tar.zst
PeerTube-75d749596205511e012cecbdd39123277244f462.zip
Autoclose settings on outside click
-rw-r--r--client/src/assets/player/videojs-components/settings-menu-button.ts27
-rw-r--r--client/src/standalone/videos/test-embed.scss2
2 files changed, 23 insertions, 6 deletions
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 011323267..e67a3da06 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -27,7 +27,7 @@ class SettingsButton extends Button {
27 27
28 addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem 28 addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
29 disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem 29 disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
30 playerClickHandler: typeof SettingsButton.prototype.onPlayerClick 30 documentClickHandler: typeof SettingsButton.prototype.onDocumentClick
31 userInactiveHandler: typeof SettingsButton.prototype.onUserInactive 31 userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
32 32
33 private settingsButtonOptions: SettingsButtonOptions 33 private settingsButtonOptions: SettingsButtonOptions
@@ -51,7 +51,7 @@ class SettingsButton extends Button {
51 // Event handlers 51 // Event handlers
52 this.addSettingsItemHandler = this.onAddSettingsItem.bind(this) 52 this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
53 this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this) 53 this.disposeSettingsItemHandler = this.onDisposeSettingsItem.bind(this)
54 this.playerClickHandler = this.onPlayerClick.bind(this) 54 this.documentClickHandler = this.onDocumentClick.bind(this)
55 this.userInactiveHandler = this.onUserInactive.bind(this) 55 this.userInactiveHandler = this.onUserInactive.bind(this)
56 56
57 this.buildMenu() 57 this.buildMenu()
@@ -61,9 +61,13 @@ class SettingsButton extends Button {
61 this.player().one('play', () => this.hideDialog()) 61 this.player().one('play', () => this.hideDialog())
62 } 62 }
63 63
64 onPlayerClick (event: MouseEvent) { 64 onDocumentClick (event: MouseEvent) {
65 const element = event.target as HTMLElement 65 const element = event.target as HTMLElement
66 if (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings')) { 66
67 if (
68 element && element.classList &&
69 (element.classList.contains('vjs-settings') || element.parentElement.classList.contains('vjs-settings'))
70 ) {
67 return 71 return
68 } 72 }
69 73
@@ -91,6 +95,11 @@ class SettingsButton extends Button {
91 } 95 }
92 } 96 }
93 97
98 document.removeEventListener('click', this.documentClickHandler)
99 if (this.isInIframe()) {
100 window.removeEventListener('blur', this.documentClickHandler)
101 }
102
94 this.hideDialog() 103 this.hideDialog()
95 104
96 if (this.settingsButtonOptions.entries.length === 0) { 105 if (this.settingsButtonOptions.entries.length === 0) {
@@ -112,7 +121,11 @@ class SettingsButton extends Button {
112 } 121 }
113 122
114 bindEvents () { 123 bindEvents () {
115 this.player().on('click', this.playerClickHandler) 124 document.addEventListener('click', this.documentClickHandler)
125 if (this.isInIframe()) {
126 window.addEventListener('blur', this.documentClickHandler)
127 }
128
116 this.player().on('addsettingsitem', this.addSettingsItemHandler) 129 this.player().on('addsettingsitem', this.addSettingsItemHandler)
117 this.player().on('disposesettingsitem', this.disposeSettingsItemHandler) 130 this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
118 this.player().on('userinactive', this.userInactiveHandler) 131 this.player().on('userinactive', this.userInactiveHandler)
@@ -248,6 +261,10 @@ class SettingsButton extends Button {
248 } 261 }
249 } 262 }
250 263
264 isInIframe () {
265 return window.self !== window.top
266 }
267
251} 268}
252 269
253Component.registerComponent('SettingsButton', SettingsButton) 270Component.registerComponent('SettingsButton', SettingsButton)
diff --git a/client/src/standalone/videos/test-embed.scss b/client/src/standalone/videos/test-embed.scss
index df3d69f21..85ce4e0f7 100644
--- a/client/src/standalone/videos/test-embed.scss
+++ b/client/src/standalone/videos/test-embed.scss
@@ -146,4 +146,4 @@ a {
146 width: 50vw; 146 width: 50vw;
147 height: calc(50vw * 0.5625); 147 height: calc(50vw * 0.5625);
148 } 148 }
149} \ No newline at end of file 149}