Handle playlist without videos available

6 files changed, 22 insertions, 4 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
       }
 
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 4c15ae3d7..1ea0cf6b8 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -11,12 +11,15 @@
       <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
     </div>
 
-    <my-video-watch-playlist #videoWatchPlaylist [playlist]="playlist" (videoFound)="onPlaylistVideoFound($event)"></my-video-watch-playlist>
+    <my-video-watch-playlist
+      #videoWatchPlaylist [playlist]="playlist"
+      (noVideoFound)="onPlaylistNoVideoFound()" (videoFound)="onPlaylistVideoFound($event)"
+    ></my-video-watch-playlist>
 
     <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
   </div>
 
-  <my-video-alert [video]="video"></my-video-alert>
+  <my-video-alert [video]="video" [noPlaylistVideoFound]="noPlaylistVideoFound"></my-video-alert>
 
   <!-- Video information -->
   <div *ngIf="video" class="margin-content video-bottom">
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 5fa31ec63..d05f08a5f 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -72,6 +72,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   playlist: VideoPlaylist = null
 
   remoteServerDown = false
+  noPlaylistVideoFound = false
 
   private nextVideoUUID = ''
   private nextVideoTitle = ''
@@ -178,6 +179,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.loadVideo(videoId)
   }
 
+  onPlaylistNoVideoFound () {
+    this.noPlaylistVideoFound = true
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }
@@ -286,6 +291,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private loadPlaylist (playlistId: string) {
     if (this.isSameElement(this.playlist, playlistId)) return
 
+    this.noPlaylistVideoFound = false
+
     this.playlistService.getVideoPlaylist(playlistId)
       .subscribe({
         next: playlist => {