Handle playlist without videos available

4 files changed, 10 insertions, 2 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
index c6ffb1abd..be726c990 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
@@ -34,6 +34,10 @@
   This live has ended.
 </div>
 
+<div i18n class="alert alert-warning" *ngIf="noPlaylistVideoFound">
+  There are no videos available in this playlist.
+</div>
+
 <div class="alert alert-danger" *ngIf="video?.blacklisted">
   <div class="blocked-label" i18n>This video is blocked.</div>
   {{ video.blacklistedReason }}
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
index 79b56705f..ba79fabc8 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
@@ -9,6 +9,7 @@ import { VideoState } from '@shared/models'
 })
 export class VideoAlertComponent {
   @Input() video: VideoDetails
+  @Input() noPlaylistVideoFound: boolean
 
   isVideoToTranscode () {
     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
index da81d76d1..f5dd352a3 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
@@ -1,5 +1,5 @@
 <div
-  *ngIf="playlist && currentPlaylistPosition" class="playlist"
+  *ngIf="playlist && (currentPlaylistPosition || noPlaylistVideos)" class="playlist"
   myInfiniteScroller [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()"
 >
   <div class="playlist-info">
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index 879d296a7..ec85db0ff 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -18,6 +18,7 @@ export class VideoWatchPlaylistComponent {
   @Input() playlist: VideoPlaylist
 
   @Output() videoFound = new EventEmitter<string>()
+  @Output() noVideoFound = new EventEmitter<void>()
 
   playlistElements: VideoPlaylistElement[] = []
   playlistPagination: ComponentPagination = {
@@ -28,10 +29,11 @@ export class VideoWatchPlaylistComponent {
 
   autoPlayNextVideoPlaylist: boolean
   autoPlayNextVideoPlaylistSwitchText = ''
+
   loopPlaylist: boolean
   loopPlaylistSwitchText = ''
-  noPlaylistVideos = false
 
+  noPlaylistVideos = false
   currentPlaylistPosition: number
 
   constructor (
@@ -100,6 +102,7 @@ export class VideoWatchPlaylistComponent {
       const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
       if (!firstAvailableVideo) {
         this.noPlaylistVideos = true
+        this.noVideoFound.emit()
         return
       }