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

   1 import videojs from 'video.js'
   2 import { VideoPlaylistElement } from '@shared/models'
   3 import { PlaylistPluginOptions } from '../peertube-videojs-typings'
   4 import { PlaylistMenuItem } from './playlist-menu-item'
   5
   6 const Component = videojs.getComponent('Component')
   7
   8 class PlaylistMenu extends Component {
   9   private menuItems: PlaylistMenuItem[]
  10
  11   constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
  12     super(player, options as any)
  13
  14     this.player().on('userinactive', () => {
  15       this.close()
  16     })
  17
  18     this.player().on('click', event => {
  19       let current = event.target as HTMLElement
  20
  21       do {
  22         if (
  23           current.classList.contains('vjs-playlist-menu') ||
  24           current.classList.contains('vjs-playlist-button')
  25         ) {
  26           return
  27         }
  28
  29         current = current.parentElement
  30       } while (current)
  31
  32       this.close()
  33     })
  34   }
  35
  36   createEl () {
  37     this.menuItems = []
  38
  39     const options = this.getOptions()
  40
  41     const menu = super.createEl('div', {
  42       className: 'vjs-playlist-menu',
  43       innerHTML: '',
  44       tabIndex: -1
  45     })
  46
  47     const header = super.createEl('div', {
  48       className: 'header'
  49     })
  50
  51     const headerLeft = super.createEl('div')
  52
  53     const leftTitle = super.createEl('div', {
  54       innerHTML: options.playlist.displayName,
  55       className: 'title'
  56     })
  57
  58     const leftSubtitle = super.createEl('div', {
  59       innerHTML: this.player().localize('By {1}', [ options.playlist.videoChannel.displayName ]),
  60       className: 'channel'
  61     })
  62
  63     headerLeft.appendChild(leftTitle)
  64     headerLeft.appendChild(leftSubtitle)
  65
  66     const tick = super.createEl('div', {
  67       className: 'cross'
  68     })
  69     tick.addEventListener('click', () => this.close())
  70
  71     header.appendChild(headerLeft)
  72     header.appendChild(tick)
  73
  74     const list = super.createEl('ol')
  75
  76     for (const playlistElement of options.elements) {
  77       const item = new PlaylistMenuItem(this.player(), {
  78         element: playlistElement,
  79         onClicked: () => this.onItemClicked(playlistElement)
  80       })
  81
  82       list.appendChild(item.el())
  83
  84       this.menuItems.push(item)
  85     }
  86
  87     menu.appendChild(header)
  88     menu.appendChild(list)
  89
  90     return menu
  91   }
  92
  93   update () {
  94     const options = this.getOptions()
  95
  96     this.updateSelected(options.getCurrentPosition())
  97   }
  98
  99   open () {
 100     this.player().addClass('playlist-menu-displayed')
 101   }
 102
 103   close () {
 104     this.player().removeClass('playlist-menu-displayed')
 105   }
 106
 107   updateSelected (newPosition: number) {
 108     for (const item of this.menuItems) {
 109       item.setSelected(item.getElement().position === newPosition)
 110     }
 111   }
 112
 113   private getOptions () {
 114     return this.options_ as PlaylistPluginOptions
 115   }
 116
 117   private onItemClicked (element: VideoPlaylistElement) {
 118     this.getOptions().onItemClicked(element)
 119   }
 120 }
 121
 122 Component.registerComponent('PlaylistMenu', PlaylistMenu)
 123
 124 export { PlaylistMenu }