aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/shared/video/video-details.model.ts5
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html10
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss23
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 {
46 privacy: VideoPrivacy 46 privacy: VideoPrivacy
47 privacyLabel: string 47 privacyLabel: string
48 account: Account 48 account: Account
49 likesPercent: number
50 dislikesPercent: number
49 51
50 constructor (hash: VideoDetailsServerModel) { 52 constructor (hash: VideoDetailsServerModel) {
51 super(hash) 53 super(hash)
@@ -56,6 +58,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel {
56 this.files = hash.files 58 this.files = hash.files
57 this.channel = hash.channel 59 this.channel = hash.channel
58 this.account = hash.account 60 this.account = hash.account
61
62 this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100
63 this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100
59 } 64 }
60 65
61 getAppropriateMagnetUri (actualDownloadSpeed = 0) { 66 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 @@
73 </div> 73 </div>
74 </div> 74 </div>
75 75
76 <div class="video-info-date-views"> 76 <div class="video-info-date-views-bar">
77 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views 77 <div class="video-info-date-views">
78 {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
79 </div>
80
81 <div class="video-info-likes-dislikes-bar">
82 <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
83 </div>
78 </div> 84 </div>
79 85
80 <div class="video-info-channel"> 86 <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 @@
84 } 84 }
85 } 85 }
86 86
87 .video-info-date-views { 87 .video-info-date-views-bar {
88 font-size: 16px; 88 display: flex;
89 margin-bottom: 10px; 89
90 .video-info-date-views {
91 font-size: 16px;
92 margin-bottom: 10px;
93 flex-grow: 1;
94 }
95
96 .video-info-likes-dislikes-bar {
97 height: 5px;
98 width: 186px;
99 background-color: #E5E5E5;
100 margin-top: 25px;
101
102 .likes-bar {
103 height: 100%;
104 background-color: #39CC0B;
105 }
106 }
90 } 107 }
91 108
92 .video-info-channel { 109 .video-info-channel {