1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
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)
this.player().on('userinactive', () => {
this.close()
})
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 leftSubtitle = super.createEl('div', {
innerHTML: this.player().localize('By {1}', [ options.playlist.videoChannel.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 }
|
