1 import debug from 'debug'
2 import videojs from 'video.js'
3 import { logger } from '@root-helpers/logger'
4 import { PeerTubeMobileButtons } from './peertube-mobile-buttons'
6 const debugLogger = debug('peertube:player:mobile')
8 const Plugin = videojs.getPlugin('plugin')
10 class PeerTubeMobilePlugin extends Plugin {
11 private static readonly DOUBLE_TAP_DELAY_MS = 250
12 private static readonly SET_CURRENT_TIME_DELAY = 1000
14 private peerTubeMobileButtons: PeerTubeMobileButtons
16 private seekAmount = 0
18 private lastTapEvent: TouchEvent
19 private tapTimeout: ReturnType<typeof setTimeout>
20 private newActiveState: boolean
22 private setCurrentTimeTimeout: ReturnType<typeof setTimeout>
24 constructor (player: videojs.Player, options: videojs.PlayerOptions) {
25 super(player, options)
27 this.peerTubeMobileButtons = player.addChild('PeerTubeMobileButtons', { reportTouchActivity: false }) as PeerTubeMobileButtons
29 if (videojs.browser.IS_ANDROID && screen.orientation) {
30 this.handleFullscreenRotation()
33 if (!this.player.options_.userActions) this.player.options_.userActions = {};
36 (this.player.options_.userActions as any).click = false
37 this.player.options_.userActions.doubleClick = false
39 this.player.one('play', () => {
40 this.initTouchStartEvents()
44 private handleFullscreenRotation () {
45 this.player.on('fullscreenchange', () => {
46 if (!this.player.isFullscreen() || this.isPortraitVideo()) return
48 screen.orientation.lock('landscape')
49 .catch(err => logger.error('Cannot lock screen to landscape.', err))
53 private isPortraitVideo () {
54 return this.player.videoWidth() < this.player.videoHeight()
57 private initTouchStartEvents () {
58 const handleTouchStart = (event: TouchEvent) => {
59 if (this.tapTimeout) {
60 clearTimeout(this.tapTimeout)
61 this.tapTimeout = undefined
64 if (this.lastTapEvent && event.timeStamp - this.lastTapEvent.timeStamp < PeerTubeMobilePlugin.DOUBLE_TAP_DELAY_MS) {
65 debugLogger('Detected double tap')
67 this.lastTapEvent = undefined
68 this.onDoubleTap(event)
72 this.newActiveState = !this.player.userActive()
74 this.tapTimeout = setTimeout(() => {
75 debugLogger('No double tap detected, set user active state to %s.', this.newActiveState)
77 this.player.userActive(this.newActiveState)
78 }, PeerTubeMobilePlugin.DOUBLE_TAP_DELAY_MS)
80 this.lastTapEvent = event
83 this.player.on('touchstart', (event: TouchEvent) => {
84 // Only enable user active on player touch, we listen event on peertube mobile buttons to disable it
85 if (this.player.userActive()) return
87 handleTouchStart(event)
90 this.peerTubeMobileButtons.el().addEventListener('touchstart', (event: TouchEvent) => {
91 // Prevent mousemove/click events firing on the player, that conflict with our user active logic
92 event.preventDefault()
94 handleTouchStart(event)
95 }, { passive: false })
98 private onDoubleTap (event: TouchEvent) {
99 const playerWidth = this.player.currentWidth()
101 const rect = this.findPlayerTarget((event.target as HTMLElement)).getBoundingClientRect()
102 const offsetX = event.targetTouches[0].pageX - rect.left
104 debugLogger('Calculating double tap zone (player width: %d, offset X: %d)', playerWidth, offsetX)
106 if (offsetX > 0.66 * playerWidth) {
107 if (this.seekAmount < 0) this.seekAmount = 0
109 this.seekAmount += 10
111 debugLogger('Will forward %d seconds', this.seekAmount)
112 } else if (offsetX < 0.33 * playerWidth) {
113 if (this.seekAmount > 0) this.seekAmount = 0
115 this.seekAmount -= 10
116 debugLogger('Will rewind %d seconds', this.seekAmount)
119 this.peerTubeMobileButtons.displayFastSeek(this.seekAmount)
121 this.scheduleSetCurrentTime()
124 private findPlayerTarget (target: HTMLElement): HTMLElement {
125 if (target.classList.contains('video-js')) return target
127 return this.findPlayerTarget(target.parentElement)
130 private scheduleSetCurrentTime () {
132 this.player.addClass('vjs-fast-seeking')
134 if (this.setCurrentTimeTimeout) clearTimeout(this.setCurrentTimeTimeout)
136 this.setCurrentTimeTimeout = setTimeout(() => {
137 let newTime = this.player.currentTime() + this.seekAmount
140 newTime = Math.max(0, newTime)
141 newTime = Math.min(this.player.duration(), newTime)
143 this.player.currentTime(newTime)
145 this.peerTubeMobileButtons.displayFastSeek(0)
147 this.player.removeClass('vjs-fast-seeking')
148 this.player.userActive(false)
151 }, PeerTubeMobilePlugin.SET_CURRENT_TIME_DELAY)
155 videojs.registerPlugin('peertubeMobile', PeerTubeMobilePlugin)
156 export { PeerTubeMobilePlugin }