Add total viewers overall stat

2 files changed, 10 insertions, 1 deletions

diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
index e4c2d899f..5733b3286 100644
--- a/client/src/app/+stats/video/video-stats.component.scss
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -23,6 +23,11 @@
 
   .cards {
     display: flex;
+    flex-wrap: wrap;
+  }
+
+  .date-filter-wrapper {
+    margin-bottom: 10px;
   }
 }
 
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index 51738f8dc..4ce14902d 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -223,7 +223,7 @@ export class VideoStatsComponent implements OnInit {
   private buildLiveFilter (session: LiveVideoSession) {
     return {
       id: session.startDate + '|' + session.endDate,
-      label: $localize`Of live of ${new Date(session.startDate).toLocaleString()}`
+      label: $localize`Live as of ${new Date(session.startDate).toLocaleString()}`
     }
   }
 
@@ -276,6 +276,10 @@ export class VideoStatsComponent implements OnInit {
         moreInfo: overallStats.viewersPeak !== 0
           ? $localize`at ${new Date(overallStats.viewersPeakDate).toLocaleString()}`
           : undefined
+      },
+      {
+        label: $localize`Unique viewers`,
+        value: this.numberFormatter.transform(overallStats.totalViewers)
       }
     ]