Merge pull request #2093 from anojht/issue1907

Fix for 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, 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,9 @@ export class IssueDetailsComponent implements OnInit {
                 private route: ActivatedRoute,
                 private authService: AuthService,
                 private settingsService: SettingsService,
-                private notificationService: NotificationService) { 
+                private notificationService: NotificationService,
+                private imageService: ImageService,
+                private sanitizer: DomSanitizer) { 
             this.route.params
             .subscribe((params: any) => {
                   this.issueId = parseInt(params.id);    
@@ -56,8 +61,8 @@ export class IssueDetailsComponent implements OnInit {
                 providerId: x.providerId,
                 userReported: x.userReported,
             };
+            this.setBackground(x);
         });
-        
         this.loadComments();
     }
 
@@ -85,4 +90,26 @@ 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.imageService.getMovieBackground(issue.providerId).subscribe(x => {
+                this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
+                    ("url(" + x + ")");
+            });
+            this.imageService.getMoviePoster(issue.providerId).subscribe(x => {
+                this.posterPath = x.toString();
+            });
+
+        } else {
+            this.imageService.getTvBackground(Number(issue.providerId)).subscribe(x => {
+                this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
+                    ("url(" + x + ")");
+            });
+            this.imageService.getTvPoster(Number(issue.providerId)).subscribe(x => {
+                this.posterPath = x.toString();
+            });
+        }
+
+    }
 }

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/services/image.service.ts

@@ -19,11 +19,22 @@ export class ImageService extends ServiceHelpers {
 
     public getTvBanner(tvdbid: number): Observable<string> {
         return this.http.get<string>(`${this.url}tv/${tvdbid}`, {headers: this.headers});
-    }    
-    public getMoviePoster(themoviedbid: string): Observable<string> {
-        return this.http.get<string>(`${this.url}poster/movie/${themoviedbid}`, {headers: this.headers});
     }
+    
+    public getMoviePoster(movieDbId: string): Observable<string> {
+        return this.http.get<string>(`${this.url}poster/movie/${movieDbId}`, { headers: this.headers });
+    }
+    
     public getTvPoster(tvdbid: number): Observable<string> {
-        return this.http.get<string>(`${this.url}poster/tv/${tvdbid}`, {headers: this.headers});
+        return this.http.get<string>(`${this.url}poster/tv/${tvdbid}`, { headers: this.headers });
     }
+    
+    public getMovieBackground(movieDbId: string): Observable<string> {
+        return this.http.get<string>(`${this.url}background/movie/${movieDbId}`, { headers: this.headers });
+    }
+    
+    public getTvBackground(tvdbid: number): Observable<string> {
+        return this.http.get<string>(`${this.url}background/tv/${tvdbid}`, { headers: this.headers });
+    }
+    
 }

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>();
 

src/Ombi/Controllers/ImagesController.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc;
 using Ombi.Api.FanartTv;
 using Ombi.Store.Repository;
 using System;
@@ -31,7 +31,7 @@ namespace Ombi.Controllers
         private IApplicationConfigRepository Config { get; }
         private LandingPageBackground Options { get; }
         private readonly ICacheService _cache;
-        
+
         [HttpGet("tv/{tvdbid}")]
         public async Task<string> GetTvBanner(int tvdbid)
         {
@@ -71,7 +71,7 @@ namespace Ombi.Controllers
 
             if (images.movieposter?.Any() ?? false)
             {
-                var enImage =  images.movieposter.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
+                var enImage = images.movieposter.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
                 if (enImage == null)
                 {
                     return images.movieposter.OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
@@ -117,6 +117,56 @@ namespace Ombi.Controllers
             return string.Empty;
         }
 
+        [HttpGet("background/movie/{movieDbId}")]
+        public async Task<string> GetMovieBackground(string movieDbId)
+        {
+            var key = await _cache.GetOrAdd(CacheKeys.FanartTv, async () => await Config.Get(Store.Entities.ConfigurationTypes.FanartTv), DateTime.Now.AddDays(1));
+
+            var images = await FanartTvApi.GetMovieImages(movieDbId, key.Value);
+
+            if (images == null)
+            {
+                return string.Empty;
+            }
+
+            if (images.moviebackground?.Any() ?? false)
+            {
+                var enImage = images.moviebackground.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
+                if (enImage == null)
+                {
+                    return images.moviebackground.OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
+                }
+                return enImage;
+            }
+
+            return string.Empty;
+        }
+
+        [HttpGet("background/tv/{tvdbid}")]
+        public async Task<string> GetTvBackground(int tvdbid)
+        {
+            var key = await _cache.GetOrAdd(CacheKeys.FanartTv, async () => await Config.Get(Store.Entities.ConfigurationTypes.FanartTv), DateTime.Now.AddDays(1));
+
+            var images = await FanartTvApi.GetTvImages(tvdbid, key.Value);
+
+            if (images == null)
+            {
+                return string.Empty;
+            }
+
+            if (images.showbackground?.Any() ?? false)
+            {
+                var enImage = images.showbackground.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
+                if (enImage == null)
+                {
+                    return images.showbackground.OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
+                }
+                return enImage;
+            }
+
+            return string.Empty;
+        }
+
         [HttpGet("background")]
         public async Task<object> GetBackgroundImage()
         {
@@ -133,7 +183,7 @@ namespace Ombi.Controllers
             {
                 var item = rand.Next(moviesArray.Length);
                 var result = await FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value);
- 
+
                 while (!result.moviebackground.Any())
                 {
                     result = await FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value);
@@ -141,7 +191,7 @@ namespace Ombi.Controllers
 
                 movieUrl = result.moviebackground[0].url;
             }
-            if(tvArray.Any())
+            if (tvArray.Any())
             {
                 var item = rand.Next(tvArray.Length);
                 var result = await FanartTvApi.GetTvImages(tvArray[item], key.Value);
@@ -157,8 +207,8 @@ namespace Ombi.Controllers
             if (!string.IsNullOrEmpty(movieUrl) && !string.IsNullOrEmpty(tvUrl))
             {
                 var result = rand.Next(2);
-                if (result == 0) return new { url = movieUrl }; 
-                if (result == 1) return new { url = tvUrl }; 
+                if (result == 0) return new { url = movieUrl };
+                if (result == 1) return new { url = tvUrl };
             }
 
             if (!string.IsNullOrEmpty(movieUrl))