Handle playlist without videos available

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 c6ffb1abdd23efbceab720ae7a6431359153531a..be726c9906369db75b40d0c0cd5bef6c85ba353a 100644 (file)
--- 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 79b56705ff746323c0c3769f24e651956ec24256..ba79fabc80ed13e3c701462db83e5e5b93c5a650 100644 (file)
--- 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 da81d76d1385d03b53985903b4ab59019e4e85ee..f5dd352a3a3a58bf5b5e6dae8298ece5448900fb 100644 (file)
--- 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 879d296a71a6eda10e3847e0edf2980c8e41d594..ec85db0ffd340ecc625ce6bcbe26f2f5a906225a 100644 (file)
--- 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 4c15ae3d750007a9a5695047f11250a93c463eb1..1ea0cf6b856bbc3b03f1f5a458bc9e8618a0b0d9 100644 (file)
--- 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 5fa31ec63bb51d2f05159ee860cea05415352e27..d05f08a5f6b29f5e94b5a2937c4daf2fb17d2f0c 100644 (file)
--- 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 => {