<div class="video-actions-rates">
<div class="video-actions fullWidth justify-content-end">
<div
- *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
+ [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
i18n-title title="Like this video"
>
<my-global-icon iconName="like"></my-global-icon>
+ <span *ngIf="video.likes" class="count">{{ video.likes }}</span>
</div>
<div
- *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
+ [ngbPopover]="getRatePopoverText()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
i18n-title title="Dislike this video"
>
<my-global-icon iconName="dislike"></my-global-icon>
+ <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
</div>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
display: none;
}
+ .action-button-like,
+ .action-button-dislike {
+ .count {
+ margin-right: 5px;
+ }
+ }
+
&.action-button-like.activated {
background-color: $green;
+ .count {
+ color: #fff;
+ }
+
my-global-icon {
@include apply-svg-color(#fff);
}
&.action-button-dislike.activated {
background-color: $red;
+ .count {
+ color: #fff;
+ }
+
my-global-icon {
@include apply-svg-color(#fff);
}
else this.setRating('dislike')
}
+ getRatePopoverText () {
+ if (this.isUserLoggedIn()) return undefined
+
+ return this.i18n('You need to be connected to rate this content.')
+ }
+
showMoreDescription () {
if (this.completeVideoDescription === undefined) {
return this.loadCompleteDescription()