Merge branch 'release/3.3.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / playlist / playlist-menu-item.ts

diff --git a/client/src/assets/player/playlist/playlist-menu-item.ts b/client/src/assets/player/playlist/playlist-menu-item.ts
index 916c6338f4efd7b323bd1ba741542bda9ae4eb3b..2519a34c780fd841c10ce6b018cc40ed1eebbc2f 100644 (file)
--- a/client/src/assets/player/playlist/playlist-menu-item.ts
+++ b/client/src/assets/player/playlist/playlist-menu-item.ts
@@ -1,4 +1,5 @@
 import videojs from 'video.js'
+import { secondsToTime } from '@shared/core-utils'
 import { VideoPlaylistElement } from '@shared/models'
 import { PlaylistItemOptions } from '../peertube-videojs-typings'
 
@@ -26,26 +27,51 @@ class PlaylistMenuItem extends 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', {
@@ -53,31 +79,43 @@ class PlaylistMenuItem extends Component {
     })
 
     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) {