github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 21:33:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Got background images loading on the grid

Browse source
This commit is contained in:
tidusjar 2020-10-06 16:03:16 +01:00
commit 0c97737aab
8 changed files with 99 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -56,7 +56,8 @@ export class DiscoverActorComponent implements AfterViewInit {
overview: m.overview, overview: m.overview,
approved: false, approved: false,
imdbid: "", imdbid: "",
denied: false denied: false,
background: ""
}); });
}); });
} }

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

@ -54,7 +54,8 @@ export class DiscoverCollectionsComponent implements OnInit {
overview: m.overview, overview: m.overview,
approved: m.approved, approved: m.approved,
imdbid: m.imdbId, imdbid: m.imdbId,
denied:false denied:false,
background: ""
}); });
}); });
} }

2
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
View file

@ -1,6 +1,6 @@
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="btn-group col-1 small-space" role="group"> <div class="btn-group col-12 col-md-3 small-space" style="float:left;" role="group">
<mat-button-toggle-group *ngIf="displayOption"> <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.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 [ngClass]="displayOption === DisplayOption.List ? 'mat-button-toggle-checked' : ''" (click)="changeView(DisplayOption.List)"><mat-icon>calendar_view_day</mat-icon></mat-button-toggle>

6
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.ts
View file

@ -270,7 +270,8 @@ export class DiscoverComponent implements OnInit {
overview: m.overview, overview: m.overview,
approved: m.approved, approved: m.approved,
imdbid: m.imdbId, imdbid: m.imdbId,
denied: false denied: false,
background: m.backdropPath
}); });
}); });
return tempResults; return tempResults;
@ -291,7 +292,8 @@ export class DiscoverComponent implements OnInit {
overview: m.overview, overview: m.overview,
approved: m.approved, approved: m.approved,
imdbid: m.imdbId, imdbid: m.imdbId,
denied: false denied: false,
background: m.background
}); });
}); });
return tempResults; return tempResults;

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

@ -15,12 +15,12 @@
<div class="top-spacing"> <div class="top-spacing">
<mat-card class="mat-elevation-z8 dark-card"> <mat-card class="mat-elevation-z8 dark-card backdrop" [style.background-image]="result.background">
<div class="row main-container"> <div class="row main-container">
<div class="col-2"> <div class="col-md-2 col-12">
<img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}"> <img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
</div> </div>
<div class="col-8"> <div class="col-md-8 col-12">
<div class="row"> <div class="row">
<h1>{{result.title}}</h1> <h1>{{result.title}}</h1>
</div> </div>
@ -38,38 +38,55 @@
{{'Common.RequestDenied' | translate}} {{'Common.RequestDenied' | translate}}
</mat-chip> </mat-chip>
<mat-chip *ngIf="result.requested && !result.approved && !result.available && !result.denied" class="requested"> <mat-chip *ngIf="result.requested && !result.approved && !result.available && !result.denied"
class="requested">
{{'Common.PendingApproval' | translate}} {{'Common.PendingApproval' | translate}}
</mat-chip> </mat-chip>
<mat-chip *ngIf="movie && movie.plexUrl"> <a href="{{movie.plexUrl}}" target="_blank"><mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}" <mat-chip *ngIf="movie && movie.plexUrl"> <a href="{{movie.plexUrl}}" target="_blank">
>play_circle_outline</mat-icon></a></mat-chip> <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}">
<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>
>play_circle_outline</mat-icon></a></mat-chip> </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}}" <mat-chip *ngIf="tv && tv.plexUrl"> <a href="{{tv.plexUrl}}" target="_blank">
>play_circle_outline</mat-icon></a></mat-chip> <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}">
<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>
>play_circle_outline</mat-icon></a></mat-chip> </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> </mat-chip-list>
</div> </div>
<div class="row"> <div class="row">
<mat-chip-list class="top-spacing"> <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="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="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="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="tvCreator">Director: {{tvCreator}}</mat-chip>
<mat-chip *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: {{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</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="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="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 *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}}
</mat-chip>
</mat-chip-list> </mat-chip-list>
@ -81,7 +98,7 @@
</div> </div>
</div> </div>
<div class="col-2" > <div class="col-md-2 col-12">
<div style="float:right;"> <div style="float:right;">
<button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{ <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
'Common.ViewDetails' | translate }}</button> 'Common.ViewDetails' | translate }}</button>
@ -89,15 +106,17 @@
<button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{ <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
'Common.Available' | translate }}</button> 'Common.Available' | translate }}</button>
<span *ngIf="!movie.available"> <span *ngIf="!movie.available">
<span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span> <span
*ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
<ng-template #requestedBtn> <ng-template #requestedBtn>
<button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i> <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}</button> {{ 'Common.Requested' | translate }}</button>
</ng-template> </ng-template>
<ng-template #notRequestedBtn> <ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing" color="primary" (click)="request()"> <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 <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
*ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i> <i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{ <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
'Common.Request' | translate }}</button> 'Common.Request' | translate }}</button>
</ng-template> </ng-template>
@ -114,15 +133,17 @@
</button> </button>
</div> </div>
<button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent" [disabled]> <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
<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]> [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> <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
<span *ngIf="tv.available"> <span *ngIf="tv.available">
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem" <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' | class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
translate}}</a> translate}}</a>
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}" <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' | target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |

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

