Add likes/dislikes bar

2 files changed, 28 insertions, 5 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 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 {