diff options
author | Chocobozzz <me@florianbigard.com> | 2022-03-14 14:28:20 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-03-14 14:36:35 +0100 |
commit | 57d6503286b114fee61b5e4725825e2490dcac29 (patch) | |
tree | 2d3d23f697b2986d7e41bb443754394296b66ec3 /client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts | |
parent | 9597920ee3d4ac99803e7107983ddf98a9dfb3c4 (diff) | |
download | PeerTube-57d6503286b114fee61b5e4725825e2490dcac29.tar.gz PeerTube-57d6503286b114fee61b5e4725825e2490dcac29.tar.zst PeerTube-57d6503286b114fee61b5e4725825e2490dcac29.zip |
Reorganize player files
Diffstat (limited to 'client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts')
-rw-r--r-- | client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts new file mode 100644 index 000000000..09cb98f2e --- /dev/null +++ b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts | |||
@@ -0,0 +1,94 @@ | |||
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 | } | ||