import videojs from 'video.js' import { VideoPlaylistElement } from '@shared/models' import { PlaylistPluginOptions } from '../../types' 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 }