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