mirror of https://github.com/Ombi-app/Ombi
tidusjar
3 years ago
parent
1e199b477e
commit
0345fa3a6d
@ -0,0 +1,20 @@
|
||||
<div class="right">
|
||||
<mat-button-toggle-group name="discoverMode">
|
||||
<mat-button-toggle ngDefaultControl (click)="switchDiscoverMode(DiscoverOption.Combined)" [(ngModel)]="discoverOptions" value="{{DiscoverOption.Combined}}">{{'Discovery.Combined' | translate}}</mat-button-toggle>
|
||||
<mat-button-toggle ngDefaultControl (click)="switchDiscoverMode(DiscoverOption.Movie)" [(ngModel)]="discoverOptions" value="{{DiscoverOption.Movie}}">{{'Discovery.Movies' | translate}}</mat-button-toggle>
|
||||
<mat-button-toggle ngDefaultControl (click)="switchDiscoverMode(DiscoverOption.Tv)" [(ngModel)]="discoverOptions" value="{{DiscoverOption.Tv}}">{{'Discovery.Tv' | translate}}</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
|
||||
<p-carousel *ngIf="!loadingFlag" [numVisible]="10" [numScroll]="10" [page]="0" [value]="discoverResults" [responsiveOptions]="responsiveOptions">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
<div *ngIf="loadingFlag">
|
||||
<p-carousel [numVisible]="10" [numScroll]="10" [page]="0" [value]="[0,1,2,3,4,5,6,7,8,9,10,11,12,13]" [responsiveOptions]="responsiveOptions">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<p-skeleton *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
</div>
|
||||
@ -0,0 +1,218 @@
|
||||
import { Component, OnInit, Input } from "@angular/core";
|
||||
import { DiscoverOption, IDiscoverCardResult } from "../../interfaces";
|
||||
import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
|
||||
import { SearchV2Service } from "../../../services";
|
||||
import { StorageService } from "../../../shared/storage/storage-service";
|
||||
|
||||
export enum DiscoverType {
|
||||
Upcoming,
|
||||
Trending,
|
||||
Popular,
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: "carousel-list",
|
||||
templateUrl: "./carousel-list.component.html",
|
||||
styleUrls: ["./carousel-list.component.scss"],
|
||||
})
|
||||
export class CarouselListComponent implements OnInit {
|
||||
|
||||
@Input() public discoverType: DiscoverType;
|
||||
|
||||
public DiscoverOption = DiscoverOption;
|
||||
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
|
||||
public discoverResults: IDiscoverCardResult[] = [];
|
||||
public movies: ISearchMovieResult[] = [];
|
||||
public tvShows: ISearchTvResult[] = [];
|
||||
public responsiveOptions: any;
|
||||
public RequestType = RequestType;
|
||||
public loadingFlag: boolean;
|
||||
|
||||
get mediaTypeStorageKey() {
|
||||
return "DiscoverOptions" + this.discoverType.toString();
|
||||
};
|
||||
private amountToLoad = 14;
|
||||
|
||||
constructor(private searchService: SearchV2Service,
|
||||
private storageService: StorageService) {
|
||||
this.responsiveOptions = [
|
||||
{
|
||||
breakpoint: '2559px',
|
||||
numVisible: 7,
|
||||
numScroll: 7
|
||||
},
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 4,
|
||||
numScroll: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
public async ngOnInit() {
|
||||
const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
|
||||
if (localDiscoverOptions) {
|
||||
this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
|
||||
}
|
||||
|
||||
var moviePromise: Promise<void>;
|
||||
var tvPromise: Promise<void>;
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
moviePromise = this.loadMovies();
|
||||
tvPromise = this.loadTv();
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
moviePromise = this.loadMovies();
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
tvPromise = this.loadTv();
|
||||
break;
|
||||
}
|
||||
|
||||
await moviePromise;
|
||||
await tvPromise;
|
||||
|
||||
this.createInitialModel();
|
||||
}
|
||||
|
||||
public async switchDiscoverMode(newMode: DiscoverOption) {
|
||||
this.loading();
|
||||
this.clear();
|
||||
this.discoverOptions = newMode;
|
||||
this.storageService.save(this.mediaTypeStorageKey, newMode.toString());
|
||||
await this.ngOnInit();
|
||||
this.finishLoading();
|
||||
}
|
||||
|
||||
private async loadMovies() {
|
||||
switch (this.discoverType) {
|
||||
case DiscoverType.Popular:
|
||||
this.movies = await this.searchService.popularMoviesByPage(0, this.amountToLoad);
|
||||
break;
|
||||
case DiscoverType.Trending:
|
||||
this.movies = await this.searchService.nowPlayingMoviesByPage(0, this.amountToLoad);
|
||||
break;
|
||||
case DiscoverType.Upcoming:
|
||||
this.movies = await this.searchService.upcomingMoviesByPage(0, this.amountToLoad);
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
private async loadTv() {
|
||||
switch (this.discoverType) {
|
||||
case DiscoverType.Popular:
|
||||
this.tvShows = await this.searchService.popularTvByPage(0, this.amountToLoad);
|
||||
break;
|
||||
case DiscoverType.Trending:
|
||||
this.tvShows = await this.searchService.trendingTvByPage(0, this.amountToLoad);
|
||||
break;
|
||||
case DiscoverType.Upcoming:
|
||||
this.tvShows = await this.searchService.anticipatedTvByPage(0, this.amountToLoad);
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
private createInitialModel() {
|
||||
this.clear();
|
||||
this.createModel();
|
||||
}
|
||||
|
||||
private createModel() {
|
||||
const tempResults = <IDiscoverCardResult[]>[];
|
||||
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
tempResults.push(...this.mapMovieModel());
|
||||
tempResults.push(...this.mapTvModel());
|
||||
this.shuffle(tempResults);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
tempResults.push(...this.mapMovieModel());
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
tempResults.push(...this.mapTvModel());
|
||||
break;
|
||||
}
|
||||
|
||||
this.discoverResults.push(...tempResults);
|
||||
|
||||
this.finishLoading();
|
||||
}
|
||||
|
||||
private mapMovieModel(): IDiscoverCardResult[] {
|
||||
const tempResults = <IDiscoverCardResult[]>[];
|
||||
this.movies.forEach(m => {
|
||||
tempResults.push({
|
||||
available: m.available,
|
||||
posterPath: m.posterPath ? `https://image.tmdb.org/t/p/w500/${m.posterPath}` : "../../../images/default_movie_poster.png",
|
||||
requested: m.requested,
|
||||
title: m.title,
|
||||
type: RequestType.movie,
|
||||
id: m.id,
|
||||
url: `http://www.imdb.com/title/${m.imdbId}/`,
|
||||
rating: m.voteAverage,
|
||||
overview: m.overview,
|
||||
approved: m.approved,
|
||||
imdbid: m.imdbId,
|
||||
denied: false,
|
||||
background: m.backdropPath
|
||||
});
|
||||
});
|
||||
return tempResults;
|
||||
}
|
||||
|
||||
private mapTvModel(): IDiscoverCardResult[] {
|
||||
const tempResults = <IDiscoverCardResult[]>[];
|
||||
this.tvShows.forEach(m => {
|
||||
tempResults.push({
|
||||
available: m.available,
|
||||
posterPath: "../../../images/default_tv_poster.png",
|
||||
requested: m.requested,
|
||||
title: m.title,
|
||||
type: RequestType.tvShow,
|
||||
id: m.id,
|
||||
url: undefined,
|
||||
rating: +m.rating,
|
||||
overview: m.overview,
|
||||
approved: m.approved || m.partlyAvailable,
|
||||
imdbid: m.imdbId,
|
||||
denied: false,
|
||||
background: m.background
|
||||
});
|
||||
});
|
||||
return tempResults;
|
||||
}
|
||||
|
||||
private clear() {
|
||||
this.discoverResults = [];
|
||||
}
|
||||
|
||||
private shuffle(discover: IDiscoverCardResult[]): IDiscoverCardResult[] {
|
||||
for (let i = discover.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[discover[i], discover[j]] = [discover[j], discover[i]];
|
||||
}
|
||||
return discover;
|
||||
}
|
||||
|
||||
private loading() {
|
||||
this.loadingFlag = true;
|
||||
}
|
||||
|
||||
private finishLoading() {
|
||||
this.loadingFlag = false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
.section {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
::ng-deep .p-carousel-indicators {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<p-carousel *ngIf="result" [numVisible]="10" [numScroll]="10" [page]="0" [value]="result" [responsiveOptions]="responsiveOptions">
|
||||
<ng-template let-result pTemplate="item">
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
@ -1,46 +0,0 @@
|
||||
import { Component, OnInit, Input } from "@angular/core";
|
||||
import { IDiscoverCardResult } from "../../interfaces";
|
||||
import { RequestType} from "../../../interfaces";
|
||||
import { SearchV2Service } from "../../../services";
|
||||
import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
|
||||
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
|
||||
|
||||
@Component({
|
||||
selector: "movie-list",
|
||||
templateUrl: "./movie-list.component.html",
|
||||
styleUrls: ["./movie-list.component.scss"],
|
||||
})
|
||||
export class MovieListComponent {
|
||||
|
||||
public RequestType = RequestType;
|
||||
@Input() public result: IDiscoverCardResult[];
|
||||
|
||||
public responsiveOptions: any;
|
||||
|
||||
constructor() {
|
||||
this.responsiveOptions = [
|
||||
{
|
||||
breakpoint: '2559px',
|
||||
numVisible: 7,
|
||||
numScroll: 7
|
||||
},
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 4,
|
||||
numScroll: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue