Add like/dislike system for videos

3 files changed, 115 insertions, 3 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>
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 0b8af52ce..5f322a194 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -47,6 +47,34 @@
       top: 2px;
     }
 
+    #rates {
+      display: inline-block;
+      margin-right: 20px;
+
+      // Remove focus style
+      .btn:focus {
+        outline: 0;
+      }
+
+      .activated-btn {
+        color: #333;
+        background-color: #e6e6e6;
+        border-color: #8c8c8c;
+      }
+
+      .not-interactive-btn {
+        cursor: default;
+
+        &:hover, &:focus, &:active {
+          color: #333;
+          background-color: #fff;
+          border-color: #ccc;
+          box-shadow: none;
+          outline: 0;
+        }
+      }
+    }
+
     #share, #more {
       font-weight: bold;
       opacity: 0.85;
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 d1abc81bc..ed6b30102 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -10,7 +10,7 @@ import { AuthService } from '../../core';
 import { VideoMagnetComponent } from './video-magnet.component';
 import { VideoShareComponent } from './video-share.component';
 import { VideoReportComponent } from './video-report.component';
-import { Video, VideoService } from '../shared';
+import { RateType, Video, VideoService } from '../shared';
 import { WebTorrentService } from './webtorrent.service';
 
 @Component({
@@ -33,6 +33,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   player: VideoJSPlayer;
   playerElement: Element;
   uploadSpeed: number;
+  userRating: RateType = null;
   video: Video = null;
   videoNotFound = false;
 
@@ -61,6 +62,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           this.video = video;
           this.setOpenGraphTags();
           this.loadVideo();
+          this.checkUserRating();
         },
         error => {
           this.videoNotFound = true;
@@ -136,6 +138,40 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     });
   }
 
+  setLike() {
+    if (this.isUserLoggedIn() === false) return;
+    // Already liked this video
+    if (this.userRating === 'like') return;
+
+    this.videoService.setVideoLike(this.video.id)
+                     .subscribe(
+                      () => {
+                        // Update the video like attribute
+                        this.updateVideoRating(this.userRating, 'like');
+                        this.userRating = 'like';
+                      },
+
+                      err => this.notificationsService.error('Error', err.text)
+                     );
+  }
+
+  setDislike() {
+    if (this.isUserLoggedIn() === false) return;
+    // Already disliked this video
+    if (this.userRating === 'dislike') return;
+
+    this.videoService.setVideoDislike(this.video.id)
+                     .subscribe(
+                      () => {
+                        // Update the video dislike attribute
+                        this.updateVideoRating(this.userRating, 'dislike');
+                        this.userRating = 'dislike';
+                      },
+
+                      err => this.notificationsService.error('Error', err.text)
+                     );
+  }
+
   showReportModal(event: Event) {
     event.preventDefault();
     this.videoReportModal.show();
@@ -154,6 +190,38 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn();
   }
 
+  private checkUserRating() {
+    // Unlogged users do not have ratings
+    if (this.isUserLoggedIn() === false) return;
+
+    this.videoService.getUserVideoRating(this.video.id)
+                     .subscribe(
+                       ratingObject => {
+                         if (ratingObject) {
+                           this.userRating = ratingObject.rating;
+                         }
+                       },
+
+                       err => this.notificationsService.error('Error', err.text)
+                      );
+  }
+
+  private updateVideoRating(oldRating: RateType, newRating: RateType) {
+    let likesToIncrement = 0;
+    let dislikesToIncrement = 0;
+
+    if (oldRating) {
+      if (oldRating === 'like') likesToIncrement--;
+      if (oldRating === 'dislike') dislikesToIncrement--;
+    }
+
+    if (newRating === 'like') likesToIncrement++;
+    if (newRating === 'dislike') dislikesToIncrement++;
+
+    this.video.likes += likesToIncrement;
+    this.video.dislikes += dislikesToIncrement;
+  }
+
   private loadTooLong() {
     this.error = true;
     console.error('The video load seems to be abnormally long.');