Support videos stats in client

8 files changed, 476 insertions, 0 deletions

diff --git a/client/src/app/+stats/index.ts b/client/src/app/+stats/index.ts
new file mode 100644
index 000000000..d880024a5
--- /dev/null
+++ b/client/src/app/+stats/index.ts
@@ -0,0 +1 @@
+export * from './stats.module'
diff --git a/client/src/app/+stats/stats-routing.module.ts b/client/src/app/+stats/stats-routing.module.ts
new file mode 100644
index 000000000..59519a703
--- /dev/null
+++ b/client/src/app/+stats/stats-routing.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { VideoResolver } from '@app/shared/shared-main'
+import { VideoStatsComponent } from './video'
+
+const statsRoutes: Routes = [
+  {
+    path: 'videos/:videoId',
+    component: VideoStatsComponent,
+    data: {
+      meta: {
+        title: $localize`Video stats`
+      }
+    },
+    resolve: {
+      video: VideoResolver
+    }
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(statsRoutes) ],
+  exports: [ RouterModule ]
+})
+export class StatsRoutingModule {}
diff --git a/client/src/app/+stats/stats.module.ts b/client/src/app/+stats/stats.module.ts
new file mode 100644
index 000000000..0497576e7
--- /dev/null
+++ b/client/src/app/+stats/stats.module.ts
@@ -0,0 +1,27 @@
+import { ChartModule } from 'primeng/chart'
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '@app/shared/shared-icons'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { StatsRoutingModule } from './stats-routing.module'
+import { VideoStatsComponent, VideoStatsService } from './video'
+
+@NgModule({
+  imports: [
+    StatsRoutingModule,
+
+    SharedMainModule,
+    SharedGlobalIconModule,
+
+    ChartModule
+  ],
+
+  declarations: [
+    VideoStatsComponent
+  ],
+
+  exports: [],
+  providers: [
+    VideoStatsService
+  ]
+})
+export class StatsModule { }
diff --git a/client/src/app/+stats/video/index.ts b/client/src/app/+stats/video/index.ts
new file mode 100644
index 000000000..e948d4f4e
--- /dev/null
+++ b/client/src/app/+stats/video/index.ts
@@ -0,0 +1,2 @@
+export * from './video-stats.component'
+export * from './video-stats.service'
diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html
new file mode 100644
index 000000000..ef43c9fba
--- /dev/null
+++ b/client/src/app/+stats/video/video-stats.component.html
@@ -0,0 +1,38 @@
+<div class="margin-content">
+  <h1 class="title-page title-page-single" i18n>Stats for {{ video.name }}</h1>
+
+  <div class="overall-stats-embed">
+    <div class="overall-stats">
+      <div *ngFor="let card of overallStatCards" class="card overall-stats-card">
+        <div class="label">{{ card.label }}</div>
+        <div class="value">{{ card.value }}</div>
+        <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div>
+      </div>
+    </div>
+
+    <my-embed [video]="video"></my-embed>
+  </div>
+
+  <div class="timeserie">
+    <div ngbNav #nav="ngbNav" [activeId]="activeGraphId" (activeIdChange)="onChartChange($event)" class="nav-tabs">
+
+      <ng-container *ngFor="let availableChart of availableCharts" [ngbNavItem]="availableChart.id">
+        <a ngbNavLink i18n>
+          <span>{{ availableChart.label }}</span>
+        </a>
+
+        <ng-template ngbNavContent>
+          <div [ngStyle]="{ 'min-height': chartHeight }">
+            <p-chart
+              *ngIf="chartOptions[availableChart.id]"
+              [height]="chartHeight" [width]="chartWidth"
+              [type]="chartOptions[availableChart.id].type" [options]="chartOptions[availableChart.id].options" [data]="chartOptions[availableChart.id].data"
+            ></p-chart>
+          </div>
+        </ng-template>
+      </ng-container>
+    </div>
+
+    <div [ngbNavOutlet]="nav"></div>
+  </div>
+</div>
diff --git a/client/src/app/+stats/video/video-stats.component.scss b/client/src/app/+stats/video/video-stats.component.scss
new file mode 100644
index 000000000..190499b5c
--- /dev/null
+++ b/client/src/app/+stats/video/video-stats.component.scss
@@ -0,0 +1,54 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_nav' as *;
+
+.overall-stats-embed {
+  display: flex;
+  justify-content: space-between;
+}
+
+.overall-stats {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.overall-stats-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: fit-content;
+  min-height: 100px;
+  min-width: 200px;
+  margin-right: 15px;
+  background-color: pvar(--submenuBackgroundColor);
+
+  .label,
+  .more-info {
+    font-size: 14px;
+  }
+
+  .label {
+    color: pvar(--greyForegroundColor);
+    font-weight: $font-semibold;
+    opacity: 0.8;
+  }
+
+  .value {
+    font-size: 24px;
+    font-weight: $font-semibold;
+  }
+}
+
+my-embed {
+  display: block;
+  max-width: 500px;
+  width: 100%;
+}
+
+.tab-content {
+  margin-top: 15px;
+}
+
+.nav-tabs {
+  @include peertube-nav-tabs($border-width: 2px);
+}
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
new file mode 100644
index 000000000..05319539b
--- /dev/null
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -0,0 +1,295 @@
+import { ChartConfiguration, ChartData } from 'chart.js'
+import { Observable, of } from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { Notifier } from '@app/core'
+import { NumberFormatterPipe, VideoDetails } from '@app/shared/shared-main'
+import { secondsToTime } from '@shared/core-utils'
+import { VideoStatsOverall, VideoStatsRetention, VideoStatsTimeserie, VideoStatsTimeserieMetric } from '@shared/models/videos'
+import { VideoStatsService } from './video-stats.service'
+
+type ActiveGraphId = VideoStatsTimeserieMetric | 'retention' | 'countries'
+
+type CountryData = { name: string, viewers: number }[]
+
+type ChartIngestData = VideoStatsTimeserie | VideoStatsRetention | CountryData
+type ChartBuilderResult = {
+  type: 'line' | 'bar'
+  data: ChartData<'line' | 'bar'>
+  displayLegend: boolean
+}
+
+@Component({
+  templateUrl: './video-stats.component.html',
+  styleUrls: [ './video-stats.component.scss' ],
+  providers: [ NumberFormatterPipe ]
+})
+export class VideoStatsComponent implements OnInit {
+  overallStatCards: { label: string, value: string | number, moreInfo?: string }[] = []
+
+  chartOptions: { [ id in ActiveGraphId ]?: ChartConfiguration<'line' | 'bar'> } = {}
+  chartHeight = '300px'
+  chartWidth: string = null
+
+  availableCharts = [
+    {
+      id: 'viewers',
+      label: $localize`Viewers`
+    },
+    {
+      id: 'aggregateWatchTime',
+      label: $localize`Watch time`
+    },
+    {
+      id: 'retention',
+      label: $localize`Retention`
+    },
+    {
+      id: 'countries',
+      label: $localize`Countries`
+    }
+  ]
+
+  activeGraphId: ActiveGraphId = 'viewers'
+
+  video: VideoDetails
+
+  countries: CountryData = []
+
+  constructor (
+    private route: ActivatedRoute,
+    private notifier: Notifier,
+    private statsService: VideoStatsService,
+    private numberFormatter: NumberFormatterPipe
+  ) {}
+
+  ngOnInit () {
+    this.video = this.route.snapshot.data.video
+
+    this.loadOverallStats()
+    this.loadChart()
+  }
+
+  hasCountries () {
+    return this.countries.length !== 0
+  }
+
+  onChartChange (newActive: ActiveGraphId) {
+    this.activeGraphId = newActive
+
+    this.loadChart()
+  }
+
+  private loadOverallStats () {
+    this.statsService.getOverallStats(this.video.uuid)
+      .subscribe({
+        next: res => {
+          this.countries = res.countries.slice(0, 10).map(c => ({
+            name: this.countryCodeToName(c.isoCode),
+            viewers: c.viewers
+          }))
+
+          this.buildOverallStatCard(res)
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
+  private buildOverallStatCard (overallStats: VideoStatsOverall) {
+    this.overallStatCards = [
+      {
+        label: $localize`Views`,
+        value: this.numberFormatter.transform(overallStats.views)
+      },
+      {
+        label: $localize`Comments`,
+        value: this.numberFormatter.transform(overallStats.comments)
+      },
+      {
+        label: $localize`Likes`,
+        value: this.numberFormatter.transform(overallStats.likes)
+      },
+      {
+        label: $localize`Average watch time`,
+        value: secondsToTime(overallStats.averageWatchTime)
+      },
+      {
+        label: $localize`Peak viewers`,
+        value: this.numberFormatter.transform(overallStats.viewersPeak),
+        moreInfo: $localize`at ${new Date(overallStats.viewersPeakDate).toLocaleString()}`
+      }
+    ]
+  }
+
+  private loadChart () {
+    const obsBuilders: { [ id in ActiveGraphId ]: Observable<ChartIngestData> } = {
+      retention: this.statsService.getRetentionStats(this.video.uuid),
+      aggregateWatchTime: this.statsService.getTimeserieStats(this.video.uuid, 'aggregateWatchTime'),
+      viewers: this.statsService.getTimeserieStats(this.video.uuid, 'viewers'),
+      countries: of(this.countries)
+    }
+
+    obsBuilders[this.activeGraphId].subscribe({
+      next: res => {
+        this.chartOptions[this.activeGraphId] = this.buildChartOptions(this.activeGraphId, res)
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private buildChartOptions (
+    graphId: ActiveGraphId,
+    rawData: ChartIngestData
+  ): ChartConfiguration<'line' | 'bar'> {
+    const dataBuilders: {
+      [ id in ActiveGraphId ]: (rawData: ChartIngestData) => ChartBuilderResult
+    } = {
+      retention: (rawData: VideoStatsRetention) => this.buildRetentionChartOptions(rawData),
+      aggregateWatchTime: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
+      viewers: (rawData: VideoStatsTimeserie) => this.buildTimeserieChartOptions(rawData),
+      countries: (rawData: CountryData) => this.buildCountryChartOptions(rawData)
+    }
+
+    const { type, data, displayLegend } = dataBuilders[graphId](rawData)
+
+    return {
+      type,
+      data,
+
+      options: {
+        responsive: true,
+
+        scales: {
+          y: {
+            beginAtZero: true,
+
+            max: this.activeGraphId === 'retention'
+              ? 100
+              : undefined,
+
+            ticks: {
+              callback: value => this.formatTick(graphId, value)
+            }
+          }
+        },
+
+        plugins: {
+          legend: {
+            display: displayLegend
+          },
+          tooltip: {
+            callbacks: {
+              label: value => this.formatTick(graphId, value.raw as number | string)
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private buildRetentionChartOptions (rawData: VideoStatsRetention) {
+    const labels: string[] = []
+    const data: number[] = []
+
+    for (const d of rawData.data) {
+      labels.push(secondsToTime(d.second))
+      data.push(d.retentionPercent)
+    }
+
+    return {
+      type: 'line' as 'line',
+
+      displayLegend: false,
+
+      data: {
+        labels,
+        datasets: [
+          {
+            data,
+            borderColor: this.buildChartColor()
+          }
+        ]
+      }
+    }
+  }
+
+  private buildTimeserieChartOptions (rawData: VideoStatsTimeserie) {
+    const labels: string[] = []
+    const data: number[] = []
+
+    for (const d of rawData.data) {
+      labels.push(new Date(d.date).toLocaleDateString())
+      data.push(d.value)
+    }
+
+    return {
+      type: 'line' as 'line',
+
+      displayLegend: false,
+
+      data: {
+        labels,
+        datasets: [
+          {
+            data,
+            borderColor: this.buildChartColor()
+          }
+        ]
+      }
+    }
+  }
+
+  private buildCountryChartOptions (rawData: CountryData) {
+    const labels: string[] = []
+    const data: number[] = []
+
+    for (const d of rawData) {
+      labels.push(d.name)
+      data.push(d.viewers)
+    }
+
+    return {
+      type: 'bar' as 'bar',
+
+      displayLegend: true,
+
+      options: {
+        indexAxis: 'y'
+      },
+
+      data: {
+        labels,
+        datasets: [
+          {
+            label: $localize`Viewers`,
+            backgroundColor: this.buildChartColor(),
+            maxBarThickness: 20,
+            data
+          }
+        ]
+      }
+    }
+  }
+
+  private buildChartColor () {
+    return getComputedStyle(document.body).getPropertyValue('--mainColorLighter')
+  }
+
+  private formatTick (graphId: ActiveGraphId, value: number | string) {
+    if (graphId === 'retention') return value + ' %'
+    if (graphId === 'aggregateWatchTime') return secondsToTime(+value)
+
+    return value.toLocaleString()
+  }
+
+  private countryCodeToName (code: string) {
+    const intl: any = Intl
+    if (!intl.DisplayNames) return code
+
+    const regionNames = new intl.DisplayNames([], { type: 'region' })
+
+    return regionNames.of(code)
+  }
+}
diff --git a/client/src/app/+stats/video/video-stats.service.ts b/client/src/app/+stats/video/video-stats.service.ts
new file mode 100644
index 000000000..8f9d48f60
--- /dev/null
+++ b/client/src/app/+stats/video/video-stats.service.ts
@@ -0,0 +1,34 @@
+import { catchError } from 'rxjs'
+import { environment } from 'src/environments/environment'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { VideoService } from '@app/shared/shared-main'
+import { VideoStatsOverall, VideoStatsRetention, VideoStatsTimeserie, VideoStatsTimeserieMetric } from '@shared/models/videos'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VideoStatsService {
+  static BASE_VIDEO_STATS_URL = environment.apiUrl + '/api/v1/videos/'
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) { }
+
+  getOverallStats (videoId: string) {
+    return this.authHttp.get<VideoStatsOverall>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/overall')
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  getTimeserieStats (videoId: string, metric: VideoStatsTimeserieMetric) {
+    return this.authHttp.get<VideoStatsTimeserie>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/timeseries/' + metric)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  getRetentionStats (videoId: string) {
+    return this.authHttp.get<VideoStatsRetention>(VideoService.BASE_VIDEO_URL + '/' + videoId + '/stats/retention')
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}