79 lines
2.9 KiB
HTML
79 lines
2.9 KiB
HTML
<ng-container *transloco="let t; read: 'external-rating'">
|
|
<div class="row g-0">
|
|
|
|
|
|
@if (utilityService.activeBreakpoint$ | async; as activeBreakpoint) {
|
|
@if (activeBreakpoint <= Breakpoint.Tablet) {
|
|
<div class="col-auto custom-col clickable" tabindex="0" role="button" (click)="openRatingModal()">
|
|
<ng-container [ngTemplateOutlet]="kavitaRating"></ng-container>
|
|
</div>
|
|
} @else {
|
|
<div class="col-auto custom-col clickable" [ngbPopover]="popContent"
|
|
[popoverTitle]="t('kavita-tooltip')" popoverClass="md-popover">
|
|
<ng-container [ngTemplateOutlet]="kavitaRating"></ng-container>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
@for (rating of ratings; track rating.provider + rating.averageScore) {
|
|
<div class="col-auto custom-col clickable" [ngbPopover]="externalPopContent" [popoverContext]="{rating: rating}"
|
|
[popoverTitle]="(rating.provider | scrobbleProviderName) + getAuthorityTitle(rating)" popoverClass="sm-popover">
|
|
<span class="badge rounded-pill me-1">
|
|
<img class="me-1" [ngSrc]="rating.provider | providerImage:true" width="24" height="24" alt="" aria-hidden="true">
|
|
{{rating.averageScore}}%
|
|
</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="col-auto" style="padding-top: 8px">
|
|
<app-loading [loading]="isLoading" size="spinner-border-sm"></app-loading>
|
|
</div>
|
|
|
|
<div class="col-auto ms-2" style="padding-top: 4px">
|
|
@for(link of webLinks; track link) {
|
|
<a class="me-1" [href]="link | safeHtml" target="_blank" rel="noopener noreferrer" [title]="link">
|
|
<app-image height="24px" width="24px" aria-hidden="true" [imageUrl]="imageService.getWebLinkImage(link)"
|
|
[errorImage]="imageService.errorWebLinkImage"></app-image>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #kavitaRating>
|
|
<span class="badge rounded-pill ps-0 me-1">
|
|
<app-image classes="me-1" imageUrl="assets/images/logo-32.png" width="24px" height="24px" />
|
|
@if (hasUserRated) {
|
|
{{userRating * 20}}
|
|
} @else {
|
|
N/A
|
|
}
|
|
|
|
@if (overallRating > 0) {
|
|
+ {{overallRating}}
|
|
}
|
|
@if (hasUserRated || overallRating > 0) {
|
|
%
|
|
}
|
|
</span>
|
|
</ng-template>
|
|
|
|
<ng-template #popContent>
|
|
<ngx-stars [initialStars]="userRating" (ratingOutput)="updateRating($event)" [size]="2"
|
|
[maxStars]="5" [color]="starColor"></ngx-stars>
|
|
{{userRating * 20}}%
|
|
</ng-template>
|
|
|
|
<ng-template #externalPopContent let-rating="rating">
|
|
@if (rating.favoriteCount > 0) {
|
|
<div>
|
|
<i class="fa-solid fa-heart" aria-hidden="true"></i> {{rating.favoriteCount}}
|
|
</div>
|
|
}
|
|
|
|
|
|
@if (rating.providerUrl) {
|
|
<a [href]="rating.providerUrl" target="_blank" rel="noreferrer nofollow">{{t('entry-label')}}</a>
|
|
}
|
|
</ng-template>
|
|
|
|
</ng-container>
|