Add like/dislike system for videos

1 files changed, 18 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 24d741ff9..67094359e 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -32,7 +32,7 @@
 
 <div *ngIf="video !== null" id="video-info">
   <div class="row" id="video-name-actions">
-    <div class="col-md-8">
+    <div class="col-md-6">
       <div class="row">
         <div id="video-name" class="col-md-12">
           {{ video.name }}
@@ -52,7 +52,23 @@
       </div>
     </div>
 
-    <div id="video-actions" class="col-md-4 text-right">
+    <div id="video-actions" class="col-md-6 text-right">
+      <div id="rates">
+        <button
+          id="likes" class="btn btn-default"
+          [ngClass]="{ 'not-interactive-btn': !isUserLoggedIn(), 'activated-btn': userRating === 'like' }" (click)="setLike()"
+        >
+          <span class="glyphicon glyphicon-thumbs-up"></span> {{ video.likes }}
+        </button>
+
+        <button
+          id="dislikes" class="btn btn-default"
+          [ngClass]="{ 'not-interactive-btn': !isUserLoggedIn(), 'activated-btn': userRating === 'dislike' }" (click)="setDislike()"
+        >
+          <span class=" glyphicon glyphicon-thumbs-down"></span> {{ video.dislikes }}
+        </button>
+      </div>
+
       <button id="share" class="btn btn-default" (click)="showShareModal()">
         <span class="glyphicon glyphicon-share"></span> Share
       </button>