mirror of https://github.com/Chocobozzz/PeerTube
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import videojs from 'video.js'
|
|
|
|
const Component = videojs.getComponent('Component')
|
|
class PeerTubeMobileButtons extends Component {
|
|
private mainButton: HTMLDivElement
|
|
|
|
private rewind: Element
|
|
private forward: Element
|
|
private rewindText: Element
|
|
private forwardText: Element
|
|
|
|
private touchStartHandler: (e: TouchEvent) => void
|
|
|
|
createEl () {
|
|
const container = super.createEl('div', { className: 'vjs-mobile-buttons-overlay' }) as HTMLDivElement
|
|
this.mainButton = super.createEl('div', { className: 'main-button' }) as HTMLDivElement
|
|
|
|
this.touchStartHandler = e => {
|
|
e.stopPropagation()
|
|
|
|
if (this.player_.paused() || this.player_.ended()) {
|
|
this.player_.play()
|
|
return
|
|
}
|
|
|
|
this.player_.pause()
|
|
}
|
|
|
|
this.mainButton.addEventListener('touchstart', this.touchStartHandler, { passive: true })
|
|
|
|
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(this.mainButton)
|
|
container.appendChild(this.forward)
|
|
|
|
return container
|
|
}
|
|
|
|
dispose () {
|
|
if (this.touchStartHandler) this.mainButton.removeEventListener('touchstart', this.touchStartHandler)
|
|
|
|
super.dispose()
|
|
}
|
|
|
|
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
|
|
}
|