]>
Commit | Line | Data |
---|---|---|
512decf3 | 1 | import videojs from 'video.js' |
57d65032 | 2 | import { isMobile } from '@root-helpers/web-browser' |
f5fcd9f7 C |
3 | |
4 | function getPauseBezel () { | |
5 | return ` | |
6 | <div class="vjs-bezels-pause"> | |
7 | <div class="vjs-bezel" role="status" aria-label="Pause"> | |
8 | <div class="vjs-bezel-icon"> | |
9 | <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> | |
10 | <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use> | |
11 | <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path> | |
12 | </svg> | |
13 | </div> | |
14 | </div> | |
15 | </div> | |
16 | ` | |
17 | } | |
18 | ||
19 | function getPlayBezel () { | |
20 | return ` | |
21 | <div class="vjs-bezels-play"> | |
22 | <div class="vjs-bezel" role="status" aria-label="Play"> | |
23 | <div class="vjs-bezel-icon"> | |
24 | <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> | |
25 | <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use> | |
26 | <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path> | |
27 | </svg> | |
28 | </div> | |
29 | </div> | |
30 | </div> | |
31 | ` | |
32 | } | |
33 | ||
34 | const Component = videojs.getComponent('Component') | |
35 | class PauseBezel extends Component { | |
36 | container: HTMLDivElement | |
37 | ||
7e37e111 | 38 | constructor (player: videojs.Player, options?: videojs.ComponentOptions) { |
f5fcd9f7 C |
39 | super(player, options) |
40 | ||
f1a0555a C |
41 | // Hide bezels on mobile since we already have our mobile overlay |
42 | if (isMobile()) return | |
43 | ||
f5fcd9f7 C |
44 | player.on('pause', (_: any) => { |
45 | if (player.seeking() || player.ended()) return | |
46 | this.container.innerHTML = getPauseBezel() | |
47 | this.showBezel() | |
48 | }) | |
49 | ||
50 | player.on('play', (_: any) => { | |
51 | if (player.seeking()) return | |
52 | this.container.innerHTML = getPlayBezel() | |
53 | this.showBezel() | |
54 | }) | |
55 | } | |
56 | ||
57 | createEl () { | |
58 | this.container = super.createEl('div', { | |
59 | className: 'vjs-bezels-content' | |
60 | }) as HTMLDivElement | |
61 | ||
62 | this.container.style.display = 'none' | |
63 | ||
64 | return this.container | |
65 | } | |
66 | ||
67 | showBezel () { | |
68 | this.container.style.display = 'inherit' | |
69 | ||
70 | setTimeout(() => { | |
71 | this.container.style.display = 'none' | |
72 | }, 500) // matching the animation duration | |
73 | } | |
74 | } | |
75 | ||
76 | videojs.registerComponent('PauseBezel', PauseBezel) |