From db581cf7b99eb60d2e6d9bee5c020ef22b0a1a41 Mon Sep 17 00:00:00 2001
From: Florian CUNY <poslovitch@bentobox.world>
Date: Tue, 26 Oct 2021 17:15:12 +0200
Subject: [PATCH] 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
---
 .../recommendations/recommended-videos.component.html       | 3 ++-
 .../recommendations/recommended-videos.component.scss       | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

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;
 }