Add likes/dislikes bar

diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts
index 1a956da7cb96ba246cd1acd37927fdf7f165c67a..b96f8f6c82572680f5332b3c9f2fbf036d1b2b11 100644 (file)
--- 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 f31e82bff6fb20c19991f91098b9eb16aeff2ab4..b17392ff14a6a3cdb6faf7272f95a47e89168685 100644 (file)
--- 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 7bcfeb7c3507a2bd746c3d0d5b0c308fed54542b..5064ceb951a701082d4eca11924a515cb667c174 100644 (file)
--- 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 {