Support videos stats in client

27 files changed, 578 insertions, 117 deletions

diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
index 4aed5221b..82ff372aa 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.ts
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -41,7 +41,9 @@ export class VideoListComponent extends RestTable implements OnInit {
     mute: true,
     liveInfo: false,
     removeFiles: true,
-    transcoding: true
+    transcoding: true,
+    studio: true,
+    stats: true
   }
 
   loading = true
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 9f81f0ad7..7f12e2c71 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -55,10 +55,12 @@
     <div class="action-button">
       <my-edit-button label [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
 
-      <my-action-dropdown [actions]="videoActions" [entry]="{ video: video }"></my-action-dropdown>
+      <my-video-actions-dropdown
+        [video]="video" [displayOptions]="videoDropdownDisplayOptions" [moreActions]="moreVideoActions"
+        [buttonStyled]="true" buttonDirection="horizontal" (videoRemoved)="onVideoRemoved(video)"
+      ></my-video-actions-dropdown>
     </div>
   </ng-template>
 </my-videos-selection>
 
 <my-video-change-ownership #videoChangeOwnershipModal></my-video-change-ownership>
-<my-live-stream-information #liveStreamInformationModal></my-live-stream-information>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index a364b9b6a..8da2bc890 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -8,7 +8,12 @@ import { immutableAssign } from '@app/helpers'
 import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
-import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
+import {
+  MiniatureDisplayOptions,
+  SelectionType,
+  VideoActionsDisplayType,
+  VideosSelectionComponent
+} from '@app/shared/shared-video-miniature'
 import { VideoChannel, VideoSortField } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
 
@@ -37,8 +42,23 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
     state: true,
     blacklistInfo: true
   }
+  videoDropdownDisplayOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: false,
+    update: false,
+    blacklist: false,
+    delete: true,
+    report: false,
+    duplicate: false,
+    mute: false,
+    liveInfo: false,
+    removeFiles: false,
+    transcoding: false,
+    studio: true,
+    stats: true
+  }
 
-  videoActions: DropdownAction<{ video: Video }>[] = []
+  moreVideoActions: DropdownAction<{ video: Video }>[][] = []
 
   videos: Video[] = []
   getVideosObservableFunction = this.getVideosObservable.bind(this)
@@ -172,60 +192,27 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
       })
   }
 
-  async deleteVideo (video: Video) {
-    const res = await this.confirmService.confirm(
-      $localize`Do you really want to delete ${video.name}?`,
-      $localize`Delete`
-    )
-    if (res === false) return
-
-    this.videoService.removeVideo(video.id)
-        .subscribe({
-          next: () => {
-            this.notifier.success($localize`Video ${video.name} deleted.`)
-            this.removeVideoFromArray(video.id)
-          },
-
-          error: err => this.notifier.error(err.message)
-        })
+  onVideoRemoved (video: Video) {
+    this.removeVideoFromArray(video.id)
   }
 
   changeOwnership (video: Video) {
     this.videoChangeOwnershipModal.show(video)
   }
 
-  displayLiveInformation (video: Video) {
-    this.liveStreamInformationModal.show(video)
-  }
-
   private removeVideoFromArray (id: number) {
     this.videos = this.videos.filter(v => v.id !== id)
   }
 
   private buildActions () {
-    this.videoActions = [
-      {
-        label: $localize`Studio`,
-        linkBuilder: ({ video }) => [ '/studio/edit', video.uuid ],
-        isDisplayed: ({ video }) => video.isEditableBy(this.authService.getUser(), this.serverService.getHTMLConfig().videoStudio.enabled),
-        iconName: 'film'
-      },
-      {
-        label: $localize`Display live information`,
-        handler: ({ video }) => this.displayLiveInformation(video),
-        isDisplayed: ({ video }) => video.isLive,
-        iconName: 'live'
-      },
-      {
-        label: $localize`Change ownership`,
-        handler: ({ video }) => this.changeOwnership(video),
-        iconName: 'ownership-change'
-      },
-      {
-        label: $localize`Delete`,
-        handler: ({ video }) => this.deleteVideo(video),
-        iconName: 'delete'
-      }
+    this.moreVideoActions = [
+      [
+        {
+          label: $localize`Change ownership`,
+          handler: ({ video }) => this.changeOwnership(video),
+          iconName: 'ownership-change'
+        }
+      ]
     ]
   }
 }
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)))
+  }
+}
diff --git a/client/src/app/+video-studio/edit/index.ts b/client/src/app/+video-studio/edit/index.ts
index ff1d77fc0..15b57e1c8 100644
--- a/client/src/app/+video-studio/edit/index.ts
+++ b/client/src/app/+video-studio/edit/index.ts
@@ -1,2 +1 @@
 export * from './video-studio-edit.component'
