diff --git a/client/src/assets/player/playlist/playlist-menu-item.ts b/client/src/assets/player/playlist/playlist-menu-item.ts index 21a7f8046..87a72b6a3 100644 --- a/client/src/assets/player/playlist/playlist-menu-item.ts +++ b/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) } diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss index 544d45a48..d88baadeb 100644 --- a/client/src/sass/player/playlist.scss +++ b/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; + } } } diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index 786d749a4..f12b8c9ac 100644 --- a/client/src/standalone/videos/embed.ts +++ b/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() + }) } }