1 import videojs from 'video.js'
2 import { secondsToTime } from '@shared/core-utils'
3 import { VideoPlaylistElement } from '@shared/models'
4 import { PlaylistItemOptions } from '../peertube-videojs-typings'
6 const Component = videojs.getComponent('Component')
8 class PlaylistMenuItem extends Component {
9 private element: VideoPlaylistElement
11 constructor (player: videojs.Player, options?: PlaylistItemOptions) {
12 super(player, options as any)
16 this.element = options.element
18 this.on([ 'click', 'tap' ], () => this.switchPlaylistItem())
19 this.on('keydown', event => this.handleKeyDown(event))
23 const options = this.options_ as PlaylistItemOptions
25 const li = super.createEl('li', {
26 className: 'vjs-playlist-menu-item',
30 if (!options.element.video) {
31 li.classList.add('vjs-disabled')
34 const positionBlock = super.createEl('div', {
35 className: 'item-position-block'
38 const position = super.createEl('div', {
39 className: 'item-position',
40 innerHTML: options.element.position
43 positionBlock.appendChild(position)
44 li.appendChild(positionBlock)
46 if (options.element.video) {
47 this.buildAvailableVideo(li, positionBlock, options)
49 this.buildUnavailableVideo(li)
55 setSelected (selected: boolean) {
56 if (selected) this.addClass('vjs-selected')
57 else this.removeClass('vjs-selected')
64 private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
65 const videoElement = options.element
67 const player = super.createEl('div', {
68 className: 'item-player'
71 positionBlock.appendChild(player)
73 const thumbnail = super.createEl('img', {
74 src: window.location.origin + videoElement.video.thumbnailPath
77 const infoBlock = super.createEl('div', {
78 className: 'info-block'
81 const title = super.createEl('div', {
82 innerHTML: videoElement.video.name,
86 const channel = super.createEl('div', {
87 innerHTML: videoElement.video.channel.displayName,
91 infoBlock.appendChild(title)
92 infoBlock.appendChild(channel)
94 if (videoElement.startTimestamp || videoElement.stopTimestamp) {
97 if (videoElement.startTimestamp) html += secondsToTime(videoElement.startTimestamp)
98 if (videoElement.stopTimestamp) html += ' - ' + secondsToTime(videoElement.stopTimestamp)
100 const timestamps = super.createEl('div', {
102 className: 'timestamps'
105 infoBlock.append(timestamps)
112 private buildUnavailableVideo (li: HTMLElement) {
113 const block = super.createEl('div', {
114 className: 'item-unavailable',
115 innerHTML: this.player().localize('Unavailable video')
118 li.appendChild(block)
121 private handleKeyDown (event: KeyboardEvent) {
122 if (event.code === 'Space' || event.code === 'Enter') {
123 this.switchPlaylistItem()
127 private switchPlaylistItem () {
128 const options = this.options_ as PlaylistItemOptions
134 Component.registerComponent('PlaylistMenuItem', PlaylistMenuItem)
136 export { PlaylistMenuItem }