diff options
Diffstat (limited to 'client/src/assets/player/shared/playlist/playlist-menu-item.ts')
-rw-r--r-- | client/src/assets/player/shared/playlist/playlist-menu-item.ts | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/client/src/assets/player/shared/playlist/playlist-menu-item.ts b/client/src/assets/player/shared/playlist/playlist-menu-item.ts new file mode 100644 index 000000000..81b5acf30 --- /dev/null +++ b/client/src/assets/player/shared/playlist/playlist-menu-item.ts | |||
@@ -0,0 +1,136 @@ | |||
1 | import videojs from 'video.js' | ||
2 | import { secondsToTime } from '@shared/core-utils' | ||
3 | import { VideoPlaylistElement } from '@shared/models' | ||
4 | import { PlaylistItemOptions } from '../../types' | ||
5 | |||
6 | const Component = videojs.getComponent('Component') | ||
7 | |||
8 | class PlaylistMenuItem extends Component { | ||
9 | private element: VideoPlaylistElement | ||
10 | |||
11 | constructor (player: videojs.Player, options?: PlaylistItemOptions) { | ||
12 | super(player, options as any) | ||
13 | |||
14 | this.emitTapEvents() | ||
15 | |||
16 | this.element = options.element | ||
17 | |||
18 | this.on([ 'click', 'tap' ], () => this.switchPlaylistItem()) | ||
19 | this.on('keydown', event => this.handleKeyDown(event)) | ||
20 | } | ||
21 | |||
22 | createEl () { | ||
23 | const options = this.options_ as PlaylistItemOptions | ||
24 | |||
25 | const li = super.createEl('li', { | ||
26 | className: 'vjs-playlist-menu-item', | ||
27 | innerHTML: '' | ||
28 | }) as HTMLElement | ||
29 | |||
30 | if (!options.element.video) { | ||
31 | li.classList.add('vjs-disabled') | ||
32 | } | ||
33 | |||
34 | const positionBlock = super.createEl('div', { | ||
35 | className: 'item-position-block' | ||
36 | }) as HTMLElement | ||
37 | |||
38 | const position = super.createEl('div', { | ||
39 | className: 'item-position', | ||
40 | innerHTML: options.element.position | ||
41 | }) | ||
42 | |||
43 | positionBlock.appendChild(position) | ||
44 | li.appendChild(positionBlock) | ||
45 | |||
46 | if (options.element.video) { | ||
47 | this.buildAvailableVideo(li, positionBlock, options) | ||
48 | } else { | ||
49 | this.buildUnavailableVideo(li) | ||
50 | } | ||
51 | |||
52 | return li | ||
53 | } | ||
54 | |||
55 | setSelected (selected: boolean) { | ||
56 | if (selected) this.addClass('vjs-selected') | ||
57 | else this.removeClass('vjs-selected') | ||
58 | } | ||
59 | |||
60 | getElement () { | ||
61 | return this.element | ||
62 | } | ||
63 | |||
64 | private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) { | ||
65 | const videoElement = options.element | ||
66 | |||
67 | const player = super.createEl('div', { | ||
68 | className: 'item-player' | ||
69 | }) | ||
70 | |||
71 | positionBlock.appendChild(player) | ||
72 | |||
73 | const thumbnail = super.createEl('img', { | ||
74 | src: window.location.origin + videoElement.video.thumbnailPath | ||
75 | }) | ||
76 | |||
77 | const infoBlock = super.createEl('div', { | ||
78 | className: 'info-block' | ||
79 | }) | ||
80 | |||
81 | const title = super.createEl('div', { | ||
82 | innerHTML: videoElement.video.name, | ||
83 | className: 'title' | ||
84 | }) | ||
85 | |||
86 | const channel = super.createEl('div', { | ||
87 | innerHTML: videoElement.video.channel.displayName, | ||
88 | className: 'channel' | ||
89 | }) | ||
90 | |||
91 | infoBlock.appendChild(title) | ||
92 | infoBlock.appendChild(channel) | ||
93 | |||
94 | if (videoElement.startTimestamp || videoElement.stopTimestamp) { | ||
95 | let html = '' | ||
96 | |||
97 | if (videoElement.startTimestamp) html += secondsToTime(videoElement.startTimestamp) | ||
98 | if (videoElement.stopTimestamp) html += ' - ' + secondsToTime(videoElement.stopTimestamp) | ||
99 | |||
100 | const timestamps = super.createEl('div', { | ||
101 | innerHTML: html, | ||
102 | className: 'timestamps' | ||
103 | }) | ||
104 | |||
105 | infoBlock.append(timestamps) | ||
106 | } | ||
107 | |||
108 | li.append(thumbnail) | ||
109 | li.append(infoBlock) | ||
110 | } | ||
111 | |||
112 | private buildUnavailableVideo (li: HTMLElement) { | ||
113 | const block = super.createEl('div', { | ||
114 | className: 'item-unavailable', | ||
115 | innerHTML: this.player().localize('Unavailable video') | ||
116 | }) | ||
117 | |||
118 | li.appendChild(block) | ||
119 | } | ||
120 | |||
121 | private handleKeyDown (event: KeyboardEvent) { | ||
122 | if (event.code === 'Space' || event.code === 'Enter') { | ||
123 | this.switchPlaylistItem() | ||
124 | } | ||
125 | } | ||
126 | |||
127 | private switchPlaylistItem () { | ||
128 | const options = this.options_ as PlaylistItemOptions | ||
129 | |||
130 | options.onClicked() | ||
131 | } | ||
132 | } | ||
133 | |||
134 | Component.registerComponent('PlaylistMenuItem', PlaylistMenuItem) | ||
135 | |||
136 | export { PlaylistMenuItem } | ||