]>
Commit | Line | Data |
---|---|---|
4572c3d0 C |
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 | ||
56674bb9 C |
29 | if (!options.element.video) { |
30 | li.classList.add('vjs-disabled') | |
31 | } | |
32 | ||
4572c3d0 C |
33 | const positionBlock = super.createEl('div', { |
34 | className: 'item-position-block' | |
56674bb9 | 35 | }) as HTMLElement |
4572c3d0 C |
36 | |
37 | const position = super.createEl('div', { | |
38 | className: 'item-position', | |
39 | innerHTML: options.element.position | |
40 | }) | |
41 | ||
56674bb9 C |
42 | positionBlock.appendChild(position) |
43 | li.appendChild(positionBlock) | |
44 | ||
45 | if (options.element.video) { | |
46 | this.buildAvailableVideo(li, positionBlock, options) | |
47 | } else { | |
48 | this.buildUnavailableVideo(li) | |
49 | } | |
50 | ||
51 | return li | |
52 | } | |
53 | ||
54 | setSelected (selected: boolean) { | |
55 | if (selected) this.addClass('vjs-selected') | |
56 | else this.removeClass('vjs-selected') | |
57 | } | |
58 | ||
59 | getElement () { | |
60 | return this.element | |
61 | } | |
62 | ||
63 | private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) { | |
4572c3d0 C |
64 | const player = super.createEl('div', { |
65 | className: 'item-player' | |
66 | }) | |
67 | ||
4572c3d0 C |
68 | positionBlock.appendChild(player) |
69 | ||
4572c3d0 C |
70 | const thumbnail = super.createEl('img', { |
71 | src: window.location.origin + options.element.video.thumbnailPath | |
72 | }) | |
73 | ||
74 | const infoBlock = super.createEl('div', { | |
75 | className: 'info-block' | |
76 | }) | |
77 | ||
78 | const title = super.createEl('div', { | |
79 | innerHTML: options.element.video.name, | |
80 | className: 'title' | |
81 | }) | |
82 | ||
83 | const channel = super.createEl('div', { | |
84 | innerHTML: options.element.video.channel.displayName, | |
85 | className: 'channel' | |
86 | }) | |
87 | ||
88 | infoBlock.appendChild(title) | |
89 | infoBlock.appendChild(channel) | |
90 | ||
91 | li.append(thumbnail) | |
92 | li.append(infoBlock) | |
4572c3d0 C |
93 | } |
94 | ||
56674bb9 C |
95 | private buildUnavailableVideo (li: HTMLElement) { |
96 | const block = super.createEl('div', { | |
97 | className: 'item-unavailable', | |
98 | innerHTML: this.player().localize('Unavailable video') | |
99 | }) | |
4572c3d0 | 100 | |
56674bb9 | 101 | li.appendChild(block) |
4572c3d0 C |
102 | } |
103 | ||
104 | private handleKeyDown (event: KeyboardEvent) { | |
105 | if (event.code === 'Space' || event.code === 'Enter') { | |
106 | this.switchPlaylistItem() | |
107 | } | |
108 | } | |
109 | ||
110 | private switchPlaylistItem () { | |
111 | const options = this.options_ as PlaylistItemOptions | |
112 | ||
113 | options.onClicked() | |
114 | } | |
115 | } | |
116 | ||
117 | Component.registerComponent('PlaylistMenuItem', PlaylistMenuItem) | |
118 | ||
119 | export { PlaylistMenuItem } |