feat(portals): add more specific error views

src/app/services/pwa.service.ts

@@ -4,7 +4,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { SwUpdate } from '@angular/service-worker';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
-import { catchError, throwError } from 'rxjs';
+import { catchError, EMPTY, throwError } from 'rxjs';
 import {
     ERROR,
     PLAYLIST_PARSE_BY_URL,
@@ -172,6 +172,16 @@ export class PwaService extends DataService {
                 },
                 ...headers,
             })
+            .pipe(
+                catchError((response) => {
+                    window.postMessage({
+                        type: ERROR,
+                        status: response.error.status,
+                        message: response.error.message ?? 'Unknown error',
+                    });
+                    return EMPTY;
+                })
+            )
             .subscribe((response) => {
                 window.postMessage({
                     type: XTREAM_RESPONSE,

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

@@ -49,9 +49,9 @@
     }
     @case ('not-available') {
         <app-playlist-error-view
-            [title]="'PORTALS.ACCOUNT_EXPIRED_VIEW.TITLE' | translate"
+            [title]="'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.TITLE' | translate"
             [description]="
-                'PORTALS.ACCOUNT_EXPIRED_VIEW.DESCRIPTION' | translate
+                'PORTALS.ERROR_VIEW.ACCOUNT_EXPIRED.DESCRIPTION' | translate
             "
         />
     }

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

src/assets/i18n/en.json

@@ -235,9 +235,19 @@
         "MY_FAVORITES": "My favorites",
         "ADD_TO_FAVORITES": "Add to favorites",
         "REMOVE_FROM_FAVORITES": "Remove from favorites",
-        "ACCOUNT_EXPIRED_VIEW": {
-            "TITLE": "Account expired",
-            "DESCRIPTION": "This account has been expired. Please check the credentials in playlist settings or remove it.",
+        "ERROR_VIEW": {
+            "ACCOUNT_EXPIRED": {
+                "TITLE": "Account expired",
+                "DESCRIPTION": "This account has been expired. Please check the credentials in playlist settings or remove it."
+            },
+            "UNAUTHORIZED": {
+                "TITLE": "Unauthorized",
+                "DESCRIPTION": "Please check the credentials in playlist settings or remove it."
+            },
+            "NOT_FOUND": {
+                "TITLE": "Portal not found",
+                "DESCRIPTION": "Please check the credentials and portal url in playlist settings or remove it."
+            },
             "PLAYLIST_SETTINGS": "Playlist Settings",
             "HOME": "Home",
             "DELETE": "Delete"