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-item.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-item.ts')
-rw-r--r-- | client/src/assets/player/playlist/playlist-menu-item.ts | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/client/src/assets/player/playlist/playlist-menu-item.ts b/client/src/assets/player/playlist/playlist-menu-item.ts new file mode 100644 index 000000000..916c6338f --- /dev/null +++ b/client/src/assets/player/playlist/playlist-menu-item.ts | |||
@@ -0,0 +1,98 @@ | |||
1 | import videojs from 'video.js' | ||
2 | import { VideoPlaylistElement } from '@shared/models' | ||
3 | import { PlaylistItemOptions } from '../peertube-videojs-typings' | ||
4 | |||
5 | const Component = videojs.getComponent('Component') | ||
6 | |||
7 | class PlaylistMenuItem extends Component { | ||
8 | private element: VideoPlaylistElement | ||
9 | |||
10 | constructor (player: videojs.Player, options?: PlaylistItemOptions) { | ||
11 | super(player, options as any) | ||
12 | |||
13 | this.emitTapEvents() | ||
14 | |||
15 | this.element = options.element | ||
16 | |||
17 | this.on([ 'click', 'tap' ], () => this.switchPlaylistItem()) | ||
18 | this.on('keydown', event => this.handleKeyDown(event)) | ||
19 | } | ||
20 | |||
21 | createEl () { | ||
22 | const options = this.options_ as PlaylistItemOptions | ||
23 | |||
24 | const li = super.createEl('li', { | ||
25 | className: 'vjs-playlist-menu-item', | ||
26 | innerHTML: '' | ||
27 | }) as HTMLElement | ||
28 | |||
29 | const positionBlock = super.createEl('div', { | ||
30 | className: 'item-position-block' | ||
31 | }) | ||
32 | |||
33 | const position = super.createEl('div', { | ||
34 | className: 'item-position', | ||
35 | innerHTML: options.element.position | ||
36 | }) | ||
37 | |||
38 | const player = super.createEl('div', { | ||
39 | className: 'item-player' | ||
40 | }) | ||
41 | |||
42 | positionBlock.appendChild(position) | ||
43 | positionBlock.appendChild(player) | ||
44 | |||
45 | li.appendChild(positionBlock) | ||
46 | |||
47 | const thumbnail = super.createEl('img', { | ||
48 | src: window.location.origin + options.element.video.thumbnailPath | ||
49 | }) | ||
50 | |||
51 | const infoBlock = super.createEl('div', { | ||
52 | className: 'info-block' | ||
53 | }) | ||
54 | |||
55 | const title = super.createEl('div', { | ||
56 | innerHTML: options.element.video.name, | ||
57 | className: 'title' | ||
58 | }) | ||
59 | |||
60 | const channel = super.createEl('div', { | ||
61 | innerHTML: options.element.video.channel.displayName, | ||
62 | className: 'channel' | ||
63 | }) | ||
64 | |||
65 | infoBlock.appendChild(title) | ||
66 | infoBlock.appendChild(channel) | ||
67 | |||
68 | li.append(thumbnail) | ||
69 | li.append(infoBlock) | ||
70 | |||
71 | return li | ||
72 | } | ||
73 | |||
74 | setSelected (selected: boolean) { | ||
75 | if (selected) this.addClass('vjs-selected') | ||
76 | else this.removeClass('vjs-selected') | ||
77 | } | ||
78 | |||
79 | getElement () { | ||
80 | return this.element | ||
81 | } | ||
82 | |||
83 | private handleKeyDown (event: KeyboardEvent) { | ||
84 | if (event.code === 'Space' || event.code === 'Enter') { | ||
85 | this.switchPlaylistItem() | ||
86 | } | ||
87 | } | ||
88 | |||
89 | private switchPlaylistItem () { | ||
90 | const options = this.options_ as PlaylistItemOptions | ||
91 | |||
92 | options.onClicked() | ||
93 | } | ||
94 | } | ||
95 | |||
96 | Component.registerComponent('PlaylistMenuItem', PlaylistMenuItem) | ||
97 | |||
98 | export { PlaylistMenuItem } | ||