mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 12:59:39 -07:00
Added the option to filter between movies and tv shows or combined on the discover page
This commit is contained in:
Jamie Rees
parent
46497b4603
commit
c663d6c4c0
6 changed files with 415 additions and 299 deletions
|
|
@ -1,25 +1,22 @@
|
|||
<div class="small-middle-container">
|
||||
|
||||
<div class="row justify-content-md-center top-spacing">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" (click)="popular()" [attr.color]="popularActive ? 'accent' : 'primary'"
|
||||
[ngClass]="popularActive ? 'mat-accent' : 'mat-primary'" mat-raised-button
|
||||
class="btn grow">{{'Discovery.PopularTab' | translate}}</button>
|
||||
<button type="button" (click)="trending()" [attr.color]="trendingActive ? 'accent' : 'primary'"
|
||||
[ngClass]="trendingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
|
||||
color="primary">{{'Discovery.TrendingTab' | translate}}</button>
|
||||
<button type="button" (click)="upcoming()" [attr.color]="upcomingActive ? 'accent' : 'primary'"
|
||||
[ngClass]="upcomingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
|
||||
color="primary">{{'Discovery.UpcomingTab' | translate}}</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Movie)" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Movie ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.Movies' | translate}}</button>
|
||||
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Combined)" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Combined ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow"
|
||||
color="primary">{{'Discovery.Combined' | translate}}</button>
|
||||
<button type="button" (click)="switchDiscoverMode(DiscoverOption.Tv)" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="discoverOptions === DiscoverOption.Tv ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.Tv' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="discoverResults" class="row full-height discoverResults"
|
||||
infiniteScroll
|
||||
[fromRoot]="false"
|
||||
[infiniteScrollDistance]="0.5"
|
||||
[infiniteScrollDisabled]="scrollDisabled"
|
||||
(scrolled)="onScroll()">
|
||||
<div class="row justify-content-md-center small-space">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" (click)="popular()" [attr.color]="popularActive ? 'accent' : 'primary'" [ngClass]="popularActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Discovery.PopularTab' | translate}}</button>
|
||||
<button type="button" (click)="trending()" [attr.color]="trendingActive ? 'accent' : 'primary'" [ngClass]="trendingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.TrendingTab' | translate}}</button>
|
||||
<button type="button" (click)="upcoming()" [attr.color]="upcomingActive ? 'accent' : 'primary'" [ngClass]="upcomingActive ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow" color="primary">{{'Discovery.UpcomingTab' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="discoverResults" class="row full-height discoverResults" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
|
||||
<div class="col-xl-2 col-lg-3 col-md-3 col-6 col-sm-4 small-padding" *ngFor="let result of discoverResults">
|
||||
<discover-card [result]="result"></discover-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.small-middle-container {
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
|
|
@ -17,7 +16,12 @@
|
|||
.loading-spinner {
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
#scroller {
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.small-space {
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, OnInit } from "@angular/core";
|
||||
import { SearchV2Service } from "../../../services";
|
||||
import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
|
||||
import { IDiscoverCardResult } from "../../interfaces";
|
||||
import { IDiscoverCardResult, DiscoverOption } from "../../interfaces";
|
||||
import { trigger, transition, style, animate } from "@angular/animations";
|
||||
|
||||
@Component({
|
||||
|
|
@ -22,6 +22,9 @@ export class DiscoverComponent implements OnInit {
|
|||
public movies: ISearchMovieResult[] = [];
|
||||
public tvShows: ISearchTvResult[] = [];
|
||||
|
||||
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
|
||||
public DiscoverOption = DiscoverOption;
|
||||
|
||||
public defaultTvPoster: string;
|
||||
|
||||
public popularActive: boolean = true;
|
||||
|
|
@ -39,8 +42,18 @@ export class DiscoverComponent implements OnInit {
|
|||
public async ngOnInit() {
|
||||
this.loading()
|
||||
this.scrollDisabled = true;
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.popularMoviesByPage(0,12);
|
||||
this.tvShows = await this.searchService.popularTvByPage(0,12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.popularMoviesByPage(0,12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.popularTvByPage(0,12);
|
||||
break;
|
||||
}
|
||||
|
||||
this.contentLoaded = 12;
|
||||
|
||||
|
|
@ -56,16 +69,46 @@ export class DiscoverComponent implements OnInit {
|
|||
this.isScrolling = true;
|
||||
this.loading();
|
||||
if (this.popularActive) {
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.popularMoviesByPage(this.contentLoaded, 12);
|
||||
this.tvShows = await this.searchService.popularTvByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.popularMoviesByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.popularTvByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.trendingActive) {
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.nowPlayingMoviesByPage(this.contentLoaded, 12);
|
||||
this.tvShows = await this.searchService.trendingTvByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.nowPlayingMoviesByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.trendingTvByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.upcomingActive) {
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.upcomingMoviesByPage(this.contentLoaded, 12);
|
||||
this.tvShows = await this.searchService.anticipatedTvByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.upcomingMoviesByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.anticipatedTvByPage(this.contentLoaded, 12);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.contentLoaded += 12;
|
||||
|
||||
|
|
@ -83,8 +126,18 @@ export class DiscoverComponent implements OnInit {
|
|||
this.popularActive = true;
|
||||
this.trendingActive = false;
|
||||
this.upcomingActive = false;
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.popularMoviesByPage(0, 12);
|
||||
this.tvShows = await this.searchService.popularTvByPage(0, 12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.popularMoviesByPage(0, 12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.popularTvByPage(0, 12);
|
||||
break;
|
||||
}
|
||||
|
||||
this.createModel();
|
||||
this.scrollDisabled = false;
|
||||
|
|
@ -100,8 +153,18 @@ export class DiscoverComponent implements OnInit {
|
|||
this.popularActive = false;
|
||||
this.trendingActive = true;
|
||||
this.upcomingActive = false;
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.nowPlayingMoviesByPage(0, 12);
|
||||
this.tvShows = await this.searchService.trendingTvByPage(0, 12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.nowPlayingMoviesByPage(0, 12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.trendingTvByPage(0, 12);
|
||||
break;
|
||||
}
|
||||
|
||||
this.createModel();
|
||||
this.scrollDisabled = false;
|
||||
|
|
@ -116,15 +179,55 @@ export class DiscoverComponent implements OnInit {
|
|||
this.popularActive = false;
|
||||
this.trendingActive = false;
|
||||
this.upcomingActive = true;
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
this.movies = await this.searchService.upcomingMoviesByPage(0, 12);
|
||||
this.tvShows = await this.searchService.anticipatedTvByPage(0, 12);
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
this.movies = await this.searchService.upcomingMoviesByPage(0, 12);
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
this.tvShows = await this.searchService.anticipatedTvByPage(0, 12);
|
||||
break;
|
||||
}
|
||||
|
||||
this.createModel();
|
||||
this.scrollDisabled = false;
|
||||
}
|
||||
|
||||
public async switchDiscoverMode(newMode: DiscoverOption) {
|
||||
this.loading();
|
||||
this.clear();
|
||||
this.discoverOptions = newMode;
|
||||
await this.ngOnInit();
|
||||
this.finishLoading();
|
||||
}
|
||||
|
||||
private createModel() {
|
||||
const tempResults = <IDiscoverCardResult[]>[];
|
||||
|
||||
switch (this.discoverOptions) {
|
||||
case DiscoverOption.Combined:
|
||||
tempResults.push(...this.mapMovieModel());
|
||||
tempResults.push(...this.mapTvModel());
|
||||
break;
|
||||
case DiscoverOption.Movie:
|
||||
tempResults.push(...this.mapMovieModel());
|
||||
break;
|
||||
case DiscoverOption.Tv:
|
||||
tempResults.push(...this.mapTvModel());
|
||||
break;
|
||||
}
|
||||
|
||||
this.shuffle(tempResults);
|
||||
this.discoverResults.push(...tempResults);
|
||||
|
||||
this.finishLoading();
|
||||
}
|
||||
|
||||
private mapMovieModel(): IDiscoverCardResult[] {
|
||||
const tempResults = <IDiscoverCardResult[]>[];
|
||||
this.movies.forEach(m => {
|
||||
tempResults.push({
|
||||
available: m.available,
|
||||
|
|
@ -140,6 +243,11 @@ export class DiscoverComponent implements OnInit {
|
|||
imdbid: m.imdbId
|
||||
});
|
||||
});
|
||||
return tempResults;
|
||||
}
|
||||
|
||||
private mapTvModel(): IDiscoverCardResult[] {
|
||||
const tempResults = <IDiscoverCardResult[]>[];
|
||||
this.tvShows.forEach(m => {
|
||||
tempResults.push({
|
||||
available: m.available,
|
||||
|
|
@ -155,10 +263,7 @@ export class DiscoverComponent implements OnInit {
|
|||
imdbid: m.imdbId
|
||||
});
|
||||
});
|
||||
this.shuffle(tempResults);
|
||||
this.discoverResults.push(...tempResults);
|
||||
|
||||
this.finishLoading();
|
||||
return tempResults;
|
||||
}
|
||||
|
||||
private createInitialModel() {
|
||||
|
|
|
|||
|
|
@ -13,3 +13,9 @@ export interface IDiscoverCardResult {
|
|||
overview: string;
|
||||
imdbid: string;
|
||||
}
|
||||
|
||||
export enum DiscoverOption {
|
||||
Combined = 1,
|
||||
Movie = 2,
|
||||
Tv = 3
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ body {
|
|||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
/* Scrollbar */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -224,6 +224,9 @@
|
|||
"PopularTab": "Popular",
|
||||
"TrendingTab": "Trending",
|
||||
"UpcomingTab": "Upcoming",
|
||||
"Movies": "Movies",
|
||||
"Combined": "Combined",
|
||||
"Tv": "Tv",
|
||||
"CardDetails": {
|
||||
"Availability": "Availability",
|
||||
"Studio": "Studio",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue