client/src/assets/player/bezels/pause-bezel.ts

   1 import videojs 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: videojs.Player, 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)