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

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html

@@ -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">
+        <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 *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">
             <discover-card [result]="result"></discover-card>
         </div>

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.scss

@@ -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%;
+}

src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts

@@ -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);
+        return tempResults;
-        this.discoverResults.push(...tempResults);
-
-        this.finishLoading();
     }
 
     private createInitialModel() {

src/Ombi/ClientApp/src/app/discover/interfaces.ts

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

src/Ombi/ClientApp/src/styles/shared.scss

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

src/Ombi/wwwroot/translations/en.json

@@ -224,6 +224,9 @@
         "PopularTab": "Popular",
         "TrendingTab": "Trending",
         "UpcomingTab": "Upcoming",
+        "Movies": "Movies",
+        "Combined": "Combined",
+        "Tv": "Tv",
         "CardDetails": {
             "Availability": "Availability",
             "Studio": "Studio",