4 files changed, 31 insertions, 8 deletions

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 daee4be2a..9e469f0b0 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -34,7 +34,7 @@
     </div>
 
     <div i18n class="col-md-12 alert alert-info" *ngIf="isLiveEnded()">
-      This live is finished.
+      This live has ended.
     </div>
 
     <div class="col-md-12 alert alert-danger" *ngIf="video?.blacklisted">
@@ -51,8 +51,14 @@
           <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
             <h1 class="video-info-name">{{ video.name }}</h1>
 
-            <div i18n class="video-info-date-views">
-              Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
+            <div class="video-info-date-views">
+              <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
+
+              <span i18n class="views">
+                • {{ video.views | myNumberFormatter }}
+                <ng-container *ngIf="!video.isLive">views</ng-container>
+                <ng-container *ngIf="video.isLive">viewers</ng-container>
+              </span>
             </div>
           </div>
 
@@ -62,8 +68,14 @@
             </div>
 
             <div class="video-info-first-row-bottom">
-              <div i18n class="d-none d-md-block video-info-date-views">
-                Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> • {{ video.views | myNumberFormatter }} views</span>
+              <div class="d-none d-md-block video-info-date-views">
+                <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
+
+                <span i18n class="views">
+                  • {{ video.views | myNumberFormatter }}
+                  <ng-container *ngIf="!video.isLive">views</ng-container>
+                  <ng-container *ngIf="video.isLive">viewers</ng-container>
+                </span>
               </div>
 
               <div class="video-actions-rates">
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
index be07844ab..4fea0cc1c 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -27,7 +27,10 @@
   <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
 
   <div class="video-thumbnail-duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
-  <div i18n class="video-thumbnail-live-overlay" *ngIf="video.isLive">LIVE</div>
+  <div  class="video-thumbnail-live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }" *ngIf="video.isLive">
+    <ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
+    <ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
+  </div>
 
   <div class="play-overlay">
     <div class="icon"></div>
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
index 1b6151c89..4f53ffaf6 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -51,9 +51,12 @@
   }
 
   .video-thumbnail-live-overlay {
-    background-color: rgba(224, 8, 8, 0.7);
-    color: #fff;
     font-weight: $font-semibold;
+    color: #fff;
+
+    &:not(.live-ended) {
+      background-color: rgba(224, 8, 8, 0.7);
+    }
   }
 
   .video-thumbnail-actions-overlay {
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
index b2a2cf240..67a9b0028 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { ScreenService } from '@app/core'
+import { VideoState } from '@shared/models'
 import { Video } from '../shared-main'
 
 @Component({
@@ -29,6 +30,10 @@ export class VideoThumbnailComponent {
     this.addedToWatchLaterText = $localize`Remove from watch later`
   }
 
+  isLiveEnded () {
+    return this.video.state.id === VideoState.LIVE_ENDED
+  }
+
   getImageUrl () {
     if (!this.video) return ''