mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2024-09-11 13:37:10 +03:00
Add fast forward/rewind on mobile
This commit is contained in:
parent
e98ef69d1c
commit
2dd0a8a8fd
@ -1,23 +1,18 @@
|
||||
import videojs from 'video.js'
|
||||
|
||||
import debug from 'debug'
|
||||
|
||||
const logger = debug('peertube:player:mobile')
|
||||
|
||||
const Component = videojs.getComponent('Component')
|
||||
class PeerTubeMobileButtons extends Component {
|
||||
|
||||
private rewind: Element
|
||||
private forward: Element
|
||||
private rewindText: Element
|
||||
private forwardText: Element
|
||||
|
||||
createEl () {
|
||||
const container = super.createEl('div', {
|
||||
className: 'vjs-mobile-buttons-overlay'
|
||||
}) as HTMLDivElement
|
||||
|
||||
container.addEventListener('click', () => {
|
||||
logger('Set user as inactive')
|
||||
|
||||
this.player_.userActive(false)
|
||||
})
|
||||
|
||||
const mainButton = super.createEl('div', {
|
||||
className: 'main-button'
|
||||
}) as HTMLDivElement
|
||||
@ -33,10 +28,67 @@ class PeerTubeMobileButtons extends Component {
|
||||
this.player_.pause()
|
||||
})
|
||||
|
||||
this.rewind = super.createEl('div', { className: 'rewind-button vjs-hidden' })
|
||||
this.forward = super.createEl('div', { className: 'forward-button vjs-hidden' })
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
this.rewind.appendChild(super.createEl('span', { className: 'icon' }))
|
||||
this.forward.appendChild(super.createEl('span', { className: 'icon' }))
|
||||
}
|
||||
|
||||
this.rewindText = this.rewind.appendChild(super.createEl('div', { className: 'text' }))
|
||||
this.forwardText = this.forward.appendChild(super.createEl('div', { className: 'text' }))
|
||||
|
||||
container.appendChild(this.rewind)
|
||||
container.appendChild(mainButton)
|
||||
container.appendChild(this.forward)
|
||||
|
||||
return container
|
||||
}
|
||||
|
||||
displayFastSeek (amount: number) {
|
||||
if (amount === 0) {
|
||||
this.hideRewind()
|
||||
this.hideForward()
|
||||
return
|
||||
}
|
||||
|
||||
if (amount > 0) {
|
||||
this.hideRewind()
|
||||
this.displayForward(amount)
|
||||
return
|
||||
}
|
||||
|
||||
if (amount < 0) {
|
||||
this.hideForward()
|
||||
this.displayRewind(amount)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
private hideRewind () {
|
||||
this.rewind.classList.add('vjs-hidden')
|
||||
this.rewindText.textContent = ''
|
||||
}
|
||||
|
||||
private displayRewind (amount: number) {
|
||||
this.rewind.classList.remove('vjs-hidden')
|
||||
this.rewindText.textContent = this.player().localize('{1} seconds', [ amount + '' ])
|
||||
}
|
||||
|
||||
private hideForward () {
|
||||
this.forward.classList.add('vjs-hidden')
|
||||
this.forwardText.textContent = ''
|
||||
}
|
||||
|
||||
private displayForward (amount: number) {
|
||||
this.forward.classList.remove('vjs-hidden')
|
||||
this.forwardText.textContent = this.player().localize('{1} seconds', [ amount + '' ])
|
||||
}
|
||||
}
|
||||
|
||||
videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons)
|
||||
|
||||
export {
|
||||
PeerTubeMobileButtons
|
||||
}
|
||||
|
@ -1,18 +1,43 @@
|
||||
import './peertube-mobile-buttons'
|
||||
import { PeerTubeMobileButtons } from './peertube-mobile-buttons'
|
||||
import videojs from 'video.js'
|
||||
import debug from 'debug'
|
||||
|
||||
const logger = debug('peertube:player:mobile')
|
||||
|
||||
const Plugin = videojs.getPlugin('plugin')
|
||||
|
||||
class PeerTubeMobilePlugin extends Plugin {
|
||||
private static readonly DOUBLE_TAP_DELAY_MS = 250
|
||||
private static readonly SET_CURRENT_TIME_DELAY = 1000
|
||||
|
||||
private peerTubeMobileButtons: PeerTubeMobileButtons
|
||||
|
||||
private seekAmount = 0
|
||||
|
||||
private lastTapEvent: TouchEvent
|
||||
private tapTimeout: NodeJS.Timeout
|
||||
private newActiveState: boolean
|
||||
|
||||
private setCurrentTimeTimeout: NodeJS.Timeout
|
||||
|
||||
constructor (player: videojs.Player, options: videojs.PlayerOptions) {
|
||||
super(player, options)
|
||||
|
||||
player.addChild('PeerTubeMobileButtons')
|
||||
this.peerTubeMobileButtons = player.addChild('PeerTubeMobileButtons') as PeerTubeMobileButtons
|
||||
|
||||
if (videojs.browser.IS_ANDROID && screen.orientation) {
|
||||
this.handleFullscreenRotation()
|
||||
}
|
||||
|
||||
if (!this.player.options_.userActions) this.player.options_.userActions = {};
|
||||
|
||||
// FIXME: typings
|
||||
(this.player.options_.userActions as any).click = false
|
||||
this.player.options_.userActions.doubleClick = false
|
||||
|
||||
this.player.one('play', () => {
|
||||
this.initTouchStartEvents()
|
||||
})
|
||||
}
|
||||
|
||||
private handleFullscreenRotation () {
|
||||
@ -27,6 +52,92 @@ class PeerTubeMobilePlugin extends Plugin {
|
||||
private isPortraitVideo () {
|
||||
return this.player.videoWidth() < this.player.videoHeight()
|
||||
}
|
||||
|
||||
private initTouchStartEvents () {
|
||||
this.player.on('touchstart', (event: TouchEvent) => {
|
||||
event.stopPropagation()
|
||||
|
||||
if (this.tapTimeout) {
|
||||
clearTimeout(this.tapTimeout)
|
||||
this.tapTimeout = undefined
|
||||
}
|
||||
|
||||
if (this.lastTapEvent && event.timeStamp - this.lastTapEvent.timeStamp < PeerTubeMobilePlugin.DOUBLE_TAP_DELAY_MS) {
|
||||
logger('Detected double tap')
|
||||
|
||||
this.lastTapEvent = undefined
|
||||
this.onDoubleTap(event)
|
||||
return
|
||||
}
|
||||
|
||||
this.newActiveState = !this.player.userActive()
|
||||
|
||||
this.tapTimeout = setTimeout(() => {
|
||||
logger('No double tap detected, set user active state to %s.', this.newActiveState)
|
||||
|
||||
this.player.userActive(this.newActiveState)
|
||||
}, PeerTubeMobilePlugin.DOUBLE_TAP_DELAY_MS)
|
||||
|
||||
this.lastTapEvent = event
|
||||
})
|
||||
}
|
||||
|
||||
private onDoubleTap (event: TouchEvent) {
|
||||
const playerWidth = this.player.currentWidth()
|
||||
|
||||
const rect = this.findPlayerTarget((event.target as HTMLElement)).getBoundingClientRect()
|
||||
const offsetX = event.targetTouches[0].pageX - rect.left
|
||||
|
||||
logger('Calculating double tap zone (player width: %d, offset X: %d)', playerWidth, offsetX)
|
||||
|
||||
if (offsetX > 0.66 * playerWidth) {
|
||||
if (this.seekAmount < 0) this.seekAmount = 0
|
||||
|
||||
this.seekAmount += 10
|
||||
|
||||
logger('Will forward %d seconds', this.seekAmount)
|
||||
} else if (offsetX < 0.33 * playerWidth) {
|
||||
if (this.seekAmount > 0) this.seekAmount = 0
|
||||
|
||||
this.seekAmount -= 10
|
||||
logger('Will rewind %d seconds', this.seekAmount)
|
||||
}
|
||||
|
||||
this.peerTubeMobileButtons.displayFastSeek(this.seekAmount)
|
||||
|
||||
this.scheduleSetCurrentTime()
|
||||
|
||||
}
|
||||
|
||||
private findPlayerTarget (target: HTMLElement): HTMLElement {
|
||||
if (target.classList.contains('video-js')) return target
|
||||
|
||||
return this.findPlayerTarget(target.parentElement)
|
||||
}
|
||||
|
||||
private scheduleSetCurrentTime () {
|
||||
this.player.pause()
|
||||
this.player.addClass('vjs-fast-seeking')
|
||||
|
||||
if (this.setCurrentTimeTimeout) clearTimeout(this.setCurrentTimeTimeout)
|
||||
|
||||
this.setCurrentTimeTimeout = setTimeout(() => {
|
||||
let newTime = this.player.currentTime() + this.seekAmount
|
||||
this.seekAmount = 0
|
||||
|
||||
newTime = Math.max(0, newTime)
|
||||
newTime = Math.min(this.player.duration(), newTime)
|
||||
|
||||
this.player.currentTime(newTime)
|
||||
this.seekAmount = 0
|
||||
this.peerTubeMobileButtons.displayFastSeek(0)
|
||||
|
||||
this.player.removeClass('vjs-fast-seeking')
|
||||
this.player.userActive(false)
|
||||
|
||||
this.player.play()
|
||||
}, PeerTubeMobilePlugin.SET_CURRENT_TIME_DELAY)
|
||||
}
|
||||
}
|
||||
|
||||
videojs.registerPlugin('peertubeMobile', PeerTubeMobilePlugin)
|
||||
|
@ -22,6 +22,7 @@ import './videojs-components/settings-panel-child'
|
||||
import './videojs-components/theater-button'
|
||||
import './playlist/playlist-plugin'
|
||||
import './mobile/peertube-mobile-plugin'
|
||||
import './mobile/peertube-mobile-buttons'
|
||||
import videojs from 'video.js'
|
||||
import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
|
||||
import { PluginsManager } from '@root-helpers/plugins-manager'
|
||||
|
@ -31,22 +31,89 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
font-family: VideoJS;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 5em;
|
||||
.main-button,
|
||||
.rewind-button,
|
||||
.forward-button {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
height: fit-content;
|
||||
position: relative;
|
||||
top: calc(50% - 10px);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.main-button,
|
||||
.rewind-button .icon,
|
||||
.forward-button .icon {
|
||||
font-family: VideoJS;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.main-button {
|
||||
font-size: 5em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.rewind-button,
|
||||
.forward-button {
|
||||
margin: 0 10px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
opacity: 0;
|
||||
animation: fadeInAndOut 1s linear infinite;
|
||||
|
||||
&::before {
|
||||
font-size: 20px;
|
||||
content: '\f101';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forward-button {
|
||||
right: 5px;
|
||||
|
||||
.icon {
|
||||
&::before {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-button {
|
||||
left: 5px;
|
||||
|
||||
.icon {
|
||||
&::before {
|
||||
margin-right: -2px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-paused {
|
||||
.main-button {
|
||||
&:before {
|
||||
&::before {
|
||||
content: '\f101';
|
||||
}
|
||||
}
|
||||
@ -54,7 +121,7 @@
|
||||
|
||||
.vjs-playing {
|
||||
.main-button {
|
||||
&:before {
|
||||
&::before {
|
||||
content: '\f103';
|
||||
}
|
||||
}
|
||||
@ -62,7 +129,7 @@
|
||||
|
||||
.vjs-ended {
|
||||
.main-button {
|
||||
&:before {
|
||||
&::before {
|
||||
content: '\f116';
|
||||
}
|
||||
}
|
||||
@ -77,11 +144,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.vjs-seeking,
|
||||
&.vjs-scrubbing,
|
||||
&.vjs-waiting {
|
||||
&.vjs-scrubbing {
|
||||
.vjs-mobile-buttons-overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.vjs-seeking,
|
||||
&.vjs-waiting,
|
||||
&.vjs-fast-seeking {
|
||||
.main-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInAndOut {
|
||||
0%,
|
||||
20% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60%,
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
@ -50,7 +50,9 @@ const playerKeys = {
|
||||
'Buffer State': 'Buffer State',
|
||||
'Live Latency': 'Live Latency',
|
||||
'P2P': 'P2P',
|
||||
'{1} seconds': '{1} seconds',
|
||||
'enabled': 'enabled',
|
||||
'Playlist: {1}': 'Playlist: {1}',
|
||||
'disabled': 'disabled',
|
||||
' off': ' off',
|
||||
'Player mode': 'Player mode'
|
||||
|
Loading…
Reference in New Issue
Block a user