refactor(stalker): code style improvements

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

@@ -11,7 +11,11 @@
                 <img
                     class="stream-icon"
                     *ngIf="item.stream_icon || item.cover || item.logo"
-                    [src]="item.stream_icon || item.cover || item.logo"
+                    [ngSrc]="item.stream_icon || item.cover || item.logo"
+                    fill
+                    priority
+                    placeholder
+                    placeholder="data:image/png;base64,iVBORw0K..."
                 />
                 <div
                     class="stream-icon-placeholder"
@@ -25,8 +29,10 @@
                     <mat-icon>star</mat-icon
                     >{{ item.rating || item.rating_imdb }}
                 </div>
-                <div class="title">{{ item.name }}</div>
             </mat-card-content>
+            <mat-card-actions>
+                <div class="title">{{ item.name }}</div>
+            </mat-card-actions>
         </mat-card>
         <div
             class="no-content"

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

@@ -22,6 +22,7 @@ mat-card:hover {
     mat-card {
         cursor: pointer;
         width: 170px;
+        // height: 300px;
 
         mat-card-content {
             padding: 0;
@@ -30,6 +31,9 @@ mat-card:hover {
 
         .stream-icon {
             width: 100%;
+            position: relative !important;
+
+            /* max-height: 300px; */
             display: block;
         }
 
@@ -37,7 +41,7 @@ mat-card:hover {
             width: 100%;
             background: #999;
             max-height: 300px;
-            min-height: 130px;
+            min-height: 255px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -49,8 +53,12 @@ mat-card:hover {
 
         .title {
             word-break: break-all;
-            padding: 8px;
+            /* padding: 8px; */
             text-align: center;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;  
+            overflow: hidden;
         }
     }
 }

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

@@ -1,4 +1,4 @@
-import { NgFor, NgIf } from '@angular/common';
+import { NgFor, NgIf, NgOptimizedImage } from '@angular/common';
 import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
@@ -22,6 +22,7 @@ import { PortalStore } from '../portal.store';
         FilterPipe,
         FormsModule,
         MatTooltipModule,
+        NgOptimizedImage,
         TranslateModule,
     ],
 })

src/app/xtream/portal.store.ts

@@ -5,6 +5,8 @@ export interface PortalState {
     searchPhrase: string;
     content: any[];
     hideExternalInfoDialog: boolean;
+    currentVod: any;
+    currentSerial: any;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -12,6 +14,8 @@ export class PortalStore extends ComponentStore<PortalState> {
     constructor() {
         super({
             searchPhrase: '',
+            currentVod: undefined,
+            currentSerial: undefined,
             content: [],
             hideExternalInfoDialog:
                 localStorage.getItem('hideExternalInfoDialog') === 'true',
@@ -20,6 +24,8 @@ export class PortalStore extends ComponentStore<PortalState> {
 
     // selectors
     readonly searchPhrase = this.selectSignal((state) => state.searchPhrase);
+    readonly currentSerial = this.selectSignal((state) => state.currentSerial);
+    readonly currentVod = this.selectSignal((state) => state.currentVod);
 
     readonly hideExternalInfoDialog = this.selectSignal(
         (state) => state.hideExternalInfoDialog
@@ -43,6 +49,20 @@ export class PortalStore extends ComponentStore<PortalState> {
         })
     );
 
+    readonly setCurrentSerial = this.updater(
+        (state, currentSerial: any): PortalState => ({
+            ...state,
+            currentSerial,
+        })
+    );
+
+    readonly setCurrentVod = this.updater(
+        (state, currentVod: any): PortalState => ({
+            ...state,
+            currentVod,
+        })
+    );
+
     readonly setHideExternalInfoDialog = this.updater(
         (state, hideExternalInfoDialog: boolean): PortalState => {
             localStorage.setItem(

src/app/xtream/vod-details/vod-details.component.html

@@ -47,11 +47,13 @@
             {{ item.info.duration }}
         </label>
         <label *ngIf="item.info.rating_imdb">
-            <div class="label">Rating IMDB:</div>
+            <div class="label">{{ 'XTREAM.IMDB_RATING' | translate }}:</div>
             {{ item.info.rating_imdb }}
         </label>
         <label *ngIf="item.info.rating_kinopoisk">
-            <div class="label">Rating Kinopoisk:</div>
+            <div class="label">
+                {{ 'XTREAM.KINOPOISK_RATING' | translate }}:
+            </div>
             {{ item.info.rating_kinopoisk }}
         </label>
         <div class="action-buttons">
@@ -86,7 +88,7 @@
     </div>
 </div>
 <div class="youtube-trailer" *ngIf="item.info.youtube_trailer">
-    <h3>YouTube Trailer</h3>
+    <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
     <iframe
         width="100%"
         height="450"

src/app/xtream/xtream-main-container.component.ts

@@ -61,7 +61,10 @@ import { STORE_KEY } from '../shared/enums/store-keys.enum';
 import { PlaylistErrorViewComponent } from '../xtream/playlist-error-view/playlist-error-view.component';
 import { Breadcrumb, PortalActions } from './breadcrumb.interface';
 import { ContentTypeNavigationItem } from './content-type-navigation-item.interface';
-import { PlayerDialogComponent } from './player-dialog/player-dialog.component';
+import {
+    PlayerDialogComponent,
+    PlayerDialogData,
+} from './player-dialog/player-dialog.component';
 import { PortalStore } from './portal.store';
 import { SerialDetailsComponent } from './serial-details/serial-details.component';
 
@@ -352,10 +355,13 @@ export class XtreamMainContainerComponent implements OnInit {
         } else {
             this.streamUrl = streamUrl;
             if (this.selectedContentType !== ContentType.ITV) {
-                this.dialog.open(PlayerDialogComponent, {
-                    data: { streamUrl, player: this.player, title },
-                    width: '80%',
-                });
+                this.dialog.open<PlayerDialogComponent, PlayerDialogData>(
+                    PlayerDialogComponent,
+                    {
+                        data: { streamUrl, title },
+                        width: '80%',
+                    }
+                );
             }
         }
     }