Finished the additional grid option

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

@@ -45,9 +45,9 @@ export class DiscoverActorComponent implements AfterViewInit {
         this.discoverResults = [];
         this.actorCredits.cast.forEach(m => {
             this.discoverResults.push({
-                available: false, 
+                available: false,
                 posterPath: m.poster_path ? `https://image.tmdb.org/t/p/w300/${m.poster_path}` : "../../../images/default_movie_poster.png",
-                requested: false, 
+                requested: false,
                 title: m.title,
                 type: RequestType.movie,
                 id: m.id,
@@ -56,6 +56,7 @@ export class DiscoverActorComponent implements AfterViewInit {
                 overview: m.overview,
                 approved: false,
                 imdbid: "",
+                denied: false
             });
         });
     }

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

@@ -76,24 +76,24 @@
                                 [translate]="'Common.NotRequested'"></span></ng-template>
                     </small>
                 </div>
-                <div class="col-6">
+                    <div class="col-6">
-                    <strong *ngIf="movie">{{'Discovery.CardDetails.Director' | translate}}: </strong>
+                        <strong *ngIf="movie">{{'Discovery.CardDetails.Director' | translate}}: </strong>
-                    <small *ngIf="movie">{{movie.credits.crew[0].name}}</small>
+                        <small *ngIf="movie">{{movie.credits.crew[0].name}}</small>
-                    <strong *ngIf="tvCreator">Director: </strong>
+                        <strong *ngIf="tvCreator">Director: </strong>
-                    <small *ngIf="tvCreator">{{tvCreator}}</small>
+                        <small *ngIf="tvCreator">{{tvCreator}}</small>
-                </div>
+                    </div>
-                <div class="col-6">
+                    <div class="col-6">
-                    <strong *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: </strong>
+                        <strong *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: </strong>
-                    <small *ngIf="movie">{{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</small>
+                        <small *ngIf="movie">{{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</small>
-                    <strong *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: </strong>
+                        <strong *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: </strong>
-                    <small *ngIf="tv">{{tv.firstAired | amLocal | amDateFormat: 'LL'}}</small>
+                        <small *ngIf="tv">{{tv.firstAired | amLocal | amDateFormat: 'LL'}}</small>
-                </div>
+                    </div>
-                <div class="col-6">
+                    <div class="col-6">
-                    <strong *ngIf="movie">{{'Discovery.CardDetails.Writer' | translate}}: </strong>
+                        <strong *ngIf="movie">{{'Discovery.CardDetails.Writer' | translate}}: </strong>
-                    <small *ngIf="movie">{{movie.credits.crew[1].name}}</small>
+                        <small *ngIf="movie">{{movie.credits.crew[1].name}}</small>
-                    <strong *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: </strong>
+                        <strong *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: </strong>
-                    <small *ngIf="tv">{{tvProducer}}</small>
+                        <small *ngIf="tv">{{tvProducer}}</small>
-                </div>
+                    </div>
             </div>
 
             <div class="row top-spacing overview">

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

@@ -54,10 +54,11 @@ export class DiscoverCollectionsComponent implements OnInit {
                 overview: m.overview,
                 approved: m.approved,
                 imdbid: m.imdbId,
+                denied:false
             });
         });
     }
-    
+
     private loading() {
         this.loadingFlag = true;
     }

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

@@ -1,7 +1,7 @@
 <div class="small-middle-container">
     <div class="row justify-content-end">
         <div class="btn-group col-1 small-space" role="group">
-            <mat-button-toggle-group>
+            <mat-button-toggle-group *ngIf="displayOption">
                 <mat-button-toggle [ngClass]="displayOption === DisplayOption.Card ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.Card)"><mat-icon>dashboard</mat-icon></mat-button-toggle>
                 <mat-button-toggle [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>
               </mat-button-toggle-group>
@@ -31,7 +31,7 @@
             <discover-card [result]="result"></discover-card>
         </div>
     </div>
-    <div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="false" [infiniteScrollDistance]="0.5" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
+    <div *ngIf="discoverResults && displayOption == DisplayOption.List" class="row full-height discoverResults col" infiniteScroll [fromRoot]="true" [infiniteScrollDistance]="1" [infiniteScrollDisabled]="scrollDisabled" (scrolled)="onScroll()">
         <div class="col-12 small-padding" *ngFor="let result of discoverResults">
             <discover-grid [result]="result"></discover-grid>
         </div>

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

@@ -26,7 +26,7 @@ export class DiscoverComponent implements OnInit {
 
     public discoverOptions: DiscoverOption = DiscoverOption.Combined;
     public DiscoverOption = DiscoverOption;
-    public displayOption: DisplayOption = DisplayOption.List;
+    public displayOption: DisplayOption = DisplayOption.Card;
     public DisplayOption = DisplayOption;
 
     public defaultTvPoster: string;
@@ -43,6 +43,7 @@ export class DiscoverComponent implements OnInit {
     private contentLoaded: number;
     private isScrolling: boolean = false;
     private mediaTypeStorageKey = "DiscoverOptions";
+    private displayOptionsKey = "DiscoverDisplayOptions";
 
     constructor(private searchService: SearchV2Service,
         private storageService: StorageService,
@@ -55,6 +56,10 @@ export class DiscoverComponent implements OnInit {
         if (localDiscoverOptions) {
             this.discoverOptions = DiscoverOption[DiscoverOption[localDiscoverOptions]];
         }
+        const localDisplayOptions = +this.storageService.get(this.displayOptionsKey);
+        if (localDisplayOptions) {
+            this.displayOption = DisplayOption[DisplayOption[localDisplayOptions]];
+        }
         this.scrollDisabled = true;
         switch (this.discoverOptions) {
             case DiscoverOption.Combined:
@@ -225,6 +230,7 @@ export class DiscoverComponent implements OnInit {
 
     public changeView(view: DisplayOption) {
         this.displayOption = view;
+        this.storageService.save(this.displayOptionsKey, view.toString());
     }
 
     private createModel() {
@@ -263,7 +269,8 @@ export class DiscoverComponent implements OnInit {
                 rating: m.voteAverage,
                 overview: m.overview,
                 approved: m.approved,
-                imdbid: m.imdbId
+                imdbid: m.imdbId,
+                denied: false
             });
         });
         return tempResults;
@@ -283,7 +290,8 @@ export class DiscoverComponent implements OnInit {
                 rating: +m.rating,
                 overview: m.overview,
                 approved: m.approved,
-                imdbid: m.imdbId
+                imdbid: m.imdbId,
+                denied: false
             });
         });
         return tempResults;

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

@@ -14,13 +14,13 @@
 </div> -->
 
 
-<div class="top-spacing" *ngIf="result">
+<div class="top-spacing">
     <mat-card class="mat-elevation-z8 dark-card">
-        <div class="row">
+        <div class="row main-container">
             <div class="col-2">
                 <img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
             </div>
-            <div class="col-6">
+            <div class="col-8">
                 <div class="row">
                     <h1>{{result.title}}</h1>
                 </div>
@@ -38,16 +38,99 @@
                             {{'Common.RequestDenied' | translate}}
                         </mat-chip>
 
-                        <mat-chip *ngIf="!result.approved && !result.availble && !result.denied" class="requested">
+                        <mat-chip *ngIf="!result.approved && !result.available && !result.denied" class="requested">
                             {{'Common.PendingApproval' | translate}}
                         </mat-chip>
+                        <mat-chip *ngIf="movie && movie.plexUrl">  <a href="{{movie.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                            >play_circle_outline</mat-icon></a></mat-chip>
+                            <mat-chip *ngIf="movie && movie.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                                >play_circle_outline</mat-icon></a></mat-chip>
 
+                                <mat-chip *ngIf="tv && tv.plexUrl"> <a href="{{tv.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}"
+                                    >play_circle_outline</mat-icon></a></mat-chip>
+                                    <mat-chip *ngIf="tv &&tv.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}"
+                                        >play_circle_outline</mat-icon></a></mat-chip>
                     </mat-chip-list>
                 </div>
                 <div class="row">
+
+<mat-chip-list class="top-spacing">
+        <mat-chip *ngIf="movie && movie.productionCompanies[0]?.name">{{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}}</mat-chip>
+
+        <mat-chip *ngIf="tv && tv.network?.name">{{'Discovery.CardDetails.Network' | translate}}: {{tv.network.name}}</mat-chip>
+
+        <mat-chip *ngIf="movie && movie.credits?.crew[0]?.name">{{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}}</mat-chip>
+
+        <mat-chip *ngIf="tvCreator">Director: {{tvCreator}}</mat-chip>
+
+        <mat-chip *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: {{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</mat-chip>
+
+        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: {{tv.firstAired | amLocal | amDateFormat: 'LL'}}</mat-chip>
+
+        <mat-chip *ngIf="movie && movie.credits?.crew[1]?.name">{{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}}</mat-chip>
+
+        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}}</mat-chip>
+
+</mat-chip-list>
+
+
+
+                </div>
+                <div class="row">
                     <p class="overview top-spacing">{{result.overview}}</p>
                 </div>
             </div>
+
+            <div class="col-2" >
+                <div  style="float:right;">
+                <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
+                    'Common.ViewDetails' | translate }}</button>
+                    <div *ngIf="movie">
+                        <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
+                        'Common.Available' | translate }}</button>
+                        <span *ngIf="!movie.available">
+                            <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
+                            <ng-template #requestedBtn>
+                                <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
+                                    {{ 'Common.Requested' | translate }}</button>
+                            </ng-template>
+                            <ng-template #notRequestedBtn>
+                                <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
+                        <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
+                          *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
+                        <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+                        'Common.Request' | translate }}</button>
+                            </ng-template>
+                        </span>
+                    </div>
+
+                    <div *ngIf="tv">
+
+                        <div *ngIf="!tv.fullyAvailable" class="dropdown">
+                            <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
+                                <i class="fa fa-plus"></i>
+                                {{ 'Common.Request' | translate }}
+                                <span class="caret"></span>
+                            </button>
+                        </div>
+            
+                        <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent" [disabled]>
+                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                          <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
+                            [disabled]>
+                            <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
+            
+                        <span *ngIf="tv.available">
+                            <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
+                                href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
+                                translate}}</a>
+                            <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
+                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                                translate}}</a>
+                        </span>
+                    </div>
+            </div>
+        </div>
         </div>
     </mat-card>
 </div>

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

