Handle start at/stop at in playlist embed

client/src/assets/player/playlist/playlist-menu-item.ts

@@ -1,6 +1,7 @@
 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')
 
@@ -61,6 +62,8 @@ class PlaylistMenuItem extends Component {
   }
 
   private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
+    const videoElement = options.element
+
     const player = super.createEl('div', {
       className: 'item-player'
     })
@@ -68,7 +71,7 @@ class PlaylistMenuItem extends Component {
     positionBlock.appendChild(player)
 
     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', {
@@ -76,18 +79,32 @@ 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)
   }

client/src/sass/player/playlist.scss

@@ -165,14 +165,20 @@ $playlist-menu-width: 350px;
       @include ellipsis;
 
       font-size: 13px;
-      margin-bottom: 5px;
+      margin-bottom: 3px;
     }
 
-    .channel {
+    .channel,
+    .timestamps {
       @include ellipsis;
 
       font-size: 11px;
       color: #bfbfbf;
     }
+
+    .timestamps {
+      font-size: 10px;
+      margin-top: 3px;
+    }
   }
 }

client/src/standalone/videos/embed.ts

@@ -441,11 +441,13 @@ export class PeerTubeEmbed {
         controls: this.controls,
         muted: this.muted,
         loop: this.loop,
+
         captions: videoCaptions.length !== 0,
-        startTime: this.startTime,
-        stopTime: this.stopTime,
         subtitle: this.subtitle,
 
+        startTime: this.playlist ? this.currentPlaylistElement.startTimestamp : this.startTime,
+        stopTime: this.playlist ? this.currentPlaylistElement.stopTimestamp : this.stopTime,
+
         nextVideo: this.playlist ? () => this.playNextVideo() : undefined,
         hasNextVideo: this.playlist ? () => !!this.getNextPlaylistElement() : undefined,
 
@@ -506,7 +508,12 @@ export class PeerTubeEmbed {
 
     if (this.isPlaylistEmbed()) {
       await this.buildPlaylistManager()
+
       this.player.playlist().updateSelected()
+
+      this.player.on('stopped', () => {
+        this.playNextVideo()
+      })
     }
   }