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,8 +2,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.small-middle-container{
|
||||
.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) {
|
||||
}
|
||||
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) {
|
||||
}
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@
|
|||
"Errors": {
|
||||
"Validation": "Please check your entered values"
|
||||
},
|
||||
"Cancel":"Cancel",
|
||||
"Submit":"Submit"
|
||||
"Cancel": "Cancel",
|
||||
"Submit": "Submit"
|
||||
},
|
||||
"PasswordReset": {
|
||||
"EmailAddressPlaceholder": "Email Address",
|
||||
|
|
@ -65,8 +65,8 @@
|
|||
"Logout": "Logout",
|
||||
"OpenMobileApp": "Open Mobile App",
|
||||
"RecentlyAdded": "Recently Added",
|
||||
"ChangeTheme":"Change Theme",
|
||||
"Calendar":"Calendar",
|
||||
"ChangeTheme": "Change Theme",
|
||||
"Calendar": "Calendar",
|
||||
"UserPreferences": "Preferences"
|
||||
},
|
||||
"Search": {
|
||||
|
|
@ -82,9 +82,9 @@
|
|||
"ViewOnPlex": "View On Plex",
|
||||
"ViewOnEmby": "View On Emby",
|
||||
"RequestAdded": "Request for {{title}} has been added successfully",
|
||||
"Similar":"Similar",
|
||||
"Refine":"Refine",
|
||||
"SearchBarPlaceholder":"Type Here to Search",
|
||||
"Similar": "Similar",
|
||||
"Refine": "Refine",
|
||||
"SearchBarPlaceholder": "Type Here to Search",
|
||||
"Movies": {
|
||||
"PopularMovies": "Popular Movies",
|
||||
"UpcomingMovies": "Upcoming Movies",
|
||||
|
|
@ -174,11 +174,11 @@
|
|||
"WriteMessagePlaceholder": "Write your message here...",
|
||||
"ReportedBy": "Reported By",
|
||||
"IssueDialog": {
|
||||
"Title":"Report an issue",
|
||||
"DescriptionPlaceholder":"Please describe the issue",
|
||||
"TitlePlaceholder":"Short title of your issue",
|
||||
"Title": "Report an issue",
|
||||
"DescriptionPlaceholder": "Please describe the issue",
|
||||
"TitlePlaceholder": "Short title of your issue",
|
||||
"SelectCategory": "Select Category",
|
||||
"IssueCreated":"Issue has been created"
|
||||
"IssueCreated": "Issue has been created"
|
||||
}
|
||||
},
|
||||
"Filter": {
|
||||
|
|
@ -205,25 +205,28 @@
|
|||
"RecommendationsTitle": "Recommendations",
|
||||
"SimilarTitle": "Similar",
|
||||
"VideosTitle": "Videos",
|
||||
"AlbumsTitle":"Albums",
|
||||
"RequestAllAlbums":"Request All Albums",
|
||||
"ClearSelection":"Clear Selection",
|
||||
"RequestSelectedAlbums":"Request Selected Albums",
|
||||
"AlbumsTitle": "Albums",
|
||||
"RequestAllAlbums": "Request All Albums",
|
||||
"ClearSelection": "Clear Selection",
|
||||
"RequestSelectedAlbums": "Request Selected Albums",
|
||||
"Casts": {
|
||||
"CastTitle": "Cast",
|
||||
"Character": "Character",
|
||||
"Actor": "Actor"
|
||||
},
|
||||
"EpisodeSelector":{
|
||||
"AllSeasonsTooltip":"This will request every season for this show",
|
||||
"FirstSeasonTooltip":"This will only request the First Season for this show",
|
||||
"LatestSeasonTooltip":"This will only request the Latest Season for this show"
|
||||
"EpisodeSelector": {
|
||||
"AllSeasonsTooltip": "This will request every season for this show",
|
||||
"FirstSeasonTooltip": "This will only request the First Season for this show",
|
||||
"LatestSeasonTooltip": "This will only request the Latest Season for this show"
|
||||
}
|
||||
},
|
||||
"Discovery": {
|
||||
"PopularTab": "Popular",
|
||||
"TrendingTab": "Trending",
|
||||
"UpcomingTab": "Upcoming",
|
||||
"Movies": "Movies",
|
||||
"Combined": "Combined",
|
||||
"Tv": "Tv",
|
||||
"CardDetails": {
|
||||
"Availability": "Availability",
|
||||
"Studio": "Studio",
|
||||
|
|
@ -238,8 +241,8 @@
|
|||
}
|
||||
},
|
||||
"UserPreferences": {
|
||||
"Welcome":"Welcome {{username}}!",
|
||||
"OmbiLanguage":"Language",
|
||||
"DarkMode":"Dark Mode"
|
||||
"Welcome": "Welcome {{username}}!",
|
||||
"OmbiLanguage": "Language",
|
||||
"DarkMode": "Dark Mode"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue