aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.html6
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.scss5
-rw-r--r--client/src/app/videos/+video-watch/video-watch-playlist.component.ts43
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts2
4 files changed, 34 insertions, 22 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.html b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
index c168a3130..c89936bd1 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.html
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.html
@@ -16,10 +16,10 @@
16 </div> 16 </div>
17 </div> 17 </div>
18 18
19 <div *ngFor="let playlistVideo of playlistVideos"> 19 <div *ngFor="let playlistElement of playlistElements">
20 <my-video-playlist-element-miniature 20 <my-video-playlist-element-miniature
21 [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)" 21 [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
22 [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position" 22 [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
23 ></my-video-playlist-element-miniature> 23 ></my-video-playlist-element-miniature>
24 </div> 24 </div>
25</div> 25</div>
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
index eeb763bd9..4c24d6b05 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
@@ -53,6 +53,11 @@
53 my-video-thumbnail { 53 my-video-thumbnail {
54 @include thumbnail-size-component(90px, 50px); 54 @include thumbnail-size-component(90px, 50px);
55 } 55 }
56
57 .fake-thumbnail {
58 width: 90px;
59 height: 50px;
60 }
56 } 61 }
57 } 62 }
58} 63}
diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
index 2fb0cb0e5..6e8d58cd8 100644
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.ts
@@ -1,11 +1,11 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input } from '@angular/core'
2import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model' 2import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
3import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 3import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
4import { Video } from '@app/shared/video/video.model'
5import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models' 4import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
6import { VideoService } from '@app/shared/video/video.service'
7import { Router } from '@angular/router' 5import { Router } from '@angular/router'
8import { AuthService } from '@app/core' 6import { AuthService } from '@app/core'
7import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
8import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
9 9
10@Component({ 10@Component({
11 selector: 'my-video-watch-playlist', 11 selector: 'my-video-watch-playlist',
@@ -16,7 +16,7 @@ export class VideoWatchPlaylistComponent {
16 @Input() video: VideoDetails 16 @Input() video: VideoDetails
17 @Input() playlist: VideoPlaylist 17 @Input() playlist: VideoPlaylist
18 18
19 playlistVideos: Video[] = [] 19 playlistElements: VideoPlaylistElement[] = []
20 playlistPagination: ComponentPagination = { 20 playlistPagination: ComponentPagination = {
21 currentPage: 1, 21 currentPage: 1,
22 itemsPerPage: 30, 22 itemsPerPage: 30,
@@ -28,7 +28,7 @@ export class VideoWatchPlaylistComponent {
28 28
29 constructor ( 29 constructor (
30 private auth: AuthService, 30 private auth: AuthService,
31 private videoService: VideoService, 31 private videoPlaylist: VideoPlaylistService,
32 private router: Router 32 private router: Router
33 ) {} 33 ) {}
34 34
@@ -40,8 +40,8 @@ export class VideoWatchPlaylistComponent {
40 this.loadPlaylistElements(this.playlist,false) 40 this.loadPlaylistElements(this.playlist,false)
41 } 41 }
42 42
43 onElementRemoved (video: Video) { 43 onElementRemoved (playlistElement: VideoPlaylistElement) {
44 this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id) 44 this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
45 45
46 this.playlistPagination.totalItems-- 46 this.playlistPagination.totalItems--
47 } 47 }
@@ -65,12 +65,13 @@ export class VideoWatchPlaylistComponent {
65 } 65 }
66 66
67 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) { 67 loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
68 this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination) 68 this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
69 .subscribe(({ total, data }) => { 69 .subscribe(({ total, data }) => {
70 this.playlistVideos = this.playlistVideos.concat(data) 70 this.playlistElements = this.playlistElements.concat(data)
71 this.playlistPagination.totalItems = total 71 this.playlistPagination.totalItems = total
72 72
73 if (total === 0) { 73 const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
74 if (!firstAvailableVideos) {
74 this.noPlaylistVideos = true 75 this.noPlaylistVideos = true
75 return 76 return
76 } 77 }
@@ -79,7 +80,7 @@ export class VideoWatchPlaylistComponent {
79 80
80 if (redirectToFirst) { 81 if (redirectToFirst) {
81 const extras = { 82 const extras = {
82 queryParams: { videoId: this.playlistVideos[ 0 ].uuid }, 83 queryParams: { videoId: firstAvailableVideos.video.uuid },
83 replaceUrl: true 84 replaceUrl: true
84 } 85 }
85 this.router.navigate([], extras) 86 this.router.navigate([], extras)
@@ -88,11 +89,11 @@ export class VideoWatchPlaylistComponent {
88 } 89 }
89 90
90 updatePlaylistIndex (video: VideoDetails) { 91 updatePlaylistIndex (video: VideoDetails) {
91 if (this.playlistVideos.length === 0 || !video) return 92 if (this.playlistElements.length === 0 || !video) return
92 93
93 for (const playlistVideo of this.playlistVideos) { 94 for (const playlistElement of this.playlistElements) {
94 if (playlistVideo.id === video.id) { 95 if (playlistElement.video && playlistElement.video.id === video.id) {
95 this.currentPlaylistPosition = playlistVideo.playlistElement.position 96 this.currentPlaylistPosition = playlistElement.position
96 return 97 return
97 } 98 }
98 } 99 }
@@ -103,11 +104,17 @@ export class VideoWatchPlaylistComponent {
103 104
104 navigateToNextPlaylistVideo () { 105 navigateToNextPlaylistVideo () {
105 if (this.currentPlaylistPosition < this.playlistPagination.totalItems) { 106 if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
106 const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1) 107 const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
107 108
108 const start = next.playlistElement.startTimestamp 109 if (!next || !next.video) {
109 const stop = next.playlistElement.stopTimestamp 110 this.currentPlaylistPosition++
110 this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } }) 111 this.navigateToNextPlaylistVideo()
112 return
113 }
114
115 const start = next.startTimestamp
116 const stop = next.stopTimestamp
117 this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
111 } 118 }
112 } 119 }
113} 120}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 0d499d47f..d7c7b7497 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -464,7 +464,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
464 } 464 }
465 465
466 this.zone.runOutsideAngular(async () => { 466 this.zone.runOutsideAngular(async () => {
467 this.player = await PeertubePlayerManager.initialize(mode, options) 467 this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player)
468 468
469 this.player.on('customError', ({ err }: { err: any }) => this.handleError(err)) 469 this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
470 470