@@ -1,6 +1,31 @@
 $ombi-primary:#3f3f3f;
 $card-background: #2b2b2b;
 
+$blue: #1976D2;
+$pink: #C2185B;
+$green:#1DE9B6;
+$orange:#F57C00;
+
+.btn-blue {
+    background-color: $blue;
+}
+
+.btn-pink {
+    background-color: $pink;
+}
+
+.btn-green {
+    background-color: $green;
+}
+
+.btn-orange {
+    background-color: $orange;
+}
+
+.btn-spacing {
+    margin-top:10%;
+}
+
 #cardImage {
     border-radius: 5px 5px 0px 0px;
     height: 75%;
@@ -17,6 +42,13 @@ $card-background: #2b2b2b;
 
 .card-poster {
     width: 100%;
+    border-radius: 8px 0px 0px 8px;
+    margin-top: -6.5%;
+    margin-bottom: -6.6%;
+}
+
+.main-container {
+    margin-left: -2%;
 }
 
 

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

@@ -1,10 +1,13 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { IDiscoverCardResult } from "../../interfaces";
-import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../../interfaces";
+import { RequestType, ISearchTvResult, ISearchMovieResult, ISearchMovieResultContainer } from "../../../interfaces";
-import { SearchV2Service } from "../../../services";
+import { RequestService, SearchV2Service } from "../../../services";
 import { MatDialog } from "@angular/material/dialog";
 import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
 import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
