aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-05 11:57:38 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-07 08:58:29 +0200
commit1a8c2d74d1022cfddc4a12881a4c167ff3eedb3d (patch)
tree77e8c8a1d5c893ca566c88e92f8d7b519200e6e9
parent56674bb9f81775ff85115e7daa7d9be0db95c001 (diff)
downloadPeerTube-1a8c2d74d1022cfddc4a12881a4c167ff3eedb3d.tar.gz
PeerTube-1a8c2d74d1022cfddc4a12881a4c167ff3eedb3d.tar.zst
PeerTube-1a8c2d74d1022cfddc4a12881a4c167ff3eedb3d.zip
Handle start at/stop at in playlist embed
-rw-r--r--client/src/assets/player/playlist/playlist-menu-item.ts23
-rw-r--r--client/src/sass/player/playlist.scss10
-rw-r--r--client/src/standalone/videos/embed.ts11
3 files changed, 37 insertions, 7 deletions
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 @@
1import videojs from 'video.js' 1import videojs from 'video.js'
2import { VideoPlaylistElement } from '@shared/models' 2import { VideoPlaylistElement } from '@shared/models'
3import { PlaylistItemOptions } from '../peertube-videojs-typings' 3import { PlaylistItemOptions } from '../peertube-videojs-typings'
4import { secondsToTime } from '../utils'
4 5
5const Component = videojs.getComponent('Component') 6const Component = videojs.getComponent('Component')
6 7
@@ -61,6 +62,8 @@ class PlaylistMenuItem extends Component {
61 } 62 }
62 63
63 private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) { 64 private buildAvailableVideo (li: HTMLElement, positionBlock: HTMLElement, options: PlaylistItemOptions) {
65 const videoElement = options.element
66
64 const player = super.createEl('div', { 67 const player = super.createEl('div', {
65 className: 'item-player' 68 className: 'item-player'
66 }) 69 })
@@ -68,7 +71,7 @@ class PlaylistMenuItem extends Component {
68 positionBlock.appendChild(player) 71 positionBlock.appendChild(player)
69 72
70 const thumbnail = super.createEl('img', { 73 const thumbnail = super.createEl('img', {
71 src: window.location.origin + options.element.video.thumbnailPath 74 src: window.location.origin + videoElement.video.thumbnailPath
72 }) 75 })
73 76
74 const infoBlock = super.createEl('div', { 77 const infoBlock = super.createEl('div', {
@@ -76,18 +79,32 @@ class PlaylistMenuItem extends Component {
76 }) 79 })
77 80
78 const title = super.createEl('div', { 81 const title = super.createEl('div', {
79 innerHTML: options.element.video.name, 82 innerHTML: videoElement.video.name,
80 className: 'title' 83 className: 'title'
81 }) 84 })
82 85
83 const channel = super.createEl('div', { 86 const channel = super.createEl('div', {
84 innerHTML: options.element.video.channel.displayName, 87 innerHTML: videoElement.video.channel.displayName,
85 className: 'channel' 88 className: 'channel'
86 }) 89 })
87 90
88 infoBlock.appendChild(title) 91 infoBlock.appendChild(title)
89 infoBlock.appendChild(channel) 92 infoBlock.appendChild(channel)
90 93
94 if (videoElement.startTimestamp || videoElement.stopTimestamp) {
95 let html = ''
96
97 if (videoElement.startTimestamp) html += secondsToTime(videoElement.startTimestamp)
98 if (videoElement.stopTimestamp) html += ' - ' + secondsToTime(videoElement.stopTimestamp)
99
100 const timestamps = super.createEl('div', {
101 innerHTML: html,
102 className: 'timestamps'
103 })
104
105 infoBlock.append(timestamps)
106 }
107
91 li.append(thumbnail) 108 li.append(thumbnail)
92 li.append(infoBlock) 109 li.append(infoBlock)
93 } 110 }
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;
165 @include ellipsis; 165 @include ellipsis;
166 166
167 font-size: 13px; 167 font-size: 13px;
168 margin-bottom: 5px; 168 margin-bottom: 3px;
169 } 169 }
170 170
171 .channel { 171 .channel,
172 .timestamps {
172 @include ellipsis; 173 @include ellipsis;
173 174
174 font-size: 11px; 175 font-size: 11px;
175 color: #bfbfbf; 176 color: #bfbfbf;
176 } 177 }
178
179 .timestamps {
180 font-size: 10px;
181 margin-top: 3px;
182 }
177 } 183 }
178} 184}
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 {
441 controls: this.controls, 441 controls: this.controls,
442 muted: this.muted, 442 muted: this.muted,
443 loop: this.loop, 443 loop: this.loop,
444
444 captions: videoCaptions.length !== 0, 445 captions: videoCaptions.length !== 0,
445 startTime: this.startTime,
446 stopTime: this.stopTime,
447 subtitle: this.subtitle, 446 subtitle: this.subtitle,
448 447
448 startTime: this.playlist ? this.currentPlaylistElement.startTimestamp : this.startTime,
449 stopTime: this.playlist ? this.currentPlaylistElement.stopTimestamp : this.stopTime,
450
449 nextVideo: this.playlist ? () => this.playNextVideo() : undefined, 451 nextVideo: this.playlist ? () => this.playNextVideo() : undefined,
450 hasNextVideo: this.playlist ? () => !!this.getNextPlaylistElement() : undefined, 452 hasNextVideo: this.playlist ? () => !!this.getNextPlaylistElement() : undefined,
451 453
@@ -506,7 +508,12 @@ export class PeerTubeEmbed {
506 508
507 if (this.isPlaylistEmbed()) { 509 if (this.isPlaylistEmbed()) {
508 await this.buildPlaylistManager() 510 await this.buildPlaylistManager()
511
509 this.player.playlist().updateSelected() 512 this.player.playlist().updateSelected()
513
514 this.player.on('stopped', () => {
515 this.playNextVideo()
516 })
510 } 517 }
511 } 518 }
512 519