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

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