feat(portals): show imdb rating in grid view

src/app/xtream/category-content-view/category-content-view.component.html

@@ -1,7 +1,6 @@
 <ng-container *ngIf="items?.length > 0; else noItems">
     <div class="grid">
         <mat-card
-            appearance="outlined"
             *ngFor="
                 let item of items | filterBy: searchPhrase() : 'name';
                 trackBy: trackByFn
@@ -23,6 +22,14 @@
                     class="stream-icon-placeholder"
                     *ngIf="!item.stream_icon && !item.cover"
                 ></div>
+                <div
+                    *ngIf="item.rating || item.rating_imdb"
+                    class="rating"
+                    matTooltip="IMDB Rating"
+                >
+                    <mat-icon>star</mat-icon
+                    >{{ item.rating || item.rating_imdb }}
+                </div>
                 <div class="title">{{ item.name }}</div>
             </mat-card-content>
         </mat-card>
@@ -31,13 +38,15 @@
             *ngIf="!(items | filterBy: searchPhrase() : 'name')?.length"
         >
             <mat-icon class="icon">search</mat-icon>
-            <div>Nothing found, try to change you search request</div>
+            <div>
+                {{ 'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' | translate }}
+            </div>
         </div>
     </div>
 </ng-container>
 <ng-template #noItems>
     <div class="no-content">
         <mat-icon class="icon">list</mat-icon>
-        <div>This category is empty, try another one</div>
+        <div>{{ 'PORTALS.EMPTY_LIST_VIEW.EMPTY_CATEGORY' | translate }}</div>
     </div>
 </ng-template>

src/app/xtream/category-content-view/category-content-view.component.scss

@@ -6,6 +6,7 @@
 mat-card {
     overflow: hidden;
     transition: all 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-shadow: none;
 }
 
 mat-card:hover {
@@ -49,10 +50,31 @@ mat-card:hover {
         .title {
             word-break: break-all;
             padding: 8px;
+            text-align: center;
         }
     }
 }
 
+.rating {
+    position: absolute;
+    top: 5px;
+    right: 6px;
+    background-color: #3bb33b;
+    color: #fff;
+    font-size: 0.8em;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 5px;
+
+    mat-icon {
+        font-size: 16px;
+        height: 18px;
+        width: 18px;
+    }
+}
+
 .no-content {
     text-align: center;
 

src/app/xtream/category-content-view/category-content-view.component.ts

@@ -3,6 +3,8 @@ import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 import { XtreamItem } from '../../../../shared/xtream-item.interface';
 import { FilterPipe } from '../../shared/pipes/filter.pipe';
 import { PortalStore } from '../portal.store';
@@ -19,11 +21,13 @@ import { PortalStore } from '../portal.store';
         NgIf,
         FilterPipe,
         FormsModule,
+        MatTooltipModule,
+        TranslateModule,
     ],
 })
 export class CategoryContentViewComponent {
     @Input({ required: true }) items: XtreamItem[];
-    @Output() itemClicked = new EventEmitter<any>();
+    @Output() itemClicked = new EventEmitter<XtreamItem>();
 
     portalStore = inject(PortalStore);