Add likes/dislikes counts in the buttons

3 files changed, 25 insertions, 2 deletions

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 5b2e91bc5..58b2382f0 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -58,19 +58,21 @@
             <div class="video-actions-rates">
               <div class="video-actions fullWidth justify-content-end">
                 <div
-                  *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
+                  [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
                   class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
                   i18n-title title="Like this video"
                 >
                   <my-global-icon iconName="like"></my-global-icon>
+                  <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
                 </div>
 
                 <div
-                  *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
+                  [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
                   class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
                   i18n-title title="Dislike this video"
                 >
                   <my-global-icon iconName="dislike"></my-global-icon>
+                  <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
                 </div>
 
                 <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 80d01b7ce..86b44d5da 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -239,9 +239,20 @@ $player-factor: 1.7; // 16/9
               display: none;
             }
 
+            .action-button-like,
+            .action-button-dislike {
+              .count {
+                margin-right: 5px;
+              }
+            }
+
             &.action-button-like.activated {
               background-color: $green;
 
+              .count {
+                color: #fff;
+              }
+
               my-global-icon {
                 @include apply-svg-color(#fff);
               }
@@ -250,6 +261,10 @@ $player-factor: 1.7; // 16/9
             &.action-button-dislike.activated {
               background-color: $red;
 
+              .count {
+                color: #fff;
+              }
+
               my-global-icon {
                 @include apply-svg-color(#fff);
               }
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 0007331f8..aacd697cf 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -166,6 +166,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     else this.setRating('dislike')
   }
 
+  getRatePopoverText () {
+    if (this.isUserLoggedIn()) return undefined
+
+    return this.i18n('You need to be connected to rate this content.')
+  }
+
   showMoreDescription () {
     if (this.completeVideoDescription === undefined) {
       return this.loadCompleteDescription()