@ -130,3 +130,8 @@ small {
.overview { .overview {
font-size: 1.2em; font-size: 1.2em;
} }
.backdrop {
background-position: 50% 33%;
background-size: cover;
}

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

@ -1,13 +1,14 @@
import { Component, OnInit, Input } from "@angular/core"; import { Component, OnInit, Input } from "@angular/core";
import { IDiscoverCardResult } from "../../interfaces"; import { IDiscoverCardResult } from "../../interfaces";
import { RequestType, ISearchTvResult, ISearchMovieResult, ISearchMovieResultContainer } 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 { MatDialog } from "@angular/material/dialog";
import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2"; import { ISearchTvResultV2 } from "../../../interfaces/ISearchTvResultV2";
import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2"; import { ISearchMovieResultV2 } from "../../../interfaces/ISearchMovieResultV2";
import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component"; import { EpisodeRequestComponent } from "../../../shared/episode-request/episode-request.component";
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
import { DomSanitizer } from "@angular/platform-browser";
@Component({ @Component({
selector: "discover-grid", selector: "discover-grid",
@ -27,7 +28,7 @@ export class DiscoverGridComponent implements OnInit {
constructor(private searchService: SearchV2Service, private dialog: MatDialog, constructor(private searchService: SearchV2Service, private dialog: MatDialog,
private requestService: RequestService, private notification: MatSnackBar, private requestService: RequestService, private notification: MatSnackBar,
private router: Router) { } private router: Router, private sanitizer: DomSanitizer, private imageService: ImageService) { }
public ngOnInit() { public ngOnInit() {
if (this.result.type == RequestType.tvShow) { if (this.result.type == RequestType.tvShow) {
@ -54,7 +55,7 @@ export class DiscoverGridComponent implements OnInit {
if (crewResult && crewResult.person) { if (crewResult && crewResult.person) {
this.tvProducer = crewResult.person.name; this.tvProducer = crewResult.person.name;
} }
this.setTvBackground();
} }
public openDetails() { public openDetails() {
@ -85,9 +86,30 @@ export class DiscoverGridComponent implements OnInit {
this.movie = m; this.movie = m;
this.updateMovieItem(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) { private updateMovieItem(updated: ISearchMovieResultV2) {
this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/"; this.result.url = "http://www.imdb.com/title/" + updated.imdbId + "/";
this.result.available = updated.available; this.result.available = updated.available;

1
src/Ombi/ClientApp/src/app/discover/interfaces.ts
View file

@ -13,6 +13,7 @@ export interface IDiscoverCardResult {
rating: number; rating: number;
overview: string; overview: string;
imdbid: string; imdbid: string;
background: string|any;
} }
export enum DiscoverOption { export enum DiscoverOption {