]>
Commit | Line | Data |
---|---|---|
4572c3d0 C |
1 | import videojs from 'video.js' |
2 | import { PlaylistPluginOptions } from '../peertube-videojs-typings' | |
3 | import { PlaylistMenu } from './playlist-menu' | |
4 | ||
5 | const ClickableComponent = videojs.getComponent('ClickableComponent') | |
6 | ||
7 | class PlaylistButton extends ClickableComponent { | |
8 | private playlistInfoElement: HTMLElement | |
9 | private wrapper: HTMLElement | |
10 | ||
11 | constructor (player: videojs.Player, options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu }) { | |
12 | super(player, options as any) | |
13 | } | |
14 | ||
15 | createEl () { | |
16 | this.wrapper = super.createEl('div', { | |
17 | className: 'vjs-playlist-button', | |
18 | innerHTML: '', | |
19 | tabIndex: -1 | |
20 | }) as HTMLElement | |
21 | ||
22 | const icon = super.createEl('div', { | |
23 | className: 'vjs-playlist-icon', | |
24 | innerHTML: '', | |
25 | tabIndex: -1 | |
26 | }) | |
27 | ||
28 | this.playlistInfoElement = super.createEl('div', { | |
29 | className: 'vjs-playlist-info', | |
30 | innerHTML: '', | |
31 | tabIndex: -1 | |
32 | }) as HTMLElement | |
33 | ||
34 | this.wrapper.appendChild(icon) | |
35 | this.wrapper.appendChild(this.playlistInfoElement) | |
36 | ||
37 | this.update() | |
38 | ||
39 | return this.wrapper | |
40 | } | |
41 | ||
42 | update () { | |
43 | const options = this.options_ as PlaylistPluginOptions | |
44 | ||
45 | this.playlistInfoElement.innerHTML = options.getCurrentPosition() + '/' + options.playlist.videosLength | |
46 | this.wrapper.title = this.player().localize('Playlist: {1}', [ options.playlist.displayName ]) | |
47 | } | |
48 | ||
49 | handleClick () { | |
50 | const playlistMenu = this.getPlaylistMenu() | |
51 | playlistMenu.open() | |
52 | } | |
53 | ||
54 | private getPlaylistMenu () { | |
55 | return (this.options_ as any).playlistMenu as PlaylistMenu | |
56 | } | |
57 | } | |
58 | ||
59 | videojs.registerComponent('PlaylistButton', PlaylistButton) | |
60 | ||
61 | export { PlaylistButton } |