client/src/assets/player/shared/control-bar/next-previous-video-button.ts

   1 import videojs from 'video.js'
   2 import { NextPreviousVideoButtonOptions } from '../../types'
   3
   4 const Button = videojs.getComponent('Button')
   5
   6 class NextPreviousVideoButton extends Button {
   7   private readonly nextPreviousVideoButtonOptions: NextPreviousVideoButtonOptions
   8
   9   constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions) {
  10     super(player, options as any)
  11
  12     this.nextPreviousVideoButtonOptions = options
  13
  14     this.update()
  15   }
  16
  17   createEl () {
  18     const type = (this.options_ as NextPreviousVideoButtonOptions).type
  19
  20     const button = videojs.dom.createEl('button', {
  21       className: 'vjs-' + type + '-video'
  22     }) as HTMLButtonElement
  23     const nextIcon = videojs.dom.createEl('span', {
  24       className: 'icon icon-' + type
  25     })
  26     button.appendChild(nextIcon)
  27
  28     if (type === 'next') {
  29       button.title = this.player_.localize('Next video')
  30     } else {
  31       button.title = this.player_.localize('Previous video')
  32     }
  33
  34     return button
  35   }
  36
  37   handleClick () {
  38     this.nextPreviousVideoButtonOptions.handler()
  39   }
  40
  41   update () {
  42     const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
  43
  44     if (disabled) this.addClass('vjs-disabled')
  45     else this.removeClass('vjs-disabled')
  46   }
  47 }
  48
  49 videojs.registerComponent('NextVideoButton', NextPreviousVideoButton)
  50 videojs.registerComponent('PreviousVideoButton', NextPreviousVideoButton)