Added label on the next autoplayed video and hide the hr line if unne…

…cessary (#4497) * Added label on the next autoplayed video Implements #4280 Also hid the hr line if autoplay is disabled * Applied code suggestion * Applied code suggestion * Applied the last remaining code suggestion
Chocobozzz · Oct 26, 2021 · db581cf · db581cf
1 parent 754b6f5
commit db581cf
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 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
@@ -13,14 +13,15 @@ <h2 i18n class="title-page title-page-single">
     </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()"
         actorImageSize="32"
       >
       </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
@@ -37,6 +37,12 @@
   }
 }
 
+.title-page-next-video-label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: $font-semibold;
+}
+
 hr {
   margin-top: 0;
 }