tidy-up to the nav search !wip

src/Ombi.TheMovieDbApi/Models/TvInfo.cs

@@ -1,4 +1,6 @@
-namespace Ombi.Api.TheMovieDb.Models
+using Newtonsoft.Json;
+
+namespace Ombi.Api.TheMovieDb.Models
 {
     public class TvInfo
     {
@@ -28,6 +30,7 @@
         public string type { get; set; }
         public float vote_average { get; set; }
         public int vote_count { get; set; }
+        [JsonProperty("external_ids")] public TvExternalIds TvExternalIds { get; set; }
     }
 
     public class Created_By
@@ -71,4 +74,13 @@
         public int season_number { get; set; }
     }
 
+    public class TvExternalIds
+    {
+        [JsonProperty("imdb_id")] public string ImdbId { get; set; }
+        [JsonProperty("tvdb_id")] public string TvDbId { get; set; }
+        [JsonProperty("tvrage_id")] public string TvRageId { get; set; }
+        [JsonProperty("facebook_id")] public string FacebookId { get; set; }
+        [JsonProperty("instagram_id")] public string InstagramId { get; set; }
+        [JsonProperty("twitter_id")] public string TwitterHandle { get; set; }
+    }
 }

src/Ombi.TheMovieDbApi/TheMovieDbApi.cs

@@ -167,6 +167,7 @@ namespace Ombi.Api.TheMovieDb
         {
             var request = new Request($"/tv/{themoviedbid}", BaseUri, HttpMethod.Get);
             request.FullUri = request.FullUri.AddQueryParameter("api_key", ApiToken);
+            request.FullUri = request.FullUri.AddQueryParameter("append_to_response", "external_ids");
             AddRetry(request);
 
             return await Api.Request<TvInfo>(request);

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

@@ -47,6 +47,7 @@ import { IssuesService, JobService, PlexTvService, StatusService, SearchService,
 import { MyNavComponent } from './my-nav/my-nav.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { SearchV2Service } from "./services/searchV2.service";
+import { NavSearchComponent } from "./my-nav/nav-search.component";
 
 const routes: Routes = [
     { path: "*", component: PageNotFoundComponent },
@@ -143,7 +144,7 @@ export function JwtTokenGetter() {
         CookieComponent,
         LoginOAuthComponent,
         MyNavComponent,
-        
+        NavSearchComponent,
     ],
     providers: [
         NotificationService,

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -16,24 +16,19 @@
       </button>
 
       <span class="spacer"></span>
-      <mat-form-field class="quater-width">
+
-        <input [(ngModel)]="searchText" (keyup)="search($event)" matInput  [matAutocomplete]="auto">
+      <!-- Search Bar -->
-        <mat-autocomplete  #auto="matAutocomplete">
+
-          <mat-option *ngFor="let option of searchResult" [value]="option">
+      <app-nav-search></app-nav-search>
-            <img src="https://image.tmdb.org/t/p/w300/{{option.poster_path}}" class="autocomplete-img" aria-hidden/>
+      
-            <span *ngIf="option.media_type == 'tv'">
+
-              {{option.name}}
-            </span>
-            <span *ngIf="option.media_type == 'movie'">
-              {{option.title}}
-            </span>
-          </mat-option>
-        </mat-autocomplete>
-      </mat-form-field>
     </mat-toolbar>
-    <!-- Add Content Here -->
+
+    <!-- Page -->
     <div [ngClass]="{'container top-spacing': showNav}">
       <router-outlet></router-outlet>
     </div>
+
+    
   </mat-sidenav-content>
 </mat-sidenav-container>

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

@@ -3,8 +3,6 @@ import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable, Subject } from 'rxjs';
 import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
-import { SearchV2Service } from '../services/searchV2.service';
-import { IMultiSearchResult } from '../interfaces';
 
 @Component({
   selector: 'app-my-nav',
@@ -19,24 +17,7 @@ export class MyNavComponent {
     );
 
   @Input() public showNav: boolean;
-  public searchChanged: Subject<string> = new Subject<string>();
-  public searchText: string;
-  public searchResult: IMultiSearchResult[];
-  public option: IMultiSearchResult;
 
-  constructor(private breakpointObserver: BreakpointObserver,
+  constructor(private breakpointObserver: BreakpointObserver) {
-    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)
-    });
   }
-
-  public search(text: any) {
-    this.searchChanged.next(text.target.value);
-  }
-
 }

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

@@ -0,0 +1,15 @@
+<mat-form-field class="quater-width">
+    <input [(ngModel)]="searchText" (keyup)="search($event)" matInput  [matAutocomplete]="auto">
+    <mat-autocomplete  #auto="matAutocomplete">
+      <mat-option *ngFor="let option of searchResult" [value]="option">
+        <img src="https://image.tmdb.org/t/p/w92/{{option.poster_path}}" class="autocomplete-img" aria-hidden/>
+        <span *ngIf="option.media_type == 'tv'">
+          {{option.name}}
+        </span>
+        <span *ngIf="option.media_type == 'movie'">
+          {{option.title}}
+        </span>
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</mat-toolbar>

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

@@ -0,0 +1,14 @@
+.quater-width {
+  width: 25%;
+}
+
+.autocomplete-img {
+  vertical-align: middle;
+  height: 63px;
+}
+
+.mat-option {
+  height: 50px;
+  line-height: 50px;
+  padding: 0px 5px;
+}

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

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable, Subject } from 'rxjs';
+import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { SearchV2Service } from '../services/searchV2.service';
+import { IMultiSearchResult } from '../interfaces';
+
+@Component({
+  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 option: 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)
+    });
+  }
+
+  public search(text: any) {
+    this.searchChanged.next(text.target.value);
+  }
+}