1 import videojs from 'video.js'
3 const Component = videojs.getComponent('Component')
4 class PeerTubeMobileButtons extends Component {
6 private rewind: Element
7 private forward: Element
8 private rewindText: Element
9 private forwardText: Element
12 const container = super.createEl('div', {
13 className: 'vjs-mobile-buttons-overlay'
16 const mainButton = super.createEl('div', {
17 className: 'main-button'
20 mainButton.addEventListener('touchstart', e => {
23 if (this.player_.paused() || this.player_.ended()) {
31 this.rewind = super.createEl('div', { className: 'rewind-button vjs-hidden' })
32 this.forward = super.createEl('div', { className: 'forward-button vjs-hidden' })
34 for (let i = 0; i < 3; i++) {
35 this.rewind.appendChild(super.createEl('span', { className: 'icon' }))
36 this.forward.appendChild(super.createEl('span', { className: 'icon' }))
39 this.rewindText = this.rewind.appendChild(super.createEl('div', { className: 'text' }))
40 this.forwardText = this.forward.appendChild(super.createEl('div', { className: 'text' }))
42 container.appendChild(this.rewind)
43 container.appendChild(mainButton)
44 container.appendChild(this.forward)
49 displayFastSeek (amount: number) {
58 this.displayForward(amount)
64 this.displayRewind(amount)
69 private hideRewind () {
70 this.rewind.classList.add('vjs-hidden')
71 this.rewindText.textContent = ''
74 private displayRewind (amount: number) {
75 this.rewind.classList.remove('vjs-hidden')
76 this.rewindText.textContent = this.player().localize('{1} seconds', [ amount + '' ])
79 private hideForward () {
80 this.forward.classList.add('vjs-hidden')
81 this.forwardText.textContent = ''
84 private displayForward (amount: number) {
85 this.forward.classList.remove('vjs-hidden')
86 this.forwardText.textContent = this.player().localize('{1} seconds', [ amount + '' ])
90 videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons)