github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-19 12:59:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added the option to filter between movies and tv shows or combined on the discover page

Browse source
This commit is contained in:
Jamie Rees 2020-02-15 20:24:34 +00:00
commit c663d6c4c0
6 changed files with 415 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
View file

@ -1,25 +1,22 @@
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row justify-content-md-center top-spacing"> <div class="row justify-content-md-center top-spacing">
<div class="btn-group" role="group" aria-label="Basic example"> <div class="btn-group" role="group">
<button type="button" (click)="popular()" [attr.color]="popularActive ? 'accent' : 'primary'" <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>
[ngClass]="popularActive ? 'mat-accent' : 'mat-primary'" mat-raised-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"
class="btn grow">{{'Discovery.PopularTab' | translate}}</button> color="primary">{{'Discovery.Combined' | translate}}</button>
<button type="button" (click)="trending()" [attr.color]="trendingActive ? 'accent' : 'primary'" <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>
[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> </div>
<div *ngIf="discoverResults" class="row full-height discoverResults" <div class="row justify-content-md-center small-space">
infiniteScroll <div class="btn-group" role="group" aria-label="Basic example">
[fromRoot]="false" <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>
[infiniteScrollDistance]="0.5" <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>
[infiniteScrollDisabled]="scrollDisabled" <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>
(scrolled)="onScroll()"> </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"> <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> <discover-card [result]="result"></discover-card>
</div> </div>

10
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss
View file

@ -2,8 +2,7 @@
height: 100%; height: 100%;
} }
.small-middle-container {
.small-middle-container{
margin: auto; margin: auto;
width: 80%; width: 80%;
} }
@ -17,7 +16,12 @@
.loading-spinner { .loading-spinner {
margin: 10%; margin: 10%;
} }
#scroller { #scroller {
height: 100vh; height: 100vh;
overflow: scroll; overflow: scroll;
} }
.small-space {
padding-top: 1%;
}

119
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
View file

