Added the new backgrounds for the requests pages

pull/1684/head
tidusjar 7 years ago
parent 7dccd63ff0
commit be97fcfa86

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

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

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

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

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

Loading…
Cancel
Save