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

   1 import videojs from 'video.js'
   2 import { PlaylistPluginOptions } from '../peertube-videojs-typings'
   3 import { PlaylistMenu } from './playlist-menu'
   4
   5 const ClickableComponent = videojs.getComponent('ClickableComponent')
   6
   7 class PlaylistButton extends ClickableComponent {
   8   private playlistInfoElement: HTMLElement
   9   private wrapper: HTMLElement
  10
  11   constructor (player: videojs.Player, options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu }) {
  12     super(player, options as any)
  13   }
  14
  15   createEl () {
  16     this.wrapper = super.createEl('div', {
  17       className: 'vjs-playlist-button',
  18       innerHTML: '',
  19       tabIndex: -1
  20     }) as HTMLElement
  21
  22     const icon = super.createEl('div', {
  23       className: 'vjs-playlist-icon',
  24       innerHTML: '',
  25       tabIndex: -1
  26     })
  27
  28     this.playlistInfoElement = super.createEl('div', {
  29       className: 'vjs-playlist-info',
  30       innerHTML: '',
  31       tabIndex: -1
  32     }) as HTMLElement
  33
  34     this.wrapper.appendChild(icon)
  35     this.wrapper.appendChild(this.playlistInfoElement)
  36
  37     this.update()
  38
  39     return this.wrapper
  40   }
  41
  42   update () {
  43     const options = this.options_ as PlaylistPluginOptions
  44
  45     this.playlistInfoElement.innerHTML = options.getCurrentPosition() + '/' + options.playlist.videosLength
  46     this.wrapper.title = this.player().localize('Playlist: {1}', [ options.playlist.displayName ])
  47   }
  48
  49   handleClick () {
  50     const playlistMenu = this.getPlaylistMenu()
  51     playlistMenu.open()
  52   }
  53
  54   private getPlaylistMenu () {
  55     return (this.options_ as any).playlistMenu as PlaylistMenu
  56   }
  57 }
  58
  59 videojs.registerComponent('PlaylistButton', PlaylistButton)
  60
  61 export { PlaylistButton }