diff options
Diffstat (limited to 'client/src/assets/player/bezels/pause-bezel.ts')
-rw-r--r-- | client/src/assets/player/bezels/pause-bezel.ts | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts new file mode 100644 index 000000000..98eb12099 --- /dev/null +++ b/client/src/assets/player/bezels/pause-bezel.ts | |||
@@ -0,0 +1,72 @@ | |||
1 | import videojs, { VideoJsPlayer } from 'video.js' | ||
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 | |||
37 | constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) { | ||
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) | ||