Added label on the next autoplayed video and hide the hr line if unnecessary (#4497)

* Added label on the next autoplayed video

Implements https://github.com/Chocobozzz/PeerTube/issues/4280

Also hid the hr line if autoplay is disabled

* Applied code suggestion

* Applied code suggestion

* Applied the last remaining code suggestion

2 files changed, 8 insertions, 1 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
index bbfcab2ae..e493ad8d7 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.html
@@ -13,6 +13,7 @@
     </div>
 
     <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
+      <span i18n *ngIf="!playlist && i === 0 && length !== 0 && autoPlayNextVideo" class="title-page-next-video-label">Next video to be played</span>
       <my-video-miniature
         [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
         (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"
@@ -20,7 +21,7 @@
       >
       </my-video-miniature>
 
-      <hr *ngIf="!playlist && i === 0 && length > 1" />
+      <hr *ngIf="!playlist && i === 0 && length > 1 && autoPlayNextVideo" />
     </ng-container>
   </ng-container>
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
index 84ed25ae8..784d0e961 100644
--- a/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss
@@ -37,6 +37,12 @@
   }
 }
 
+.title-page-next-video-label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: $font-semibold;
+}
+
 hr {
   margin-top: 0;
 }