diff options
Diffstat (limited to 'client/src/assets/player/mobile/peertube-mobile-buttons.ts')
-rw-r--r-- | client/src/assets/player/mobile/peertube-mobile-buttons.ts | 72 |
1 files changed, 62 insertions, 10 deletions
diff --git a/client/src/assets/player/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/mobile/peertube-mobile-buttons.ts index d6f8f35e3..94eeec023 100644 --- a/client/src/assets/player/mobile/peertube-mobile-buttons.ts +++ b/client/src/assets/player/mobile/peertube-mobile-buttons.ts | |||
@@ -1,23 +1,18 @@ | |||
1 | import videojs from 'video.js' | 1 | import videojs from 'video.js' |
2 | 2 | ||
3 | import debug from 'debug' | ||
4 | |||
5 | const logger = debug('peertube:player:mobile') | ||
6 | |||
7 | const Component = videojs.getComponent('Component') | 3 | const Component = videojs.getComponent('Component') |
8 | class PeerTubeMobileButtons extends Component { | 4 | class PeerTubeMobileButtons extends Component { |
9 | 5 | ||
6 | private rewind: Element | ||
7 | private forward: Element | ||
8 | private rewindText: Element | ||
9 | private forwardText: Element | ||
10 | |||
10 | createEl () { | 11 | createEl () { |
11 | const container = super.createEl('div', { | 12 | const container = super.createEl('div', { |
12 | className: 'vjs-mobile-buttons-overlay' | 13 | className: 'vjs-mobile-buttons-overlay' |
13 | }) as HTMLDivElement | 14 | }) as HTMLDivElement |
14 | 15 | ||
15 | container.addEventListener('click', () => { | ||
16 | logger('Set user as inactive') | ||
17 | |||
18 | this.player_.userActive(false) | ||
19 | }) | ||
20 | |||
21 | const mainButton = super.createEl('div', { | 16 | const mainButton = super.createEl('div', { |
22 | className: 'main-button' | 17 | className: 'main-button' |
23 | }) as HTMLDivElement | 18 | }) as HTMLDivElement |
@@ -33,10 +28,67 @@ class PeerTubeMobileButtons extends Component { | |||
33 | this.player_.pause() | 28 | this.player_.pause() |
34 | }) | 29 | }) |
35 | 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) | ||
36 | container.appendChild(mainButton) | 43 | container.appendChild(mainButton) |
44 | container.appendChild(this.forward) | ||
37 | 45 | ||
38 | return container | 46 | return container |
39 | } | 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 | } | ||
40 | } | 88 | } |
41 | 89 | ||
42 | videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons) | 90 | videojs.registerComponent('PeerTubeMobileButtons', PeerTubeMobileButtons) |
91 | |||
92 | export { | ||
93 | PeerTubeMobileButtons | ||
94 | } | ||