From 15a0e5f3b3b34762be820635434eb11a430ae0c4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 8 Feb 2022 14:25:24 +0100 Subject: Correctly hide mobile buttons overlay on ios --- client/src/assets/player/mobile/peertube-mobile-buttons.ts | 2 +- client/src/assets/player/mobile/peertube-mobile-plugin.ts | 12 +++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) (limited to 'client') 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 { -- cgit v1.2.3