-export * from './video-studio-edit.resolver'
diff --git a/client/src/app/+video-studio/video-studio-routing.module.ts b/client/src/app/+video-studio/video-studio-routing.module.ts
index bcd9b79a5..4c08631a1 100644
--- a/client/src/app/+video-studio/video-studio-routing.module.ts
+++ b/client/src/app/+video-studio/video-studio-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { VideoStudioEditComponent, VideoStudioEditResolver } from './edit'
+import { VideoResolver } from '@app/shared/shared-main'
+import { VideoStudioEditComponent } from './edit'
 
 const videoStudioRoutes: Routes = [
   {
@@ -15,7 +16,7 @@ const videoStudioRoutes: Routes = [
           }
         },
         resolve: {
-          video: VideoStudioEditResolver
+          video: VideoResolver
         }
       }
     ]
diff --git a/client/src/app/+video-studio/video-studio.module.ts b/client/src/app/+video-studio/video-studio.module.ts
index 1a8763539..7c1dc02ea 100644
--- a/client/src/app/+video-studio/video-studio.module.ts
+++ b/client/src/app/+video-studio/video-studio.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedMainModule } from '@app/shared/shared-main'
-import { VideoStudioEditComponent, VideoStudioEditResolver } from './edit'
+import { VideoStudioEditComponent } from './edit'
 import { VideoStudioService } from './shared'
 import { VideoStudioRoutingModule } from './video-studio-routing.module'
 
@@ -20,8 +20,7 @@ import { VideoStudioRoutingModule } from './video-studio-routing.module'
   exports: [],
 
   providers: [
-    VideoStudioService,
-    VideoStudioEditResolver
+    VideoStudioService
   ]
 })
 export class VideoStudioModule { }
diff --git a/client/src/app/+videos/+video-edit/video-add.component.scss b/client/src/app/+videos/+video-edit/video-add.component.scss
index 0f0cc406c..dda868789 100644
--- a/client/src/app/+videos/+video-edit/video-add.component.scss
+++ b/client/src/app/+videos/+video-edit/video-add.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_nav' as *;
 
 $border-width: 3px;
 $border-type: solid;
@@ -51,39 +52,11 @@ $nav-link-height: 40px;
 }
 
 ::ng-deep .video-add-nav {
-  border-bottom: $border-width $border-type $border-color;
-  margin: 20px 0 0 !important;
-
-  &.hide-nav {
-    display: none !important;
-  }
+  @include peertube-nav-tabs($border-width, $border-type, $border-color, $nav-link-height);
 
   a.nav-link {
-    @include disable-default-a-behaviour;
-
-    margin-bottom: -$border-width;
-    height: $nav-link-height !important;
-    padding: 0 30px !important;
-    font-size: 15px;
-
-    border: $border-width $border-type transparent;
-
-    span {
-      border-bottom: 2px solid transparent;
-    }
-
     &.active {
-      border-color: $border-color;
-      border-bottom-color: transparent;
       background-color: pvar(--submenuBackgroundColor) !important;
-
-      span {
-        border-bottom-color: pvar(--mainColor);
-      }
-    }
-
-    &:hover:not(.active) {
-      border-color: transparent;
     }
   }
 }
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
index af26ea04d..51718827d 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
@@ -41,7 +41,8 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
     report: true,
     duplicate: true,
     mute: true,
-    liveInfo: true
+    liveInfo: true,
+    stats: true
   }
 
   userRating: UserVideoRateType
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index f13c885f2..61b440859 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -553,9 +553,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     videoCaptions: VideoCaption[]
     urlOptions: CustomizationOptions & { playerMode: PlayerMode }
     loggedInOrAnonymousUser: User
