]>
Commit | Line | Data |
---|---|---|
1 | import videojs from 'video.js' | |
2 | ||
3 | const Component = videojs.getComponent('Component') | |
4 | class PeerTubeMobileButtons extends Component { | |
5 | ||
6 | private rewind: Element | |
7 | private forward: Element | |
8 | private rewindText: Element | |
9 | private forwardText: Element | |
10 | ||
11 | createEl () { | |
12 | const container = super.createEl('div', { | |
13 | className: 'vjs-mobile-buttons-overlay' | |
14 | }) as HTMLDivElement | |
15 | ||
16 | const mainButton = super.createEl('div', { | |
17 | className: 'main-button' | |
18 | }) as HTMLDivElement | |
19 | ||
20 | mainButton.addEventListener('touchstart', e => { | |
21 | e.stopPropagation() | |
22 | ||
23 | if (this.player_.paused() || this.player_.ended()) { | |
24 | this.player_.play() | |
25 | return | |
26 | } | |
27 | ||
28 | this.player_.pause() | |
29 | }) | |
30 | ||
31 | this.rewind = super.createEl('div', { className: 'rewind-button vjs-hidden' }) | |
32 | this.forward = super.createEl('div', { className: 'forward-button vjs-hidden' }) | |
33 | ||
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' })) | |
37 | } | |
38 | ||
39 | this.rewindText = this.rewind.appendChild(super.createEl('div', { className: 'text' })) | |
40 | this.forwardText = this.forward.appendChild(super.createEl('div', { className: 'text' })) | |
41 | ||
42 | container.appendChild(this.rewind) | |
43 | container.appendChild(mainButton) | |
44 | container.appendChild(this.forward) | |
45 | ||
46 | return container | |
47 | } | |
48 | ||
49 | displayFastSeek (amount: number) { | |
50 | if (amount === 0) { | |
51 | this.hideRewind() | |
52 | this.hideForward() | |
53 | return | |
54 | } | |
55 | ||
56 | if (amount > 0) { | |
57 | this.hideRewind() | |
58 | this.displayForward(amount) | |
59 | return | |
60 | } | |
61 | ||
62 | if (amount < 0) { | |
63 | this.hideForward() | |
64 | this.displayRewind(amount) | |
65 | return | |
66 | } | |
67 | } | |
68 | ||
69 | private hideRewind () { | |
70 | this.rewind.classList.add('vjs-hidden') | |
71 | this.rewindText.textContent = '' | |
72 | } | |
73 | ||
74 | private displayRewind (amount: number) { | |
75 | this.rewind.classList.remove('vjs-hidden') | |
76 | this.rewindText.textContent = this.player().localize('{1} seconds', [ amount + '' ]) | |
77 | } | |
78 | ||
79 | private hideForward () { | |
80 | this.forward.classList.add('vjs-hidden') | |
81 | this.forwardText.textContent = '' | |
82 | } | |
83 | ||
84 | private displayForward (amount: number) { | |
85 | this.forward.classList.remove('vjs-hidden') | |
86 | this.forwardText.textContent = this.player().localize('{1} seconds', [ amount + '' ]) | |
87 | } | |
88 | } | |
89 | ||
90 | videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons) | |
91 | ||
92 | export { | |
93 | PeerTubeMobileButtons | |
94 | } |