aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-12-05 16:28:05 +0100
committerChocobozzz <me@florianbigard.com>2019-12-05 16:28:05 +0100
commit0d3a9be9f13c2642cb6cf26fdebc5edf5217bbbc (patch)
treea2ce764547dffa560664c3c7726dc9c9bc23599b /client/src/app/videos/+video-watch
parentf56ebb3616606e678b25d8064696c75655dcd2ed (diff)
downloadPeerTube-0d3a9be9f13c2642cb6cf26fdebc5edf5217bbbc.tar.gz
PeerTube-0d3a9be9f13c2642cb6cf26fdebc5edf5217bbbc.tar.zst
PeerTube-0d3a9be9f13c2642cb6cf26fdebc5edf5217bbbc.zip
Add likes/dislikes counts in the buttons
Diffstat (limited to 'client/src/app/videos/+video-watch')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html6
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss15
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts6
3 files changed, 25 insertions, 2 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 5b2e91bc5..58b2382f0 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -58,19 +58,21 @@
58 <div class="video-actions-rates"> 58 <div class="video-actions-rates">
59 <div class="video-actions fullWidth justify-content-end"> 59 <div class="video-actions fullWidth justify-content-end">
60 <div 60 <div
61 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" 61 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
62 class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'" 62 class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
63 i18n-title title="Like this video" 63 i18n-title title="Like this video"
64 > 64 >
65 <my-global-icon iconName="like"></my-global-icon> 65 <my-global-icon iconName="like"></my-global-icon>
66 <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
66 </div> 67 </div>
67 68
68 <div 69 <div
69 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" 70 [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
70 class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'" 71 class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
71 i18n-title title="Dislike this video" 72 i18n-title title="Dislike this video"
72 > 73 >
73 <my-global-icon iconName="dislike"></my-global-icon> 74 <my-global-icon iconName="dislike"></my-global-icon>
75 <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
74 </div> 76 </div>
75 77
76 <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support"> 78 <div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
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 80d01b7ce..86b44d5da 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -239,9 +239,20 @@ $player-factor: 1.7; // 16/9
239 display: none; 239 display: none;
240 } 240 }
241 241
242 .action-button-like,
243 .action-button-dislike {
244 .count {
245 margin-right: 5px;
246 }
247 }
248
242 &.action-button-like.activated { 249 &.action-button-like.activated {
243 background-color: $green; 250 background-color: $green;
244 251
252 .count {
253 color: #fff;
254 }
255
245 my-global-icon { 256 my-global-icon {
246 @include apply-svg-color(#fff); 257 @include apply-svg-color(#fff);
247 } 258 }
@@ -250,6 +261,10 @@ $player-factor: 1.7; // 16/9
250 &.action-button-dislike.activated { 261 &.action-button-dislike.activated {
251 background-color: $red; 262 background-color: $red;
252 263
264 .count {
265 color: #fff;
266 }
267
253 my-global-icon { 268 my-global-icon {
254 @include apply-svg-color(#fff); 269 @include apply-svg-color(#fff);
255 } 270 }
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 0007331f8..aacd697cf 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -166,6 +166,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
166 else this.setRating('dislike') 166 else this.setRating('dislike')
167 } 167 }
168 168
169 getRatePopoverText () {
170 if (this.isUserLoggedIn()) return undefined
171
172 return this.i18n('You need to be connected to rate this content.')
173 }
174
169 showMoreDescription () { 175 showMoreDescription () {
170 if (this.completeVideoDescription === undefined) { 176 if (this.completeVideoDescription === undefined) {
171 return this.loadCompleteDescription() 177 return this.loadCompleteDescription()