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

   1 import videojs from 'video.js'
   2 import { VideoPlaylistElement } from '@shared/models'
   3 import { PlaylistItemOptions } from '../peertube-videojs-typings'
   4
   5 const Component = videojs.getComponent('Component')
   6
   7 class PlaylistMenuItem extends Component {
   8   private element: VideoPlaylistElement
   9
  10   constructor (player: videojs.Player, options?: PlaylistItemOptions) {
  11     super(player, options as any)
  12
  13     this.emitTapEvents()
  14
  15     this.element = options.element
  16
  17     this.on([ 'click', 'tap' ], () => this.switchPlaylistItem())
  18     this.on('keydown', event => this.handleKeyDown(event))
  19   }
  20
  21   createEl () {
  22     const options = this.options_ as PlaylistItemOptions
  23
  24     const li = super.createEl('li', {
  25       className: 'vjs-playlist-menu-item',
  26       innerHTML: ''
  27     }) as HTMLElement
  28
  29     if (!options.element.video) {
  30       li.classList.add('vjs-disabled')
  31     }
  32
  33     const positionBlock = super.createEl('div', {
  34       className: 'item-position-block'
  35     }) as HTMLElement
  36
  37     const position = super.createEl('div', {
  38       className: 'item-position',
  39       innerHTML: options.element.position
  40     })
  41
  42     positionBlock.appendChild(position)
  43     li.appendChild(positionBlock)
  44
  45     if (options.element.video) {
  46       this.buildAvailableVideo(li, positionBlock, options)
  47     } else {
  48       this.buildUnavailableVideo(li)
  49     }
  50
  51     return li
  52   }
  53
  54   setSelected (selected: boolean) {
  55     if (selected) this.addClass('vjs-selected')
  56     else this.removeClass('vjs-selected')
  57   }
  58
  59   getElement () {
  60     return this.element
  61   }
  62
  63   private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
  64     const player = super.createEl('div', {
  65       className: 'item-player'
  66     })
  67
  68     positionBlock.appendChild(player)
  69
  70     const thumbnail = super.createEl('img', {
  71       src: window.location.origin + options.element.video.thumbnailPath
  72     })
  73
  74     const infoBlock = super.createEl('div', {
  75       className: 'info-block'
  76     })
  77
  78     const title = super.createEl('div', {
  79       innerHTML: options.element.video.name,
  80       className: 'title'
  81     })
  82
  83     const channel = super.createEl('div', {
  84       innerHTML: options.element.video.channel.displayName,
  85       className: 'channel'
  86     })
  87
  88     infoBlock.appendChild(title)
  89     infoBlock.appendChild(channel)
  90
  91     li.append(thumbnail)
  92     li.append(infoBlock)
  93   }
  94
  95   private buildUnavailableVideo (li: HTMLElement) {
  96     const block = super.createEl('div', {
  97       className: 'item-unavailable',
  98       innerHTML: this.player().localize('Unavailable video')
  99     })
 100
 101     li.appendChild(block)
 102   }
 103
 104   private handleKeyDown (event: KeyboardEvent) {
 105     if (event.code === 'Space' || event.code === 'Enter') {
 106       this.switchPlaylistItem()
 107     }
 108   }
 109
 110   private switchPlaylistItem () {
 111     const options = this.options_ as PlaylistItemOptions
 112
 113     options.onClicked()
 114   }
 115 }
 116
 117 Component.registerComponent('PlaylistMenuItem', PlaylistMenuItem)
 118
 119 export { PlaylistMenuItem }