refactor: style and code improvements

src/app/player/components/video-player/sidebar/sidebar.component.html

@@ -5,14 +5,11 @@
         </button>
         <div class="playlist-info">
             <div class="name">
-                <ng-container
-                    *ngIf="sidebarView === 'CHANNELS'; else allPlaylists"
-                >
+                @if (sidebarView === 'CHANNELS') {
                     {{ playlistTitle$ | async }}
-                </ng-container>
-                <ng-template #allPlaylists>
+                } @else {
                     {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
-                </ng-template>
+                }
             </div>
             <div class="channels-count">
                 {{

src/app/services/pwa.service.ts

@@ -183,11 +183,19 @@ export class PwaService extends DataService {
                 })
             )
             .subscribe((response) => {
-                window.postMessage({
-                    type: XTREAM_RESPONSE,
-                    payload: (response as any).payload,
-                    action: payload.params.action,
-                });
+                if (!(response as any).payload) {
+                    window.postMessage({
+                        type: ERROR,
+                        status: (response as any).status,
+                        message: (response as any).message ?? 'Unknown error',
+                    });
+                } else {
+                    window.postMessage({
+                        type: XTREAM_RESPONSE,
+                        payload: (response as any).payload,
+                        action: payload.params.action,
+                    });
+                }
             });
     }
 

src/app/stalker/stalker-main-container.component.scss

@@ -1,3 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    justify-content: flex-start;
+}
+
 .loading-wrapper {
     display: block;
     padding: 20px;

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

@@ -1,4 +1,4 @@
-<ng-container *ngIf="items?.length > 0; else noItems">
+@if (items?.length > 0) {
     <div class="grid">
         <mat-card
             *ngFor="
@@ -24,7 +24,7 @@
                 <div
                     *ngIf="item.rating || item.rating_imdb"
                     class="rating"
-                    matTooltip="IMDB Rating"
+                    [matTooltip]="'XTREAM.IMDB_RATING' | translate"
                 >
                     <mat-icon>star</mat-icon
                     >{{ item.rating || item.rating_imdb }}
@@ -44,10 +44,13 @@
             </div>
         </div>
     </div>
-</ng-container>
-<ng-template #noItems>
-    <div class="no-content">
-        <mat-icon class="icon">list</mat-icon>
-        <div>{{ 'PORTALS.EMPTY_LIST_VIEW.EMPTY_CATEGORY' | translate }}</div>
-    </div>
-</ng-template>
+} @else {
+    <app-playlist-error-view
+        [title]="'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE' | translate"
+        [description]="
+            'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION' | translate
+        "
+        [showActionButtons]="false"
+        [viewType]="'EMPTY_CATEGORY'"
+    />
+}

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

@@ -1,6 +1,6 @@
 :host {
-    display: block;
-    padding: 20px;
+    overflow-y: auto;
+    padding: 10px;
 }
 
 mat-card {

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

@@ -7,6 +7,7 @@ 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 { PlaylistErrorViewComponent } from '../playlist-error-view/playlist-error-view.component';
 import { PortalStore } from '../portal.store';
 
 @Component({
@@ -23,6 +24,7 @@ import { PortalStore } from '../portal.store';
         FormsModule,
         MatTooltipModule,
         NgOptimizedImage,
+        PlaylistErrorViewComponent,
         TranslateModule,
     ],
 })

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

@@ -1,6 +1,6 @@
 :host {
-    margin: 20px;
-    display: block;
+    overflow-y: auto;
+    padding: 10px;
 }
 
 mat-card-content {
@@ -23,6 +23,8 @@ mat-card-content {
     gap: 10px;
     justify-content: center;
 
+    /* padding-bottom: 20px; */
+
     .category-item {
         cursor: pointer;
         width: 200px;

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

@@ -3,15 +3,17 @@ 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 { TranslateModule } from '@ngx-translate/core';
 import { XtreamCategory } from '../../../../shared/xtream-category.interface';
 import { FilterPipe } from '../../shared/pipes/filter.pipe';
+import { PlaylistErrorViewComponent } from '../playlist-error-view/playlist-error-view.component';
 import { PortalStore } from '../portal.store';
 
 @Component({
     selector: 'app-category-view',
     standalone: true,
     template: `
-        <ng-container *ngIf="items?.length > 0; else noItems">
+        @if (items?.length > 0) {
             <div class="grid">
                 <mat-card
                     appearance="outlined"
@@ -35,28 +37,35 @@ import { PortalStore } from '../portal.store';
                     "
                 >
                     <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">warning</mat-icon>
-                <div>
-                    Oops, no content here, please change the category or content
-                    type
-                </div>
-            </div>
-        </ng-template>
+        } @else {
+            <app-playlist-error-view
+                [title]="'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.TITLE' | translate"
+                [description]="
+                    'PORTALS.ERROR_VIEW.EMPTY_CATEGORY.DESCRIPTION' | translate
+                "
+                [showActionButtons]="false"
+                [viewType]="'EMPTY_CATEGORY'"
+            />
+        }
     `,
     styleUrl: './category-view.component.scss',
     imports: [
+        PlaylistErrorViewComponent,
         FilterPipe,
         FormsModule,
         MatCardModule,
         MatIconModule,
         NgFor,
         NgIf,
+        TranslateModule,
     ],
 })
 export class CategoryViewComponent {

src/app/xtream/navigation-bar/navigation-bar.component.scss

@@ -1,7 +1,5 @@
 :host {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
+    position: relative;
 }
 
 #navigation {
@@ -77,6 +75,10 @@
     #sub-panel {
         height: auto;
         padding: 10px 1em;
+
+        .search > .search-input {
+            width: 160px;
+        }
     }
 
     .breadcrumbs {

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

@@ -12,62 +12,60 @@
     [contentTypeNavigationItems]="navigationContentTypes"
 />
 
-<div class="container">
-    @if (isLoading) {
-        <mat-spinner />
-    } @else {
-        @switch (currentLayout) {
-            @case ('error-view') {
-                <app-playlist-error-view
-                    [title]="this.errorViewInfo.title | translate"
-                    [description]="this.errorViewInfo.message | translate"
+@if (isLoading) {
+    <mat-spinner />
+} @else {
+    @switch (currentLayout) {
+        @case ('error-view') {
+            <app-playlist-error-view
+                [title]="this.errorViewInfo.title | translate"
+                [description]="this.errorViewInfo.message | translate"
+            />
+        }
+        @case ('category') {
+            <app-category-view
+                (categoryClicked)="categoryClicked($event)"
+                [items]="items"
+            />
+        }
+        @case ('category_content') {
+            @if (selectedContentType === 'itv') {
+                <app-live-stream-layout
+                    [channels]="items"
+                    [player]="player"
+                    [streamUrl]="streamUrl"
+                    [epgItems]="epgItems"
+                    (itemClicked)="itemClicked($event)"
                 />
-            }
-            @case ('category') {
-                <app-category-view
-                    (categoryClicked)="categoryClicked($event)"
-                    [items]="items"
-                />
-            }
-            @case ('category_content') {
-                @if (selectedContentType === 'itv') {
-                    <app-live-stream-layout
-                        [channels]="items"
-                        [player]="player"
-                        [streamUrl]="streamUrl"
-                        [epgItems]="epgItems"
-                        (itemClicked)="itemClicked($event)"
-                    />
-                } @else {
-                    <app-category-content-view
-                        [items]="items"
-                        (itemClicked)="itemClicked($event)"
-                    />
-                }
-            }
-            @case ('vod-details') {
-                <app-vod-details
-                    [item]="vodDetails"
-                    (playClicked)="playVod($event)"
-                    (addToFavoritesClicked)="addToFavorites($event)"
-                    (removeFromFavoritesClicked)="removeFromFavorites($event)"
-                />
-            }
-            @case ('serie-details') {
-                <app-serial-details
-                    [item]="vodDetails"
-                    [seriesId]="contentId"
-                    (playClicked)="playEpisode($event)"
-                    (addToFavoritesClicked)="addToFavorites($event)"
-                    (removeFromFavoritesClicked)="removeFromFavorites($event)"
-                />
-            }
-            @case ('favorites') {
+            } @else {
                 <app-category-content-view
-                    [items]="favorites$ | async"
+                    [items]="items"
                     (itemClicked)="itemClicked($event)"
                 />
             }
         }
+        @case ('vod-details') {
+            <app-vod-details
+                [item]="vodDetails"
+                (playClicked)="playVod($event)"
+                (addToFavoritesClicked)="addToFavorites($event)"
+                (removeFromFavoritesClicked)="removeFromFavorites($event)"
+            />
+        }
+        @case ('serie-details') {
+            <app-serial-details
+                [item]="vodDetails"
+                [seriesId]="contentId"
+                (playClicked)="playEpisode($event)"
+                (addToFavoritesClicked)="addToFavorites($event)"
+                (removeFromFavoritesClicked)="removeFromFavorites($event)"
+            />
+        }
+        @case ('favorites') {
+            <app-category-content-view
+                [items]="favorites$ | async"
+                (itemClicked)="itemClicked($event)"
+            />
+        }
     }
-</div>
+}

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

@@ -1,4 +1,12 @@
-.container {
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    justify-content: flex-start;
+}
+
+.xtream-container {
     height: calc(100vh - 140px);
     overflow-y: auto;
     display: flex;
@@ -7,4 +15,5 @@
 
 mat-spinner {
     margin-top: 10px;
+    align-self: center;
 }

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

@@ -225,18 +225,26 @@ export class XtreamMainContainerComponent implements OnInit {
     }
 
     handleResponse(response: XtreamResponse) {
-        if ((response.payload as any)?.user_info?.status === 'Expired') {
+        if (!response.payload) {
             this.errorViewInfo = {
-                title: 'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.TITLE',
-                message: 'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.DESCRIPTION',
-            };
-            this.currentLayout = 'error-view';
-        } else if ((response.payload as any)?.user_info?.auth === 0) {
-            this.errorViewInfo = {
-                title: 'PORTALS.ERROR_VIEW.UNAUTHORIZED.TITLE',
-                message: 'PORTALS.ERROR_VIEW.UNAUTHORIZED.DESCRIPTION',
+                title: 'PORTALS.ERROR_VIEW.UNKNOWN_ERROR.TITLE',
+                message: 'PORTALS.ERROR_VIEW.UNKNOWN_ERROR.DESCRIPTION',
             };
             this.currentLayout = 'error-view';
+        } else {
+            if ((response.payload as any)?.user_info?.status === 'Expired') {
+                this.errorViewInfo = {
+                    title: 'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.TITLE',
+                    message: 'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.DESCRIPTION',
+                };
+                this.currentLayout = 'error-view';
+            } else if ((response.payload as any)?.user_info?.auth === 0) {
+                this.errorViewInfo = {
+                    title: 'PORTALS.ERROR_VIEW.UNAUTHORIZED.TITLE',
+                    message: 'PORTALS.ERROR_VIEW.UNAUTHORIZED.DESCRIPTION',
+                };
+                this.currentLayout = 'error-view';
+            }
         }
 
         switch (response.action) {