From 0c97737aabed534bd882d260bb1c1edc29333e21 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Tue, 6 Oct 2020 16:03:16 +0100 Subject: [PATCH] Got background images loading on the grid --- .../actor/discover-actor.component.ts | 3 +- .../discover-collections.component.ts | 3 +- .../discover/discover.component.html | 2 +- .../components/discover/discover.component.ts | 6 +- .../grid/discover-grid.component.html | 97 +++++++++++-------- .../grid/discover-grid.component.scss | 5 + .../grid/discover-grid.component.ts | 28 +++++- .../ClientApp/src/app/discover/interfaces.ts | 1 + 8 files changed, 99 insertions(+), 46 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts b/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts index aba34bff9..4a06b22d8 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/actor/discover-actor.component.ts @@ -56,7 +56,8 @@ export class DiscoverActorComponent implements AfterViewInit { overview: m.overview, approved: false, imdbid: "", - denied: false + denied: false, + background: "" }); }); } diff --git a/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts b/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts index 108db606c..9008dd8ca 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/collections/discover-collections.component.ts @@ -54,7 +54,8 @@ export class DiscoverCollectionsComponent implements OnInit { overview: m.overview, approved: m.approved, imdbid: m.imdbId, - denied:false + denied:false, + background: "" }); }); } diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html index cb95a7524..25a120304 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html @@ -1,6 +1,6 @@
-
+
dashboard calendar_view_day diff --git a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts index c604a3b31..c42a0417d 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts @@ -270,7 +270,8 @@ export class DiscoverComponent implements OnInit { overview: m.overview, approved: m.approved, imdbid: m.imdbId, - denied: false + denied: false, + background: m.backdropPath }); }); return tempResults; @@ -291,7 +292,8 @@ export class DiscoverComponent implements OnInit { overview: m.overview, approved: m.approved, imdbid: m.imdbId, - denied: false + denied: false, + background: m.background }); }); return tempResults; diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html index a9e876c26..aac17c79c 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html @@ -15,12 +15,12 @@
- +
-
+
{{result.title}}
-
+

{{result.title}}

@@ -38,40 +38,57 @@ {{'Common.RequestDenied' | translate}} - + {{'Common.PendingApproval' | translate}} - play_circle_outline - play_circle_outline + + + play_circle_outline + + + + play_circle_outline + - play_circle_outline - play_circle_outline + + + play_circle_outline + + + + play_circle_outline +
- - {{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}} + + + {{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}} + - {{'Discovery.CardDetails.Network' | translate}}: {{tv.network.name}} + {{'Discovery.CardDetails.Network' | translate}}: + {{tv.network.name}} - {{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}} + + {{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}} - Director: {{tvCreator}} + Director: {{tvCreator}} - {{'Discovery.CardDetails.InCinemas' | translate}}: {{movie.releaseDate | amLocal | amDateFormat: 'LL'}} + {{'Discovery.CardDetails.InCinemas' | translate}}: + {{movie.releaseDate | amLocal | amDateFormat: 'LL'}} - {{'Discovery.CardDetails.FirstAired' | translate}}: {{tv.firstAired | amLocal | amDateFormat: 'LL'}} + {{'Discovery.CardDetails.FirstAired' | translate}}: + {{tv.firstAired | amLocal | amDateFormat: 'LL'}} - {{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}} + + {{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}} - {{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}} + {{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}} + - + @@ -81,24 +98,26 @@
-
-
-
- + - @@ -113,24 +132,26 @@
- - - + - + - {{'Search.ViewOnPlex' | + {{'Search.ViewOnPlex' | translate}} {{'Search.ViewOnEmby' | translate}}
+
-
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss index 3e05e3c48..caecaddb0 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.scss @@ -129,4 +129,9 @@ small { .overview { font-size: 1.2em; +} + +.backdrop { + background-position: 50% 33%; + background-size: cover; } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts index 6e51985ce..4c28c1174 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts +++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.ts @@ -1,13 +1,14 @@ import { Component, OnInit, Input } from "@angular/core"; import { IDiscoverCardResult } from "../../interfaces"; import { RequestType, ISearchTvResult, ISearchMovieResult, ISearchMovieResultContainer } from "../../../interfaces"; -import { RequestService, SearchV2Service } from "../../../services"; +import { ImageService, 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"; +import { DomSanitizer } from "@angular/platform-browser"; @Component({ selector: "discover-grid", @@ -27,7 +28,7 @@ export class DiscoverGridComponent implements OnInit { constructor(private searchService: SearchV2Service, private dialog: MatDialog, private requestService: RequestService, private notification: MatSnackBar, - private router: Router) { } + private router: Router, private sanitizer: DomSanitizer, private imageService: ImageService) { } public ngOnInit() { if (this.result.type == RequestType.tvShow) { @@ -54,7 +55,7 @@ export class DiscoverGridComponent implements OnInit { if (crewResult && crewResult.person) { this.tvProducer = crewResult.person.name; } - + this.setTvBackground(); } public openDetails() { @@ -85,9 +86,30 @@ export class DiscoverGridComponent implements OnInit { this.movie = m; this.updateMovieItem(m); }); + + this.setMovieBackground() // } } + private setMovieBackground(): void { + this.result.background = this.sanitizer.bypassSecurityTrustStyle + ("linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(" + "https://image.tmdb.org/t/p/original" + this.result.background + ")"); + } + + private setTvBackground(): void { + if (this.result.background != null) { + this.result.background = this.sanitizer.bypassSecurityTrustStyle + ("linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(https://image.tmdb.org/t/p/original" + this.result.background + ")"); + } else { + this.imageService.getTvBanner(this.result.id).subscribe(x => { + if (x) { + this.result.background = this.sanitizer.bypassSecurityTrustStyle + ("linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(" + x + ")"); + } + }); + } + } + private updateMovieItem(updated: ISearchMovieResultV2) { this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/"; this.result.available = updated.available; diff --git a/src/Ombi/ClientApp/src/app/discover/interfaces.ts b/src/Ombi/ClientApp/src/app/discover/interfaces.ts index f17cd9768..8a3276a2d 100644 --- a/src/Ombi/ClientApp/src/app/discover/interfaces.ts +++ b/src/Ombi/ClientApp/src/app/discover/interfaces.ts @@ -13,6 +13,7 @@ export interface IDiscoverCardResult { rating: number; overview: string; imdbid: string; + background: string|any; } export enum DiscoverOption {