diff options
Diffstat (limited to 'client/src/assets/player/playlist/playlist-button.ts')
-rw-r--r-- | client/src/assets/player/playlist/playlist-button.ts | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/client/src/assets/player/playlist/playlist-button.ts b/client/src/assets/player/playlist/playlist-button.ts new file mode 100644 index 000000000..a7996ec60 --- /dev/null +++ b/client/src/assets/player/playlist/playlist-button.ts | |||
@@ -0,0 +1,61 @@ | |||
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 } | ||