Add total viewers overall stat

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

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)
       }
     ]
 

server/models/view/local-video-viewer.ts

@@ -125,6 +125,7 @@ export class LocalVideoViewerModel extends Model<Partial<AttributesOnly<LocalVid
     }
 
     const watchTimeQuery = `SELECT ` +
+      `COUNT("localVideoViewer"."id") AS "totalViewers", ` +
       `SUM("localVideoViewer"."watchTime") AS "totalWatchTime", ` +
       `AVG("localVideoViewer"."watchTime") AS "averageWatchTime" ` +
       `FROM "localVideoViewer" ` +
@@ -177,6 +178,10 @@ export class LocalVideoViewerModel extends Model<Partial<AttributesOnly<LocalVid
         ? Math.round(rowsWatchTime[0].averageWatchTime) || 0
         : 0,
 
+      totalViewers: rowsWatchTime.length !== 0
+        ? Math.round(rowsWatchTime[0].totalViewers) || 0
+        : 0,
+
       viewersPeak,
       viewersPeakDate: rowsWatchPeak.length !== 0 && viewersPeak !== 0
         ? rowsWatchPeak[0].dateBreakpoint || null

server/tests/api/views/video-views-overall-stats.ts

@@ -36,6 +36,7 @@ describe('Test views overall stats', function () {
         expect(video.views).to.equal(0)
         expect(stats.averageWatchTime).to.equal(0)
         expect(stats.totalWatchTime).to.equal(0)
+        expect(stats.totalViewers).to.equal(0)
       }
     })
 
@@ -55,6 +56,7 @@ describe('Test views overall stats', function () {
         expect(video.views).to.equal(0)
         expect(stats.averageWatchTime).to.equal(1)
         expect(stats.totalWatchTime).to.equal(1)
+        expect(stats.totalViewers).to.equal(1)
       }
     })
 
@@ -74,6 +76,7 @@ describe('Test views overall stats', function () {
           expect(video.views).to.equal(1)
           expect(stats.averageWatchTime).to.equal(2)
           expect(stats.totalWatchTime).to.equal(4)
+          expect(stats.totalViewers).to.equal(2)
         }
 
         {
@@ -83,6 +86,7 @@ describe('Test views overall stats', function () {
           expect(video.views).to.equal(1)
           expect(stats.averageWatchTime).to.equal(21)
           expect(stats.totalWatchTime).to.equal(41)
+          expect(stats.totalViewers).to.equal(2)
         }
       }
     })
@@ -103,6 +107,7 @@ describe('Test views overall stats', function () {
         expect(video.views).to.equal(1)
         expect(stats.averageWatchTime).to.equal(2)
         expect(stats.totalWatchTime).to.equal(6)
+        expect(stats.totalViewers).to.equal(3)
       }
 
       {
@@ -112,6 +117,7 @@ describe('Test views overall stats', function () {
         expect(video.views).to.equal(1)
         expect(stats.averageWatchTime).to.equal(14)
         expect(stats.totalWatchTime).to.equal(43)
+        expect(stats.totalViewers).to.equal(3)
       }
     })
 
@@ -129,6 +135,7 @@ describe('Test views overall stats', function () {
         expect(video.views).to.equal(2)
         expect(stats.averageWatchTime).to.equal(3)
         expect(stats.totalWatchTime).to.equal(11)
+        expect(stats.totalViewers).to.equal(4)
       }
 
       {
@@ -138,6 +145,7 @@ describe('Test views overall stats', function () {
         expect(video.views).to.equal(2)
         expect(stats.averageWatchTime).to.equal(22)
         expect(stats.totalWatchTime).to.equal(88)
+        expect(stats.totalViewers).to.equal(4)
       }
     })
 
@@ -153,12 +161,14 @@ describe('Test views overall stats', function () {
         const stats = await servers[0].videoStats.getOverallStats({ videoId: vodVideoId, startDate: beforeView.toISOString() })
         expect(stats.averageWatchTime).to.equal(3)
         expect(stats.totalWatchTime).to.equal(3)
+        expect(stats.totalViewers).to.equal(1)
       }
 
       {
         const stats = await servers[0].videoStats.getOverallStats({ videoId: liveVideoId, endDate: beforeView.toISOString() })
         expect(stats.averageWatchTime).to.equal(22)
         expect(stats.totalWatchTime).to.equal(88)
+        expect(stats.totalViewers).to.equal(4)
       }
     })
 

shared/models/videos/stats/video-stats-overall.model.ts

@@ -2,6 +2,8 @@ export interface VideoStatsOverall {
   averageWatchTime: number
   totalWatchTime: number
 
+  totalViewers: number
+
   viewersPeak: number
   viewersPeakDate: string