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 @@
     </div>
   </div>
 
-  <div *ngFor="let playlistVideo of playlistVideos">
+  <div *ngFor="let playlistElement of playlistElements">
     <my-video-playlist-element-miniature
-      [video]="playlistVideo" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
-      [playing]="currentPlaylistPosition === playlistVideo.playlistElement.position" [accountLink]="false" [position]="playlistVideo.playlistElement.position"
+      [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
+      [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
     ></my-video-playlist-element-miniature>
   </div>
 </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 @@
       my-video-thumbnail {
         @include thumbnail-size-component(90px, 50px);
       }
+
+      .fake-thumbnail {
+        width: 90px;
+        height: 50px;
+      }
     }
   }
 }
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 @@
 import { Component, Input } from '@angular/core'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
 import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Video } from '@app/shared/video/video.model'
 import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
-import { VideoService } from '@app/shared/video/video.service'
 import { Router } from '@angular/router'
 import { AuthService } from '@app/core'
+import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
+import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 
 @Component({
   selector: 'my-video-watch-playlist',
@@ -16,7 +16,7 @@ export class VideoWatchPlaylistComponent {
   @Input() video: VideoDetails
   @Input() playlist: VideoPlaylist
 
-  playlistVideos: Video[] = []
+  playlistElements: VideoPlaylistElement[] = []
   playlistPagination: ComponentPagination = {
     currentPage: 1,
     itemsPerPage: 30,
@@ -28,7 +28,7 @@ export class VideoWatchPlaylistComponent {
 
   constructor (
     private auth: AuthService,
-    private videoService: VideoService,
+    private videoPlaylist: VideoPlaylistService,
     private router: Router
   ) {}
 
@@ -40,8 +40,8 @@ export class VideoWatchPlaylistComponent {
     this.loadPlaylistElements(this.playlist,false)
   }
 
-  onElementRemoved (video: Video) {
-    this.playlistVideos = this.playlistVideos.filter(v => v.id !== video.id)
+  onElementRemoved (playlistElement: VideoPlaylistElement) {
+    this.playlistElements = this.playlistElements.filter(e => e.id !== playlistElement.id)
 
     this.playlistPagination.totalItems--
   }
@@ -65,12 +65,13 @@ export class VideoWatchPlaylistComponent {
   }
 
   loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
-    this.videoService.getPlaylistVideos(playlist.uuid, this.playlistPagination)
+    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
         .subscribe(({ total, data }) => {
-          this.playlistVideos = this.playlistVideos.concat(data)
+          this.playlistElements = this.playlistElements.concat(data)
           this.playlistPagination.totalItems = total
 
-          if (total === 0) {
+          const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
+          if (!firstAvailableVideos) {
             this.noPlaylistVideos = true
             return
           }
@@ -79,7 +80,7 @@ export class VideoWatchPlaylistComponent {
 
           if (redirectToFirst) {
             const extras = {
-              queryParams: { videoId: this.playlistVideos[ 0 ].uuid },
+              queryParams: { videoId: firstAvailableVideos.video.uuid },
               replaceUrl: true
             }
             this.router.navigate([], extras)
@@ -88,11 +89,11 @@ export class VideoWatchPlaylistComponent {
   }
 
   updatePlaylistIndex (video: VideoDetails) {
-    if (this.playlistVideos.length === 0 || !video) return
+    if (this.playlistElements.length === 0 || !video) return
 
-    for (const playlistVideo of this.playlistVideos) {
-      if (playlistVideo.id === video.id) {
-        this.currentPlaylistPosition = playlistVideo.playlistElement.position
+    for (const playlistElement of this.playlistElements) {
+      if (playlistElement.video && playlistElement.video.id === video.id) {
+        this.currentPlaylistPosition = playlistElement.position
         return
       }
     }
@@ -103,11 +104,17 @@ export class VideoWatchPlaylistComponent {
 
   navigateToNextPlaylistVideo () {
     if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
-      const next = this.playlistVideos.find(v => v.playlistElement.position === this.currentPlaylistPosition + 1)
+      const next = this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
 
-      const start = next.playlistElement.startTimestamp
-      const stop = next.playlistElement.stopTimestamp
-      this.router.navigate([],{ queryParams: { videoId: next.uuid, start, stop } })
+      if (!next || !next.video) {
+        this.currentPlaylistPosition++
+        this.navigateToNextPlaylistVideo()
+        return
+      }
+
+      const start = next.startTimestamp
+      const stop = next.stopTimestamp
+      this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
     }
   }
 }
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 {
     }
 
     this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize(mode, options)
+      this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player)
 
       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))