import videojs from 'video.js'
import { VideoPlaylistElement } from '@shared/models'
import { PlaylistPluginOptions } from '../peertube-videojs-typings'
import { PlaylistMenuItem } from './playlist-menu-item'
const Component = videojs.getComponent('Component')
class PlaylistMenu extends Component {
private menuItems: PlaylistMenuItem[]
constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
super(player, options as any)
const self = this
function userInactiveHandler () {
self.close()
}
this.el().addEventListener('mouseenter', () => {
this.player().off('userinactive', userInactiveHandler)
})
this.el().addEventListener('mouseleave', () => {
this.player().one('userinactive', userInactiveHandler)
})
this.player().on('click', event => {
let current = event.target as HTMLElement
do {
if (
current.classList.contains('vjs-playlist-menu') ||
current.classList.contains('vjs-playlist-button')
) {
return
}
current = current.parentElement
} while (current)
this.close()
})
}
createEl () {
this.menuItems = []
const options = this.getOptions()
const menu = super.createEl('div', {
className: 'vjs-playlist-menu',
innerHTML: '',
tabIndex: -1
})
const header = super.createEl('div', {
className: 'header'
})
const headerLeft = super.createEl('div')
const leftTitle = super.createEl('div', {
innerHTML: options.playlist.displayName,
className: 'title'
})
const playlistChannel = options.playlist.videoChannel
const leftSubtitle = super.createEl('div', {
innerHTML: playlistChannel
? this.player().localize('By {1}', [ playlistChannel.displayName ])
: '',
className: 'channel'
})
headerLeft.appendChild(leftTitle)
headerLeft.appendChild(leftSubtitle)
const tick = super.createEl('div', {
className: 'cross'
})
tick.addEventListener('click', () => this.close())
header.appendChild(headerLeft)
header.appendChild(tick)
const list = super.createEl('ol')
for (const playlistElement of options.elements) {
const item = new PlaylistMenuItem(this.player(), {
element: playlistElement,
onClicked: () => this.onItemClicked(playlistElement)
})
list.appendChild(item.el())
this.menuItems.push(item)
}
menu.appendChild(header)
menu.appendChild(list)
return menu
}
update () {
const options = this.getOptions()
this.updateSelected(options.getCurrentPosition())
}
open () {
this.player().addClass('playlist-menu-displayed')
}
close () {
this.player().removeClass('playlist-menu-displayed')
}
updateSelected (newPosition: number) {
for (const item of this.menuItems) {
item.setSelected(item.getElement().position === newPosition)
}
}
private getOptions () {
return this.options_ as PlaylistPluginOptions
}
private onItemClicked (element: VideoPlaylistElement) {
this.getOptions().onItemClicked(element)
}
}
Component.registerComponent('PlaylistMenu', PlaylistMenu)
export { PlaylistMenu }