-    user?: AuthUser
+    user?: AuthUser // Keep for plugins
   }) {
-    const { video, liveVideo, videoCaptions, urlOptions, loggedInOrAnonymousUser, user } = params
+    const { video, liveVideo, videoCaptions, urlOptions, loggedInOrAnonymousUser } = params
 
     const getStartTime = () => {
       const byUrl = urlOptions.startTime !== undefined
@@ -615,6 +615,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
           ? this.videoService.getVideoViewUrl(video.uuid)
           : null,
+        authorizationHeader: this.authService.getRequestHeaderValue(),
+
         embedUrl: video.embedUrl,
         embedTitle: video.name,
 
@@ -623,13 +625,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
         language: this.localeId,
 
-        userWatching: user && user.videosHistoryEnabled === true
-          ? {
-            url: this.videoService.getUserWatchingVideoUrl(video.uuid),
-            authorizationHeader: this.authService.getRequestHeaderValue()
-          }
-          : undefined,
-
         serverUrl: environment.apiUrl,
 
         videoCaptions: playerCaptions,
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index db48b2eea..a9d9c723a 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -151,6 +151,12 @@ const routes: Routes = [
     canActivateChild: [ MetaGuard ]
   },
 
+  {
+    path: 'stats',
+    loadChildren: () => import('./+stats/stats.module').then(m => m.StatsModule),
+    canActivateChild: [ MetaGuard ]
+  },
+
   // Matches /@:actorName
   {
     matcher: (url): UrlMatchResult => {
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index a4c62c234..ba23edde0 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -75,7 +75,8 @@ const icons = {
   'chevrons-up': require('!!raw-loader?!../../../assets/images/feather/chevrons-up.svg').default,
   'message-circle': require('!!raw-loader?!../../../assets/images/feather/message-circle.svg').default,
   codesandbox: require('!!raw-loader?!../../../assets/images/feather/codesandbox.svg').default,
-  award: require('!!raw-loader?!../../../assets/images/feather/award.svg').default
+  award: require('!!raw-loader?!../../../assets/images/feather/award.svg').default,
+  stats: require('!!raw-loader?!../../../assets/images/feather/stats.svg').default
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
index 8badb1573..7c18b7f67 100644
--- a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
@@ -22,6 +22,7 @@ export class NumberFormatterPipe implements PipeTransform {
     { max: 1000000, type: 'K' },
     { max: 1000000000, type: 'M' }
   ]
+
   constructor (@Inject(LOCALE_ID) private localeId: string) {}
 
   transform (value: number) {
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index d83af9a66..5629640bc 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -45,7 +45,7 @@ import {
 import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
 import { ActorRedirectGuard } from './router'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
-import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
+import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoResolver, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
 import { VideoChannelService } from './video-channel'
 
@@ -190,6 +190,7 @@ import { VideoChannelService } from './video-channel'
     VideoImportService,
     VideoOwnershipService,
     VideoService,
+    VideoResolver,
 
     VideoCaptionService,
 
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
index e72c0c3d6..361601456 100644
--- a/client/src/app/shared/shared-main/video/index.ts
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -5,4 +5,5 @@ export * from './video-edit.model'
 export * from './video-import.service'
 export * from './video-ownership.service'
 export * from './video.model'
+export * from './video.resolver'
 export * from './video.service'
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 2d4db9a28..022bb95ad 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -58,8 +58,7 @@ export class Video implements VideoServerModel {
   url: string
 
   views: number
-  // If live
-  viewers?: number
+  viewers: number
 
   likes: number
   dislikes: number
@@ -234,9 +233,13 @@ export class Video implements VideoServerModel {
       this.isUpdatableBy(user)
   }
 
+  canSeeStats (user: AuthUser) {
+    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.SEE_ALL_VIDEOS))
+  }
+
   canRemoveFiles (user: AuthUser) {
     return this.isLocal &&
-      user.hasRight(UserRight.MANAGE_VIDEO_FILES) &&
+      user && user.hasRight(UserRight.MANAGE_VIDEO_FILES) &&
       this.state.id !== VideoState.TO_TRANSCODE &&
       this.hasHLS() &&
       this.hasWebTorrent()
@@ -244,7 +247,7 @@ export class Video implements VideoServerModel {
 
   canRunTranscoding (user: AuthUser) {
     return this.isLocal &&
-      user.hasRight(UserRight.RUN_VIDEO_TRANSCODING) &&
+      user && user.hasRight(UserRight.RUN_VIDEO_TRANSCODING) &&
       this.state.id !== VideoState.TO_TRANSCODE
   }
 
diff --git a/client/src/app/+video-studio/edit/video-studio-edit.resolver.ts b/client/src/app/shared/shared-main/video/video.resolver.ts
index c658be50b..65b7230ce 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.resolver.ts
+++ b/client/src/app/shared/shared-main/video/video.resolver.ts
@@ -1,10 +1,9 @@
-
 import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
-import { VideoService } from '@app/shared/shared-main'
+import { VideoService } from './video.service'
 
 @Injectable()
-export class VideoStudioEditResolver implements Resolve<any> {
+export class VideoResolver implements Resolve<any> {
   constructor (
     private videoService: VideoService
   ) {
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 94af9cd38..bc15c326f 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -65,10 +65,6 @@ export class VideoService {
     return `${VideoService.BASE_VIDEO_URL}/${uuid}/views`
   }
 
-  getUserWatchingVideoUrl (uuid: string) {
-    return `${VideoService.BASE_VIDEO_URL}/${uuid}/watching`
-  }
-
   getVideo (options: { videoId: string }): Observable<VideoDetails> {
     return this.serverService.getServerLocale()
                .pipe(
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index 5eef96145..ed6a4afc0 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -30,6 +30,7 @@ export type VideoActionsDisplayType = {
   removeFiles?: boolean
   transcoding?: boolean
   studio?: boolean
+  stats?: boolean
 }
 
 @Component({
@@ -61,9 +62,11 @@ export class VideoActionsDropdownComponent implements OnChanges {
     liveInfo: false,
     removeFiles: false,
     transcoding: false,
-    studio: true
+    studio: true,
+    stats: true
   }
   @Input() placement = 'left'
+  @Input() moreActions: DropdownAction<{ video: Video }>[][] = []
 
   @Input() label: string
 
@@ -156,6 +159,10 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.video.isEditableBy(this.user, this.serverService.getHTMLConfig().videoStudio.enabled)
   }
 
+  isVideoStatsAvailable () {
+    return this.video.canSeeStats(this.user)
+  }
+
   isVideoRemovable () {
     return this.video.isRemovableBy(this.user)
   }
@@ -343,6 +350,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.studio && this.isVideoEditable()
         },
         {
+          label: $localize`Stats`,
+          linkBuilder: ({ video }) => [ '/stats/videos', video.uuid ],
+          iconName: 'stats',
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.stats && this.isVideoStatsAvailable()
+        },
+        {
           label: $localize`Block`,
           handler: () => this.showBlockModal(),
           iconName: 'no',
@@ -408,5 +421,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
         }
       ]
     ]
+
+    this.videoActions = this.videoActions.concat(this.moreActions)
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 7de9fc8e2..42c472579 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -49,7 +49,20 @@ export class VideoMiniatureComponent implements OnInit {
     state: false,
     blacklistInfo: false
   }
+
   @Input() displayVideoActions = true
+  @Input() videoActionsDisplayOptions: VideoActionsDisplayType = {
+    playlist: true,
+    download: false,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true,
+    duplicate: true,
+    mute: true,
+    studio: false,
+    stats: false
+  }
 
   @Input() actorImageSize: ActorAvatarSize = '40'
 
@@ -62,16 +75,6 @@ export class VideoMiniatureComponent implements OnInit {
   @Output() videoRemoved = new EventEmitter()
   @Output() videoAccountMuted = new EventEmitter()
 
-  videoActionsDisplayOptions: VideoActionsDisplayType = {
-    playlist: true,
-    download: false,
-    update: true,
-    blacklist: true,
-    delete: true,
-    report: true,
-    duplicate: true,
-    mute: true
-  }
   showActions = false
   serverConfig: HTMLServerConfig