1 import { PeerTubeMobileButtons } from './peertube-mobile-buttons'
2 import videojs from 'video.js'
3 import debug from 'debug'
5 const logger = debug('peertube:player:mobile')
7 const Plugin = videojs.getPlugin('plugin')
9 class PeerTubeMobilePlugin extends Plugin {
10 private static readonly DOUBLE_TAP_DELAY_MS = 250
11 private static readonly SET_CURRENT_TIME_DELAY = 1000
13 private peerTubeMobileButtons: PeerTubeMobileButtons
15 private seekAmount = 0
17 private lastTapEvent: TouchEvent
18 private tapTimeout: NodeJS.Timeout
19 private newActiveState: boolean
21 private setCurrentTimeTimeout: NodeJS.Timeout
23 constructor (player: videojs.Player, options: videojs.PlayerOptions) {
24 super(player, options)
26 this.peerTubeMobileButtons = player.addChild('PeerTubeMobileButtons') as PeerTubeMobileButtons
28 if (videojs.browser.IS_ANDROID && screen.orientation) {
29 this.handleFullscreenRotation()
32 if (!this.player.options_.userActions) this.player.options_.userActions = {};
35 (this.player.options_.userActions as any).click = false
36 this.player.options_.userActions.doubleClick = false
38 this.player.one('play', () => {
39 this.initTouchStartEvents()
43 private handleFullscreenRotation () {
44 this.player.on('fullscreenchange', () => {
45 if (!this.player.isFullscreen() || this.isPortraitVideo()) return
47 screen.orientation.lock('landscape')
48 .catch(err => console.error('Cannot lock screen to landscape.', err))
52 private isPortraitVideo () {
53 return this.player.videoWidth() < this.player.videoHeight()
56 private initTouchStartEvents () {
57 this.player.on('touchstart', (event: TouchEvent) => {
58 event.stopPropagation()
60 if (this.tapTimeout) {
61 clearTimeout(this.tapTimeout)
62 this.tapTimeout = undefined
65 if (this.lastTapEvent && event.timeStamp - this.lastTapEvent.timeStamp < PeerTubeMobilePlugin.DOUBLE_TAP_DELAY_MS) {
66 logger('Detected double tap')
68 this.lastTapEvent = undefined
69 this.onDoubleTap(event)
73 this.newActiveState = !this.player.userActive()
75 this.tapTimeout = setTimeout(() => {
76 logger('No double tap detected, set user active state to %s.', this.newActiveState)
78 this.player.userActive(this.newActiveState)
79 }, PeerTubeMobilePlugin.DOUBLE_TAP_DELAY_MS)
81 this.lastTapEvent = event
85 private onDoubleTap (event: TouchEvent) {
86 const playerWidth = this.player.currentWidth()
88 const rect = this.findPlayerTarget((event.target as HTMLElement)).getBoundingClientRect()
89 const offsetX = event.targetTouches[0].pageX - rect.left
91 logger('Calculating double tap zone (player width: %d, offset X: %d)', playerWidth, offsetX)
93 if (offsetX > 0.66 * playerWidth) {
94 if (this.seekAmount < 0) this.seekAmount = 0
98 logger('Will forward %d seconds', this.seekAmount)
99 } else if (offsetX < 0.33 * playerWidth) {
100 if (this.seekAmount > 0) this.seekAmount = 0
102 this.seekAmount -= 10
103 logger('Will rewind %d seconds', this.seekAmount)
106 this.peerTubeMobileButtons.displayFastSeek(this.seekAmount)
108 this.scheduleSetCurrentTime()
112 private findPlayerTarget (target: HTMLElement): HTMLElement {
113 if (target.classList.contains('video-js')) return target
115 return this.findPlayerTarget(target.parentElement)
118 private scheduleSetCurrentTime () {
120 this.player.addClass('vjs-fast-seeking')
122 if (this.setCurrentTimeTimeout) clearTimeout(this.setCurrentTimeTimeout)
124 this.setCurrentTimeTimeout = setTimeout(() => {
125 let newTime = this.player.currentTime() + this.seekAmount
128 newTime = Math.max(0, newTime)
129 newTime = Math.min(this.player.duration(), newTime)
131 this.player.currentTime(newTime)
133 this.peerTubeMobileButtons.displayFastSeek(0)
135 this.player.removeClass('vjs-fast-seeking')
136 this.player.userActive(false)
139 }, PeerTubeMobilePlugin.SET_CURRENT_TIME_DELAY)
143 videojs.registerPlugin('peertubeMobile', PeerTubeMobilePlugin)
144 export { PeerTubeMobilePlugin }