From be97fcfa8628e17399371281183de73a1604a2f4 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 3 Nov 2017 23:24:43 +0000 Subject: [PATCH] Added the new backgrounds for the requests pages --- .../ClientApp/app/interfaces/IRequestModel.ts | 3 ++- .../app/requests/movierequests.component.html | 11 +++++---- .../app/requests/movierequests.component.ts | 18 +++++++++++--- .../app/requests/tvrequests.component.html | 8 +++---- .../app/requests/tvrequests.component.ts | 24 +++++++++++++++---- 5 files changed, 47 insertions(+), 17 deletions(-) diff --git a/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts b/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts index 53d788cf6..4045dd2a7 100644 --- a/src/Ombi/ClientApp/app/interfaces/IRequestModel.ts +++ b/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 { diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.html b/src/Ombi/ClientApp/app/requests/movierequests.component.html index 36422281d..6dfdb4a6a 100644 --- a/src/Ombi/ClientApp/app/requests/movierequests.component.html +++ b/src/Ombi/ClientApp/app/requests/movierequests.component.html @@ -14,14 +14,14 @@
-
-
+
+
poster
-
+
-
+
@@ -130,7 +130,8 @@
-
+
+
diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.ts b/src/Ombi/ClientApp/app/requests/movierequests.component.ts index ef5f9fa70..bd65660b7 100644 --- a/src/Ombi/ClientApp/app/requests/movierequests.component.ts +++ b/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.setQualityOverrides(req); - this.setRootFolderOverrides(req); + 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 + ")"); } } diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.html b/src/Ombi/ClientApp/app/requests/tvrequests.component.html index aebd14bee..5422e6037 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequests.component.html +++ b/src/Ombi/ClientApp/app/requests/tvrequests.component.html @@ -27,14 +27,14 @@
-
-
+
+
poster
-
+
-
+
diff --git a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts b/src/Ombi/ClientApp/app/requests/tvrequests.component.ts index ec4055ffe..27f1b20ae 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequests.component.ts +++ b/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,11 +117,20 @@ export class TvRequestsComponent implements OnInit { this.requestService.getTvRequestsTree(this.amountToLoad, 0) .subscribe(x => { this.tvRequests = x; - }); + this.tvRequests.forEach((val, index) => { + this.loadBackdrop(val); + }); + }); } private resetSearch() { 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 + ")"); + }); + } }