Add likes/dislikes bar

3 files changed, 33 insertions, 5 deletions

diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 1a956da7c..b96f8f6c8 100644
--- a/client/src/app/shared/video/video-details.model.ts
+++ b/client/src/app/shared/video/video-details.model.ts
@@ -46,6 +46,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
   privacy: VideoPrivacy
   privacyLabel: string
   account: Account
+  likesPercent: number
+  dislikesPercent: number
 
   constructor (hash: VideoDetailsServerModel) {
     super(hash)
@@ -56,6 +58,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
     this.files = hash.files
     this.channel = hash.channel
     this.account = hash.account
+
+    this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
+    this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
   }
 
   getAppropriateMagnetUri (actualDownloadSpeed = 0) {
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 f31e82bff..b17392ff1 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -73,8 +73,14 @@
       </div>
     </div>
 
-    <div class="video-info-date-views">
-      {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+    <div class="video-info-date-views-bar">
+      <div class="video-info-date-views">
+        {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+      </div>
+
+      <div class="video-info-likes-dislikes-bar">
+        <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
+      </div>
     </div>
 
     <div class="video-info-channel">
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 7bcfeb7c3..5064ceb95 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -84,9 +84,26 @@
       }
     }
 
-    .video-info-date-views {
-      font-size: 16px;
-      margin-bottom: 10px;
+    .video-info-date-views-bar {
+      display: flex;
+
+      .video-info-date-views {
+        font-size: 16px;
+        margin-bottom: 10px;
+        flex-grow: 1;
+      }
+
+      .video-info-likes-dislikes-bar {
+        height: 5px;
+        width: 186px;
+        background-color: #E5E5E5;
+        margin-top: 25px;
+
+        .likes-bar {
+          height: 100%;
+          background-color: #39CC0B;
+        }
+      }
     }
 
     .video-info-channel {