Added the new backgrounds for the requests pages

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

@@ -99,9 +99,10 @@ export interface IFullBaseRequest extends IBaseRequest {
   releaseDate: Date;
   status: string;
   released: boolean;
+  background: string;
 
   // Used in the UI
-  background: any;
+  backgroundPath: any;
 }
 
 export interface IBaseRequest {

src/Ombi/ClientApp/app/requests/movierequests.component.html

@@ -14,14 +14,14 @@
     <div *ngFor="let request of movieRequests">
 
 
-        <div class="row" >
-            <div class="col-sm-2">
+        <div class="row backdrop" [style.background-image]="request.backgroundPath">
+            <div class="col-sm-2  small-padding">
 
                 <img class="img-responsive poster" src="https://image.tmdb.org/t/p/w150/{{request.posterPath}}" alt="poster">
 
             </div>
 
-            <div class="col-sm-5 ">
+            <div class="col-sm-5  small-padding">
                 <div>
                     <a href="http://www.imdb.com/title/{{request.imdbId}}/" target="_blank">
                         <h4 class="request-title">{{request.title}} ({{request.releaseDate | date: 'yyyy'}})</h4>
@@ -63,7 +63,7 @@
                 </div>
 
             </div>
-            <div class="col-sm-3 col-sm-push-3">
+            <div class="col-sm-3 col-sm-push-3  small-padding">
                 <div *ngIf="isAdmin">
                     <div *ngIf="!request.approved">
                         <form>
@@ -130,7 +130,8 @@
 
             </div>
         </div>
-        <hr />
+        <br/>
+        <br/>
 
 
 

src/Ombi/ClientApp/app/requests/movierequests.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
 import "rxjs/add/operator/debounceTime";
 import "rxjs/add/operator/distinctUntilChanged";
 import "rxjs/add/operator/map";
@@ -30,7 +31,8 @@ export class MovieRequestsComponent implements OnInit {
     constructor(private requestService: RequestService,
                 private auth: AuthService,
                 private notificationService: NotificationService,
-                private radarrService: RadarrService) {
+                private radarrService: RadarrService,
+                private sanitizer: DomSanitizer) {
         this.searchChanged
             .debounceTime(600) // Wait Xms after the last event before emitting last event
             .distinctUntilChanged() // only emit if value is different from previous value
@@ -157,6 +159,10 @@ export class MovieRequestsComponent implements OnInit {
         this.requestService.getMovieRequests(this.amountToLoad, 0)
             .subscribe(x => {
                 this.movieRequests = x;
+
+                this.movieRequests.forEach((req) => {
+                    this.movieRequests.forEach((req) => this.setBackground(req));
+                });
                 this.radarrService.getQualityProfilesFromSettings().subscribe(c => {
                     this.radarrProfiles = c;
                     this.movieRequests.forEach((req) => this.setQualityOverrides(req));
@@ -208,7 +214,13 @@ export class MovieRequestsComponent implements OnInit {
     }
 
     private setOverride(req: IMovieRequests): void {
+        this.setBackground(req);
         this.setQualityOverrides(req);
         this.setRootFolderOverrides(req);
     }
+
+    private setBackground(req: IMovieRequests): void {
+        req.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
+        ("linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%),url(" + "https://image.tmdb.org/t/p/w1280" + req.background + ")");
+    }
 }

src/Ombi/ClientApp/app/requests/tvrequests.component.html

@@ -27,14 +27,14 @@
             <ng-template let-col let-node="rowData" pTemplate="body">
                 <!--This is the section that holds the parent level results set-->
                 <div *ngIf="!node.leaf">
-                    <div class="row">
-                        <div class="col-sm-2">
+                    <div class="row backdrop" [style.background-image]="node?.data?.background">
+                        <div class="col-sm-2  small-padding" >
 
                             <img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">
 
                         </div>
 
-                        <div class="col-sm-5 ">
+                        <div class="col-sm-5  small-padding">
                             <div>
                                 <a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
                                     <h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
@@ -50,7 +50,7 @@
                             <div>Release Date: {{node.data.releaseDate | date}}</div>
                             <br />
                         </div>
-                        <div class="col-sm-3 col-sm-push-3">
+                        <div class="col-sm-3 col-sm-push-3  small-padding">
 
                             <button  style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)"><i class="fa fa-plus"></i> View</button>
                         </div>

src/Ombi/ClientApp/app/requests/tvrequests.component.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit } from "@angular/core";
+import { DomSanitizer } from '@angular/platform-browser';
 import "rxjs/add/operator/debounceTime";
 import "rxjs/add/operator/distinctUntilChanged";
 import "rxjs/add/operator/map";
 import { Subject } from "rxjs/Subject";
+import { ImageService } from './../services/image.service';
 
 import "rxjs/add/operator/debounceTime";
 import "rxjs/add/operator/distinctUntilChanged";
@@ -32,9 +34,11 @@ export class TvRequestsComponent implements OnInit {
     private amountToLoad: number;
 
     constructor(private requestService: RequestService,
-                private auth: AuthService) {
+                private auth: AuthService,
+                private sanitizer: DomSanitizer,
+                private imageService: ImageService) {
         this.searchChanged
-            .debounceTime(600) // Wait Xms afterthe last event before emitting last event
+            .debounceTime(600) // Wait Xms after the last event before emitting last event
             .distinctUntilChanged() // only emit if value is different from previous value
             .subscribe(x => {
                 this.searchText = x as string;
@@ -43,7 +47,10 @@ export class TvRequestsComponent implements OnInit {
                     return;
                 }
                 this.requestService.searchTvRequestsTree(this.searchText)
-                    .subscribe(m => this.tvRequests = m);
+                    .subscribe(m => {
+                        this.tvRequests = m;
+                        this.tvRequests.forEach((val) => this.loadBackdrop(val));
+                    });
             });
     }
     public openClosestTab(el: any) {
@@ -110,6 +117,9 @@ export class TvRequestsComponent implements OnInit {
         this.requestService.getTvRequestsTree(this.amountToLoad, 0)
             .subscribe(x => {
                 this.tvRequests = x;
+                this.tvRequests.forEach((val, index) => {
+                    this.loadBackdrop(val);
+            });     
         });
     }
 
@@ -117,4 +127,10 @@ export class TvRequestsComponent implements OnInit {
         this.currentlyLoaded = 5;
         this.loadInit();
     }
+    private loadBackdrop(val: TreeNode): void {
+        this.imageService.getTvBanner(val.data.id).subscribe(x => {
+            val.data.background = this.sanitizer.bypassSecurityTrustStyle
+                ("linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%),url(" + x + ")");
+            });
+    }
 }