1 import videojs from 'video.js'
2 import { VideoPlaylistElement } from '@shared/models'
3 import { PlaylistPluginOptions } from '../../types'
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 playlistChannel = options.playlist.videoChannel
69 const leftSubtitle = super.createEl('div', {
70 innerHTML: playlistChannel
71 ? this.player().localize('By {1}', [ playlistChannel.displayName ])
76 headerLeft.appendChild(leftTitle)
77 headerLeft.appendChild(leftSubtitle)
79 const tick = super.createEl('div', {
82 tick.addEventListener('click', () => this.close())
84 header.appendChild(headerLeft)
85 header.appendChild(tick)
87 const list = super.createEl('ol')
89 for (const playlistElement of options.elements) {
90 const item = new PlaylistMenuItem(this.player(), {
91 element: playlistElement,
92 onClicked: () => this.onItemClicked(playlistElement)
95 list.appendChild(item.el())
97 this.menuItems.push(item)
100 menu.appendChild(header)
101 menu.appendChild(list)
107 const options = this.getOptions()
109 this.updateSelected(options.getCurrentPosition())
113 this.player().addClass('playlist-menu-displayed')
117 this.player().removeClass('playlist-menu-displayed')
120 updateSelected (newPosition: number) {
121 for (const item of this.menuItems) {
122 item.setSelected(item.getElement().position === newPosition)
126 private getOptions () {
127 return this.options_ as PlaylistPluginOptions
130 private onItemClicked (element: VideoPlaylistElement) {
131 this.getOptions().onItemClicked(element)
135 Component.registerComponent('PlaylistMenu', PlaylistMenu)
137 export { PlaylistMenu }