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

   1 import videojs from 'video.js'
   2
   3 const MenuItem = videojs.getComponent('MenuItem')
   4
   5 export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
   6   resolutionId: number
   7 }
   8
   9 class ResolutionMenuItem extends MenuItem {
  10   private readonly resolutionId: number
  11   private readonly label: string
  12
  13   private autoResolutionEnabled: boolean
  14   private autoResolutionChosen: string
  15
  16   constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
  17     options.selectable = true
  18
  19     super(player, options)
  20
  21     this.autoResolutionEnabled = true
  22     this.autoResolutionChosen = ''
  23
  24     this.resolutionId = options.resolutionId
  25     this.label = options.label
  26
  27     player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection())
  28
  29     // We only want to disable the "Auto" item
  30     if (this.resolutionId === -1) {
  31       player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution())
  32     }
  33   }
  34
  35   handleClick (event: any) {
  36     // Auto button disabled?
  37     if (this.autoResolutionEnabled === false && this.resolutionId === -1) return
  38
  39     super.handleClick(event)
  40
  41     this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false })
  42   }
  43
  44   updateSelection () {
  45     const selectedResolution = this.player().peertubeResolutions().getSelected()
  46
  47     if (this.resolutionId === -1) {
  48       this.autoResolutionChosen = this.player().peertubeResolutions().getAutoResolutionChosen()?.label
  49     }
  50
  51     this.selected(this.resolutionId === selectedResolution.id)
  52   }
  53
  54   updateAutoResolution () {
  55     const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld()
  56
  57     // Check if the auto resolution is enabled or not
  58     if (enabled === false) {
  59       this.addClass('disabled')
  60     } else {
  61       this.removeClass('disabled')
  62     }
  63
  64     this.autoResolutionEnabled = enabled
  65   }
  66
  67   getLabel () {
  68     if (this.resolutionId === -1) {
  69       return this.label + ' <small>' + this.autoResolutionChosen + '</small>'
  70     }
  71
  72     return this.label
  73   }
  74 }
  75 videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
  76
  77 export { ResolutionMenuItem }