1 import videojs from 'video.js'
2 import { isMobile } from '@root-helpers/web-browser'
4 function getPauseBezel () {
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>
19 function getPlayBezel () {
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>
34 const Component = videojs.getComponent('Component')
35 class PauseBezel extends Component {
36 container: HTMLDivElement
38 constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
39 super(player, options)
41 // Hide bezels on mobile since we already have our mobile overlay
42 if (isMobile()) return
44 player.on('pause', (_: any) => {
45 if (player.seeking() || player.ended()) return
46 this.container.innerHTML = getPauseBezel()
50 player.on('play', (_: any) => {
51 if (player.seeking()) return
52 this.container.innerHTML = getPlayBezel()
58 this.container = super.createEl('div', {
59 className: 'vjs-bezels-content'
62 this.container.style.display = 'none'
68 this.container.style.display = 'inherit'
71 this.container.style.display = 'none'
72 }, 500) // matching the animation duration
76 videojs.registerComponent('PauseBezel', PauseBezel)