Added poster and bg to issue details page as per Issue #1907

src/Ombi/ClientApp/app/issues/issueDetails.component.html

@@ -1,13 +1,16 @@
 <div *ngIf="issue">
+    <div class="myBg backdrop" [style.background-image]="backgroundPath"></div>
+    <div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
     <h1>{{issue.title}} </h1>
     <div class="col-md-6">
-            <span class="label label-info">{{IssueStatus[issue.status]}}</span>
-            <span class="label label-success">{{issue.issueCategory.value}}</span>
-        
-            <h3 *ngIf="issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}: {{issue.userReported.alias}}</h3>
-            <h3 *ngIf="!issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}: {{issue.userReported.userName}}</h3>
+        <img class="img-responsive poster" src="{{posterPath}}" alt="poster">
+        <span class="label label-info">{{IssueStatus[issue.status]}}</span>
+        <span class="label label-success">{{issue.issueCategory.value}}</span>
+
+        <h3 *ngIf="issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}: {{issue.userReported.alias}}</h3>
+        <h3 *ngIf="!issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}: {{issue.userReported.userName}}</h3>
         <h3 *ngIf="issue.subject">{{'Issues.Subject' | translate}}: {{issue.subject}}</h3>
-<br>
+        <br>
         <div class="form-group">
             <label for="description" class="control-label" [translate]="'Issues.Description'"></label>
             <div>
@@ -26,7 +29,8 @@
                 <div class="panel-heading top-bar">
                     <div class="col-md-8 col-xs-8">
                         <h3 class="panel-title">
-                            <span class="glyphicon glyphicon-comment"></span> {{'Issues.Comments' | translate}}</h3>
+                            <span class="glyphicon glyphicon-comment"></span> {{'Issues.Comments' | translate}}
+                        </h3>
                     </div>
                 </div>
 
@@ -51,8 +55,7 @@
                 </div>
                 <div class="panel-footer">
                     <div class="input-group">
-                        <input id="btn-input" type="text" class="form-control input-sm chat_input" [(ngModel)]="newComment.comment"  [attr.placeholder]="'Issues.WriteMessagePlaceholder' | translate"
-                        />
+                        <input id="btn-input" type="text" class="form-control input-sm chat_input" [(ngModel)]="newComment.comment" [attr.placeholder]="'Issues.WriteMessagePlaceholder' | translate" />
                         <span class="input-group-btn">
                             <button class="btn btn-primary btn-sm" id="btn-chat" (click)="addComment()" [translate]="'Issues.SendMessageButton'"></button>
                         </span>

src/Ombi/ClientApp/app/issues/issueDetails.component.scss

@@ -64,6 +64,15 @@ body{
     overflow: hidden;
     display: flex;
 }
+.myBg {
+    z-index: -1;
+}
+.tint {
+    z-index: -1;
+}
+img-responsive poster {
+    display:block;
+}
 img {
     display: block;
     width: 100%;

src/Ombi/ClientApp/app/issues/issueDetails.component.ts

@@ -2,8 +2,9 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
 import { AuthService } from "../auth/auth.service";
-import { IssuesService, NotificationService, SettingsService } from "../services";
+import { ImageService, IssuesService, NotificationService, SearchService, SettingsService } from "../services";
 
+import { DomSanitizer } from "@angular/platform-browser";
 import { IIssues, IIssuesChat, IIssueSettings, INewIssueComments, IssueStatus } from "../interfaces";
 
 @Component({
@@ -22,6 +23,8 @@ export class IssueDetailsComponent implements OnInit {
     public IssueStatus = IssueStatus;
     public isAdmin: boolean;
     public settings: IIssueSettings;
+    public backgroundPath: any;
+    public posterPath: any;
     
     private issueId: number;
 
@@ -29,7 +32,10 @@ export class IssueDetailsComponent implements OnInit {
                 private route: ActivatedRoute,
                 private authService: AuthService,
                 private settingsService: SettingsService,
-                private notificationService: NotificationService) { 
+                private notificationService: NotificationService,
+                private imageService: ImageService,
+                private searchService: SearchService,
+                private sanitizer: DomSanitizer) { 
             this.route.params
             .subscribe((params: any) => {
                   this.issueId = parseInt(params.id);    
@@ -56,8 +62,8 @@ export class IssueDetailsComponent implements OnInit {
                 providerId: x.providerId,
                 userReported: x.userReported,
             };
+            this.setBackground(x);
         });
-        
         this.loadComments();
     }
 
@@ -85,4 +91,24 @@ export class IssueDetailsComponent implements OnInit {
     private loadComments() {
         this.issueService.getComments(this.issueId).subscribe(x => this.comments = x);
     }
+
+    private setBackground(issue: any) {
+        if (issue.requestType === 1) {
+            this.searchService.getMovieInformation(Number(issue.providerId)).subscribe(x => {
+                this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
+                    ("url(" + "https://image.tmdb.org/t/p/w1280" + x.backdropPath + ")");
+                this.posterPath = "https://image.tmdb.org/t/p/w300/" + x.posterPath;
+            });
+            
+        } else {
+            this.imageService.getTvBanner(Number(issue.providerId)).subscribe(x => {
+                this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
+                    ("url(" + x + ")");
+            });
+            this.searchService.getShowInformationTreeNode(Number(issue.providerId)).subscribe(x => {
+                this.posterPath = x.data.banner;
+            });
+        }
+
+    }
 }

src/Ombi/ClientApp/app/issues/issues.module.ts

@@ -5,7 +5,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { OrderModule } from "ngx-order-pipe";
 import { PaginatorModule, SharedModule, TabViewModule } from "primeng/primeng";
 
-import { IdentityService } from "../services";
+import { IdentityService, SearchService } from "../services";
 
 import { AuthGuard } from "../auth/auth.guard";
 
@@ -43,6 +43,7 @@ const routes: Routes = [
     ],
     providers: [
         IdentityService,
+        SearchService,
     ],
 
 })

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

@@ -207,7 +207,7 @@
 
 
 <issue-report [movie]="true" [visible]="issuesBarVisible" (visibleChange)="issuesBarVisible = $event;" [title]="issueRequest?.title"
-    [issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]=""></issue-report>
+    [issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId"></issue-report>
 
 
 <p-sidebar [(visible)]="filterDisplay" styleClass="ui-sidebar-md side-back side-small">

src/Ombi/ClientApp/app/requests/tvrequest-children.component.html

@@ -105,4 +105,4 @@
 
 
 <issue-report [movie]="false" [visible]="issuesBarVisible" [title]="issueRequest?.title"
-[issueCategory]="issueCategorySelected" [id]="issueRequest?.id" (visibleChange)="issuesBarVisible = $event;"></issue-report>
+[issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId" (visibleChange)="issuesBarVisible = $event;"></issue-report>

src/Ombi/ClientApp/app/requests/tvrequest-children.component.ts

@@ -105,6 +105,7 @@ export class TvRequestChildrenComponent {
         this.issueRequest = req;
         this.issueCategorySelected = catId;
         this.issuesBarVisible = true;
+        this.issueProviderId = req.id.toString();
     }
 
     private removeRequestFromUi(key: IChildRequests) {

src/Ombi/ClientApp/app/shared/issues-report.component.ts

@@ -15,6 +15,8 @@ export class IssuesReportComponent {
     @Input() public issueCategory: IIssueCategory;
     @Input() public movie: boolean;
     @Input() public providerId: string;
+    @Input() public background: string;
+    @Input() public posterPath: string;
 
     @Output() public visibleChange = new EventEmitter<boolean>();