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

   1 import videojs from 'video.js'
   2 import { isMobile } from '@root-helpers/web-browser'
   3
   4 function getPauseBezel () {
   5   return `
   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>
  12         </svg>
  13       </div>
  14     </div>
  15   </div>
  16   `
  17 }
  18
  19 function getPlayBezel () {
  20   return `
  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>
  27         </svg>
  28       </div>
  29     </div>
  30   </div>
  31   `
  32 }
  33
  34 const Component = videojs.getComponent('Component')
  35 class PauseBezel extends Component {
  36   container: HTMLDivElement
  37
  38   constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
  39     super(player, options)
  40
  41     // Hide bezels on mobile since we already have our mobile overlay
  42     if (isMobile()) return
  43
  44     player.on('pause', (_: any) => {
  45       if (player.seeking() || player.ended()) return
  46       this.container.innerHTML = getPauseBezel()
  47       this.showBezel()
  48     })
  49
  50     player.on('play', (_: any) => {
  51       if (player.seeking()) return
  52       this.container.innerHTML = getPlayBezel()
  53       this.showBezel()
  54     })
  55   }
  56
  57   createEl () {
  58     this.container = super.createEl('div', {
  59       className: 'vjs-bezels-content'
  60     }) as HTMLDivElement
  61
  62     this.container.style.display = 'none'
  63
  64     return this.container
  65   }
  66
  67   showBezel () {
  68     this.container.style.display = 'inherit'
  69
  70     setTimeout(() => {
  71       this.container.style.display = 'none'
  72     }, 500) // matching the animation duration
  73   }
  74 }
  75
  76 videojs.registerComponent('PauseBezel', PauseBezel)