Super top secret stuff... Stop looking, I will find out

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

@@ -17,11 +17,10 @@
     </mat-card>
 </div> -->
 
-<p-skeleton  *ngIf="!fullyLoaded" width="100%" height="19.789rem"></p-skeleton>
+<p-skeleton  *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
 
 <div *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
-    <div >
-        
+    <a>
         <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image"
             alt="{{result.title}}">
             <div class="top-left">{{RequestType[result.type] | humanize}}</div>
@@ -37,5 +36,5 @@
                 </div>
             </div>
         </div>
-    </div>
+    </a>
 </div>

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

@@ -3,7 +3,7 @@ $card-background: #2b2b2b;
 
 #cardImage {
     border-radius: 5px;
-    height: 75%;
+    height: 315px;
 }
 
 .dark-card {

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

@@ -49,7 +49,7 @@ export class DiscoverCardComponent implements OnInit {
         } else {
             this.tvSearchResult = await this.searchService.getTvInfo(+this.result.id);
         }
-        if (this.tvSearchResult.status === "404") {
+        if (this.tvSearchResult?.status.length > 0 && this.tvSearchResult?.status === "404") {
             this.hide = true;
             return;
         }
@@ -161,6 +161,9 @@ export class DiscoverCardComponent implements OnInit {
 
 
     private setTvDefaults(x: ISearchTvResultV2) {
+        if(!x) {
+            this.hide = true;
+        }
         if (x.imdbId) {
             x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
         } else {

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.html

@@ -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>

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.scss

@@ -54,5 +54,9 @@
   position: absolute;
   top: 8px;
   left: 16px;
-        
+}
+
+
+.right {
+  text-align: right;
 }

src/Ombi/ClientApp/src/app/discover/components/carousel-list/carousel-list.component.ts

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

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

@@ -39,18 +39,29 @@
     <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
         <mat-spinner [color]="'accent'"></mat-spinner>
     </div> -->
-
+    <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
+    </div>
     <div class="section">
         <h2>Popular <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
-        <div *ngIf="!loadingFlag">
-            <movie-list [result]="upcomingMovies"></movie-list>
+        <div>
+            <carousel-list [discoverType]="DiscoverType.Popular"></carousel-list>
         </div>
+
     </div>
 
     <div class="section">
         <h2>Trending <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
-        <div *ngIf="!loadingFlag">
-            <movie-list [result]="trendingMovies"></movie-list>
-        </div>
+        <div >
+            <carousel-list [discoverType]="DiscoverType.Trending"></carousel-list>
+        </div>
+
+    </div>
+
+    <div class="section">
+        <h2>Upcoming <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></h2>
+        <div>
+            <carousel-list [discoverType]="DiscoverType.Upcoming"></carousel-list>
+        </div>
+
     </div>
 </div>

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

@@ -1,3 +1,7 @@
 .section {
     margin: 20px;
 }
+::ng-deep .p-carousel-indicators {
+    display: none !important;
+    }
+  

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

@@ -6,6 +6,7 @@ import { trigger, transition, style, animate } from "@angular/animations";
 import { StorageService } from "../../../shared/storage/storage-service";
 import { DOCUMENT } from "@angular/common";
 import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
+import { DiscoverType } from "../carousel-list/carousel-list.component";
 
 @Component({
     templateUrl: "./discover.component.html",
@@ -30,6 +31,7 @@ export class DiscoverComponent implements OnInit {
     public tvShows: ISearchTvResult[] = [];
 
     public discoverOptions: DiscoverOption = DiscoverOption.Combined;
+    public DiscoverType = DiscoverType;
     public DiscoverOption = DiscoverOption;
     public displayOption: DisplayOption = DisplayOption.Card;
     public DisplayOption = DisplayOption;
@@ -59,8 +61,8 @@ export class DiscoverComponent implements OnInit {
 
     public async ngOnInit() {
         this.loading()
-        this.upcomingMovies = this.mapTvModel(await this.searchService.popularTvByPage(0, 14));
-        this.trendingMovies = this.mapMovieModel(await this.searchService.popularMoviesByPage(0, 14));
+        // this.upcomingMovies = this.mapTvModel(await this.searchService.popularTvByPage(0, 14));
+        // this.trendingMovies = this.mapMovieModel(await this.searchService.popularMoviesByPage(0, 14));
 this.finishLoading();
         // const localDiscoverOptions = +this.storageService.get(this.mediaTypeStorageKey);
         // if (localDiscoverOptions) {

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

@@ -8,8 +8,8 @@ import { AuthGuard } from "../../auth/auth.guard";
 import { SearchService, RequestService } from "../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { DiscoverGridComponent } from "./grid/discover-grid.component";
-import { MovieListComponent } from "./movie-list/movie-list.component";
 import { DiscoverSearchResultsComponent } from "./search-results/search-results.component";
+import { CarouselListComponent } from "./carousel-list/carousel-list.component";
 
 
 export const components: any[] = [
@@ -20,7 +20,7 @@ export const components: any[] = [
     DiscoverActorComponent,
     DiscoverGridComponent,
     DiscoverSearchResultsComponent,
-    MovieListComponent,
+    CarouselListComponent,
 ];
 
 

src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.html

@@ -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>

src/Ombi/ClientApp/src/app/discover/components/movie-list/movie-list.component.ts

@@ -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
-            }
-        ];
-    }
-
-
-}

src/Ombi/ClientApp/src/styles/new-mat-palette.scss

@@ -0,0 +1,98 @@
+$ombi-accent: (
+    50: #ecfafe,
+    100: #d0f2fe,
+    200: #b1e9fd,
+    300: #91e0fc,
+    400: #7ad9fb,
+    500: #62d2fa,
+    600: #5acdf9,
+    700: #50c7f9,
+    800: #46c1f8,
+    900: #34b6f6,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #d6f1ff,
+    A700: #bde8ff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$ombi-primary: (
+    50 : #e4e5e6,
+    100 : #bbbdc1,
+    200 : #8d9297,
+    300 : #5f666d,
+    400 : #3d454e,
+    500 : #1b242f,
+    600 : #18202a,
+    700 : #141b23,
+    800 : #10161d,
+    900 : #080d12,
+    A100 : #55aaff,
+    A200 : #2290ff,
+    A400 : #0077ee,
+    A700 : #006ad4,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #ffffff,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+$ombi-background: (
+    50 : #e2e3e4,
+    100 : #b7b9bb,
+    200 : #878b8e,
+    300 : #575d61,
+    400 : #333a3f,
+    500 : #0f171d,
+    600 : #0d141a,
+    700 : #0b1115,
+    800 : #080d11,
+    900 : #04070a,
+    A100 : #4fc4ff,
+    A200 : #1cb3ff,
+    A400 : #009be8,
+    A700 : #008ace,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);