Correctly hide mobile buttons overlay on ios

2 files changed, 8 insertions, 6 deletions

diff --git a/client/src/assets/player/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
index 94eeec023..09cb98f2e 100644
--- a/client/src/assets/player/mobile/peertube-mobile-buttons.ts
+++ b/client/src/assets/player/mobile/peertube-mobile-buttons.ts
@@ -17,7 +17,7 @@ class PeerTubeMobileButtons extends Component {
       className: 'main-button'
     }) as HTMLDivElement
 
-    mainButton.addEventListener('click', e => {
+    mainButton.addEventListener('touchstart', e => {
       e.stopPropagation()
 
       if (this.player_.paused() || this.player_.ended()) {
diff --git a/client/src/assets/player/mobile/peertube-mobile-plugin.ts b/client/src/assets/player/mobile/peertube-mobile-plugin.ts
index a4810d720..91dda7f94 100644
--- a/client/src/assets/player/mobile/peertube-mobile-plugin.ts
+++ b/client/src/assets/player/mobile/peertube-mobile-plugin.ts
@@ -23,7 +23,7 @@ class PeerTubeMobilePlugin extends Plugin {
   constructor (player: videojs.Player, options: videojs.PlayerOptions) {
     super(player, options)
 
-    this.peerTubeMobileButtons = player.addChild('PeerTubeMobileButtons') as PeerTubeMobileButtons
+    this.peerTubeMobileButtons = player.addChild('PeerTubeMobileButtons', { reportTouchActivity: false }) as PeerTubeMobileButtons
 
     if (videojs.browser.IS_ANDROID && screen.orientation) {
       this.handleFullscreenRotation()
@@ -55,8 +55,6 @@ class PeerTubeMobilePlugin extends Plugin {
 
   private initTouchStartEvents () {
     const handleTouchStart = (event: TouchEvent) => {
-      event.stopPropagation()
-
       if (this.tapTimeout) {
         clearTimeout(this.tapTimeout)
         this.tapTimeout = undefined
@@ -88,7 +86,12 @@ class PeerTubeMobilePlugin extends Plugin {
       handleTouchStart(event)
     })
 
-    this.peerTubeMobileButtons.on('touchstart', handleTouchStart)
+    this.peerTubeMobileButtons.el().addEventListener('touchstart', (event: TouchEvent) => {
+      // Prevent mousemove/click events firing on the player, that conflict with our user active logic
+      event.preventDefault()
+
+      handleTouchStart(event)
+    }, { passive: false })
   }
 
   private onDoubleTap (event: TouchEvent) {
@@ -115,7 +118,6 @@ class PeerTubeMobilePlugin extends Plugin {
     this.peerTubeMobileButtons.displayFastSeek(this.seekAmount)
 
     this.scheduleSetCurrentTime()
-
   }
 
   private findPlayerTarget (target: HTMLElement): HTMLElement {