Add help to understand what is a view

2 files changed, 10 insertions, 3 deletions

diff --git a/client/src/app/+stats/video/video-stats.component.html b/client/src/app/+stats/video/video-stats.component.html
index e5412f1b8..2cd47bb26 100644
--- a/client/src/app/+stats/video/video-stats.component.html
+++ b/client/src/app/+stats/video/video-stats.component.html
@@ -4,7 +4,13 @@
   <div class="stats-embed">
     <div class="global-stats">
       <div *ngFor="let card of globalStatsCards" class="card stats-card">
-        <div class="label">{{ card.label }}</div>
+        <div class="label">
+          {{ card.label }}
+
+          <my-help *ngIf="card.help">
+            <ng-template ptTemplate="customHtml">{{ card.help }}</ng-template>
+          </my-help>
+        </div>
         <div class="value">{{ card.value }}</div>
         <div *ngIf="card.moreInfo" class="more-info">{{ card.moreInfo }}</div>
       </div>
diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index f433259ef..b6b71d463 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -30,7 +30,7 @@ type ChartBuilderResult = {
   displayLegend: boolean
 }
 
-type Card = { label: string, value: string | number, moreInfo?: string }
+type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
 
 @Component({
   templateUrl: './video-stats.component.html',
@@ -252,7 +252,8 @@ export class VideoStatsComponent implements OnInit {
     this.globalStatsCards = [
       {
         label: $localize`Views`,
-        value: this.numberFormatter.transform(this.video.views)
+        value: this.numberFormatter.transform(this.video.views),
+        help: $localize`A view means that someone watched the video for at least 30 seconds`
       },
       {
         label: $localize`Likes`,