feat(portals): add more specific error views

src/app/xtream/playlist-error-view/playlist-error-view.component.html

@@ -7,15 +7,15 @@
     <div>
         <button mat-stroked-button routerLink="/">
             <mat-icon>home</mat-icon>
-            {{ 'PORTALS.ACCOUNT_EXPIRED_VIEW.HOME' | translate }}
+            {{ 'PORTALS.ERROR_VIEW.HOME' | translate }}
         </button>
         <button mat-stroked-button (click)="openPlaylistDetails()">
             <mat-icon>settings</mat-icon>
-            {{ 'PORTALS.ACCOUNT_EXPIRED_VIEW.PLAYLIST_SETTINGS' | translate }}
+            {{ 'PORTALS.ERROR_VIEW.PLAYLIST_SETTINGS' | translate }}
         </button>
         <button mat-stroked-button color="warn" (click)="removeClicked()">
             <mat-icon>delete</mat-icon>
-            {{ 'PORTALS.ACCOUNT_EXPIRED_VIEW.DELETE' | translate }}
+            {{ 'PORTALS.ERROR_VIEW.DELETE' | translate }}
         </button>
     </div>
 </div>

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

@@ -1,6 +1,7 @@
 <app-navigation-bar
     [breadcrumbs]="breadcrumbs"
     [contentType]="selectedContentType"
+    [showCategories]="currentLayout !== 'error-view'"
     (breadcrumbClicked)="breadcrumbClicked($event)"
     (contentTypeChanged)="changeContentType($event)"
     (searchTextChanged)="setSearchPhrase($event)"
@@ -16,12 +17,10 @@
         <mat-spinner />
     } @else {
         @switch (currentLayout) {
-            @case ('expired-account') {
+            @case ('error-view') {
                 <app-playlist-error-view
-                    [title]="'PORTALS.ACCOUNT_EXPIRED_VIEW.TITLE' | translate"
-                    [description]="
-                        'PORTALS.ACCOUNT_EXPIRED_VIEW.DESCRIPTION' | translate
-                    "
+                    [title]="this.errorViewInfo.title | translate"
+                    [description]="this.errorViewInfo.message | translate"
                 />
             }
             @case ('category') {

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

@@ -1,6 +1,8 @@
 .container {
     height: calc(100vh - 140px);
     overflow-y: auto;
+    display: flex;
+    justify-content: center;
 }
 
 mat-spinner {

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

@@ -88,7 +88,7 @@ type LayoutView =
     | 'player'
     | 'serie-details'
     | 'favorites'
-    | 'expired-account';
+    | 'error-view';
 
 @Component({
     selector: 'app-xtream-main-container',
@@ -159,6 +159,7 @@ export class XtreamMainContainerComponent implements OnInit {
     isLoading = true;
     searchPhrase = this.portalStore.searchPhrase();
     contentId: number;
+    errorViewInfo = { title: '', message: '' };
 
     commandsList = [
         new IpcCommand(XTREAM_RESPONSE, (response: XtreamResponse) =>
@@ -202,8 +203,19 @@ export class XtreamMainContainerComponent implements OnInit {
 
     handleResponse(response: XtreamResponse) {
         if ((response.payload as any)?.user_info?.status === 'Expired') {
-            this.currentLayout = 'expired-account';
+            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) {
             case XtreamCodeActions.GetSeriesCategories:
             case XtreamCodeActions.GetVodCategories:
@@ -341,6 +353,20 @@ export class XtreamMainContainerComponent implements OnInit {
     }
 
     showErrorAsNotification(response: { message: string; status: number }) {
+        if ('status' in response && response.status === 401) {
+            this.errorViewInfo = {
+                title: 'PORTALS.ERROR_VIEW.UNAUTHORIZED.TITLE',
+                message: 'PORTALS.ERROR_VIEW.UNAUTHORIZED.DESCRIPTION',
+            };
+            this.currentLayout = 'error-view';
+        } else if ('status' in response && response.status === 404) {
+            this.errorViewInfo = {
+                title: 'PORTALS.ERROR_VIEW.NOT_FOUND.TITLE',
+                message: 'PORTALS.ERROR_VIEW.NOT_FOUND.DESCRIPTION',
+            };
+            this.currentLayout = 'error-view';
+        }
+
         this.snackBar.open(
             `Error: ${response?.message ?? 'Something went wrong'} (Status: ${
                 response?.status ?? 0