trying to do a fucking banner !wip

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

@@ -69,6 +69,7 @@ const routes: Routes = [
     { loadChildren: "./search/search.module#SearchModule", path: "search" },
     { loadChildren: "./recentlyAdded/recentlyAdded.module#RecentlyAddedModule", path: "recentlyadded" },
     { loadChildren: "./vote/vote.module#VoteModule", path: "vote" },
+    { loadChildren: "./media-details/media-details.module#MediaDetailsModule", path: "details" },
 ];
 
 // AoT requires an exported function for factories

src/Ombi/ClientApp/src/app/media-details/media-details.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+
+import { SearchService } from "../services";
+
+import { SharedModule } from "../shared/shared.module";
+import { MovieDetailsComponent } from "./movie-details.component";
+
+const routes: Routes = [
+    { path: "movie/:movieDbId", component: MovieDetailsComponent },
+];
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        SharedModule,
+    ],
+    declarations: [
+        MovieDetailsComponent,
+    ],
+    exports: [
+        RouterModule,
+    ],
+    providers: [
+        SearchService
+        ],
+
+})
+export class MediaDetailsModule { }

src/Ombi/ClientApp/src/app/media-details/movie-details.component.html

@@ -0,0 +1,12 @@
+<div *ngIf="movie">
+    <div>
+        <img src="{{movie.background}}" class="banner" />
+    </div>
+
+    
+    <div class="row">
+        <div>
+            {{movie.title}}
+        </div>
+        </div>
+</div>

src/Ombi/ClientApp/src/app/media-details/movie-details.component.scss

@@ -0,0 +1,7 @@
+.banner {
+position: absolute;
+top: 0px;
+left: 0px;
+right: 0px;
+width: 100%;
+}

src/Ombi/ClientApp/src/app/media-details/movie-details.component.ts

@@ -0,0 +1,31 @@
+import { Component } from "@angular/core";
+import { SearchService, ImageService } from "../services";
+import { ActivatedRoute } from "@angular/router";
+import { ISearchMovieResult } from "../interfaces";
+import { DomSanitizer } from "@angular/platform-browser";
+
+@Component({
+    templateUrl: "./movie-details.component.html",
+    styleUrls: ["./movie-details.component.scss"],
+})
+export class MovieDetailsComponent {
+    public movie: ISearchMovieResult;
+    private theMovidDbId: number;
+
+    constructor(private searchService: SearchService, private route: ActivatedRoute,
+                private sanitizer: DomSanitizer, private imageService: ImageService) {
+        this.route.params.subscribe((params: any) => {
+            this.theMovidDbId = params.movieDbId;
+            this.load();
+        });
+    }
+
+    public load() {
+       this.searchService.getMovieInformation(this.theMovidDbId).subscribe(x => {
+           this.movie = x;
+           
+            this.imageService.getMovieBanner(this.theMovidDbId.toString()).subscribe(x => this.movie.background = x);
+        });
+
+    }
+}

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts

@@ -5,34 +5,38 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { SearchV2Service } from '../services/searchV2.service';
 import { IMultiSearchResult } from '../interfaces';
 import { MatAutocompleteSelectedEvent } from '@angular/material';
+import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-nav-search',
-  templateUrl: './nav-search.component.html',
-  styleUrls: ['./nav-search.component.scss']
+    selector: 'app-nav-search',
+    templateUrl: './nav-search.component.html',
+    styleUrls: ['./nav-search.component.scss']
 })
 export class NavSearchComponent {
 
-  public searchChanged: Subject<string> = new Subject<string>();
-  public searchText: string;
-  public searchResult: IMultiSearchResult[];
+    public searchChanged: Subject<string> = new Subject<string>();
+    public searchText: string;
+    public searchResult: IMultiSearchResult[];
 
-  constructor(private searchService: SearchV2Service) {
-    this.searchChanged.pipe(
-      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;
-      this.searchService.multiSearch(this.searchText).subscribe(x => this.searchResult = x)
-    });
-  }
+    constructor(private searchService: SearchV2Service, private router: Router) {
+        this.searchChanged.pipe(
+            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;
+            this.searchService.multiSearch(this.searchText).subscribe(x => this.searchResult = x)
+        });
+    }
 
-  public search(text: any) {
-    this.searchChanged.next(text.target.value);
-  }
+    public search(text: any) {
+        this.searchChanged.next(text.target.value);
+    }
 
-  public selected(option: MatAutocompleteSelectedEvent) {
-      var selected = option.option.value as IMultiSearchResult;
-      
-  }
+    public selected(option: MatAutocompleteSelectedEvent) {
+        var selected = option.option.value as IMultiSearchResult;
+        if (selected.media_type == "movie") {
+            this.router.navigate([`details/movie/${selected.id}`]);
+            return;
+        }
+    }
 }

src/Ombi/ClientApp/src/app/services/image.service.ts

@@ -31,6 +31,9 @@ export class ImageService extends ServiceHelpers {
 
     public getMovieBackground(movieDbId: string): Observable<string> {
         return this.http.get<string>(`${this.url}background/movie/${movieDbId}`, { headers: this.headers });
+    }  
+      public getMovieBanner(movieDbId: string): Observable<string> {
+        return this.http.get<string>(`${this.url}banner/movie/${movieDbId}`, { headers: this.headers });
     }
 
     public getTvBackground(tvdbid: number): Observable<string> {

src/Ombi/Controllers/V1/ImagesController.cs

@@ -147,6 +147,31 @@ namespace Ombi.Controllers.V1
             return string.Empty;
         }
 
+        [HttpGet("banner/movie/{movieDbId}")]
+        public async Task<string> GetMovieBanner(string movieDbId)
+        {
+            var key = await _cache.GetOrAdd(CacheKeys.FanartTv, async () => await Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTime.Now.AddDays(1));
+
+            var images = await FanartTvApi.GetMovieImages(movieDbId, key.Value);
+
+            if (images == null)
+            {
+                return string.Empty;
+            }
+
+            if (images.moviebanner?.Any() ?? false)
+            {
+                var enImage = images.moviebanner.Where(x => x.lang == "en").OrderByDescending(x => x.likes).Select(x => x.url).FirstOrDefault();
+                if (enImage == null)
+                {
+                    return images.moviebanner.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)
         {