diff options
author | Chocobozzz <me@florianbigard.com> | 2020-08-05 09:44:58 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-07 08:58:29 +0200 |
commit | 4572c3d0d92f5b1b79b34dbe2c7b6557a8a5b7e4 (patch) | |
tree | 2c1aa81a536b50d6da0181aba6fce1db972f6191 /client/src/assets/player/playlist/playlist-menu.ts | |
parent | 5abc96fca2496f33075796db208fccc3543e0f65 (diff) | |
download | PeerTube-4572c3d0d92f5b1b79b34dbe2c7b6557a8a5b7e4.tar.gz PeerTube-4572c3d0d92f5b1b79b34dbe2c7b6557a8a5b7e4.tar.zst PeerTube-4572c3d0d92f5b1b79b34dbe2c7b6557a8a5b7e4.zip |
Handle basic playlist in embed
Diffstat (limited to 'client/src/assets/player/playlist/playlist-menu.ts')
-rw-r--r-- | client/src/assets/player/playlist/playlist-menu.ts | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/client/src/assets/player/playlist/playlist-menu.ts b/client/src/assets/player/playlist/playlist-menu.ts new file mode 100644 index 000000000..7d7d9e12f --- /dev/null +++ b/client/src/assets/player/playlist/playlist-menu.ts | |||
@@ -0,0 +1,124 @@ | |||
1 | import videojs from 'video.js' | ||
2 | import { VideoPlaylistElement } from '@shared/models' | ||
3 | import { PlaylistPluginOptions } from '../peertube-videojs-typings' | ||
4 | import { PlaylistMenuItem } from './playlist-menu-item' | ||
5 | |||
6 | const Component = videojs.getComponent('Component') | ||
7 | |||
8 | class PlaylistMenu extends Component { | ||
9 | private menuItems: PlaylistMenuItem[] | ||
10 | |||
11 | constructor (player: videojs.Player, options?: PlaylistPluginOptions) { | ||
12 | super(player, options as any) | ||
13 | |||
14 | this.player().on('userinactive', () => { | ||
15 | this.close() | ||
16 | }) | ||
17 | |||
18 | this.player().on('click', event => { | ||
19 | let current = event.target as HTMLElement | ||
20 | |||
21 | do { | ||
22 | if ( | ||
23 | current.classList.contains('vjs-playlist-menu') || | ||
24 | current.classList.contains('vjs-playlist-button') | ||
25 | ) { | ||
26 | return | ||
27 | } | ||
28 | |||
29 | current = current.parentElement | ||
30 | } while (current) | ||
31 | |||
32 | this.close() | ||
33 | }) | ||
34 | } | ||
35 | |||
36 | createEl () { | ||
37 | this.menuItems = [] | ||
38 | |||
39 | const options = this.getOptions() | ||
40 | |||
41 | const menu = super.createEl('div', { | ||
42 | className: 'vjs-playlist-menu', | ||
43 | innerHTML: '', | ||
44 | tabIndex: -1 | ||
45 | }) | ||
46 | |||
47 | const header = super.createEl('div', { | ||
48 | className: 'header' | ||
49 | }) | ||
50 | |||
51 | const headerLeft = super.createEl('div') | ||
52 | |||
53 | const leftTitle = super.createEl('div', { | ||
54 | innerHTML: options.playlist.displayName, | ||
55 | className: 'title' | ||
56 | }) | ||
57 | |||
58 | const leftSubtitle = super.createEl('div', { | ||
59 | innerHTML: this.player().localize('By {1}', [ options.playlist.videoChannel.displayName ]), | ||
60 | className: 'channel' | ||
61 | }) | ||
62 | |||
63 | headerLeft.appendChild(leftTitle) | ||
64 | headerLeft.appendChild(leftSubtitle) | ||
65 | |||
66 | const tick = super.createEl('div', { | ||
67 | className: 'cross' | ||
68 | }) | ||
69 | tick.addEventListener('click', () => this.close()) | ||
70 | |||
71 | header.appendChild(headerLeft) | ||
72 | header.appendChild(tick) | ||
73 | |||
74 | const list = super.createEl('ol') | ||
75 | |||
76 | for (const playlistElement of options.elements) { | ||
77 | const item = new PlaylistMenuItem(this.player(), { | ||
78 | element: playlistElement, | ||
79 | onClicked: () => this.onItemClicked(playlistElement) | ||
80 | }) | ||
81 | |||
82 | list.appendChild(item.el()) | ||
83 | |||
84 | this.menuItems.push(item) | ||
85 | } | ||
86 | |||
87 | menu.appendChild(header) | ||
88 | menu.appendChild(list) | ||
89 | |||
90 | return menu | ||
91 | } | ||
92 | |||
93 | update () { | ||
94 | const options = this.getOptions() | ||
95 | |||
96 | this.updateSelected(options.getCurrentPosition()) | ||
97 | } | ||
98 | |||
99 | open () { | ||
100 | this.player().addClass('playlist-menu-displayed') | ||
101 | } | ||
102 | |||
103 | close () { | ||
104 | this.player().removeClass('playlist-menu-displayed') | ||
105 | } | ||
106 | |||
107 | updateSelected (newPosition: number) { | ||
108 | for (const item of this.menuItems) { | ||
109 | item.setSelected(item.getElement().position === newPosition) | ||
110 | } | ||
111 | } | ||
112 | |||
113 | private getOptions () { | ||
114 | return this.options_ as PlaylistPluginOptions | ||
115 | } | ||
116 | |||
117 | private onItemClicked (element: VideoPlaylistElement) { | ||
118 | this.getOptions().onItemClicked(element) | ||
119 | } | ||
120 | } | ||
121 | |||
122 | Component.registerComponent('PlaylistMenu', PlaylistMenu) | ||
123 | |||
124 | export { PlaylistMenu } | ||