@ -1,7 +1,7 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { SearchV2Service } from "../../../services"; import { SearchV2Service } from "../../../services";
import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces"; import { ISearchMovieResult, ISearchTvResult, RequestType } from "../../../interfaces";
import { IDiscoverCardResult } from "../../interfaces"; import { IDiscoverCardResult, DiscoverOption } from "../../interfaces";
import { trigger, transition, style, animate } from "@angular/animations"; import { trigger, transition, style, animate } from "@angular/animations";
@Component({ @Component({
@ -22,6 +22,9 @@ export class DiscoverComponent implements OnInit {
public movies: ISearchMovieResult[] = []; public movies: ISearchMovieResult[] = [];
public tvShows: ISearchTvResult[] = []; public tvShows: ISearchTvResult[] = [];
public discoverOptions: DiscoverOption = DiscoverOption.Combined;
public DiscoverOption = DiscoverOption;
public defaultTvPoster: string; public defaultTvPoster: string;
public popularActive: boolean = true; public popularActive: boolean = true;
@ -39,8 +42,18 @@ export class DiscoverComponent implements OnInit {
public async ngOnInit() { public async ngOnInit() {
this.loading() this.loading()
this.scrollDisabled = true; this.scrollDisabled = true;
switch (this.discoverOptions) {
case DiscoverOption.Combined:
this.movies = await this.searchService.popularMoviesByPage(0,12); this.movies = await this.searchService.popularMoviesByPage(0,12);
this.tvShows = await this.searchService.popularTvByPage(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; this.contentLoaded = 12;
@ -56,16 +69,46 @@ export class DiscoverComponent implements OnInit {
this.isScrolling = true; this.isScrolling = true;
this.loading(); this.loading();
if (this.popularActive) { if (this.popularActive) {
switch (this.discoverOptions) {
case DiscoverOption.Combined:
this.movies = await this.searchService.popularMoviesByPage(this.contentLoaded, 12); this.movies = await this.searchService.popularMoviesByPage(this.contentLoaded, 12);
this.tvShows = await this.searchService.popularTvByPage(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.movies = await this.searchService.nowPlayingMoviesByPage(this.contentLoaded, 12);
this.tvShows = await this.searchService.trendingTvByPage(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.movies = await this.searchService.upcomingMoviesByPage(this.contentLoaded, 12);
this.tvShows = await this.searchService.anticipatedTvByPage(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; this.contentLoaded += 12;
@ -83,8 +126,18 @@ export class DiscoverComponent implements OnInit {
this.popularActive = true; this.popularActive = true;
this.trendingActive = false; this.trendingActive = false;
this.upcomingActive = false; this.upcomingActive = false;
switch (this.discoverOptions) {
case DiscoverOption.Combined:
this.movies = await this.searchService.popularMoviesByPage(0, 12); this.movies = await this.searchService.popularMoviesByPage(0, 12);
this.tvShows = await this.searchService.popularTvByPage(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.createModel();
this.scrollDisabled = false; this.scrollDisabled = false;
@ -100,8 +153,18 @@ export class DiscoverComponent implements OnInit {
this.popularActive = false; this.popularActive = false;
this.trendingActive = true; this.trendingActive = true;
this.upcomingActive = false; this.upcomingActive = false;
switch (this.discoverOptions) {
case DiscoverOption.Combined:
this.movies = await this.searchService.nowPlayingMoviesByPage(0, 12); this.movies = await this.searchService.nowPlayingMoviesByPage(0, 12);
this.tvShows = await this.searchService.trendingTvByPage(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.createModel();
this.scrollDisabled = false; this.scrollDisabled = false;
@ -116,15 +179,55 @@ export class DiscoverComponent implements OnInit {
this.popularActive = false; this.popularActive = false;
this.trendingActive = false; this.trendingActive = false;
this.upcomingActive = true; this.upcomingActive = true;
switch (this.discoverOptions) {
case DiscoverOption.Combined:
this.movies = await this.searchService.upcomingMoviesByPage(0, 12); this.movies = await this.searchService.upcomingMoviesByPage(0, 12);
this.tvShows = await this.searchService.anticipatedTvByPage(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.createModel();
this.scrollDisabled = false; this.scrollDisabled = false;
} }
public async switchDiscoverMode(newMode: DiscoverOption) {
this.loading();
this.clear();
this.discoverOptions = newMode;
await this.ngOnInit();
this.finishLoading();
}
private createModel() { private createModel() {
const tempResults = <IDiscoverCardResult[]>[]; 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 => { this.movies.forEach(m => {
tempResults.push({ tempResults.push({
available: m.available, available: m.available,
@ -140,6 +243,11 @@ export class DiscoverComponent implements OnInit {
imdbid: m.imdbId imdbid: m.imdbId
}); });
}); });
return tempResults;
}
private mapTvModel(): IDiscoverCardResult[] {
const tempResults = <IDiscoverCardResult[]>[];
this.tvShows.forEach(m => { this.tvShows.forEach(m => {
tempResults.push({ tempResults.push({
available: m.available, available: m.available,
@ -155,10 +263,7 @@ export class DiscoverComponent implements OnInit {
imdbid: m.imdbId imdbid: m.imdbId
}); });
}); });
this.shuffle(tempResults); return tempResults;
this.discoverResults.push(...tempResults);
this.finishLoading();
} }
private createInitialModel() { private createInitialModel() {

6
src/Ombi/ClientApp/src/app/discover/interfaces.ts
View file

@ -13,3 +13,9 @@ export interface IDiscoverCardResult {
overview: string; overview: string;
imdbid: string; imdbid: string;
} }
export enum DiscoverOption {
Combined = 1,
Movie = 2,
Tv = 3
}

1
src/Ombi/ClientApp/src/styles/shared.scss
View file

@ -30,6 +30,7 @@ body {
height: 50px; height: 50px;
} }
/* Scrollbar */ /* Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {

47
src/Ombi/wwwroot/translations/en.json
View file

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