feat(xtream): add expired-account view

This commit is contained in:
4gray committed 2023-12-16 18:59:13 +01:00
1 parent eb4eb6021e
commit 19f4951984
8 files changed
+171 -45

No files matched your search

@@ -0,0 +1,21 @@
<div class="expired-account">
<img src="./assets/images/broken-tv.svg" />
<div>
<h3>{{ title }}</h3>
{{ description }}
</div>
<div>
<button mat-stroked-button routerLink="/">
<mat-icon>home</mat-icon>
{{ 'PORTALS.ACCOUNT_EXPIRED_VIEW.HOME' | translate }}
</button>
<button mat-stroked-button (click)="openPlaylistDetails()">
<mat-icon>settings</mat-icon>
{{ 'PORTALS.ACCOUNT_EXPIRED_VIEW.PLAYLIST_SETTINGS' | translate }}
</button>
<button mat-stroked-button color="warn" (click)="removeClicked()">
<mat-icon>delete</mat-icon>
{{ 'PORTALS.ACCOUNT_EXPIRED_VIEW.DELETE' | translate }}
</button>
</div>
</div>
@@ -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;
}
}
}
}
@@ -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(['/']);
}
}
@@ -1,9 +1,9 @@
<div
class="container"
[style.background]="
item.info?.backdrop_path && item.info.backdrop_path.length > 0
item?.info?.backdrop_path && item?.info?.backdrop_path.length > 0
? 'linear-gradient(to top, rgba(29,29,29,1) 0%, rgba(0,0,0,0.5) 100%), url(' +
item.info.backdrop_path[0] +
item?.info?.backdrop_path[0] +
') repeat-x'
: 'none'
"
@@ -12,43 +12,53 @@
/>
<div class="container">
<ng-container *ngIf="isLoading; else contentLoaded">
@if (isLoading) {
<mat-spinner />
</ng-container>
<ng-template #contentLoaded>
<app-category-view
*ngIf="currentLayout === 'category'"
(categoryClicked)="categoryClicked($event)"
[items]="items"
/>
<app-category-content-view
*ngIf="currentLayout === 'category_content'"
[items]="items"
(itemClicked)="itemClicked($event)"
/>
<app-vod-details
*ngIf="currentLayout === 'vod-details'"
[item]="vodDetails"
(playClicked)="playVod($event)"
(addToFavoritesClicked)="addToFavorites($event)"
(removeFromFavoritesClicked)="removeFromFavorites($event)"
/>
<app-serial-details
*ngIf="currentLayout === 'serie-details'"
[item]="vodDetails"
[seriesId]="contentId"
(playClicked)="playEpisode($event)"
(addToFavoritesClicked)="addToFavorites($event)"
(removeFromFavoritesClicked)="removeFromFavorites($event)"
/>
<app-category-content-view
*ngIf="currentLayout === 'favorites'"
[items]="favorites$ | async"
(itemClicked)="itemClicked($event)"
/>
</ng-template>
} @else {
@switch (currentLayout) {
@case ('expired-account') {
<app-playlist-error-view
[title]="'PORTALS.ACCOUNT_EXPIRED_VIEW.TITLE' | translate"
[description]="
'PORTALS.ACCOUNT_EXPIRED_VIEW.DESCRIPTION' | translate
"
/>
}
@case ('category') {
<app-category-view
(categoryClicked)="categoryClicked($event)"
[items]="items"
/>
}
@case ('category_content') {
<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') {
<app-category-content-view
[items]="favorites$ | async"
(itemClicked)="itemClicked($event)"
/>
}
}
}
</div>
@@ -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:
+9 -2
View File
@@ -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"
}
}
}
+1
View File
@@ -0,0 +1 @@
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="350" viewBox="0, 0, 400,350"><g id="svgg"><path id="path0" d="M226.679 56.625 C 223.125 58.792,223.480 64.696,227.262 66.318 L 228.711 66.939 230.219 74.583 C 231.762 82.400,233.620 91.085,236.108 102.111 C 236.879 105.528,237.464 108.363,237.407 108.412 C 237.351 108.461,234.053 109.279,230.078 110.231 L 222.852 111.961 222.731 113.598 L 222.611 115.234 165.505 115.241 C 117.021 115.247,107.993 115.334,105.714 115.817 C 99.081 117.222,92.306 122.088,89.748 127.283 L 88.477 129.867 88.477 167.863 C 88.477 197.177,88.369 205.859,88.007 205.859 C 87.749 205.859,86.555 205.603,85.352 205.290 C 81.356 204.249,80.924 204.847,81.645 210.421 C 82.389 216.165,82.139 215.676,85.600 218.155 L 88.768 220.422 88.528 222.418 C 88.396 223.516,88.287 225.332,88.285 226.453 L 88.281 228.492 86.975 228.443 C 85.236 228.377,84.871 228.659,84.324 230.485 C 83.752 232.396,83.652 232.395,81.100 230.469 C 78.547 228.541,75.781 228.828,75.781 231.020 C 75.781 231.188,75.060 233.593,74.177 236.366 L 72.574 241.406 46.834 241.406 L 21.094 241.406 21.094 242.773 L 21.094 244.141 47.459 244.141 L 73.824 244.141 76.982 250.449 L 80.141 256.757 75.204 256.544 C 71.447 256.382,70.103 256.181,69.576 255.704 C 68.649 254.865,69.298 254.794,55.631 257.232 C 39.298 260.144,40.330 259.416,42.969 266.165 C 43.828 268.363,44.531 270.398,44.531 270.689 C 44.531 271.121,45.707 271.170,51.039 270.960 C 54.618 270.819,60.814 270.702,64.808 270.701 L 72.070 270.699 74.673 268.621 L 77.276 266.543 76.253 265.205 C 75.691 264.469,74.564 263.095,73.748 262.152 C 71.694 259.775,71.706 259.766,76.893 259.766 L 81.521 259.766 83.924 264.810 C 86.108 269.394,86.415 270.367,87.292 275.455 C 87.823 278.535,88.396 281.828,88.566 282.773 C 88.997 285.167,89.994 285.748,95.299 286.698 C 103.016 288.080,104.259 287.786,104.284 284.570 C 104.319 279.989,101.085 267.280,98.639 262.388 C 97.669 260.446,96.875 258.707,96.875 258.522 C 96.875 258.337,102.720 258.234,109.863 258.292 C 120.628 258.380,122.832 258.490,122.738 258.935 C 122.655 259.324,122.816 259.379,123.324 259.134 C 123.709 258.949,126.566 258.742,129.673 258.675 C 138.889 258.474,138.817 256.983,129.167 248.242 C 121.616 241.402,121.287 241.071,121.680 240.707 C 122.440 240.004,152.118 226.591,153.516 226.319 C 154.374 226.151,154.715 226.475,156.327 228.982 C 157.336 230.552,159.929 234.560,162.090 237.890 C 166.497 244.680,166.516 245.130,162.261 242.023 C 158.071 238.963,158.333 238.818,151.743 247.852 C 149.350 251.132,141.329 261.215,139.774 262.895 C 137.826 265.002,137.828 264.993,138.633 266.840 C 139.044 267.783,139.938 271.012,140.619 274.015 C 141.300 277.017,141.982 279.698,142.135 279.970 C 142.415 280.471,146.139 278.813,159.889 272.069 L 165.285 269.422 168.803 262.395 C 170.738 258.530,172.462 255.522,172.634 255.711 C 172.806 255.900,175.362 259.746,178.312 264.258 C 181.263 268.770,183.740 272.529,183.818 272.611 C 183.896 272.694,184.496 272.539,185.151 272.268 L 186.343 271.774 185.296 269.969 C 184.719 268.976,182.632 265.615,180.657 262.500 C 178.683 259.385,175.171 253.681,172.855 249.826 C 161.126 230.305,155.784 222.827,153.801 223.157 C 152.292 223.408,128.937 233.786,120.617 237.904 L 118.773 238.816 116.808 237.896 C 114.456 236.794,114.416 236.629,116.309 235.824 C 120.977 233.840,129.288 230.082,135.938 226.950 C 140.127 224.976,145.766 222.324,148.468 221.055 L 153.381 218.749 155.646 219.204 C 158.333 219.744,156.934 217.902,168.508 236.133 C 173.281 243.652,177.905 250.859,178.781 252.148 C 179.658 253.437,182.000 257.041,183.984 260.156 C 185.969 263.271,189.172 268.083,191.102 270.848 C 198.101 280.877,198.044 280.986,181.348 289.487 C 176.138 292.140,171.875 294.428,171.875 294.573 C 171.875 294.717,172.198 295.234,172.593 295.722 L 173.310 296.608 184.104 291.110 L 194.898 285.613 197.405 286.042 C 203.593 287.102,208.134 283.927,208.825 278.056 L 209.070 275.977 232.172 275.977 L 255.273 275.977 255.469 281.641 C 255.731 289.244,257.626 292.188,263.017 293.368 C 267.007 294.241,289.734 293.719,291.602 292.712 C 296.247 290.205,296.484 289.352,296.484 275.158 L 296.484 263.168 297.929 260.197 L 299.374 257.227 299.537 250.684 L 299.700 244.141 339.523 244.141 L 379.346 244.141 379.224 242.871 L 379.102 241.602 361.719 241.709 C 352.158 241.768,334.272 241.703,321.973 241.564 L 299.609 241.313 299.609 213.014 L 299.609 184.716 298.340 184.839 L 297.070 184.961 296.875 220.703 L 296.680 256.445 295.627 258.440 C 294.090 261.355,292.716 262.816,291.088 263.268 C 289.485 263.713,202.532 263.848,194.107 263.418 L 189.190 263.167 188.149 261.523 C 187.577 260.619,187.109 259.766,187.109 259.627 C 187.109 259.488,202.859 259.375,222.109 259.375 C 261.290 259.375,258.528 259.578,261.153 256.511 L 262.514 254.921 262.409 193.183 L 262.305 131.445 261.386 129.968 C 259.326 126.654,267.198 126.952,181.949 126.959 C 140.422 126.962,106.240 127.096,10Line truncated

After

Width:  |  Height:  |  Size: 35 KiB