+import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { Router } from "@angular/router";
 
 @Component({
     selector: "discover-grid",
@@ -15,8 +18,16 @@ export class DiscoverGridComponent implements OnInit {
 
     @Input() public result: IDiscoverCardResult;
     public RequestType = RequestType;
+    public requesting: boolean;
 
-    constructor(private searchService: SearchV2Service, private dialog: MatDialog) { }
+    public tv: ISearchTvResultV2;
+    public tvCreator: string;
+    public tvProducer: string;
+    public movie: ISearchMovieResultV2;
+
+    constructor(private searchService: SearchV2Service, private dialog: MatDialog,
+                private requestService: RequestService, private notification: MatSnackBar,
+                private router: Router) { }
 
     public ngOnInit() {
         if (this.result.type == RequestType.tvShow) {
@@ -28,12 +39,32 @@ export class DiscoverGridComponent implements OnInit {
     }
 
     public async getExtraTvInfo() {
-        var result = await this.searchService.getTvInfo(this.result.id);
+        this.tv = await this.searchService.getTvInfo(this.result.id);
-        this.setTvDefaults(result);
+        this.setTvDefaults(this.tv);
-        this.updateTvItem(result);
+        this.updateTvItem(this.tv);
+        const creator = this.tv.crew.filter(tv => {
+            return tv.type === "Creator";
+        })[0];
+        if (creator && creator.person) {
+            this.tvCreator = creator.person.name;
+        }
+        const crewResult = this.tv.crew.filter(tv => {
+            return tv.type === "Executive Producer";
+        })[0]
+        if (crewResult && crewResult.person) {
+            this.tvProducer = crewResult.person.name;
+        }
 
     }
 
+    public openDetails() {
+        if (this.result.type === RequestType.movie) {
+            this.router.navigate(['/details/movie/', this.result.id]);
+        } else if (this.result.type === RequestType.tvShow) {
+            this.router.navigate(['/details/tv/', this.result.id]);
+        }
+    }
+
     public getStatusClass(): string {
         if (this.result.available) {
             return "available";
@@ -48,12 +79,13 @@ export class DiscoverGridComponent implements OnInit {
     }
 
     private getExtraMovieInfo() {
-        if (!this.result.imdbid) {
+        // if (!this.result.imdbid) {
             this.searchService.getFullMovieDetails(this.result.id)
                 .subscribe(m => {
+                    this.movie = m;
                     this.updateMovieItem(m);
                 });
-        }
+        // }
     }
 
     private updateMovieItem(updated: ISearchMovieResultV2) {
@@ -82,4 +114,21 @@ export class DiscoverGridComponent implements OnInit {
         this.result.url = updated.imdbId;
     }
 
+    public async request() {
+        this.requesting = true;
+        if (this.result.type === RequestType.movie) {
+            const result = await this.requestService.requestMovie({ theMovieDbId: this.result.id, languageCode: "" }).toPromise();
+
+            if (result.result) {
+                this.result.requested = true;
+                this.notification.open(result.message, "Ok");
+            } else {
+                this.notification.open(result.errorMessage, "Ok");
+            }
+        } else if (this.result.type === RequestType.tvShow) {
+            this.dialog.open(EpisodeRequestComponent, { width: "700px", data: this.tv,  panelClass: 'modal-panel' })
+        }
+        this.requesting = false;
+    }
+
 }

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

@@ -8,6 +8,7 @@ export interface IDiscoverCardResult {
     type: RequestType;
     available: boolean;
     approved: boolean;
+    denied: boolean;
     requested: boolean;
     rating: number;
     overview: string;

src/Ombi/ClientApp/src/index.html

@@ -57,7 +57,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 </head>
 
-<body class="mat-typography">
+<body class="mat-typography custom-background">
 
     <app-ombi>
         <script type="text/javascript">

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

@@ -44,6 +44,10 @@ body {
     -webkit-overflow-scrolling: touch;
 }
 
+.custom-background {
+    background-color: $background-dark !important;
+}
+
 .spinner-container {
     position: relative;
     margin-left: 50%;