client/src/assets/player/resolution-menu-item.ts

   1 // FIXME: something weird with our path definition in tsconfig and typings
   2 // @ts-ignore
   3 import { Player } from 'video.js'
   4
   5 import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
   6
   7 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
   8 class ResolutionMenuItem extends MenuItem {
   9
  10   constructor (player: Player, options: any) {
  11     const currentResolutionId = player.peertube().getCurrentResolutionId()
  12     options.selectable = true
  13     options.selected = options.id === currentResolutionId
  14
  15     super(player, options)
  16
  17     this.label = options.label
  18     this.id = options.id
  19
  20     player.peertube().on('videoFileUpdate', () => this.updateSelection())
  21     player.peertube().on('autoResolutionUpdate', () => this.updateSelection())
  22   }
  23
  24   handleClick (event: any) {
  25     if (this.id === -1 && this.player_.peertube().isAutoResolutionForbidden()) return
  26
  27     super.handleClick(event)
  28
  29     // Auto resolution
  30     if (this.id === -1) {
  31       this.player_.peertube().enableAutoResolution()
  32       return
  33     }
  34
  35     this.player_.peertube().disableAutoResolution()
  36     this.player_.peertube().updateResolution(this.id)
  37   }
  38
  39   updateSelection () {
  40     // Check if auto resolution is forbidden or not
  41     if (this.id === -1) {
  42       if (this.player_.peertube().isAutoResolutionForbidden()) {
  43         this.addClass('disabled')
  44       } else {
  45         this.removeClass('disabled')
  46       }
  47     }
  48
  49     if (this.player_.peertube().isAutoResolutionOn()) {
  50       this.selected(this.id === -1)
  51       return
  52     }
  53
  54     this.selected(this.player_.peertube().getCurrentResolutionId() === this.id)
  55   }
  56
  57   getLabel () {
  58     if (this.id === -1) {
  59       return this.label + ' <small>' + this.player_.peertube().getCurrentResolutionLabel() + '</small>'
  60     }
  61
  62     return this.label
  63   }
  64 }
  65 MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
  66
  67 export { ResolutionMenuItem }