import videojs from 'video.js'
import { VideoPlaylistElement } from '@shared/models'
import { PlaylistItemOptions } from '../peertube-videojs-typings'
+import { secondsToTime } from '../utils'
const Component = videojs.getComponent('Component')
innerHTML: ''
}) as HTMLElement
+ if (!options.element.video) {
+ li.classList.add('vjs-disabled')
+ }
+
const positionBlock = super.createEl('div', {
className: 'item-position-block'
- })
+ }) as HTMLElement
const position = super.createEl('div', {
className: 'item-position',
innerHTML: options.element.position
})
+ positionBlock.appendChild(position)
+ li.appendChild(positionBlock)
+
+ if (options.element.video) {
+ this.buildAvailableVideo(li, positionBlock, options)
+ } else {
+ this.buildUnavailableVideo(li)
+ }
+
+ return li
+ }
+
+ setSelected (selected: boolean) {
+ if (selected) this.addClass('vjs-selected')
+ else this.removeClass('vjs-selected')
+ }
+
+ getElement () {
+ return this.element
+ }
+
+ private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
+ const videoElement = options.element
+
const player = super.createEl('div', {
className: 'item-player'
})
- positionBlock.appendChild(position)
positionBlock.appendChild(player)
- li.appendChild(positionBlock)
-
const thumbnail = super.createEl('img', {
- src: window.location.origin + options.element.video.thumbnailPath
+ src: window.location.origin + videoElement.video.thumbnailPath
})
const infoBlock = super.createEl('div', {
})
const title = super.createEl('div', {
- innerHTML: options.element.video.name,
+ innerHTML: videoElement.video.name,
className: 'title'
})
const channel = super.createEl('div', {
- innerHTML: options.element.video.channel.displayName,
+ innerHTML: videoElement.video.channel.displayName,
className: 'channel'
})
infoBlock.appendChild(title)
infoBlock.appendChild(channel)
+ if (videoElement.startTimestamp || videoElement.stopTimestamp) {
+ let html = ''
+
+ if (videoElement.startTimestamp) html += secondsToTime(videoElement.startTimestamp)
+ if (videoElement.stopTimestamp) html += ' - ' + secondsToTime(videoElement.stopTimestamp)
+
+ const timestamps = super.createEl('div', {
+ innerHTML: html,
+ className: 'timestamps'
+ })
+
+ infoBlock.append(timestamps)
+ }
+
li.append(thumbnail)
li.append(infoBlock)
-
- return li
}
- setSelected (selected: boolean) {
- if (selected) this.addClass('vjs-selected')
- else this.removeClass('vjs-selected')
- }
+ private buildUnavailableVideo (li: HTMLElement) {
+ const block = super.createEl('div', {
+ className: 'item-unavailable',
+ innerHTML: this.player().localize('Unavailable video')
+ })
- getElement () {
- return this.element
+ li.appendChild(block)
}
private handleKeyDown (event: KeyboardEvent) {