client/src/assets/player/videojs-components/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 { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
   6
   7 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
   8 class ResolutionMenuItem extends MenuItem {
   9   private readonly id: number
  10   private readonly label: string
  11   // Only used for the automatic item
  12   private readonly labels: { [id: number]: string }
  13   private readonly callback: Function
  14
  15   private autoResolutionPossible: boolean
  16   private currentResolutionLabel: string
  17
  18   constructor (player: Player, options: any) {
  19     options.selectable = true
  20
  21     super(player, options)
  22
  23     this.autoResolutionPossible = true
  24     this.currentResolutionLabel = ''
  25
  26     this.label = options.label
  27     this.labels = options.labels
  28     this.id = options.id
  29     this.callback = options.callback
  30
  31     player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
  32
  33     // We only want to disable the "Auto" item
  34     if (this.id === -1) {
  35       player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
  36     }
  37   }
  38
  39   handleClick (event: any) {
  40     // Auto button disabled?
  41     if (this.autoResolutionPossible === false && this.id === -1) return
  42
  43     super.handleClick(event)
  44
  45     this.callback(this.id, 'video')
  46   }
  47
  48   updateSelection (data: ResolutionUpdateData) {
  49     if (this.id === -1) {
  50       this.currentResolutionLabel = this.labels[data.id]
  51     }
  52
  53     // Automatic resolution only
  54     if (data.auto === true) {
  55       this.selected(this.id === -1)
  56       return
  57     }
  58
  59     this.selected(this.id === data.id)
  60   }
  61
  62   updateAutoResolution (data: AutoResolutionUpdateData) {
  63     // Check if the auto resolution is enabled or not
  64     if (data.possible === false) {
  65       this.addClass('disabled')
  66     } else {
  67       this.removeClass('disabled')
  68     }
  69
  70     this.autoResolutionPossible = data.possible
  71   }
  72
  73   getLabel () {
  74     if (this.id === -1) {
  75       return this.label + ' <small>' + this.currentResolutionLabel + '</small>'
  76     }
  77
  78     return this.label
  79   }
  80 }
  81 MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
  82
  83 export { ResolutionMenuItem }