From 55e160da76e7b346f352de20eca0405c1d35efcd Mon Sep 17 00:00:00 2001 From: 4gray Date: Mon, 24 Jun 2024 16:25:29 +0200 Subject: [PATCH] refactor: style and code improvements --- .../sidebar/sidebar.component.html | 9 +- src/app/services/pwa.service.ts | 18 +++- .../stalker-main-container.component.scss | 8 ++ .../category-content-view.component.html | 21 ++-- .../category-content-view.component.scss | 4 +- .../category-content-view.component.ts | 2 + .../category-view.component.scss | 6 +- .../category-view/category-view.component.ts | 33 +++--- .../navigation-bar.component.scss | 8 +- .../xtream-main-container.component.html | 102 +++++++++--------- .../xtream-main-container.component.scss | 11 +- .../xtream/xtream-main-container.component.ts | 26 +++-- 12 files changed, 147 insertions(+), 101 deletions(-) diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.html b/src/app/player/components/video-player/sidebar/sidebar.component.html index 9f654df06..603752d4b 100644 --- a/src/app/player/components/video-player/sidebar/sidebar.component.html +++ b/src/app/player/components/video-player/sidebar/sidebar.component.html @@ -5,14 +5,11 @@
- + @if (sidebarView === 'CHANNELS') { {{ playlistTitle$ | async }} - - + } @else { {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }} - + }
{{ diff --git a/src/app/services/pwa.service.ts b/src/app/services/pwa.service.ts index 8bb87ee1b..209b3759d 100644 --- a/src/app/services/pwa.service.ts +++ b/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, + }); + } }); } diff --git a/src/app/stalker/stalker-main-container.component.scss b/src/app/stalker/stalker-main-container.component.scss index 45dace100..18123a03f 100644 --- a/src/app/stalker/stalker-main-container.component.scss +++ b/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; diff --git a/src/app/xtream/category-content-view/category-content-view.component.html b/src/app/xtream/category-content-view/category-content-view.component.html index 6f5509c1f..ef3ebcd3b 100644 --- a/src/app/xtream/category-content-view/category-content-view.component.html +++ b/src/app/xtream/category-content-view/category-content-view.component.html @@ -1,4 +1,4 @@ - +@if (items?.length > 0) {
star{{ item.rating || item.rating_imdb }} @@ -44,10 +44,13 @@
- - -
- list -
{{ 'PORTALS.EMPTY_LIST_VIEW.EMPTY_CATEGORY' | translate }}
-
- +} @else { + +} diff --git a/src/app/xtream/category-content-view/category-content-view.component.scss b/src/app/xtream/category-content-view/category-content-view.component.scss index 7c8b37127..6fdbca7b3 100644 --- a/src/app/xtream/category-content-view/category-content-view.component.scss +++ b/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 { diff --git a/src/app/xtream/category-content-view/category-content-view.component.ts b/src/app/xtream/category-content-view/category-content-view.component.ts index 9212bdeac..ad365fbc0 100644 --- a/src/app/xtream/category-content-view/category-content-view.component.ts +++ b/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, ], }) diff --git a/src/app/xtream/category-view/category-view.component.scss b/src/app/xtream/category-view/category-view.component.scss index 3adc73240..ac9e78cff 100644 --- a/src/app/xtream/category-view/category-view.component.scss +++ b/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; diff --git a/src/app/xtream/category-view/category-view.component.ts b/src/app/xtream/category-view/category-view.component.ts index 9c4e098bd..46beec1d2 100644 --- a/src/app/xtream/category-view/category-view.component.ts +++ b/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: ` - + @if (items?.length > 0) {
search -
Nothing found, try to change you search request
+
+ {{ + 'PORTALS.EMPTY_LIST_VIEW.NO_SEARCH_RESULTS' + | translate + }} +
- - -
- warning -
- Oops, no content here, please change the category or content - type -
-
- + } @else { + + } `, styleUrl: './category-view.component.scss', imports: [ + PlaylistErrorViewComponent, FilterPipe, FormsModule, MatCardModule, MatIconModule, NgFor, NgIf, + TranslateModule, ], }) export class CategoryViewComponent { diff --git a/src/app/xtream/navigation-bar/navigation-bar.component.scss b/src/app/xtream/navigation-bar/navigation-bar.component.scss index 148f70ee0..a14245451 100644 --- a/src/app/xtream/navigation-bar/navigation-bar.component.scss +++ b/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 { diff --git a/src/app/xtream/xtream-main-container.component.html b/src/app/xtream/xtream-main-container.component.html index b1cd40ce0..57315f100 100644 --- a/src/app/xtream/xtream-main-container.component.html +++ b/src/app/xtream/xtream-main-container.component.html @@ -12,62 +12,60 @@ [contentTypeNavigationItems]="navigationContentTypes" /> -
- @if (isLoading) { - - } @else { - @switch (currentLayout) { - @case ('error-view') { - +} @else { + @switch (currentLayout) { + @case ('error-view') { + + } + @case ('category') { + + } + @case ('category_content') { + @if (selectedContentType === 'itv') { + - } - @case ('category') { - - } - @case ('category_content') { - @if (selectedContentType === 'itv') { - - } @else { - - } - } - @case ('vod-details') { - - } - @case ('serie-details') { - - } - @case ('favorites') { + } @else { } } + @case ('vod-details') { + + } + @case ('serie-details') { + + } + @case ('favorites') { + + } } -
+} diff --git a/src/app/xtream/xtream-main-container.component.scss b/src/app/xtream/xtream-main-container.component.scss index 9c3468de1..ee7cfa7e5 100644 --- a/src/app/xtream/xtream-main-container.component.scss +++ b/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; } diff --git a/src/app/xtream/xtream-main-container.component.ts b/src/app/xtream/xtream-main-container.component.ts index 3d8b46b1c..b3707deed 100644 --- a/src/app/xtream/xtream-main-container.component.ts +++ b/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) {