From 19f49519840af00492153a04a2dc2cd8043f1dec Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 16 Dec 2023 18:59:13 +0100 Subject: [PATCH] feat(xtream): add expired-account view --- .../playlist-error-view.component.html | 21 +++++ .../playlist-error-view.component.scss | 22 +++++ .../playlist-error-view.component.ts | 53 ++++++++++++ .../vod-details/vod-details.component.html | 4 +- .../xtream-main-container.component.html | 86 +++++++++++-------- .../xtream/xtream-main-container.component.ts | 18 +++- src/assets/i18n/en.json | 11 ++- src/assets/images/broken-tv.svg | 1 + 8 files changed, 171 insertions(+), 45 deletions(-) create mode 100644 src/app/xtream/playlist-error-view/playlist-error-view.component.html create mode 100644 src/app/xtream/playlist-error-view/playlist-error-view.component.scss create mode 100644 src/app/xtream/playlist-error-view/playlist-error-view.component.ts create mode 100644 src/assets/images/broken-tv.svg diff --git a/src/app/xtream/playlist-error-view/playlist-error-view.component.html b/src/app/xtream/playlist-error-view/playlist-error-view.component.html new file mode 100644 index 000000000..91ff3a778 --- /dev/null +++ b/src/app/xtream/playlist-error-view/playlist-error-view.component.html @@ -0,0 +1,21 @@ +
+ +
+

{{ title }}

+ {{ description }} +
+
+ + + +
+
diff --git a/src/app/xtream/playlist-error-view/playlist-error-view.component.scss b/src/app/xtream/playlist-error-view/playlist-error-view.component.scss new file mode 100644 index 000000000..864b9b81f --- /dev/null +++ b/src/app/xtream/playlist-error-view/playlist-error-view.component.scss @@ -0,0 +1,22 @@ +.expired-account { + display: flex; + flex-direction: column; + padding: 10px; + align-items: center; + gap: 10px; + text-align: center; + + img { + filter: invert(80%); + } +} + +::ng-deep { + .dark-theme { + .expired-account { + img { + filter: invert(10%) !important; + } + } + } +} diff --git a/src/app/xtream/playlist-error-view/playlist-error-view.component.ts b/src/app/xtream/playlist-error-view/playlist-error-view.component.ts new file mode 100644 index 000000000..c706a3740 --- /dev/null +++ b/src/app/xtream/playlist-error-view/playlist-error-view.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, inject } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialog } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; +import { Router, RouterLink } from '@angular/router'; +import { Store } from '@ngrx/store'; +import { TranslateModule, TranslateService } from '@ngx-translate/core'; +import { PlaylistInfoComponent } from '../../home/recent-playlists/playlist-info/playlist-info.component'; +import { DialogService } from '../../services/dialog.service'; +import * as PlaylistActions from '../../state/actions'; +import { selectCurrentPlaylist } from '../../state/selectors'; + +@Component({ + standalone: true, + selector: 'app-playlist-error-view', + templateUrl: './playlist-error-view.component.html', + styleUrls: ['./playlist-error-view.component.scss'], + imports: [MatButtonModule, MatIconModule, RouterLink, TranslateModule], +}) +export class PlaylistErrorViewComponent { + dialog = inject(MatDialog); + dialogService = inject(DialogService); + router = inject(Router); + store = inject(Store); + translate = inject(TranslateService); + + currentPlaylist = this.store.selectSignal(selectCurrentPlaylist); + + @Input() title: string; + @Input() description: string; + + openPlaylistDetails() { + this.dialog.open(PlaylistInfoComponent, { + data: this.currentPlaylist(), + }); + } + + removeClicked(): void { + this.dialogService.openConfirmDialog({ + title: this.translate.instant('HOME.PLAYLISTS.REMOVE_DIALOG.TITLE'), + message: this.translate.instant( + 'HOME.PLAYLISTS.REMOVE_DIALOG.MESSAGE' + ), + onConfirm: (): void => + this.removePlaylist(this.currentPlaylist()._id), + }); + } + + removePlaylist(playlistId: string): void { + this.store.dispatch(PlaylistActions.removePlaylist({ playlistId })); + this.router.navigate(['/']); + } +} diff --git a/src/app/xtream/vod-details/vod-details.component.html b/src/app/xtream/vod-details/vod-details.component.html index 24e851bf0..5b546eefd 100644 --- a/src/app/xtream/vod-details/vod-details.component.html +++ b/src/app/xtream/vod-details/vod-details.component.html @@ -1,9 +1,9 @@
- + @if (isLoading) { - - - - - - - - - - - - + } @else { + @switch (currentLayout) { + @case ('expired-account') { + + } + @case ('category') { + + } + @case ('category_content') { + + } + @case ('vod-details') { + + } + @case ('serie-details') { + + } + @case ('favorites') { + + } + } + }
diff --git a/src/app/xtream/xtream-main-container.component.ts b/src/app/xtream/xtream-main-container.component.ts index 489369e53..6539e1c21 100644 --- a/src/app/xtream/xtream-main-container.component.ts +++ b/src/app/xtream/xtream-main-container.component.ts @@ -1,6 +1,5 @@ import { AsyncPipe, - JsonPipe, KeyValuePipe, NgFor, NgIf, @@ -45,16 +44,20 @@ import { VodDetailsComponent } from './vod-details/vod-details.component'; import { toSignal } from '@angular/core/rxjs-interop'; import { MatDialog } from '@angular/material/dialog'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { Router, RouterLink } from '@angular/router'; import { StorageMap } from '@ngx-pwa/local-storage'; +import { TranslateModule, TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { XtreamSerieDetails, XtreamSerieEpisode, } from '../../../shared/xtream-serie-details.interface'; +import { DialogService } from '../services/dialog.service'; import { PlaylistsService } from '../services/playlists.service'; import { Settings, VideoPlayer } from '../settings/settings.interface'; import { ExternalPlayerInfoDialogComponent } from '../shared/components/external-player-info-dialog/external-player-info-dialog.component'; 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'; @@ -84,7 +87,8 @@ type LayoutView = | 'vod-details' | 'player' | 'serie-details' - | 'favorites'; + | 'favorites' + | 'expired-account'; @Component({ selector: 'app-xtream-main-container', @@ -96,7 +100,6 @@ type LayoutView = MatButtonToggleModule, NgFor, NgIf, - JsonPipe, CategoryViewComponent, NgSwitch, MatButtonModule, @@ -110,17 +113,23 @@ type LayoutView = MatProgressSpinnerModule, AsyncPipe, ExternalPlayerInfoDialogComponent, + RouterLink, + PlaylistErrorViewComponent, + TranslateModule, ], }) export class XtreamMainContainerComponent implements OnInit { dataService = inject(DataService); dialog = inject(MatDialog); + dialogService = inject(DialogService); ngZone = inject(NgZone); playlistService = inject(PlaylistsService); portalStore = inject(PortalStore); + router = inject(Router); snackBar = inject(MatSnackBar); storage = inject(StorageMap); store = inject(Store); + translate = inject(TranslateService); currentPlaylist = this.store.selectSignal(selectCurrentPlaylist); navigationContentTypes: ContentTypeNavigationItem[] = [ { @@ -192,6 +201,9 @@ export class XtreamMainContainerComponent implements OnInit { } handleResponse(response: XtreamResponse) { + if ((response.payload as any)?.user_info?.status === 'Expired') { + this.currentLayout = 'expired-account'; + } switch (response.action) { case XtreamCodeActions.GetSeriesCategories: case XtreamCodeActions.GetVodCategories: diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 95ddb8f62..23c33579b 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -152,7 +152,7 @@ "UNNAMED_CHANNEL": "Unnamed Channel", "FAVORITES": "Favorites", "NO_FAVORITES": "No favorites yet", - "USE_STAR_TO_FAVORITE": "Please use the 'star' icon to add channels to this list.", + "USE_STAR_TO_FAVORITE": "Please use 'star' icon to add channels to your favorites.", "REMOVE_FAVORITE": "Remove from favorites", "FAVORITES_UPDATED": "Favorites were updated!" }, @@ -234,6 +234,13 @@ "ALL_CATEGORIES": "All categories", "MY_FAVORITES": "My favorites", "ADD_TO_FAVORITES": "Add to favorites", - "REMOVE_FROM_FAVORITES": "Remove from 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.", + "PLAYLIST_SETTINGS": "Playlist Settings", + "HOME": "Home", + "DELETE": "Delete" + } } } diff --git a/src/assets/images/broken-tv.svg b/src/assets/images/broken-tv.svg new file mode 100644 index 000000000..0d37bd66f --- /dev/null +++ b/src/assets/images/broken-tv.svg @@ -0,0 +1 @@ + \ No newline at end of file