client/src/assets/player/bezels/bezels-plugin.ts

   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) => {
  46       if (player.seeking() || player.ended()) return
  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 }