aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-12-09 10:33:32 +0100
committerChocobozzz <me@florianbigard.com>2021-12-09 10:33:32 +0100
commitdc9ff3128f2fa9cd64ab628699608b3794c78d43 (patch)
tree4cea78336e37c612c9d78e18053238886f5e47fe
parent07d6044e211a0a04a19bcc88719958ad28751b23 (diff)
downloadPeerTube-dc9ff3128f2fa9cd64ab628699608b3794c78d43.tar.gz
PeerTube-dc9ff3128f2fa9cd64ab628699608b3794c78d43.tar.zst
PeerTube-dc9ff3128f2fa9cd64ab628699608b3794c78d43.zip
Improve control bar inactivity handling
Keep opened when user is in control bar settings Faster hidding transition for control bar
-rw-r--r--client/src/assets/player/peertube-plugin.ts44
-rw-r--r--client/src/assets/player/videojs-components/settings-menu-button.ts2
-rw-r--r--client/src/sass/player/peertube-skin.scss1
3 files changed, 33 insertions, 14 deletions
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index f03553184..451b4a161 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -11,6 +11,7 @@ import {
11} from './peertube-player-local-storage' 11} from './peertube-player-local-storage'
12import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings' 12import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
13import { isMobile } from './utils' 13import { isMobile } from './utils'
14import { SettingsButton } from './videojs-components/settings-menu-button'
14 15
15const Plugin = videojs.getPlugin('plugin') 16const Plugin = videojs.getPlugin('plugin')
16 17
@@ -31,7 +32,8 @@ class PeerTubePlugin extends Plugin {
31 32
32 private menuOpened = false 33 private menuOpened = false
33 private mouseInControlBar = false 34 private mouseInControlBar = false
34 private readonly savedInactivityTimeout: number 35 private mouseInSettings = false
36 private readonly initialInactivityTimeout: number
35 37
36 constructor (player: videojs.Player, options?: PeerTubePluginOptions) { 38 constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
37 super(player) 39 super(player)
@@ -40,8 +42,7 @@ class PeerTubePlugin extends Plugin {
40 this.videoDuration = options.videoDuration 42 this.videoDuration = options.videoDuration
41 this.videoCaptions = options.videoCaptions 43 this.videoCaptions = options.videoCaptions
42 this.isLive = options.isLive 44 this.isLive = options.isLive
43 45 this.initialInactivityTimeout = this.player.options_.inactivityTimeout
44 this.savedInactivityTimeout = player.options_.inactivityTimeout
45 46
46 if (options.autoplay) this.player.addClass('vjs-has-autoplay') 47 if (options.autoplay) this.player.addClass('vjs-has-autoplay')
47 48
@@ -108,13 +109,13 @@ class PeerTubePlugin extends Plugin {
108 if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval) 109 if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
109 } 110 }
110 111
111 onMenuOpen () { 112 onMenuOpened () {
112 this.menuOpened = false 113 this.menuOpened = true
113 this.alterInactivity() 114 this.alterInactivity()
114 } 115 }
115 116
116 onMenuClosed () { 117 onMenuClosed () {
117 this.menuOpened = true 118 this.menuOpened = false
118 this.alterInactivity() 119 this.alterInactivity()
119 } 120 }
120 121
@@ -207,26 +208,43 @@ class PeerTubePlugin extends Plugin {
207 } 208 }
208 209
209 private listenControlBarMouse () { 210 private listenControlBarMouse () {
210 this.player.controlBar.on('mouseenter', () => { 211 const controlBar = this.player.controlBar
212 const settingsButton: SettingsButton = (controlBar as any).settingsButton
213
214 controlBar.on('mouseenter', () => {
211 this.mouseInControlBar = true 215 this.mouseInControlBar = true
212 this.alterInactivity() 216 this.alterInactivity()
213 }) 217 })
214 218
215 this.player.controlBar.on('mouseleave', () => { 219 controlBar.on('mouseleave', () => {
216 this.mouseInControlBar = false 220 this.mouseInControlBar = false
217 this.alterInactivity() 221 this.alterInactivity()
218 }) 222 })
223
224 settingsButton.dialog.on('mouseenter', () => {
225 this.mouseInSettings = true
226 this.alterInactivity()
227 })
228
229 settingsButton.dialog.on('mouseleave', () => {
230 this.mouseInSettings = false
231 this.alterInactivity()
232 })
219 } 233 }
220 234
221 private alterInactivity () { 235 private alterInactivity () {
222 if (this.menuOpened) { 236 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar || this.isTouchEnabled()) {
223 this.player.options_.inactivityTimeout = this.savedInactivityTimeout 237 this.setInactivityTimeout(0)
224 return 238 return
225 } 239 }
226 240
227 if (!this.mouseInControlBar && !this.isTouchEnabled()) { 241 this.setInactivityTimeout(this.initialInactivityTimeout)
228 this.player.options_.inactivityTimeout = 1 242 this.player.reportUserActivity(true)
229 } 243 }
244
245 private setInactivityTimeout (timeout: number) {
246 (this.player as any).cache_.inactivityTimeout = timeout
247 this.player.options_.inactivityTimeout = timeout
230 } 248 }
231 249
232 private isTouchEnabled () { 250 private isTouchEnabled () {
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 75a5c6904..6de390f4d 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -144,7 +144,7 @@ class SettingsButton extends Button {
144 } 144 }
145 145
146 showDialog () { 146 showDialog () {
147 this.player().peertube().onMenuOpen(); 147 this.player().peertube().onMenuOpened();
148 148
149 (this.menu.el() as HTMLElement).style.opacity = '1' 149 (this.menu.el() as HTMLElement).style.opacity = '1'
150 150
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 96d752699..876fdf968 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -158,6 +158,7 @@ body {
158 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)); 158 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
159 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2); 159 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
160 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 160 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
161 transition: visibility 0.3s, opacity 0.3s !important;
161 162
162 > button:first-child { 163 > button:first-child {
163 @include margin-left($first-control-bar-element-margin-left); 164 @include margin-left($first-control-bar-element-margin-left);