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'
6 const Component = videojs.getComponent('Component')
8 class PlaylistMenu extends Component {
9 private menuItems: PlaylistMenuItem[]
11 constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
12 super(player, options as any)
16 function userInactiveHandler () {
20 this.el().addEventListener('mouseenter', () => {
21 this.player().off('userinactive', userInactiveHandler)
24 this.el().addEventListener('mouseleave', () => {
25 this.player().one('userinactive', userInactiveHandler)
28 this.player().on('click', event => {
29 let current = event.target as HTMLElement
33 current.classList.contains('vjs-playlist-menu') ||
34 current.classList.contains('vjs-playlist-button')
39 current = current.parentElement
49 const options = this.getOptions()
51 const menu = super.createEl('div', {
52 className: 'vjs-playlist-menu',
57 const header = super.createEl('div', {
61 const headerLeft = super.createEl('div')
63 const leftTitle = super.createEl('div', {
64 innerHTML: options.playlist.displayName,
68 const leftSubtitle = super.createEl('div', {
69 innerHTML: this.player().localize('By {1}', [ options.playlist.videoChannel.displayName ]),
73 headerLeft.appendChild(leftTitle)
74 headerLeft.appendChild(leftSubtitle)
76 const tick = super.createEl('div', {
79 tick.addEventListener('click', () => this.close())
81 header.appendChild(headerLeft)
82 header.appendChild(tick)
84 const list = super.createEl('ol')
86 for (const playlistElement of options.elements) {
87 const item = new PlaylistMenuItem(this.player(), {
88 element: playlistElement,
89 onClicked: () => this.onItemClicked(playlistElement)
92 list.appendChild(item.el())
94 this.menuItems.push(item)
97 menu.appendChild(header)
98 menu.appendChild(list)
104 const options = this.getOptions()
106 this.updateSelected(options.getCurrentPosition())
110 this.player().addClass('playlist-menu-displayed')
114 this.player().removeClass('playlist-menu-displayed')
117 updateSelected (newPosition: number) {
118 for (const item of this.menuItems) {
119 item.setSelected(item.getElement().position === newPosition)
123 private getOptions () {
124 return this.options_ as PlaylistPluginOptions
127 private onItemClicked (element: VideoPlaylistElement) {
128 this.getOptions().onItemClicked(element)
132 Component.registerComponent('PlaylistMenu', PlaylistMenu)
134 export { PlaylistMenu }