add title attribute for exact view counters (#3365)

diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index a90908dbeee86e2f70c29c46ba9563bdf96e047d..d74334b13b68f4bc053b5dd861b624997b1ff0ea 100644 (file)
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -54,7 +54,9 @@
             <div class="video-info-date-views">
               <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
 
-              <span i18n class="views">
+              <span i18n
+                    title="{{ getExactNumberOfViews() }}"
+                    class="views">
                 • {{ video.views | myNumberFormatter }}
                 <ng-container *ngIf="!video.isLive">views</ng-container>
                 <ng-container *ngIf="video.isLive">viewers</ng-container>
@@ -71,7 +73,9 @@
               <div class="d-none d-md-block video-info-date-views">
                 <ng-container i18n>Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle></ng-container>
 
-                <span i18n class="views">
+                <span i18n
+                      title="{{ getExactNumberOfViews() }}"
+                      class="views">
                   • {{ video.views | myNumberFormatter }}
                   <ng-container *ngIf="!video.isLive">views</ng-container>
                   <ng-container *ngIf="video.isLive">viewers</ng-container>

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 66af9709dfcc8cfa5ceac2a2e606d77c5722c71d..bc047489e7c78fc24dd4765f798cf7801cc62979 100644 (file)
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -219,6 +219,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return $localize`You need to be <a href="/login">logged in</a> to rate this video.`
   }
 
+  getExactNumberOfViews () {
+    return (this.video.views >= 1000)
+      ? `${this.video.views} ${this.video.isLive ? $localize`viewers` : $localize`views`}`
+      : ''
+  }
+
   showMoreDescription () {
     if (this.completeVideoDescription === undefined) {
       return this.loadCompleteDescription()

diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index a88b3bc9e6ee4d553f496ba2e3b3da0b173b42e8..b323002e3e0e5214ca9317ddf25a976198849b39 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -26,9 +26,11 @@
           <span class="video-miniature-created-at-views">
             <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
 
-            <span class="views">
+            <span class="views" title="{{ getExactNumberOfViews() }}">
               <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
-              <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
+              <ng-container i18n *ngIf="displayOptions.views">
+                {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}
+              </ng-container>
             </span>
           </span>
 

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 cc5665ab1483cb0a0f8cd3324ad369124e64e056..e59255cf8e62220fea4cf56ebd2baf3e067460bc 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -190,6 +190,12 @@ export class VideoMiniatureComponent implements OnInit {
     return this.video.videoChannelAvatarUrl
   }
 
+  getExactNumberOfViews () {
+    return (this.video.views >= 1000 && this.displayOptions.views)
+        ? `${this.video.views} ${this.video.isLive ? $localize`viewers` : $localize`views`}`
+        : ''
+  }
+
   loadActions () {
     if (this.displayVideoActions) this.showActions = true