]>
Commit | Line | Data |
---|---|---|
62ab565d RK |
1 | // @ts-ignore |
2 | import * as videojs from 'video.js' | |
3 | import { VideoJSComponentInterface } from '../peertube-videojs-typings' | |
4 | ||
5 | function getPauseBezel () { | |
6 | return ` | |
7 | <div class="vjs-bezels-pause"> | |
8 | <div class="vjs-bezel" role="status" aria-label="Pause"> | |
9 | <div class="vjs-bezel-icon"> | |
10 | <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> | |
11 | <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use> | |
12 | <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> | |
13 | </svg> | |
14 | </div> | |
15 | </div> | |
16 | </div> | |
17 | ` | |
18 | } | |
19 | ||
20 | function getPlayBezel () { | |
21 | return ` | |
22 | <div class="vjs-bezels-play"> | |
23 | <div class="vjs-bezel" role="status" aria-label="Play"> | |
24 | <div class="vjs-bezel-icon"> | |
25 | <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> | |
26 | <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use> | |
27 | <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> | |
28 | </svg> | |
29 | </div> | |
30 | </div> | |
31 | </div> | |
32 | ` | |
33 | } | |
34 | ||
35 | // @ts-ignore-start | |
36 | const Component = videojs.getComponent('Component') | |
37 | class PauseBezel extends Component { | |
38 | options_: any | |
39 | container: HTMLBodyElement | |
40 | ||
41 | constructor (player: videojs.Player, options: any) { | |
42 | super(player, options) | |
43 | this.options_ = options | |
44 | ||
45 | player.on('pause', (_: any) => { | |
96f6278f | 46 | if (player.seeking() || player.ended()) return |
62ab565d RK |
47 | this.container.innerHTML = getPauseBezel() |
48 | this.showBezel() | |
49 | }) | |
50 | ||
51 | player.on('play', (_: any) => { | |
52 | if (player.seeking()) return | |
53 | this.container.innerHTML = getPlayBezel() | |
54 | this.showBezel() | |
55 | }) | |
56 | } | |
57 | ||
58 | createEl () { | |
59 | const container = super.createEl('div', { | |
60 | className: 'vjs-bezels-content' | |
61 | }) | |
62 | this.container = container | |
63 | container.style.display = 'none' | |
64 | ||
65 | return container | |
66 | } | |
67 | ||
68 | showBezel () { | |
69 | this.container.style.display = 'inherit' | |
70 | setTimeout(() => { | |
71 | this.container.style.display = 'none' | |
72 | }, 500) // matching the animation duration | |
73 | } | |
74 | } | |
75 | // @ts-ignore-end | |
76 | ||
77 | videojs.registerComponent('PauseBezel', PauseBezel) | |
78 | ||
79 | const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') | |
80 | class BezelsPlugin extends Plugin { | |
81 | constructor (player: videojs.Player, options: any = {}) { | |
82 | super(player, options) | |
83 | ||
84 | this.player.ready(() => { | |
85 | player.addClass('vjs-bezels') | |
86 | }) | |
87 | ||
88 | player.addChild('PauseBezel', options) | |
89 | } | |
90 | } | |
91 | ||
92 | videojs.registerPlugin('bezels', BezelsPlugin) | |
93 | export { BezelsPlugin } |