Merge branch 'develop' of https://github.com/tidusjar/ombi into develop

build.cake

@@ -1,10 +1,10 @@
 
 #tool "nuget:?package=GitVersion.CommandLine"
 #addin "Cake.Gulp"
-#addin "nuget:?package=Cake.Npm&version=0.13.0"
 #addin "SharpZipLib"
 #addin nuget:?package=Cake.Compression&version=0.1.4
 #addin "Cake.Incubator"
+#addin "Cake.Yarn"
 
 //////////////////////////////////////////////////////////////////////
 // ARGUMENTS
@@ -122,36 +122,19 @@ Task("SetVersionInfo")
 
 Task("NPM")
 	.Does(() => {
-    var settings = new NpmInstallSettings {
+	Yarn.FromPath(webProjDir).Install();
-		LogLevel = NpmLogLevel.Silent,
-		WorkingDirectory = webProjDir,
-		Production = true
-	};
-
-	NpmInstall(settings);
 });
 
 Task("Gulp Publish")
 	.IsDependentOn("NPM")
-	.Does(() => {
+	.Does(() => { 	
- 
+	Yarn.FromPath(webProjDir).RunScript("publish");
-	var runScriptSettings = new NpmRunScriptSettings {
- 		ScriptName="publish",
- 		WorkingDirectory = webProjDir,
- 	};
- 	
- 	NpmRunScript(runScriptSettings);
  });
 
 Task("TSLint")
     .Does(() =>
 {
-	var settings = new NpmRunScriptSettings {
+	Yarn.FromPath(webProjDir).RunScript("lint");
-		WorkingDirectory = webProjDir,
-		ScriptName = "lint"
-	};
-	
-    NpmRunScript(settings);
 });
 
 Task("PrePublish")

src/Ombi.Core.Tests/Rule/Search/EmbyAvailabilityRuleTests.cs

@@ -29,7 +29,10 @@ namespace Ombi.Core.Tests.Rule.Search
             {
                 ProviderId = "123"
             });
-            var search = new SearchMovieViewModel();
+            var search = new SearchMovieViewModel()
+            {
+                TheMovieDbId = "123",
+            };
             var result = await Rule.Execute(search);
 
             Assert.True(result.Success);

src/Ombi.Core/Engine/Interfaces/ITvRequestEngine.cs

@@ -15,9 +15,7 @@ namespace Ombi.Core.Engine.Interfaces
         Task<RequestEngineResult> DenyChildRequest(int requestId);
         Task<RequestsViewModel<TvRequests>> GetRequestsLite(int count, int position, OrderFilterModel type);
         Task<IEnumerable<TvRequests>> SearchTvRequest(string search);
-        Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> SearchTvRequestTree(string search);
         Task<TvRequests> UpdateTvRequest(TvRequests request);
-        Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> GetRequestsTreeNode(int count, int position);
         Task<IEnumerable<ChildRequests>> GetAllChldren(int tvId);
         Task<ChildRequests> UpdateChildRequest(ChildRequests request);
         Task RemoveTvChild(int requestId);

src/Ombi.Core/Engine/Interfaces/ITvSearchEngine.cs

@@ -7,16 +7,10 @@ namespace Ombi.Core.Engine.Interfaces
     public interface ITvSearchEngine
     {
         Task<IEnumerable<SearchTvShowViewModel>> Search(string searchTerm);
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> SearchTreeNode(string searchTerm);
-        Task<TreeNode<SearchTvShowViewModel>> GetShowInformationTreeNode(int tvdbid);
         Task<SearchTvShowViewModel> GetShowInformation(int tvdbid);
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> PopularTree();
         Task<IEnumerable<SearchTvShowViewModel>> Popular();
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> AnticipatedTree();
         Task<IEnumerable<SearchTvShowViewModel>> Anticipated();
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> MostWatchesTree();
         Task<IEnumerable<SearchTvShowViewModel>> MostWatches();
-        Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> TrendingTree();
         Task<IEnumerable<SearchTvShowViewModel>> Trending();
     }
 }

src/Ombi.Core/Engine/TreeNode.cs

@@ -1,23 +0,0 @@
-using System.Collections.Generic;
-
-namespace Ombi.Core.Engine
-{
-
-    public class TreeNode<T>
-    {
-        public string Label { get; set; }
-        public T Data { get; set; }
-        public List<TreeNode<T>> Children { get; set; }
-        public bool Leaf { get; set; }
-        public bool Expanded { get; set; }
-    }
-
-    public class TreeNode<T,U>
-    {
-        public string Label { get; set; }
-        public T Data { get; set; }
-        public List<TreeNode<U>> Children { get; set; }
-        public bool Leaf { get; set; }
-        public bool Expanded { get; set; }
-    }
-}

src/Ombi.Core/Engine/TvRequestEngine.cs

@@ -202,38 +202,6 @@ namespace Ombi.Core.Engine
                 Collection = allRequests
             };
         }
-
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> GetRequestsTreeNode(int count, int position)
-        {
-            var shouldHide = await HideFromOtherUsers();
-            List<TvRequests> allRequests;
-            if (shouldHide.Hide)
-            {
-                allRequests = await TvRepository.Get(shouldHide.UserId)
-                    .Include(x => x.ChildRequests)
-                    .ThenInclude(x => x.SeasonRequests)
-                    .ThenInclude(x => x.Episodes)
-                    .Where(x => x.ChildRequests.Any())
-                    .OrderByDescending(x => x.ChildRequests.Max(y => y.RequestedDate))
-                    .Skip(position).Take(count).ToListAsync();
-
-                FilterChildren(allRequests, shouldHide);
-            }
-            else
-            {
-                allRequests = await TvRepository.Get()
-                    .Include(x => x.ChildRequests)
-                    .ThenInclude(x => x.SeasonRequests)
-                    .ThenInclude(x => x.Episodes)
-                    .Where(x => x.ChildRequests.Any())
-                    .OrderByDescending(x => x.ChildRequests.Max(y => y.RequestedDate))
-                    .Skip(position).Take(count).ToListAsync();
-            }
-
-            allRequests.ForEach(async r => { await CheckForSubscription(shouldHide, r); });
-            return ParseIntoTreeNode(allRequests);
-        }
-
         public async Task<IEnumerable<TvRequests>> GetRequests()
         {
             var shouldHide = await HideFromOtherUsers();
@@ -360,24 +328,7 @@ namespace Ombi.Core.Engine
             return results;
         }
 
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> SearchTvRequestTree(string search)
+      public async Task<TvRequests> UpdateTvRequest(TvRequests request)
-        {
-            var shouldHide = await HideFromOtherUsers();
-            IQueryable<TvRequests> allRequests;
-            if (shouldHide.Hide)
-            {
-                allRequests = TvRepository.Get(shouldHide.UserId);
-            }
-            else
-            {
-                allRequests = TvRepository.Get();
-            }
-            var results = await allRequests.Where(x => x.Title.Contains(search, CompareOptions.IgnoreCase)).ToListAsync();
-            results.ForEach(async r => { await CheckForSubscription(shouldHide, r); });
-            return ParseIntoTreeNode(results);
-        }
-
-        public async Task<TvRequests> UpdateTvRequest(TvRequests request)
         {
             await Audit.Record(AuditType.Updated, AuditArea.TvRequest, $"Updated Request {request.Title}", Username);
             var allRequests = TvRepository.Get();
@@ -596,29 +547,7 @@ namespace Ombi.Core.Engine
             return await AfterRequest(model.ChildRequests.FirstOrDefault());
         }
 
-        private static List<TreeNode<TvRequests, List<ChildRequests>>> ParseIntoTreeNode(IEnumerable<TvRequests> result)
+       private static List<ChildRequests> SortEpisodes(List<ChildRequests> items)
-        {
-            var node = new List<TreeNode<TvRequests, List<ChildRequests>>>();
-
-            foreach (var value in result)
-            {
-                node.Add(new TreeNode<TvRequests, List<ChildRequests>>
-                {
-                    Data = value,
-                    Children = new List<TreeNode<List<ChildRequests>>>
-                    {
-                        new TreeNode<List<ChildRequests>>
-                        {
-                            Data = SortEpisodes(value.ChildRequests),
-                            Leaf = true
-                        }
-                    }
-                });
-            }
-            return node;
-        }
-
-        private static List<ChildRequests> SortEpisodes(List<ChildRequests> items)
         {
             foreach (var value in items)
             {

src/Ombi.Core/Engine/TvSearchEngine.cs

@@ -59,11 +59,6 @@ namespace Ombi.Core.Engine
             return null;
         }
 
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> SearchTreeNode(string searchTerm)
-        {
-            var result = await Search(searchTerm);
-            return result.Select(ParseIntoTreeNode).ToList();
-        }
         public async Task<SearchTvShowViewModel> GetShowInformation(int tvdbid)
         {
             var show = await TvMazeApi.ShowLookupByTheTvDbId(tvdbid);
@@ -116,19 +111,6 @@ namespace Ombi.Core.Engine
             return await ProcessResult(mapped);
         }
 
-        public async Task<TreeNode<SearchTvShowViewModel>> GetShowInformationTreeNode(int tvdbid)
-        {
-            var result = await GetShowInformation(tvdbid);
-            return ParseIntoTreeNode(result);
-        }
-
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> PopularTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.PopularTv, async () => await TraktApi.GetPopularShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
-
         public async Task<IEnumerable<SearchTvShowViewModel>> Popular()
         {
             var result = await Cache.GetOrAdd(CacheKeys.PopularTv, async () => await TraktApi.GetPopularShows(), DateTime.Now.AddHours(12));
@@ -136,12 +118,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-                public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> AnticipatedTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.AnticipatedTv, async () => await TraktApi.GetAnticipatedShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
         public async Task<IEnumerable<SearchTvShowViewModel>> Anticipated()
         {
 
@@ -150,12 +126,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> MostWatchesTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.MostWatchesTv, async () => await TraktApi.GetMostWatchesShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
         public async Task<IEnumerable<SearchTvShowViewModel>> MostWatches()
         {
             var result = await Cache.GetOrAdd(CacheKeys.MostWatchesTv, async () => await TraktApi.GetMostWatchesShows(), DateTime.Now.AddHours(12));
@@ -163,13 +133,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> TrendingTree()
-        {
-            var result = await Cache.GetOrAdd(CacheKeys.TrendingTv, async () => await TraktApi.GetTrendingShows(), DateTime.Now.AddHours(12));
-            var processed = await ProcessResults(result);
-            return processed.Select(ParseIntoTreeNode).ToList();
-        }
-
         public async Task<IEnumerable<SearchTvShowViewModel>> Trending()
         {
             var result = await Cache.GetOrAdd(CacheKeys.TrendingTv, async () => await TraktApi.GetTrendingShows(), DateTime.Now.AddHours(12));
@@ -177,22 +140,6 @@ namespace Ombi.Core.Engine
             return processed;
         }
 
-        private static TreeNode<SearchTvShowViewModel> ParseIntoTreeNode(SearchTvShowViewModel result)
-        {
-            return new TreeNode<SearchTvShowViewModel>
-            {
-                Data = result,
-                Children = new List<TreeNode<SearchTvShowViewModel>>
-                {
-                    new TreeNode<SearchTvShowViewModel>
-                    {
-                        Data = result, Leaf = true
-                    }
-                },
-                Leaf = false
-            };
-        }
-
         private async Task<IEnumerable<SearchTvShowViewModel>> ProcessResults<T>(IEnumerable<T> items)
         {
             var retVal = new List<SearchTvShowViewModel>();

src/Ombi/.gitignore

@@ -1,23 +1,10 @@
-/wwwroot/css/**
+node_modules
-/wwwroot/fonts/**
+bin
-/wwwroot/lib/**
+obj
-/wwwroot/maps/**
+wwwroot/dist
-/wwwroot/dist/**
+*.log
-/wwwroot/*.js.map
-/wwwroot/*.js
-
-# dependencies
-/node_modules
-/bower_components
-
-# misc
 /.sass-cache
 /connect.lock
 /coverage/*
-/libpeerconnection.log
-npm-debug.log
-testem.log
-#/typings
-/systemjs.config.js*
 /Logs/**
 **.db

src/Ombi/.vscode/tasks.json

@@ -4,7 +4,7 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "taskName": "restore",
+            "label": "restore",
             "command": "npm",
             "type": "shell",
             "args": [
@@ -14,7 +14,16 @@
             "problemMatcher": []
         },
         {
-            "taskName": "build",
+            "label": "clean",
+            "command": "dotnet",
+            "type": "shell",
+            "args": [
+                "clean"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "build",
             "command": "dotnet",
             "type": "shell",
             "args": [
@@ -27,7 +36,7 @@
             "problemMatcher": "$msCompile"
         },
         {
-            "taskName": "lint",
+            "label": "lint",
             "type": "shell",
             "command": "npm",
             "args": [

src/Ombi/ClientApp/app/animations/fadeinout.ts

@@ -1,7 +1,7 @@
 import { animate, style, transition, trigger } from "@angular/animations";
-import { AnimationEntryMetadata } from "@angular/core";
+import { AnimationTriggerMetadata } from "@angular/animations";
 
-export const fadeInOutAnimation: AnimationEntryMetadata = trigger("fadeInOut", [
+export const fadeInOutAnimation: AnimationTriggerMetadata = trigger("fadeInOut", [
     transition(":enter", [   // :enter is alias to 'void => *'
         style({ opacity: 0 }),
         animate(1000, style({ opacity: 1 })),

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

@@ -33,17 +33,17 @@ export class AppComponent implements OnInit {
                 private readonly jobService: JobService,
                 public readonly translate: TranslateService,
                 private readonly identityService: IdentityService,
-                private readonly platformLocation: PlatformLocation) { 
+                private readonly platformLocation: PlatformLocation) {
 
-                    const base = this.platformLocation.getBaseHrefFromDOM();   
+                    const base = this.platformLocation.getBaseHrefFromDOM();
                     if (base.length > 1) {
                         __webpack_public_path__ = base + "/dist/";
                     }
                 
-                    this.translate.addLangs(["en", "de", "fr","da","es","it","nl","sv","no", "pl", "pt"]);
+                    this.translate.addLangs(["en", "de", "fr", "da", "es", "it", "nl", "sv", "no", "pl", "pt"]);
                     // this language will be used as a fallback when a translation isn't found in the current language
                     this.translate.setDefaultLang("en");
-                    
+
                     // See if we can match the supported langs with the current browser lang
                     const browserLang: string = translate.getBrowserLang();
                     this.translate.use(browserLang.match(/en|fr|da|de|es|it|nl|sv|no|pl|pt/) ? browserLang : "en");
@@ -88,8 +88,8 @@ export class AppComponent implements OnInit {
 
     public openMobileApp(event: any) {
         event.preventDefault();
-        if(!this.customizationSettings.applicationUrl) {
+        if (!this.customizationSettings.applicationUrl) {
-            this.notificationService.warning("Mobile","Please ask your admin to setup the Application URL!");
+            this.notificationService.warning("Mobile", "Please ask your admin to setup the Application URL!");
             return;
         }
 

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

@@ -1,12 +1,12 @@
-import {CommonModule, PlatformLocation} from "@angular/common";
+import { CommonModule, PlatformLocation } from "@angular/common";
-import {HttpClient, HttpClientModule} from "@angular/common/http";
+import { HttpClient, HttpClientModule } from "@angular/common/http";
-import {NgModule} from "@angular/core";
+import { NgModule } from "@angular/core";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import {HttpModule} from "@angular/http";
+import { HttpModule } from "@angular/http";
-import {MatButtonModule, MatCardModule, MatInputModule, MatTabsModule} from "@angular/material";
+import { MatButtonModule, MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
-import {BrowserModule} from "@angular/platform-browser";
+import { BrowserModule } from "@angular/platform-browser";
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {RouterModule, Routes} from "@angular/router";
+import { RouterModule, Routes } from "@angular/router";
 
 import { JwtModule } from "@auth0/angular-jwt";
 
@@ -15,7 +15,7 @@ import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { CookieService } from "ng2-cookies";
 import { GrowlModule } from "primeng/components/growl/growl";
-import { ButtonModule, CaptchaModule, ConfirmationService, ConfirmDialogModule, DataTableModule,DialogModule, SharedModule, SidebarModule, TooltipModule } from "primeng/primeng";
+import { ButtonModule, CaptchaModule, ConfirmationService, ConfirmDialogModule, DataTableModule, DialogModule, SharedModule, SidebarModule, TooltipModule } from "primeng/primeng";
 
 // Components
 import { AppComponent } from "./app.component";
@@ -67,6 +67,14 @@ export function HttpLoaderFactory(http: HttpClient, platformLocation: PlatformLo
     return new TranslateHttpLoader(http, "/translations/", `.json?v=${version}`);
 }
 
+export function JwtTokenGetter() {
+    const token = localStorage.getItem("id_token");
+    if (!token) {
+        return "";
+    }
+    return token;
+}
+
 @NgModule({
     imports: [
         RouterModule.forRoot(routes),
@@ -89,18 +97,12 @@ export function HttpLoaderFactory(http: HttpClient, platformLocation: PlatformLo
         CaptchaModule,
         TooltipModule,
         ConfirmDialogModule,
-        CommonModule, 
+        CommonModule,
         JwtModule.forRoot({
             config: {
-              tokenGetter: () => {
+                tokenGetter: JwtTokenGetter,
-                  const token = localStorage.getItem("id_token");
-                  if (!token) {
-                      return "";
-                  }
-                  return token;
-                },
             },
-          }),
+        }),
         TranslateModule.forRoot({
             loader: {
                 provide: TranslateLoader,
@@ -119,7 +121,7 @@ export function HttpLoaderFactory(http: HttpClient, platformLocation: PlatformLo
         TokenResetPasswordComponent,
         CookieComponent,
         LoginOAuthComponent,
-        ],
+    ],
     providers: [
         NotificationService,
         AuthService,

src/Ombi/ClientApp/app/auth/auth.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { JwtHelperService } from "@auth0/angular-jwt";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../services";
 import { ILocalUser, IUserLogin } from "./IUserLogin";
@@ -26,13 +26,13 @@ export class AuthService extends ServiceHelpers {
         return this.http.post<boolean>(`${this.url}/requirePassword`, JSON.stringify(login), {headers: this.headers});
     }
 
-    public loggedIn() {    
+    public loggedIn() {
         const token: string = this.jwtHelperService.tokenGetter();
-        
+
         if (!token) {
             return false;
         }
-        
+
         const tokenExpired: boolean = this.jwtHelperService.isTokenExpired(token);
         return !tokenExpired;
     }
@@ -53,9 +53,9 @@ export class AuthService extends ServiceHelpers {
             } else {
                 u.roles.push(roles);
             }
-            return <ILocalUser>u;
+            return <ILocalUser> u;
         }
-        return <ILocalUser>{};
+        return <ILocalUser> { };
     }
 
     public hasRole(role: string): boolean {

src/Ombi/ClientApp/app/auth/cookie.component.ts

@@ -11,7 +11,7 @@ export class CookieComponent implements OnInit {
 
     public ngOnInit() {
         const cookie = this.cookieService.getAll();
-        if(cookie.Auth) {
+        if (cookie.Auth) {
             const jwtVal = cookie.Auth;
             localStorage.setItem("id_token", jwtVal);
             this.router.navigate(["search"]);

src/Ombi/ClientApp/app/interfaces/IRecentlyAdded.ts

@@ -20,7 +20,7 @@ export interface IRecentlyAddedTvShows extends IRecentlyAddedMovies {
 
 export interface IRecentlyAddedRangeModel {
     from: Date;
-    to: Date; 
+    to: Date;
 }
 
 export enum RecentlyAddedType {

src/Ombi/ClientApp/app/interfaces/IRequestModel.ts

@@ -71,6 +71,10 @@ export interface ITvRequests {
   status: string;
   childRequests: IChildRequests[];
   qualityOverride: number;
+  background: any;
+  totalSeasons: number;
+  tvDbId: number;
+  open: boolean; // THIS IS FOR THE UI
 
   // For UI display
   qualityOverrideTitle: string;

src/Ombi/ClientApp/app/interfaces/ISearchTvResult.ts

@@ -28,8 +28,16 @@ export interface ISearchTvResult {
     available: boolean;
     plexUrl: string;
     embyUrl: string;
+    quality: string;
     firstSeason: boolean;
     latestSeason: boolean;
+    theTvDbId: string;
+    subscribed: boolean;
+    showSubscribe: boolean;
+    fullyAvailable: boolean;
+    partlyAvailable: boolean;
+    background: any;
+    open: boolean; // THIS IS FOR THE UI
 }
 
 export interface ITvRequestViewModel {

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

@@ -37,10 +37,10 @@ export class IssueDetailsComponent implements OnInit {
                 private notificationService: NotificationService,
                 private imageService: ImageService,
                 private sanitizer: DomSanitizer,
-                private readonly platformLocation: PlatformLocation) { 
+                private readonly platformLocation: PlatformLocation) {
             this.route.params
             .subscribe((params: any) => {
-                  this.issueId = parseInt(params.id);    
+                  this.issueId = parseInt(params.id);
                 });
 
             this.isAdmin = this.authService.hasRole("Admin") || this.authService.hasRole("PowerUser");
@@ -53,8 +53,8 @@ export class IssueDetailsComponent implements OnInit {
                 this.defaultPoster = "../../../images/";
             }
         }
-                
+
-    public ngOnInit() { 
+    public ngOnInit() {
         this.issueService.getIssue(this.issueId).subscribe(x => {
             this.issue = {
                 comments: x.comments,
@@ -63,8 +63,8 @@ export class IssueDetailsComponent implements OnInit {
                 issueCategoryId: x.issueCategoryId,
                 subject: x.subject,
                 description: x.description,
-                status:x.status,
+                status: x.status,
-                resolvedDate:x.resolvedDate,
+                resolvedDate: x.resolvedDate,
                 title: x.title,
                 requestType: x.requestType,
                 requestId: x.requestId,
@@ -117,7 +117,7 @@ export class IssueDetailsComponent implements OnInit {
 
         } else {
             this.imageService.getTvBackground(Number(issue.providerId)).subscribe(x => {
-                if(x) {
+                if (x) {
                     this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
                         ("url(" + x + ")");
                 }

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

@@ -22,8 +22,8 @@ export class IssuesComponent implements OnInit {
 
     constructor(private issueService: IssuesService) { }
 
-    public ngOnInit() { 
+    public ngOnInit() {
-        this.getPending();      
+        this.getPending();
         this.getInProg();
         this.getResolved();
         this.issueService.getIssuesCount().subscribe(x => this.count = x);
@@ -61,5 +61,4 @@ export class IssuesComponent implements OnInit {
             this.resolvedIssues = x;
         });
     }
-    
 }

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

@@ -11,7 +11,7 @@ export class IssuesTableComponent  {
     @Input() public issues: IIssues[];
     @Input() public totalRecords: number;
 
-    @Output() public changePage = new EventEmitter<IPagenator>(); 
+    @Output() public changePage = new EventEmitter<IPagenator>();
 
     public IssueStatus = IssueStatus;
 
@@ -47,7 +47,7 @@ export class IssuesTableComponent  {
         //event.rows = Number of rows to display in new page
         //event.page = Index of the new page
         //event.pageCount = Total number of pages
-        
+
         this.changePage.emit(event);
     }
 

src/Ombi/ClientApp/app/login/login.component.ts

@@ -30,9 +30,9 @@ export class LoginComponent implements OnDestroy, OnInit {
     public landingFlag: boolean;
     public baseUrl: string;
     public loginWithOmbi: boolean;
-   
+
     public get appName(): string {
-        if(this.customizationSettings.applicationName) {
+        if (this.customizationSettings.applicationName) {
             return this.customizationSettings.applicationName;
         } else {
             return "Ombi";
@@ -41,7 +41,7 @@ export class LoginComponent implements OnDestroy, OnInit {
 
     private timer: any;
     private clientId: string;
-    
+
     private errorBody: string;
     private errorValidation: string;
 
@@ -72,7 +72,7 @@ export class LoginComponent implements OnDestroy, OnInit {
             }
         });
 
-        if(authService.loggedIn()) {
+        if (authService.loggedIn()) {
             this.router.navigate(["search"]);
         }
     }
@@ -103,9 +103,9 @@ export class LoginComponent implements OnDestroy, OnInit {
             return;
         }
         const value = form.value;
-        const user = { password: value.password, username: value.username, rememberMe: value.rememberMe, usePlexOAuth: false, plexTvPin: { id: 0, code: ""} };
+        const user = { password: value.password, username: value.username, rememberMe: value.rememberMe, usePlexOAuth: false, plexTvPin: { id: 0, code: "" } };
         this.authService.requiresPassword(user).subscribe(x => {
-            if(x && this.authenticationSettings.allowNoPassword) {
+            if (x && this.authenticationSettings.allowNoPassword) {
                 // Looks like this user requires a password
                 this.authenticationSettings.allowNoPassword = false;
                 return;
@@ -125,9 +125,9 @@ export class LoginComponent implements OnDestroy, OnInit {
     }
 
     public oauth() {
-        this.plexTv.GetPin(this.clientId, this.appName).subscribe(pin => {
+        this.plexTv.GetPin(this.clientId, this.appName).subscribe((pin: any) => {
 
-            this.authService.login({usePlexOAuth: true, password:"",rememberMe:true,username:"", plexTvPin: pin}).subscribe(x => {
+            this.authService.login({ usePlexOAuth: true, password: "", rememberMe: true, username: "", plexTvPin: pin }).subscribe(x => {
                 if (window.frameElement) {
                     // in frame
                     window.open(x.url, "_blank");
@@ -144,12 +144,12 @@ export class LoginComponent implements OnDestroy, OnInit {
     }
 
     private cycleBackground() {
-            this.images.getRandomBackground().subscribe(x => {
+        this.images.getRandomBackground().subscribe(x => {
-                this.background = "";
+            this.background = "";
-            });
+        });
-            this.images.getRandomBackground().subscribe(x => {
+        this.images.getRandomBackground().subscribe(x => {
-                this.background = this.sanitizer
+            this.background = this.sanitizer
-                    .bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(" + x.url + ")");
+                .bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(" + x.url + ")");
-            });
+        });
     }
 }

src/Ombi/ClientApp/app/login/loginoauth.component.ts

@@ -16,7 +16,6 @@ export class LoginOAuthComponent implements OnInit {
         this.route.params
             .subscribe((params: any) => {
                 this.pin = params.pin;
-                
             });
     }
 
@@ -26,21 +25,20 @@ export class LoginOAuthComponent implements OnInit {
 
     public auth() {
       this.authService.oAuth(this.pin).subscribe(x => {
-          if(x.access_token) {
+          if (x.access_token) {
             localStorage.setItem("id_token", x.access_token);
 
             if (this.authService.loggedIn()) {
                 this.router.navigate(["search"]);
                 return;
-            } 
+            }
         }
-          if(x.errorMessage) {
+          if (x.errorMessage) {
             this.error = x.errorMessage;
         }
 
         }, err => {
             this.notify.error(err.statusText);
-            
             this.router.navigate(["login"]);
         });
     }

src/Ombi/ClientApp/app/login/resetpassword.component.ts

@@ -4,7 +4,7 @@ import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 
 import { ICustomizationSettings } from "../interfaces";
-import { IdentityService, ImageService,NotificationService, SettingsService } from "../services";
+import { IdentityService, ImageService, NotificationService, SettingsService } from "../services";
 
 @Component({
     templateUrl: "./resetpassword.component.html",

src/Ombi/ClientApp/app/recentlyAdded/recentlyAdded.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { NguCarousel } from "@ngu/carousel";
+import { NguCarouselConfig } from "@ngu/carousel";
 
 import { ImageService, RecentlyAddedService } from "../services";
 import { IRecentlyAddedMovies, IRecentlyAddedTvShows } from "./../interfaces";
@@ -41,13 +41,13 @@ export class RecentlyAddedComponent implements OnInit {
     public range: Date[];
 
     public groupTv: boolean = false;
-    
+
     // https://github.com/sheikalthaf/ngu-carousel
-    public carouselTile: NguCarousel;
+    public carouselTile: NguCarouselConfig;
-    
+
     constructor(private recentlyAddedService: RecentlyAddedService,
                 private imageService: ImageService) {}
-     
+
     public ngOnInit() {
         this.getMovies();
         this.getShows();
@@ -67,10 +67,10 @@ export class RecentlyAddedComponent implements OnInit {
      }
 
      public close() {
-         if(this.range.length < 2) {
+         if (this.range.length < 2) {
              return;
          }
-         if(!this.range[1]) {
+         if (!this.range[1]) {
              // If we do not have a second date then just set it to now
             this.range[1] = new Date();
          }
@@ -82,13 +82,13 @@ export class RecentlyAddedComponent implements OnInit {
      }
 
      private getShows() {
-         if(this.groupTv) {
+         if (this.groupTv) {
             this.recentlyAddedService.getRecentlyAddedTvGrouped().subscribe(x => {
                 this.tv = x;
-    
+
                 this.tv.forEach((t) => {
                     this.imageService.getTvPoster(t.tvDbId).subscribe(p => {
-                        if(p) {
+                        if (p) {
                             t.posterPath = p;
                         }
                     });
@@ -97,10 +97,10 @@ export class RecentlyAddedComponent implements OnInit {
          } else {
             this.recentlyAddedService.getRecentlyAddedTv().subscribe(x => {
                 this.tv = x;
-    
+
                 this.tv.forEach((t) => {
                     this.imageService.getTvPoster(t.tvDbId).subscribe(p => {
-                        if(p) {
+                        if (p) {
                             t.posterPath = p;
                         }
                     });
@@ -114,11 +114,11 @@ export class RecentlyAddedComponent implements OnInit {
             this.movies = x;
 
             this.movies.forEach((movie) => {
-                if(movie.theMovieDbId) {
+                if (movie.theMovieDbId) {
                 this.imageService.getMoviePoster(movie.theMovieDbId).subscribe(p => {
                     movie.posterPath = p;
                 });
-                } else if(movie.imdbId) {
+                } else if (movie.imdbId) {
                     this.imageService.getMoviePoster(movie.imdbId).subscribe(p => {
                         movie.posterPath = p;
                     });

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

@@ -45,8 +45,6 @@
 
 
 <div>
-
-
     <div *ngFor="let request of movieRequests">
         <div class="row">
             <div class="myBg backdrop" [style.background-image]="request.backgroundPath"></div>

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

@@ -1,15 +1,12 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
 
 import { AuthService } from "../auth/auth.service";
-import { NotificationService, RadarrService, RequestService } from "../services";
-
 import { FilterType, IFilter, IIssueCategory, IMovieRequests, IPagenator, IRadarrProfile, IRadarrRootFolder, OrderType } from "../interfaces";
+import { NotificationService, RadarrService, RequestService } from "../services";
 
 @Component({
     selector: "movie-requests",
@@ -40,32 +37,33 @@ export class MovieRequestsComponent implements OnInit {
 
     public orderType: OrderType = OrderType.RequestedDateDesc;
     public OrderType = OrderType;
-    
+
     public totalMovies: number = 100;
     private currentlyLoaded: number;
     private amountToLoad: number;
 
-    constructor(private requestService: RequestService,
+    constructor(
-                private auth: AuthService,
+        private requestService: RequestService,
-                private notificationService: NotificationService,
+        private auth: AuthService,
-                private radarrService: RadarrService,
+        private notificationService: NotificationService,
-                private sanitizer: DomSanitizer,
+        private radarrService: RadarrService,
-                private readonly platformLocation: PlatformLocation) {
+        private sanitizer: DomSanitizer,
-        this.searchChanged
+        private readonly platformLocation: PlatformLocation) {
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+        this.searchChanged.pipe(
-            .distinctUntilChanged() // only emit if value is different from previous value
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .subscribe(x => {
+            distinctUntilChanged(), // only emit if value is different from previous value
-                this.searchText = x as string;
+        ).subscribe(x => {
-                if (this.searchText === "") {
+            this.searchText = x as string;
-                    this.resetSearch();
+            if (this.searchText === "") {
-                    return;
+                this.resetSearch();
-                }
+                return;
-                this.requestService.searchMovieRequests(this.searchText)
+            }
-                    .subscribe(m => {
+            this.requestService.searchMovieRequests(this.searchText)
-                        this.setOverrides(m);
+                .subscribe(m => {
-                        this.movieRequests = m;
+                    this.setOverrides(m);
-                    });
+                    this.movieRequests = m;
-            });
+                });
+        });
         this.defaultPoster = "../../../images/default_movie_poster.png";
         const base = this.platformLocation.getBaseHrefFromDOM();
         if (base) {
@@ -75,7 +73,7 @@ export class MovieRequestsComponent implements OnInit {
 
     public ngOnInit() {
         this.amountToLoad = 10;
-        this.currentlyLoaded = 10;       
+        this.currentlyLoaded = 10;
         this.filter = {
             availabilityFilter: FilterType.None,
             statusFilter: FilterType.None,
@@ -85,7 +83,7 @@ export class MovieRequestsComponent implements OnInit {
     }
 
     public paginate(event: IPagenator) {
-        const skipAmount = event.first;        
+        const skipAmount = event.first;
         this.loadRequests(this.amountToLoad, skipAmount);
     }
 
@@ -102,7 +100,7 @@ export class MovieRequestsComponent implements OnInit {
     public changeAvailability(request: IMovieRequests, available: boolean) {
         request.available = available;
 
-        if(available) {
+        if (available) {
             this.requestService.markMovieAvailable({ id: request.id }).subscribe(x => {
                 if (x.result) {
                     this.notificationService.success(
@@ -173,7 +171,7 @@ export class MovieRequestsComponent implements OnInit {
         this.filterDisplay = false;
         this.filter.availabilityFilter = FilterType.None;
         this.filter.statusFilter = FilterType.None;
-        
+
         this.resetSearch();
     }
 
@@ -199,11 +197,11 @@ export class MovieRequestsComponent implements OnInit {
         el.className = "active";
 
         this.orderType = value;
-        
+
         this.loadInit();
-      }
+    }
-    
+
-      public subscribe(request: IMovieRequests) {
+    public subscribe(request: IMovieRequests) {
         request.subscribed = true;
         this.requestService.subscribeToMovie(request.id)
             .subscribe(x => {
@@ -238,10 +236,10 @@ export class MovieRequestsComponent implements OnInit {
     }
 
     private loadRequests(amountToLoad: number, currentlyLoaded: number) {
-            this.requestService.getMovieRequests(amountToLoad, currentlyLoaded, this.orderType, this.filter)
+        this.requestService.getMovieRequests(amountToLoad, currentlyLoaded, this.orderType, this.filter)
             .subscribe(x => {
                 this.setOverrides(x.collection);
-                if(!this.movieRequests) {
+                if (!this.movieRequests) {
                     this.movieRequests = [];
                 }
                 this.movieRequests = x.collection;
@@ -364,6 +362,6 @@ export class MovieRequestsComponent implements OnInit {
 
     private setBackground(req: IMovieRequests): void {
         req.backgroundPath = this.sanitizer.bypassSecurityTrustStyle
-        ("url(" + "https://image.tmdb.org/t/p/w1280" + req.background + ")");
+            ("url(" + "https://image.tmdb.org/t/p/w1280" + req.background + ")");
     }
 }

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

@@ -4,7 +4,7 @@ import { IChildRequests } from "../interfaces";
 import { NotificationService, RequestService } from "../services";
 
 @Component({
-    selector:"tvrequests-children",
+    selector: "tvrequests-children",
     templateUrl: "./tvrequest-children.component.html",
 })
 export class TvRequestChildrenComponent {
@@ -21,17 +21,17 @@ export class TvRequestChildrenComponent {
             .subscribe(x => {
                 this.removeRequestFromUi(request);
                 this.requestDeleted.emit(request.id);
-            });       
+            });
     }
 
     public changeAvailability(request: IChildRequests, available: boolean) {
         request.available = available;
-        request.seasonRequests.forEach((season)=> {
+        request.seasonRequests.forEach((season) => {
-            season.episodes.forEach((ep)=> {
+            season.episodes.forEach((ep) => {
                 ep.available = available;
             });
         });
-        if(available) {
+        if (available) {
             this.requestService.markTvAvailable({ id: request.id }).subscribe(x => {
                 if (x.result) {
                     this.notificationService.success(

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

@@ -4,124 +4,111 @@
     </div>
 </div>
 <br />
-<!--TODO: I believe this +1 is causing off by one error skipping loading of tv shows
-    When removed and scrolling very slowly everything works as expected, however
-    if you scroll really quickly then you start getting duplicates of movies
-    since it's async and some subsequent results return first and then incrementer
-    is increased so you see movies which had already been gotten show up...
-    
-    Removing infinte-scroll and setting max to 1000 till we work out some sort of fix
 
-    -->
+<div>
-<!--<div infinite-scroll
+        <div  *ngFor="let node of tvRequests.collection">
-     [infiniteScrollDistance]="1"
+            <!--This is the section that holds the parent level results set-->
-     [infiniteScrollThrottle]="100"
+            <div>
-     (scrolled)="loadMore()">-->
+                <div class="row">
-    <div>
+                    <div class="myBg backdrop" [style.background-image]="node?.background"></div>
-    <p-treeTable [value]="tvRequests">
+                    <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>
 
-        <p-column>
+                    <div class="col-sm-2  small-padding">
-            <ng-template let-col let-node="rowData" pTemplate="header">
-                Results
-            </ng-template>
-            <ng-template let-col let-node="rowData" pTemplate="body">
-                <!--This is the section that holds the parent level results set-->
-                <div *ngIf="!node.leaf">
-                    <div class="row">                        
-                        <div class="myBg backdrop" [style.background-image]="node?.data?.background"></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>
 
-                        <div class="col-sm-2  small-padding" >
+                        <img class="img-responsive poster" src="{{node.posterPath || null}}" alt="poster">
 
-                            <img class="img-responsive poster" src="{{node.data.posterPath || null}}" alt="poster">
+                    </div>
 
+                    <div class="col-sm-5 small-padding">
+                        <div>
+                            <a href="http://www.imdb.com/title/{{node.imdbId}}/" target="_blank">
+                                <h4 class="request-title">{{node.title}} ({{node.releaseDate | date: 'yyyy'}})</h4>
+                            </a>
+                        </div>
+                        <br />
+                        <div>
+                            <span>Status: </span>
+                            <span class="label label-success">{{node.status}}</span>
                         </div>
 
-                        <div class="col-sm-5  small-padding">
-                            <div>
-                                <a href="http://www.imdb.com/title/{{node.data.imdbId}}/" target="_blank">
-                                    <h4 class="request-title">{{node.data.title}} ({{node.data.releaseDate | date: 'yyyy'}})</h4>
-                                </a>
-                            </div>
-                            <br />
-                            <div>
-                                <span>Status: </span>
-                                <span class="label label-success">{{node.data.status}}</span>
-                            </div>
 
-    
+                        <div>Release Date: {{node.releaseDate | date}}</div>
-                            <div>Release Date: {{node.data.releaseDate | date}}</div>
+                        <div *ngIf="isAdmin">
-                            <div *ngIf="isAdmin">
+                            <div *ngIf="node.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
-                                <div *ngIf="node.data.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
+                                <span>{{node.qualityOverrideTitle}} </span>
-                                    <span>{{node.data.qualityOverrideTitle}} </span>
+                            </div>
-                                </div>
+                            <div *ngIf="node.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
-                                <div *ngIf="node.data.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
+                                <span>{{node.rootPathOverrideTitle}} </span>
-                                    <span>{{node.data.rootPathOverrideTitle}} </span>
-                                </div>
                             </div>
-            
-                            <br />
                         </div>
-                        <div class="col-sm-3 col-sm-push-3  small-padding">
 
-                            <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab($event)"><i class="fa fa-plus"></i> View</button>
+                        <br />
-                            <div *ngIf="isAdmin">
+                    </div>
-                                <!--Sonarr Root Folder-->
+                    <div class="col-sm-3 col-sm-push-3  small-padding">
-                                <div *ngIf="sonarrRootFolders" class="btn-group btn-split" id="rootFolderBtn">
-                                    <button type="button" class="btn btn-sm btn-warning-outline">
-                                        <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
-                                    </button>
-                                    <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                        <span class="caret"></span>
-                                        <span class="sr-only">Toggle Dropdown</span>
-                                    </button>
-                                    <ul class="dropdown-menu">
-                                        <li *ngFor="let folder of sonarrRootFolders">
-                                            <a href="#" (click)="selectRootFolder(node.data, folder, $event)">{{folder.path}}</a>
-                                        </li>
-                                    </ul>
-                                </div>
 
-                                <!--Sonarr Quality Profiles -->
+                        <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab(node,$event)">
-                                <div *ngIf="sonarrProfiles" class="btn-group btn-split" id="changeQualityBtn">
+                            <i class="fa fa-plus"></i> View</button>
-                                    <button type="button" class="btn btn-sm btn-warning-outline">
+                        <div *ngIf="isAdmin">
-                                        <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
+                            <!--Sonarr Root Folder-->
-                                    </button>
+                            <div *ngIf="sonarrRootFolders" class="btn-group btn-split" id="rootFolderBtn">
-                                    <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <button type="button" class="btn btn-sm btn-warning-outline">
-                                        <span class="caret"></span>
+                                    <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
-                                        <span class="sr-only">Toggle Dropdown</span>
-                                    </button>
-                                    <ul class="dropdown-menu">
-                                        <li *ngFor="let profile of sonarrProfiles">
-                                            <a href="#" (click)="selectQualityProfile(node.data, profile, $event)">{{profile.name}}</a>
-                                        </li>
-                                    </ul>
-                                </div>
-
-                            </div>
-                            <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issueBtn">
-                                <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                    <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
-                                    <span class="caret"></span>
                                 </button>
-                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                                <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    <li *ngFor="let cat of issueCategories"><a [routerLink]="" (click)="reportIssue(cat, node.data)">{{cat.value}}</a></li>
+                                    <span class="caret"></span>
+                                    <span class="sr-only">Toggle Dropdown</span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li *ngFor="let folder of sonarrRootFolders">
+                                        <a href="#" (click)="selectRootFolder(node, folder, $event)">{{folder.path}}</a>
+                                    </li>
                                 </ul>
                             </div>
+
+                            <!--Sonarr Quality Profiles -->
+                            <div *ngIf="sonarrProfiles" class="btn-group btn-split" id="changeQualityBtn">
+                                <button type="button" class="btn btn-sm btn-warning-outline">
+                                    <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
+                                </button>
+                                <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="caret"></span>
+                                    <span class="sr-only">Toggle Dropdown</span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li *ngFor="let profile of sonarrProfiles">
+                                        <a href="#" (click)="selectQualityProfile(node, profile, $event)">{{profile.name}}</a>
+                                    </li>
+                                </ul>
+                            </div>
+
+                        </div>
+                        <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issueBtn">
+                            <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
+                                aria-expanded="true">
+                                <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                                <li *ngFor="let cat of issueCategories">
+                                    <a [routerLink]="" (click)="reportIssue(cat, node)">{{cat.value}}</a>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                 </div>
-                <!--This is the section that holds the child seasons if they want to specify specific episodes-->
+            </div>
-                <div *ngIf="node.leaf">
+            <!--This is the section that holds the child seasons if they want to specify specific episodes-->
-                    <tvrequests-children [childRequests]="node.data" [isAdmin] ="isAdmin" 
+            <div *ngIf="node.open">
-                    (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
+                <tvrequests-children [childRequests]="node.childRequests" [isAdmin]="isAdmin" (requestDeleted)="childRequestDeleted($event)"></tvrequests-children>
-                </div>
+            </div>
-            </ng-template>
+            
-        </p-column>
+        <br/>
-    </p-treeTable>
+        <br/>
+
+        </div>
 
     <p-paginator [rows]="10" [totalRecords]="totalTv" (onPageChange)="paginate($event)"></p-paginator>
 </div>
 
-    <issue-report [movie]="false" [visible]="issuesBarVisible" [title]="issueRequest?.title"
+<issue-report [movie]="false" [visible]="issuesBarVisible" [title]="issueRequest?.title" [issueCategory]="issueCategorySelected"
-                  [issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId" (visibleChange)="issuesBarVisible = $event;"></issue-report>
+    [id]="issueRequest?.id" [providerId]="issueProviderId" (visibleChange)="issuesBarVisible = $event;"></issue-report>

src/Ombi/ClientApp/app/requests/tvrequests.component.ts

@@ -1,21 +1,13 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
-import { ImageService } from "./../services/image.service";
-
-import "rxjs/add/operator/debounceTime";
-import "rxjs/add/operator/distinctUntilChanged";
-import "rxjs/add/operator/map";
 
 import { AuthService } from "../auth/auth.service";
+import { FilterType, IIssueCategory, IPagenator, IRequestsViewModel, ISonarrProfile, ISonarrRootFolder, ITvRequests, OrderType } from "../interfaces";
 import { NotificationService, RequestService, SonarrService } from "../services";
-
+import { ImageService } from "./../services/image.service";
-import { TreeNode } from "primeng/primeng";
-import { IIssueCategory, IPagenator,  ISonarrProfile, ISonarrRootFolder, ITvRequests } from "../interfaces";
 
 @Component({
     selector: "tv-requests",
@@ -24,7 +16,7 @@ import { IIssueCategory, IPagenator,  ISonarrProfile, ISonarrRootFolder, ITvRequ
 })
 export class TvRequestsComponent implements OnInit {
 
-    public tvRequests: TreeNode[];
+    public tvRequests: IRequestsViewModel<ITvRequests>;
     public searchChanged = new Subject<string>();
     public searchText: string;
     public isAdmin: boolean;
@@ -46,29 +38,30 @@ export class TvRequestsComponent implements OnInit {
     private currentlyLoaded: number;
     private amountToLoad: number;
 
-    constructor(private requestService: RequestService,
+    constructor(
-                private auth: AuthService,
+        private requestService: RequestService,
-                private sanitizer: DomSanitizer,
+        private auth: AuthService,
-                private imageService: ImageService,
+        private sanitizer: DomSanitizer,
-                private sonarrService: SonarrService,
+        private imageService: ImageService,
-                private notificationService: NotificationService,
+        private sonarrService: SonarrService,
-                private readonly platformLocation: PlatformLocation) {
+        private notificationService: NotificationService,
-        this.searchChanged
+        private readonly platformLocation: PlatformLocation) {
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+        this.searchChanged.pipe(
-            .distinctUntilChanged() // only emit if value is different from previous value
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .subscribe(x => {
+            distinctUntilChanged(), // only emit if value is different from previous value
-                this.searchText = x as string;
+        ).subscribe(x => {
-                if (this.searchText === "") {
+            this.searchText = x as string;
-                    this.resetSearch();
+            if (this.searchText === "") {
-                    return;
+                this.resetSearch();
-                }
+                return;
-                this.requestService.searchTvRequestsTree(this.searchText)
+            }
-                    .subscribe(m => {
+            this.requestService.searchTvRequests(this.searchText)
-                        this.tvRequests = m;
+                .subscribe(m => {
-                        this.tvRequests.forEach((val) => this.loadBackdrop(val));
+                    this.tvRequests.collection = m;
-                        this.tvRequests.forEach((val) => this.setOverride(val.data));
+                    this.tvRequests.collection.forEach((val) => this.loadBackdrop(val));
-                    });
+                    this.tvRequests.collection.forEach((val) => this.setOverride(val));
-            });
+                });
+        });
         this.defaultPoster = "../../../images/default_tv_poster.png";
         const base = this.platformLocation.getBaseHrefFromDOM();
         if (base) {
@@ -76,60 +69,28 @@ export class TvRequestsComponent implements OnInit {
         }
     }
 
-    public openClosestTab(el: any) {
+    public openClosestTab(node: ITvRequests,el: any) {
-        const rowclass = "undefined ng-star-inserted";
+        el.preventDefault();
-        el = el.toElement || el.relatedTarget || el.target || el.srcElement;
+        node.open = !node.open;
-
-        if (el.nodeName === "BUTTON") {
-
-            const isButtonAlreadyActive = el.parentElement.querySelector(".active");
-            // if a Button already has Class: .active
-            if (isButtonAlreadyActive) {
-                isButtonAlreadyActive.classList.remove("active");
-            } else {
-                el.className += " active";
-            }
-        }
-
-        while (el.className !== rowclass) {
-            // Increment the loop to the parent node until we find the row we need
-            el = el.parentNode;
-        }
-        // At this point, the while loop has stopped and `el` represents the element that has
-        // the class you specified
-
-        // Then we loop through the children to find the caret which we want to click
-        const caretright = "fa-caret-right";
-        const caretdown = "fa-caret-down";
-        for (const value of el.children) {
-            // the caret from the ui has 2 class selectors depending on if expanded or not
-            // we search for both since we want to still toggle the clicking
-            if (value.className.includes(caretright) || value.className.includes(caretdown)) {
-                // Then we tell JS to click the element even though we hid it from the UI
-                value.click();
-                //Break from loop since we no longer need to continue looking
-                break;
-            }
-        }
     }
 
     public ngOnInit() {
         this.amountToLoad = 10;
         this.currentlyLoaded = 10;
-        this.tvRequests = [];
+        this.tvRequests = {collection:[], total:0};
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
-        
+
         this.loadInit();
     }
 
     public paginate(event: IPagenator) {
         const skipAmount = event.first;
 
-        this.requestService.getTvRequestsTree(this.amountToLoad, skipAmount)
+        this.requestService.getTvRequests(this.amountToLoad, skipAmount, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
-        .subscribe(x => {
+            .subscribe(x => {
-            this.tvRequests = x;
+                this.tvRequests = x;
-            this.currentlyLoaded = this.currentlyLoaded + this.amountToLoad;
+                this.currentlyLoaded = this.currentlyLoaded + this.amountToLoad;
-        });
+            });
     }
 
     public search(text: any) {
@@ -204,20 +165,20 @@ export class TvRequestsComponent implements OnInit {
 
     private loadInit() {
         this.requestService.getTotalTv().subscribe(x => this.totalTv = x);
-        this.requestService.getTvRequestsTree(this.amountToLoad, 0)
+        this.requestService.getTvRequests(this.amountToLoad, 0, OrderType.RequestedDateDesc, FilterType.None, FilterType.None)
             .subscribe(x => {
                 this.tvRequests = x;
-                this.tvRequests.forEach((val, index) => {
+                this.tvRequests.collection.forEach((val, index) => {
                     this.setDefaults(val);
                     this.loadBackdrop(val);
-                    this.setOverride(val.data);
+                    this.setOverride(val);
-            });     
+                });
-        });
+            });
 
-        if(this.isAdmin) {
+        if (this.isAdmin) {
             this.sonarrService.getQualityProfilesWithoutSettings()
                 .subscribe(x => this.sonarrProfiles = x);
-        
+
             this.sonarrService.getRootFoldersWithoutSettings()
                 .subscribe(x => this.sonarrRootFolders = x);
         }
@@ -228,21 +189,21 @@ export class TvRequestsComponent implements OnInit {
         this.loadInit();
     }
 
-    private setDefaults(val: any) {
+    private setDefaults(val: ITvRequests) {
-        if (val.data.posterPath === null) {
+        if (val.posterPath === null) {
-            val.data.posterPath = this.defaultPoster;
+            val.posterPath = this.defaultPoster;
         }
     }
 
-    private loadBackdrop(val: TreeNode): void {
+    private loadBackdrop(val: ITvRequests): void {
-        if (val.data.background != null) {
+        if (val.background != null) {
-            val.data.background = this.sanitizer.bypassSecurityTrustStyle
+            val.background = this.sanitizer.bypassSecurityTrustStyle
-                ("url(https://image.tmdb.org/t/p/w1280" + val.data.background + ")");
+                ("url(https://image.tmdb.org/t/p/w1280" + val.background + ")");
         } else {
-            this.imageService.getTvBanner(val.data.tvDbId).subscribe(x => {
+            this.imageService.getTvBanner(val.tvDbId).subscribe(x => {
-                if(x) {
+                if (x) {
-                    val.data.background = this.sanitizer.bypassSecurityTrustStyle
+                    val.background = this.sanitizer.bypassSecurityTrustStyle
-                    ("url(" + x + ")");
+                        ("url(" + x + ")");
                 }
             });
         }

src/Ombi/ClientApp/app/search/moviesearch.component.ts

@@ -1,11 +1,9 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
 import { TranslateService } from "@ngx-translate/core";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
 
 import { AuthService } from "../auth/auth.service";
 import { IIssueCategory, IRequestEngineResult, ISearchMovieResult } from "../interfaces";
@@ -22,7 +20,7 @@ export class MovieSearchComponent implements OnInit {
     public movieResults: ISearchMovieResult[];
     public result: IRequestEngineResult;
     public searchApplied = false;
-    
+
     @Input() public issueCategories: IIssueCategory[];
     @Input() public issuesEnabled: boolean;
     public issuesBarVisible = false;
@@ -31,30 +29,31 @@ export class MovieSearchComponent implements OnInit {
     public issueProviderId: string;
     public issueCategorySelected: IIssueCategory;
     public defaultPoster: string;
-        
-    constructor(private searchService: SearchService, private requestService: RequestService,
-                private notificationService: NotificationService, private authService: AuthService,
-                private readonly translate: TranslateService, private sanitizer: DomSanitizer,
-                private readonly platformLocation: PlatformLocation) {
 
-        this.searchChanged
+    constructor(
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+        private searchService: SearchService, private requestService: RequestService,
-            .distinctUntilChanged() // only emit if value is different from previous value
+        private notificationService: NotificationService, private authService: AuthService,
-            .subscribe(x => {
+        private readonly translate: TranslateService, private sanitizer: DomSanitizer,
-                this.searchText = x as string;
+        private readonly platformLocation: PlatformLocation) {
-                if (this.searchText === "") {
+
-                    this.clearResults();
+        this.searchChanged.pipe(
-                    return;
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-                }
+            distinctUntilChanged(), // only emit if value is different from previous value
-                this.searchService.searchMovie(this.searchText)
+        ).subscribe(x => {
-                    .subscribe(x => {
+            this.searchText = x as string;
-                        this.movieResults = x;
+            if (this.searchText === "") {
-                        this.searchApplied = true;
+                this.clearResults();
-                        // Now let's load some extra info including IMDB Id
+                return;
-                        // This way the search is fast at displaying results.
+            }
-                        this.getExtraInfo();
+            this.searchService.searchMovie(this.searchText)
-                    });
+                .subscribe(x => {
-            });
+                    this.movieResults = x;
+                    this.searchApplied = true;
+                    // Now let's load some extra info including IMDB Id
+                    // This way the search is fast at displaying results.
+                    this.getExtraInfo();
+                });
+        });
         this.defaultPoster = "../../../images/default_movie_poster.png";
         const base = this.platformLocation.getBaseHrefFromDOM();
         if (base) {
@@ -69,7 +68,7 @@ export class MovieSearchComponent implements OnInit {
             message: "",
             result: false,
             errorMessage: "",
-        };      
+        };
         this.popularMovies();
     }
 
@@ -105,7 +104,7 @@ export class MovieSearchComponent implements OnInit {
                         searchResult.approved = false;
                         searchResult.processed = false;
                         searchResult.requestProcessing = false;
-                        
+
                     }
                 });
         } catch (e) {
@@ -160,12 +159,12 @@ export class MovieSearchComponent implements OnInit {
     public similarMovies(theMovieDbId: number) {
         this.clearResults();
         this.searchService.similarMovies(theMovieDbId)
-        .subscribe(x => {
+            .subscribe(x => {
-            this.movieResults = x;
+                this.movieResults = x;
-            this.getExtraInfo();
+                this.getExtraInfo();
-        });
+            });
     }
-        
+
     public subscribe(r: ISearchMovieResult) {
         r.subscribed = true;
         this.requestService.subscribeToMovie(r.requestId)
@@ -182,17 +181,17 @@ export class MovieSearchComponent implements OnInit {
             });
     }
 
-   private getExtraInfo() {
+    private getExtraInfo() {
 
-       this.movieResults.forEach((val, index) => {
+        this.movieResults.forEach((val, index) => {
-           if (val.posterPath === null) {
+            if (val.posterPath === null) {
-               val.posterPath = this.defaultPoster;
+                val.posterPath = this.defaultPoster;
-           } else {
+            } else {
-               val.posterPath = "https://image.tmdb.org/t/p/w300/" + val.posterPath;
+                val.posterPath = "https://image.tmdb.org/t/p/w300/" + val.posterPath;
-           }
+            }
-           val.background = this.sanitizer.bypassSecurityTrustStyle
+            val.background = this.sanitizer.bypassSecurityTrustStyle
-           ("url(" + "https://image.tmdb.org/t/p/w1280" + val.backdropPath + ")");
+                ("url(" + "https://image.tmdb.org/t/p/w1280" + val.backdropPath + ")");
-           this.searchService.getMovieInformation(val.id)
+            this.searchService.getMovieInformation(val.id)
                 .subscribe(m => {
                     this.updateItem(val, m);
                 });
@@ -203,7 +202,7 @@ export class MovieSearchComponent implements OnInit {
         const index = this.movieResults.indexOf(key, 0);
         if (index > -1) {
             const copy = { ...this.movieResults[index] };
-            this.movieResults[index] = updated;  
+            this.movieResults[index] = updated;
             this.movieResults[index].background = copy.background;
             this.movieResults[index].posterPath = copy.posterPath;
         }

src/Ombi/ClientApp/app/search/moviesearchgrid.component.ts

@@ -1,13 +1,10 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
-import "rxjs/add/operator/debounceTime";
+import { Subject } from "rxjs";
-import "rxjs/add/operator/distinctUntilChanged";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-import "rxjs/add/operator/map";
-import { Subject } from "rxjs/Subject";
 
 import { AuthService } from "../auth/auth.service";
-import { NotificationService, RequestService, SearchService } from "../services";
-
 import { IRequestEngineResult, ISearchMovieResult, ISearchMovieResultContainer } from "../interfaces";
+import { NotificationService, RequestService, SearchService } from "../services";
 
 @Component({
     selector: "movie-search-grid",
@@ -21,28 +18,29 @@ export class MovieSearchGridComponent implements OnInit {
     public movieResultGrid: ISearchMovieResultContainer[] = [];
     public result: IRequestEngineResult;
     public searchApplied = false;
-        
-    constructor(private searchService: SearchService, private requestService: RequestService,
-                private notificationService: NotificationService, private authService: AuthService) {
 
-        this.searchChanged
+    constructor(
-            .debounceTime(600) // Wait Xms afterthe last event before emitting last event
+        private searchService: SearchService, private requestService: RequestService,
-            .distinctUntilChanged() // only emit if value is different from previous value
+        private notificationService: NotificationService, private authService: AuthService) {
-            .subscribe(x => {
+
-                this.searchText = x as string;
+        this.searchChanged.pipe(
-                if (this.searchText === "") {
+            debounceTime(600), // Wait Xms afterthe last event before emitting last event
-                    this.clearResults();
+            distinctUntilChanged(), // only emit if value is different from previous value
-                    return;
+        ).subscribe(x => {
-                }
+            this.searchText = x as string;
-                this.searchService.searchMovie(this.searchText)
+            if (this.searchText === "") {
-                    .subscribe(x => {
+                this.clearResults();
-                        this.movieResults = x;
+                return;
-                        this.searchApplied = true;
+            }
-                        // Now let's load some exta info including IMDBId
+            this.searchService.searchMovie(this.searchText)
-                        // This way the search is fast at displaying results.
+                .subscribe(x => {
-                        this.getExtaInfo();
+                    this.movieResults = x;
-                    });
+                    this.searchApplied = true;
-            });
+                    // Now let's load some exta info including IMDBId
+                    // This way the search is fast at displaying results.
+                    this.getExtaInfo();
+                });
+        });
     }
 
     public ngOnInit() {
@@ -67,7 +65,7 @@ export class MovieSearchGridComponent implements OnInit {
         }
 
         try {
-            this.requestService.requestMovie({ theMovieDbId : searchResult.id})
+            this.requestService.requestMovie({ theMovieDbId: searchResult.id })
                 .subscribe(x => {
                     this.result = x;
 
@@ -129,7 +127,7 @@ export class MovieSearchGridComponent implements OnInit {
             });
     }
 
-   private getExtaInfo() {
+    private getExtaInfo() {
         this.movieResults.forEach((val) => {
             this.searchService.getMovieInformation(val.id)
                 .subscribe(m => this.updateItem(val, m));
@@ -147,18 +145,17 @@ export class MovieSearchGridComponent implements OnInit {
         this.movieResults = [];
         this.searchApplied = false;
     }
-    
+
     private processGrid(movies: ISearchMovieResult[]) {
-        let container = <ISearchMovieResultContainer>{ movies: [] };
+        let container = <ISearchMovieResultContainer> { movies: [] };
         movies.forEach((movie, i) => {
             i++;
-            if((i % 4) === 0) {
+            if ((i % 4) === 0) {
-                container.movies.push(movie);  
+                container.movies.push(movie);
                 this.movieResultGrid.push(container);
-                container = <ISearchMovieResultContainer>{ movies: [] };
+                container = <ISearchMovieResultContainer> { movies: [] };
             } else {
-                
+                container.movies.push(movie);
-                container.movies.push(movie);                
             }
         });
         this.movieResultGrid.push(container);

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

@@ -25,7 +25,7 @@ const routes: Routes = [
     { path: "show/:id", component: SeriesInformationComponent, canActivate: [AuthGuard] },
 ];
 @NgModule({
-    imports: [        
+    imports: [
         CommonModule,
         FormsModule,
         RouterModule.forChild(routes),

src/Ombi/ClientApp/app/search/seriesinformation.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnInit} from "@angular/core";
-import "rxjs/add/operator/takeUntil";
 
 import { NotificationService } from "../services";
 import { RequestService } from "../services";
@@ -39,25 +38,25 @@ export class SeriesInformationComponent implements OnInit {
             });
         });
 
-        if(!selected) {
+        if (!selected) {
             this.notificationService.error("You need to select some episodes!");
             return;
         }
 
         this.series.requested = true;
 
-        const viewModel = <ITvRequestViewModel>{ firstSeason: this.series.firstSeason, latestSeason: this.series.latestSeason, requestAll: this.series.requestAll, tvDbId: this.series.id};
+        const viewModel = <ITvRequestViewModel> { firstSeason: this.series.firstSeason, latestSeason: this.series.latestSeason, requestAll: this.series.requestAll, tvDbId: this.series.id};
         viewModel.seasons = [];
         this.series.seasonRequests.forEach((season) => {
-            const seasonsViewModel = <ISeasonsViewModel>{seasonNumber: season.seasonNumber, episodes: []};
+            const seasonsViewModel = <ISeasonsViewModel> {seasonNumber: season.seasonNumber, episodes: []};
             season.episodes.forEach(ep => {
-                if(!this.series.latestSeason || !this.series.requestAll || !this.series.firstSeason) {
+                if (!this.series.latestSeason || !this.series.requestAll || !this.series.firstSeason) {
-                    if(ep.selected) {
+                    if (ep.selected) {
                         seasonsViewModel.episodes.push({episodeNumber: ep.episodeNumber});
                     }
                 }
             });
-            
+
             viewModel.seasons.push(seasonsViewModel);
         });
 

src/Ombi/ClientApp/app/search/tvsearch.component.html

@@ -5,7 +5,7 @@
         <div class="input-group-addon right-radius">
             <div class="btn-group">
                 <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                    {{ 'Search.Suggestions' | translate }} 
+                    {{ 'Search.Suggestions' | translate }}
                     <i class="fa fa-chevron-down"></i>
                 </a>
                 <ul class="dropdown-menu">
@@ -42,129 +42,125 @@
             <i class='fa fa-film no-search-results-icon'></i>
             <div class='no-search-results-text'>{{ 'Search.NoResults' | translate }}</div>
         </div>
-        <p-treeTable [value]="tvResults">
+        <div *ngIf="tvResults" >
-            <p-column>
+          <div  *ngFor="let node of tvResults">
-                <ng-template let-col let-node="rowData" pTemplate="header">
+                <!--This is the section that holds the parent level search results set-->
-                    {{ 'Search.TvShows.Results' | translate }}
+                <div *ngIf="node">
-                </ng-template>
+                    <div class="row">
-                <ng-template let-col let-node="rowData" pTemplate="body">
-                    <!--This is the section that holds the parent level search results set-->
-                    <div *ngIf="!node.leaf">
-                        <div class="row" >
-                            
-                <div class="myBg backdrop" [style.background-image]="node?.data?.background"></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>
-                            <div class="col-sm-2 small-padding">
 
-                                <img *ngIf="node?.data?.banner" class="img-responsive poster" width="150" [src]="node.data.banner" alt="poster">
+                        <div class="myBg backdrop" [style.background-image]="node?.background"></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>
+                        <div class="col-sm-2 small-padding">
 
-                            </div>
+                            <img *ngIf="node.banner" class="img-responsive poster" width="150" [src]="node.banner" alt="poster">
-                            <div class="col-sm-8 small-padding">
-                                <div>
 
-                                    <a *ngIf="node.data.imdbId" href="{{node.data.imdbId}}" target="_blank">
+                        </div>
-                                        <h4>{{node.data.title}} ({{node.data.firstAired | date: 'yyyy'}})</h4>
+                        <div class="col-sm-8 small-padding">
+                            <div>
 
+                                <a *ngIf="node.imdbId" href="{{node.imdbId}}" target="_blank">
+                                    <h4>{{node.title}} ({{node.firstAired | date: 'yyyy'}})</h4>
+
+                                </a>
+                                <span class="tags">
+                                    <a *ngIf="node.homepage" id="homepageLabel" href="{{node.homepage}}" target="_blank">
+                                        <span class="label label-info">{{ 'Search.Movies.HomePage' | translate }}</span>
                                     </a>
-                                    <span class="tags">
-                                            <a *ngIf="node.data.homepage" id="homepageLabel" href="{{node.data.homepage}}" target="_blank"><span class="label label-info" >{{ 'Search.Movies.HomePage' | translate }}</span></a>
-  
-                                            <a *ngIf="node.data.trailer"  id="trailerLabel" href="{{node.data.trailer}}" target="_blank"><span class="label label-info">{{ 'Search.Movies.Trailer' | translate }}</span></a>
 
-                                    <span *ngIf="node.data.status" class="label label-primary" id="statusLabel" target="_blank">{{node.data.status}}</span>
+                                    <a *ngIf="node.trailer" id="trailerLabel" href="{{node.trailer}}" target="_blank">
+                                        <span class="label label-info">{{ 'Search.Movies.Trailer' | translate }}</span>
+                                    </a>
+
+                                    <span *ngIf="node.status" class="label label-primary" id="statusLabel" target="_blank">{{node.status}}</span>
 
 
-                                    <span *ngIf="node.data.firstAired" class="label label-info" target="_blank" id="airDateLabel">{{ 'Search.TvShows.AirDate' | translate }} {{node.data.firstAired | date: 'dd/MM/yyyy'}}</span>
+                                    <span *ngIf="node.firstAired" class="label label-info" target="_blank" id="airDateLabel">{{ 'Search.TvShows.AirDate' | translate }} {{node.firstAired | date: 'dd/MM/yyyy'}}</span>
+
+                                    <span *ngIf="node.network" class="label label-info" id="networkLabel" target="_blank">{{node.network}}</span>
+
+
+                                    <span *ngIf="node.available" class="label label-success" id="availableLabel">{{ 'Common.Available' | translate }}</span>
+
+                                    <span *ngIf="node.partlyAvailable" class="label label-warning" id="partiallyAvailableLabel">{{ 'Common.PartlyAvailable' | translate }}</span>
 
-                                    <span *ngIf="node.data.network" class="label label-info" id="networkLabel" target="_blank">{{node.data.network}}</span>
 
-                    
-                                        <span *ngIf="node.data.available" class="label label-success" id="availableLabel">{{ 'Common.Available' | translate }}</span>
-                                    
-                                        <span *ngIf="node.data.partlyAvailable" class="label label-warning" id="partiallyAvailableLabel">{{ 'Common.PartlyAvailable' | translate }}</span>
-                                   
 
-                                 
                                 </span>
 
-                                    <br />
+                                <br />
-                                    <br />
+                                <br />
-                                </div>
+                            </div>
-                                <p class="tv-overview">{{node.data.overview}}</p>
+                            <p class="tv-overview">{{node.overview}}</p>
+                        </div>
+
+
+                        <div class="col-sm-2 small-padding">
+                            <div *ngIf="!node.fullyAvailable" class="dropdown">
+                                <button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                                    <i class="fa fa-plus"></i> {{ 'Common.Request' | translate }}
+                                    <span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                                    <li>
+                                        <a href="#" (click)="allSeasons(node, $event)">{{ 'Search.TvShows.AllSeasons' | translate }}</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" (click)="firstSeason(node, $event)">{{ 'Search.TvShows.FirstSeason' | translate }}</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" (click)="latestSeason(node, $event)">{{ 'Search.TvShows.LatestSeason' | translate }}</a>
+                                    </li>
+                                    <li>
+                                        <a href="#" (click)="openClosestTab(node, $event)">{{ 'Search.TvShows.Select' | translate }}</a>
+                                    </li>
+                                </ul>
                             </div>
 
-
+                            <div *ngIf="node.fullyAvailable">
-                            <div class="col-sm-2 small-padding">
+                                <button style="text-align: right" class="btn btn-success-outline disabled" disabled>
-                                <div *ngIf="!node.data.fullyAvailable" class="dropdown">
+                                    <i class="fa fa-check"></i> {{ 'Common.Available' | translate }}
-                                    <button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                                </button>
-                                        <i class="fa fa-plus"></i> {{ 'Common.Request' | translate }}
+                            </div>
-                                        <span class="caret"></span>
+                            <br />
-                                    </button>
+                            <div *ngIf="node.plexUrl && node.available">
-                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                                <a style="text-align: right" class="btn btn-sm btn-success-outline" href="{{node.plexUrl}}" target="_blank">
-                                        <li>
+                                    <i class="fa fa-eye"></i> {{ 'Search.ViewOnPlex' | translate }}
-                                            <a href="#" (click)="allSeasons(node.data, $event)">{{ 'Search.TvShows.AllSeasons' | translate }}</a>
+                                </a>
-                                        </li>
+                            </div>
-                                        <li>
+                            <div *ngIf="node.embyUrl && node.available">
-                                            <a href="#" (click)="firstSeason(node.data, $event)">{{ 'Search.TvShows.FirstSeason' | translate }}</a>
+                                <a style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline" href="{{node.embyUrl}}" target="_blank">
-                                        </li>
+                                    <i class="fa fa-eye"></i> {{ 'Search.ViewOnEmby' | translate }}
-                                        <li>
+                                </a>
-                                            <a href="#" (click)="latestSeason(node.data, $event)">{{ 'Search.TvShows.LatestSeason' | translate }}</a>
+                            </div>
-                                        </li>
+                            <div class="dropdown" *ngIf="issueCategories && issuesEnabled">
-                                        <li>
+                                <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
-                                            <a href="#" (click)="openClosestTab($event)">{{ 'Search.TvShows.Select' | translate }}</a>
+                                    aria-expanded="true">
-                                        </li>
+                                    <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
-                                    </ul>
+                                    <span class="caret"></span>
-                                </div>
+                                </button>
-
+                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                                <div *ngIf="node.data.fullyAvailable">
+                                    <li *ngFor="let cat of issueCategories">
-                                    <button style="text-align: right" class="btn btn-success-outline disabled" disabled>
+                                        <a [routerLink]="" (click)="reportIssue(cat, node)">{{cat.value}}</a>
-                                        <i class="fa fa-check"></i> {{ 'Common.Available' | translate }}
+                                    </li>
-                                    </button>
+                                </ul>
-                                </div>
+                            </div>
+                            <div *ngIf="!node.available">
+                                <br />
                                 <br />
-                                <div *ngIf="node.data.plexUrl && node.data.available">
-                                    <a style="text-align: right" class="btn btn-sm btn-success-outline" href="{{node.data.plexUrl}}"
-                                       target="_blank">
-                                        <i class="fa fa-eye"></i> {{ 'Search.ViewOnPlex' | translate }}
-                                    </a>
-                                </div>
-                                <div *ngIf="node.data.embyUrl && node.data.available">
-                                    <a style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline" href="{{node.data.embyUrl}}"
-                                       target="_blank">
-                                        <i class="fa fa-eye"></i> {{ 'Search.ViewOnEmby' | translate }}
-                                    </a>
-                                </div>
-                                <div class="dropdown" *ngIf="issueCategories && issuesEnabled">
-                                    <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
-                                            aria-expanded="true">
-                                        <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
-                                        <span class="caret"></span>
-                                    </button>
-                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                                        <li *ngFor="let cat of issueCategories">
-                                            <a [routerLink]="" (click)="reportIssue(cat, node.data)">{{cat.value}}</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div *ngIf="!node.data.available">
-                                    <br />
-                                    <br />
-                                </div>
-
                             </div>
 
                         </div>
-                    </div>
-                    <!--This is the section that holds the child seasons if they want to specify specific episodes-->
-                    <div *ngIf="node.leaf">
-                        <seriesinformation [seriesId]="node.data.id"></seriesinformation>
-                    </div>
 
-                    <br/>
+                    </div>
-                    <br/>
+                </div>
-                </ng-template>
+                <!--This is the section that holds the child seasons if they want to specify specific episodes-->
-            </p-column>
+                <div *ngIf="node.open">
-        </p-treeTable>
+                    <seriesinformation [seriesId]="node.id"></seriesinformation>
+                </div>
+
+                <br/>
+                <br/>
+            </div>
     </div>
 </div>
 

src/Ombi/ClientApp/app/search/tvsearch.component.ts

@@ -1,15 +1,13 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
 import { DomSanitizer } from "@angular/platform-browser";
-import { Subject } from "rxjs/Subject";
+import { Subject } from "rxjs";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
 
 import { AuthService } from "../auth/auth.service";
+import { IIssueCategory, IRequestEngineResult, ISearchTvResult, ISeasonsViewModel, ITvRequestViewModel } from "../interfaces";
 import { ImageService, NotificationService, RequestService, SearchService } from "../services";
 
-import { TreeNode } from "primeng/primeng";
-import { IRequestEngineResult } from "../interfaces";
-import { IIssueCategory, ISearchTvResult, ISeasonsViewModel, ITvRequestViewModel } from "../interfaces";
-
 @Component({
     selector: "tv-search",
     templateUrl: "./tvsearch.component.html",
@@ -19,7 +17,7 @@ export class TvSearchComponent implements OnInit {
 
     public searchText: string;
     public searchChanged = new Subject<string>();
-    public tvResults: TreeNode[];
+    public tvResults: ISearchTvResult[];
     public result: IRequestEngineResult;
     public searchApplied = false;
     public defaultPoster: string;
@@ -32,57 +30,37 @@ export class TvSearchComponent implements OnInit {
     public issueProviderId: string;
     public issueCategorySelected: IIssueCategory;
 
-    constructor(private searchService: SearchService, private requestService: RequestService,
+    constructor(
-                private notificationService: NotificationService, private authService: AuthService,
+        private searchService: SearchService, private requestService: RequestService,
-                private imageService: ImageService, private sanitizer: DomSanitizer,
+        private notificationService: NotificationService, private authService: AuthService,
-                private readonly platformLocation: PlatformLocation) {
+        private imageService: ImageService, private sanitizer: DomSanitizer,
+        private readonly platformLocation: PlatformLocation) {
 
-        this.searchChanged
+        this.searchChanged.pipe(
-            .debounceTime(600) // Wait Xms after the last event before emitting last event
+            debounceTime(600), // Wait Xms after the last event before emitting last event
-            .distinctUntilChanged() // only emit if value is different from previous value
+            distinctUntilChanged(), // only emit if value is different from previous value
-            .subscribe(x => {
+        ).subscribe(x => {
-                this.searchText = x as string;
+            this.searchText = x as string;
-                if (this.searchText === "") {
+            if (this.searchText === "") {
-                    this.clearResults();
+                this.clearResults();
-                    return;
+                return;
-                }
+            }
-                this.searchService.searchTvTreeNode(this.searchText)
+            this.searchService.searchTv(this.searchText)
-                    .subscribe(x => {
+                .subscribe(x => {
-                        this.tvResults = x;
+                    this.tvResults = x;
-                        this.searchApplied = true;
+                    this.searchApplied = true;
-                        this.getExtraInfo();
+                    this.getExtraInfo();
-                    });
+                });
-            });
+        });
         this.defaultPoster = "../../../images/default_tv_poster.png";
         const base = this.platformLocation.getBaseHrefFromDOM();
-        if(base) {
+        if (base) {
             this.defaultPoster = "../../.." + base + "/images/default_tv_poster.png";
         }
     }
-    public openClosestTab(el: any) {
+    public openClosestTab(node: ISearchTvResult,el: any) {
         el.preventDefault();
-        const rowclass = "undefined ng-star-inserted";
+        node.open = !node.open;
-        el = el.toElement || el.relatedTarget || el.target;
-        while (el.className !== rowclass) {
-            // Increment the loop to the parent node until we find the row we need
-            el = el.parentNode;
-        }
-        // At this point, the while loop has stopped and `el` represents the element that has
-        // the class you specified
-
-        // Then we loop through the children to find the caret which we want to click
-        const caretright = "fa-caret-right";
-        const caretdown = "fa-caret-down";
-        for (const value of el.children) {
-            // the caret from the ui has 2 class selectors depending on if expanded or not
-            // we search for both since we want to still toggle the clicking
-            if (value.className.includes(caretright) || value.className.includes(caretdown)) {
-                // Then we tell JS to click the element even though we hid it from the UI
-                value.click();
-                //Break from loop since we no longer need to continue looking
-                break;
-            }
-        }
     }
 
     public ngOnInit() {
@@ -91,7 +69,7 @@ export class TvSearchComponent implements OnInit {
         this.result = {
             message: "",
             result: false,
-            errorMessage:"",
+            errorMessage: "",
         };
         this.popularShows();
     }
@@ -138,16 +116,16 @@ export class TvSearchComponent implements OnInit {
 
     public getExtraInfo() {
         this.tvResults.forEach((val, index) => {
-            this.imageService.getTvBanner(val.data.id).subscribe(x => {
+            this.imageService.getTvBanner(val.id).subscribe(x => {
-                if(x) {
+                if (x) {
-                    val.data.background = this.sanitizer.
+                    val.background = this.sanitizer.
-                    bypassSecurityTrustStyle
+                        bypassSecurityTrustStyle
-                    ("url(" + x + ")");
+                        ("url(" + x + ")");
                 }
             });
-            this.searchService.getShowInformationTreeNode(val.data.id)
+            this.searchService.getShowInformation(val.id)
                 .subscribe(x => {
-                    if (x.data) {
+                    if (x) {
                         this.setDefaults(x);
                         this.updateItem(val, x);
                     } else {
@@ -165,19 +143,19 @@ export class TvSearchComponent implements OnInit {
         if (this.authService.hasRole("admin") || this.authService.hasRole("AutoApproveMovie")) {
             searchResult.approved = true;
         }
-        
+
-        const viewModel = <ITvRequestViewModel>{ firstSeason: searchResult.firstSeason, latestSeason: searchResult.latestSeason, requestAll: searchResult.requestAll, tvDbId: searchResult.id};
+        const viewModel = <ITvRequestViewModel> { firstSeason: searchResult.firstSeason, latestSeason: searchResult.latestSeason, requestAll: searchResult.requestAll, tvDbId: searchResult.id };
         viewModel.seasons = [];
         searchResult.seasonRequests.forEach((season) => {
-            const seasonsViewModel = <ISeasonsViewModel>{seasonNumber: season.seasonNumber, episodes: []};
+            const seasonsViewModel = <ISeasonsViewModel> { seasonNumber: season.seasonNumber, episodes: [] };
             season.episodes.forEach(ep => {
-                if(!searchResult.latestSeason || !searchResult.requestAll || !searchResult.firstSeason) {
+                if (!searchResult.latestSeason || !searchResult.requestAll || !searchResult.firstSeason) {
-                    if(ep.requested) {
+                    if (ep.requested) {
-                        seasonsViewModel.episodes.push({episodeNumber: ep.episodeNumber});
+                        seasonsViewModel.episodes.push({ episodeNumber: ep.episodeNumber });
                     }
                 }
             });
-            
+
             viewModel.seasons.push(seasonsViewModel);
         });
 
@@ -223,30 +201,30 @@ export class TvSearchComponent implements OnInit {
         this.issueProviderId = req.id.toString();
     }
 
-    private updateItem(key: TreeNode, updated: TreeNode) {
+    private updateItem(key: ISearchTvResult, updated: ISearchTvResult) {
         const index = this.tvResults.indexOf(key, 0);
         if (index > -1) {
             // Update certain properties, otherwise we will loose some data
-            this.tvResults[index].data.title = updated.data.title;
+            this.tvResults[index].title = updated.title;
-            this.tvResults[index].data.banner = updated.data.banner;
+            this.tvResults[index].banner = updated.banner;
-            this.tvResults[index].data.imdbId = updated.data.imdbId;
+            this.tvResults[index].imdbId = updated.imdbId;
-            this.tvResults[index].data.seasonRequests = updated.data.seasonRequests;
+            this.tvResults[index].seasonRequests = updated.seasonRequests;
-            this.tvResults[index].data.seriesId = updated.data.seriesId;
+            this.tvResults[index].seriesId = updated.seriesId;
-            this.tvResults[index].data.fullyAvailable = updated.data.fullyAvailable;
+            this.tvResults[index].fullyAvailable = updated.fullyAvailable;
-            this.tvResults[index].data.backdrop = updated.data.backdrop;
+            this.tvResults[index].background = updated.banner;
         }
     }
 
-    private setDefaults(x: any) {
+    private setDefaults(x: ISearchTvResult) {
-        if (x.data.banner === null) {
+            if (x.banner === null) {
-            x.data.banner = this.defaultPoster;
+                x.banner = this.defaultPoster;
-        }
+            }
-
+        
-        if (x.data.imdbId === null) {
+            if (x.imdbId === null) {
-            x.data.imdbId = "https://www.tvmaze.com/shows/" + x.data.seriesId;
+                x.imdbId = "https://www.tvmaze.com/shows/" + x.seriesId;
-        } else {
+            } else {
-            x.data.imdbId = "http://www.imdb.com/title/" + x.data.imdbId + "/";
+                x.imdbId = "http://www.imdb.com/title/" + x.imdbId + "/";
-        }
+            }
     }
 
     private clearResults() {

src/Ombi/ClientApp/app/services/applications/couchpotato.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/emby.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/plex.service.ts

@@ -1,12 +1,12 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 
-import { IPlexAuthentication, IPlexLibResponse, IPlexOAuthViewModel,IPlexServer, IPlexServerViewModel, IUsersModel } from "../../interfaces";
+import { IPlexAuthentication, IPlexLibResponse, IPlexOAuthViewModel, IPlexServer, IPlexServerViewModel, IUsersModel } from "../../interfaces";
 
 @Injectable()
 export class PlexService extends ServiceHelpers {

src/Ombi/ClientApp/app/services/applications/plexoauth.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 

src/Ombi/ClientApp/app/services/applications/plextv.service.ts

@@ -2,19 +2,18 @@
 import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IPlexPin } from "../../interfaces";
 
 @Injectable()
 export class PlexTvService {
-    
+
     constructor(private http: HttpClient, public platformLocation: PlatformLocation) {
-      
     }
 
     public GetPin(clientId: string, applicationName: string): Observable<IPlexPin> {
-        const headers = new HttpHeaders({"Content-Type":"application/json",
+        const headers = new HttpHeaders({"Content-Type": "application/json",
         "X-Plex-Client-Identifier": clientId,
         "X-Plex-Product": applicationName,
         "X-Plex-Version": "3",

src/Ombi/ClientApp/app/services/applications/radarr.service.ts

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IRadarrProfile, IRadarrRootFolder } from "../../interfaces";
 import { IRadarrSettings } from "../../interfaces";

src/Ombi/ClientApp/app/services/applications/sonarr.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ISonarrSettings } from "../../interfaces";
 import { ISonarrProfile, ISonarrRootFolder } from "../../interfaces";

src/Ombi/ClientApp/app/services/applications/tester.service.ts

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "../service.helpers";
 
@@ -37,6 +37,7 @@ export class TesterService extends ServiceHelpers {
     public pushbulletTest(settings: IPushbulletNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}pushbullet`, JSON.stringify(settings),  {headers: this.headers});
     }
+
     public pushoverTest(settings: IPushoverNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}pushover`, JSON.stringify(settings),  {headers: this.headers});
     }
@@ -52,7 +53,7 @@ export class TesterService extends ServiceHelpers {
     public emailTest(settings: IEmailNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}email`, JSON.stringify(settings),  {headers: this.headers});
     }
-    
+
     public plexTest(settings: IPlexServer): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}plex`, JSON.stringify(settings),  {headers: this.headers});
     }
@@ -67,11 +68,11 @@ export class TesterService extends ServiceHelpers {
 
     public sonarrTest(settings: ISonarrSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}sonarr`, JSON.stringify(settings),  {headers: this.headers});
-    }   
+    }
 
     public couchPotatoTest(settings: ICouchPotatoSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}couchpotato`, JSON.stringify(settings),  {headers: this.headers});
-    } 
+    }
 
     public telegramTest(settings: ITelegramNotifcationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}telegram`, JSON.stringify(settings),  {headers: this.headers});
@@ -79,10 +80,12 @@ export class TesterService extends ServiceHelpers {
 
     public sickrageTest(settings: ISickRageSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}sickrage`, JSON.stringify(settings),  {headers: this.headers});
-    }    
+    }
+
     public newsletterTest(settings: INewsletterNotificationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}newsletter`, JSON.stringify(settings),  {headers: this.headers});
-    }   
+    }
+
     public mobileNotificationTest(settings: IMobileNotificationTestSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}mobile`, JSON.stringify(settings),  {headers: this.headers});
     }

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ICheckbox, ICreateWizardUser, IIdentityResult, IResetPasswordToken, IUpdateLocalUser, IUser, IWizardUserResult } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";
@@ -19,7 +19,7 @@ export class IdentityService extends ServiceHelpers {
     public getUser(): Observable<IUser> {
         return this.http.get<IUser>(this.url,  {headers: this.headers});
     }
-    
+
     public getAccessToken(): Observable<string> {
         return this.http.get<string>(`${this.url}accesstoken`,  {headers: this.headers});
     }

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

@@ -1,6 +1,6 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { HttpClient } from "@angular/common/http";
 
@@ -20,21 +20,21 @@ 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(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 });
     }
-    
+
     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/services/issues.service.ts

@@ -1,10 +1,10 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
-import { IIssueCategory, IIssueComments,IIssueCount, IIssues, IIssuesChat, INewIssueComments, IssueStatus, IUpdateStatus } from "../interfaces";
+import { IIssueCategory, IIssueComments, IIssueCount, IIssues, IIssuesChat, INewIssueComments, IssueStatus, IUpdateStatus } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";
 
 @Injectable()
@@ -40,10 +40,10 @@ export class IssuesService extends ServiceHelpers {
     public createIssue(issue: IIssues): Observable<number> {
         return this.http.post<number>(this.url, JSON.stringify(issue), {headers: this.headers});
     }
-    
+
     public getIssue(id: number): Observable<IIssues> {
         return this.http.get<IIssues>(`${this.url}${id}`,  {headers: this.headers});
-    }    
+    }
 
     public getComments(id: number): Observable<IIssuesChat[]> {
         return this.http.get<IIssuesChat[]>(`${this.url}${id}/comments`,  {headers: this.headers});

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "./service.helpers";
 

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

@@ -1,6 +1,6 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { HttpClient } from "@angular/common/http";
 

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IMobileUsersViewModel } from "./../interfaces";
 import { ServiceHelpers } from "./service.helpers";

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IMassEmailModel } from "./../interfaces";
 

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { IRecentlyAddedMovies, IRecentlyAddedTvShows } from "./../interfaces";
 import { ServiceHelpers } from "./service.helpers";
@@ -18,7 +18,8 @@ export class RecentlyAddedService extends ServiceHelpers {
 
     public getRecentlyAddedTv(): Observable<IRecentlyAddedTvShows[]> {
         return this.http.get<IRecentlyAddedTvShows[]>(`${this.  url}tv/`, {headers: this.headers});
-    }    
+    }
+
     public getRecentlyAddedTvGrouped(): Observable<IRecentlyAddedTvShows[]> {
         return this.http.get<IRecentlyAddedTvShows[]>(`${this.url}tv/grouped`, {headers: this.headers});
     }

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

@@ -1,12 +1,11 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { TreeNode } from "primeng/primeng";
-import { IRequestEngineResult } from "../interfaces";
+import { FilterType, IChildRequests, IFilter, IMovieRequestModel, IMovieRequests, IMovieUpdateModel, IRequestEngineResult, IRequestsViewModel,  ITvRequests, ITvUpdateModel, OrderType } from "../interfaces";
-import { IChildRequests, IFilter, IMovieRequestModel, IMovieRequests, IMovieUpdateModel, IRequestsViewModel, ITvRequests,ITvUpdateModel, OrderType } from "../interfaces";
 import { ITvRequestViewModel } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";
 
@@ -22,8 +21,8 @@ export class RequestService extends ServiceHelpers {
 
     public getTotalMovies(): Observable<number> {
         return this.http.get<number>(`${this.url}Movie/total`, {headers: this.headers});
-    }    
+    }
-    
+
     public getTotalTv(): Observable<number> {
         return this.http.get<number>(`${this.url}tv/total`, {headers: this.headers});
     }
@@ -64,8 +63,8 @@ export class RequestService extends ServiceHelpers {
         return this.http.put<IMovieRequests>(`${this.url}movie/`, JSON.stringify(request), {headers: this.headers});
     }
 
-    public getTvRequests(count: number, position: number): Observable<ITvRequests[]> {
+    public getTvRequests(count: number, position: number, order: OrderType, status: FilterType, availability: FilterType): Observable<IRequestsViewModel<ITvRequests>> {
-        return this.http.get<ITvRequests[]>(`${this.url}tv/${count}/${position}`, {headers: this.headers});
+        return this.http.get<IRequestsViewModel<ITvRequests>>(`${this.url}tv/${count}/${position}/${order}/${status}/${availability}`, {headers: this.headers});
     }
 
     public getTvRequestsTree(count: number, position: number): Observable<TreeNode[]> {
@@ -87,7 +86,7 @@ export class RequestService extends ServiceHelpers {
     public removeTvRequest(request: ITvRequests) {
         this.http.delete(`${this.url}tv/${request.id}`, {headers: this.headers}).subscribe();
     }
-    
+
     public markTvAvailable(movie: ITvUpdateModel): Observable<IRequestEngineResult> {
         return this.http.post<IRequestEngineResult>(`${this.url}tv/available`, JSON.stringify(movie),  {headers: this.headers});
     }
@@ -102,11 +101,11 @@ export class RequestService extends ServiceHelpers {
 
     public updateChild(child: IChildRequests): Observable<IChildRequests> {
         return this.http.put<IChildRequests>(`${this.url}tv/child`, JSON.stringify(child), {headers: this.headers});
-    }   
+    }
 
     public denyChild(child: ITvUpdateModel): Observable<IRequestEngineResult> {
         return this.http.put<IRequestEngineResult>(`${this.url}tv/deny`, JSON.stringify(child), {headers: this.headers});
-    } 
+    }
 
     public approveChild(child: ITvUpdateModel): Observable<IRequestEngineResult> {
         return this.http.post<IRequestEngineResult>(`${this.url}tv/approve`, JSON.stringify(child), {headers: this.headers});
@@ -114,16 +113,16 @@ export class RequestService extends ServiceHelpers {
     public deleteChild(child: IChildRequests): Observable<boolean> {
         return this.http.delete<boolean>(`${this.url}tv/child/${child.id}`, {headers: this.headers});
     }
-   
+
     public subscribeToMovie(requestId: number): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}movie/subscribe/${requestId}`, {headers: this.headers});
-    }    
+    }
     public unSubscribeToMovie(requestId: number): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}movie/unsubscribe/${requestId}`, {headers: this.headers});
     }
     public subscribeToTv(requestId: number): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}tv/subscribe/${requestId}`, {headers: this.headers});
-    }    
+    }
     public unSubscribeToTv(requestId: number): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}tv/unsubscribe/${requestId}`, {headers: this.headers});
     }

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { TreeNode } from "primeng/primeng";
 import { ISearchMovieResult } from "../interfaces";
@@ -56,16 +56,16 @@ export class SearchService extends ServiceHelpers {
         return this.http.get<ISearchTvResult>(`${this.url}/Tv/info/${theTvDbId}`, {headers: this.headers});
     }
 
-    public popularTv(): Observable<TreeNode[]> {
+    public popularTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/popular/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/popular`, {headers: this.headers});
     }
-    public mostWatchedTv(): Observable<TreeNode[]> {
+    public mostWatchedTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/mostwatched/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/mostwatched`, {headers: this.headers});
     }
-    public anticipatedTv(): Observable<TreeNode[]> {
+    public anticipatedTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/anticipated/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/anticipated`, {headers: this.headers});
     }
-    public trendingTv(): Observable<TreeNode[]> {
+    public trendingTv(): Observable<ISearchTvResult[]> {
-        return this.http.get<TreeNode[]>(`${this.url}/Tv/trending/tree`, {headers: this.headers});
+        return this.http.get<ISearchTvResult[]>(`${this.url}/Tv/trending`, {headers: this.headers});
     }
 }

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

@@ -1,6 +1,5 @@
 import { PlatformLocation } from "@angular/common";
 import { HttpClient, HttpHeaders } from "@angular/common/http";
-import "rxjs/add/observable/throw";
 
 export class ServiceHelpers {
 

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

@@ -1,7 +1,7 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import {
     IAbout,
@@ -185,7 +185,7 @@ export class SettingsService extends ServiceHelpers {
     public getMobileNotificationSettings(): Observable<IMobileNotifcationSettings> {
         return this.http.get<IMobileNotifcationSettings>(`${this.url}/notifications/mobile`, {headers: this.headers});
     }
-    
+
     public saveMobileNotificationSettings(settings: IMobileNotifcationSettings): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}/notifications/mobile`, JSON.stringify(settings), {headers: this.headers});
     }
@@ -228,7 +228,7 @@ export class SettingsService extends ServiceHelpers {
 
     public getTelegramNotificationSettings(): Observable<ITelegramNotifcationSettings> {
         return this.http.get<ITelegramNotifcationSettings>(`${this.url}/notifications/telegram`, {headers: this.headers});
-    }    
+    }
 
     public saveTelegramNotificationSettings(settings: ITelegramNotifcationSettings): Observable<boolean> {
         return this.http
@@ -242,13 +242,13 @@ export class SettingsService extends ServiceHelpers {
     public saveJobSettings(settings: IJobSettings): Observable<IJobSettingsViewModel> {
         return this.http
             .post<IJobSettingsViewModel>(`${this.url}/jobs`, JSON.stringify(settings), {headers: this.headers});
-    } 
+    }
-    
+
     public testCron(body: ICronViewModelBody): Observable<ICronTestModel> {
         return this.http
             .post<ICronTestModel>(`${this.url}/testcron`, JSON.stringify(body), {headers: this.headers});
     }
-    
+
     public getSickRageSettings(): Observable<ISickRageSettings> {
         return this.http.get<ISickRageSettings>(`${this.url}/sickrage`, {headers: this.headers});
     }
@@ -273,11 +273,11 @@ export class SettingsService extends ServiceHelpers {
 
     public getNewsletterSettings(): Observable<INewsletterNotificationSettings> {
         return this.http.get<INewsletterNotificationSettings>(`${this.url}/notifications/newsletter`, {headers: this.headers});
-    }  
+    }
 
     public updateNewsletterDatabase(): Observable<boolean> {
         return this.http.post<boolean>(`${this.url}/notifications/newsletterdatabase`, {headers: this.headers});
-    }    
+    }
 
     public saveNewsletterSettings(settings: INewsletterNotificationSettings): Observable<boolean> {
         return this.http

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

@@ -1,8 +1,8 @@
-import { PlatformLocation } from "@angular/common";
+import { PlatformLocation } from "@angular/common";
 import { Injectable } from "@angular/core";
 
 import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs/Rx";
+import { Observable } from "rxjs";
 
 import { ServiceHelpers } from "./service.helpers";
 

src/Ombi/ClientApp/app/settings/customization/customization.component.ts

@@ -25,13 +25,13 @@ export class CustomizationComponent implements OnInit {
                     return item.fullName === this.settings.presetThemeName;
                 })[0];
 
-                if(existingTheme) {
+                if (existingTheme) {
                     const index = this.themes.indexOf(existingTheme, 0);
                     if (index > -1) {
                         this.themes.splice(index, 1);
                     }
                 }
-                if(x.hasPresetTheme) {
+                if (x.hasPresetTheme) {
                     this.themes.unshift({displayName: x.presetThemeDisplayName, fullName: x.presetThemeName, url: existingTheme.url, version: x.presetThemeVersion});
                     this.themes.unshift({displayName: "None", fullName: "None", url: "", version: ""});
                 } else {
@@ -45,8 +45,8 @@ export class CustomizationComponent implements OnInit {
     public save() {
 
         this.settingsService.verifyUrl(this.settings.applicationUrl).subscribe(x => {
-            if(this.settings.applicationUrl) {
+            if (this.settings.applicationUrl) {
-                if(!x) {
+                if (!x) {
                     this.notificationService.error(`The URL "${this.settings.applicationUrl}" is not valid. Please format it correctly e.g. http://www.google.com/`);
                     return;
                 }
@@ -64,16 +64,16 @@ export class CustomizationComponent implements OnInit {
     }
 
     public dropDownChange(event: any): void {
-        const selectedThemeFullName = <string>event.target.value;
+        const selectedThemeFullName = <string> event.target.value;
         const selectedTheme = this.themes.filter((val) => {
             return val.fullName === selectedThemeFullName;
         })[0];
 
-        if(selectedTheme.fullName === this.settings.presetThemeName) {
+        if (selectedTheme.fullName === this.settings.presetThemeName) {
             return;
         }
-        
+
-        if(selectedTheme.fullName === "None" || selectedTheme.fullName === "-1") {
+        if (selectedTheme.fullName === "None" || selectedTheme.fullName === "-1") {
             this.settings.presetThemeName = "";
             this.settings.presetThemeContent = "";
             return;

src/Ombi/ClientApp/app/settings/notifications/discord.component.ts

@@ -39,7 +39,7 @@ export class DiscordComponent implements OnInit {
             return;
         }
 
-        const settings = <IDiscordNotifcationSettings>form.value;
+        const settings = <IDiscordNotifcationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.saveDiscordNotificationSettings(settings).subscribe(x => {

src/Ombi/ClientApp/app/settings/notifications/emailnotification.component.ts

@@ -54,7 +54,7 @@ export class EmailNotificationComponent implements OnInit {
             return;
         }
 
-        const settings = <IEmailNotificationSettings>form.value;
+        const settings = <IEmailNotificationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.saveEmailNotificationSettings(settings).subscribe(x => {

src/Ombi/ClientApp/app/settings/notifications/mattermost.component.ts

@@ -29,7 +29,7 @@ export class MattermostComponent implements OnInit {
                 username: [x.username],
                 webhookUrl: [x.webhookUrl, [Validators.required]],
                 channel: [x.channel],
-                iconUrl:[x.iconUrl],
+                iconUrl: [x.iconUrl],
 
             });
         });
@@ -41,7 +41,7 @@ export class MattermostComponent implements OnInit {
             return;
         }
 
-        const settings = <IMattermostNotifcationSettings>form.value;
+        const settings = <IMattermostNotifcationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.saveMattermostNotificationSettings(settings).subscribe(x => {

src/Ombi/ClientApp/app/settings/notifications/mobile.component.ts

@@ -32,9 +32,9 @@ export class MobileComponent implements OnInit {
         });
 
         this.mobileService.getUserDeviceList().subscribe(x => {
-            if(x.length <= 0) {
+            if (x.length <= 0) {
                 this.userList = [];
-                this.userList.push({username:"None",devices:0, userId:""});
+                this.userList.push({username: "None", devices: 0, userId: ""});
             } else {
                 this.userList = x;
             }
@@ -47,7 +47,7 @@ export class MobileComponent implements OnInit {
             return;
         }
 
-        const settings = <IMobileNotifcationSettings>form.value;
+        const settings = <IMobileNotifcationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.saveMobileNotificationSettings(settings).subscribe(x => {
@@ -65,8 +65,8 @@ export class MobileComponent implements OnInit {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        if(!this.testUserId) {
+        if (!this.testUserId) {
-            this.notificationService.warning("Warning","Please select a user to send the test notification");
+            this.notificationService.warning("Warning", "Please select a user to send the test notification");
             return;
         }
 

src/Ombi/ClientApp/app/settings/notifications/newsletter.component.ts

@@ -49,12 +49,12 @@ export class NewsletterComponent implements OnInit {
         });
 
     }
-    public addEmail() { 
+    public addEmail() {
 
-        if(this.emailToAdd) {
+        if (this.emailToAdd) {
             const emailRegex = "[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}";
             const match = this.emailToAdd.match(emailRegex)!;
-            if(match && match.length > 0) {
+            if (match && match.length > 0) {
                 this.settings.externalEmails.push(this.emailToAdd);
                 this.emailToAdd = "";
             } else {

src/Ombi/ClientApp/app/settings/notifications/pushbullet.component.ts

@@ -37,7 +37,7 @@ export class PushbulletComponent implements OnInit {
             return;
         }
 
-        const settings = <IPushbulletNotificationSettings>form.value;
+        const settings = <IPushbulletNotificationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.savePushbulletNotificationSettings(settings).subscribe(x => {

src/Ombi/ClientApp/app/settings/notifications/pushover.component.ts

@@ -37,7 +37,7 @@ export class PushoverComponent implements OnInit {
             return;
         }
 
-        const settings = <IPushoverNotificationSettings>form.value;
+        const settings = <IPushoverNotificationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.savePushoverNotificationSettings(settings).subscribe(x => {

src/Ombi/ClientApp/app/settings/notifications/slack.component.ts

@@ -41,7 +41,7 @@ export class SlackComponent implements OnInit {
             return;
         }
 
-        const settings = <ISlackNotificationSettings>form.value;
+        const settings = <ISlackNotificationSettings> form.value;
         if (settings.iconEmoji && settings.iconUrl) {
 
             this.notificationService.error("You cannot have a Emoji icon and a URL icon");
@@ -65,7 +65,7 @@ export class SlackComponent implements OnInit {
             return;
         }
 
-        const settings = <ISlackNotificationSettings>form.value;
+        const settings = <ISlackNotificationSettings> form.value;
         if (settings.iconEmoji && settings.iconUrl) {
 
             this.notificationService.error("You cannot have a Emoji icon and a URL icon");

src/Ombi/ClientApp/app/settings/notifications/telegram.component.ts

@@ -40,7 +40,7 @@ export class TelegramComponent implements OnInit {
             return;
         }
 
-        const settings = <ITelegramNotifcationSettings>form.value;
+        const settings = <ITelegramNotifcationSettings> form.value;
         settings.notificationTemplates = this.templates;
 
         this.settingsService.saveTelegramNotificationSettings(settings).subscribe(x => {

src/Ombi/ClientApp/app/settings/ombi/ombi.component.ts

@@ -41,9 +41,9 @@ export class OmbiComponent implements OnInit {
             return;
         }
 
-        const result = <IOmbiSettings>form.value;
+        const result = <IOmbiSettings> form.value;
-        if(result.baseUrl  && result.baseUrl.length > 0) {
+        if (result.baseUrl  && result.baseUrl.length > 0) {
-            if(!result.baseUrl.startsWith("/")) {
+            if (!result.baseUrl.startsWith("/")) {
                 this.notificationService.error("Please ensure your base url starts with a '/'");
                 return;
             }

src/Ombi/ClientApp/app/settings/plex/plex.component.ts

@@ -1,10 +1,8 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
-import "rxjs/add/operator/takeUntil";
+import { Subject } from "rxjs";
-import { Subject } from "rxjs/Subject";
+import { takeUntil } from "rxjs/operators";
-
-import { IPlexServerResponse, IPlexServerViewModel } from "../../interfaces";
-import { IPlexLibrariesSettings, IPlexServer, IPlexSettings } from "../../interfaces";
 
+import { IPlexLibrariesSettings, IPlexServer, IPlexServerResponse, IPlexServerViewModel, IPlexSettings } from "../../interfaces";
 import { JobService, NotificationService, PlexService, SettingsService, TesterService } from "../../services";
 
 @Component({
@@ -21,11 +19,12 @@ export class PlexComponent implements OnInit, OnDestroy {
 
     private subscriptions = new Subject<void>();
 
-    constructor(private settingsService: SettingsService,
+    constructor(
-                private notificationService: NotificationService,
+        private settingsService: SettingsService,
-                private plexService: PlexService,
+        private notificationService: NotificationService,
-                private testerService: TesterService,
+        private plexService: PlexService,
-                private jobService: JobService) { }
+        private testerService: TesterService,
+        private jobService: JobService) { }
 
     public ngOnInit() {
         this.settingsService.getPlex().subscribe(x => {
@@ -34,17 +33,17 @@ export class PlexComponent implements OnInit, OnDestroy {
     }
 
     public requestServers(server: IPlexServer) {
-        this.plexService.getServers(this.username, this.password)
+        this.plexService.getServers(this.username, this.password).pipe(
-            .takeUntil(this.subscriptions)
+            takeUntil(this.subscriptions),
-            .subscribe(x => {
+        ).subscribe(x => {
-                if (x.success) {
+            if (x.success) {
-                    this.loadedServers = x;
+                this.loadedServers = x;
-                    this.serversButton = true;
+                this.serversButton = true;
-                    this.notificationService.success("Found the servers! Please select one!");
+                this.notificationService.success("Found the servers! Please select one!");
-                } else {
+            } else {
-                    this.notificationService.warning("Error When Requesting Plex Servers", "Please make sure your username and password are correct");
+                this.notificationService.warning("Error When Requesting Plex Servers", "Please make sure your username and password are correct");
-                }
+            }
-            });
+        });
     }
 
     public selectServer(selectedServer: IPlexServerResponse, server: IPlexServer) {
@@ -72,7 +71,7 @@ export class PlexComponent implements OnInit, OnDestroy {
         if (this.settings.servers == null) {
             this.settings.servers = [];
         }
-        this.settings.servers.push(<IPlexServer>{ name: "New*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
+        this.settings.servers.push(<IPlexServer> { name: "New*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
 
     }
 
@@ -91,19 +90,19 @@ export class PlexComponent implements OnInit, OnDestroy {
         this.plexService.getLibraries(server).subscribe(x => {
             server.plexSelectedLibraries = [];
             if (x.successful) {
-                    x.data.mediaContainer.directory.forEach((item) => {
+                x.data.mediaContainer.directory.forEach((item) => {
-                        const lib: IPlexLibrariesSettings = {
+                    const lib: IPlexLibrariesSettings = {
-                            key: item.key,
+                        key: item.key,
-                            title: item.title,
+                        title: item.title,
-                            enabled: false,
+                        enabled: false,
-                        };
+                    };
-                        server.plexSelectedLibraries.push(lib);
+                    server.plexSelectedLibraries.push(lib);
-                    });
+                });
-                } else {
+            } else {
-                    this.notificationService.error(x.message);
+                this.notificationService.error(x.message);
-                }
+            }
-            },
+        },
-        err => { this.notificationService.error(err); });
+            err => { this.notificationService.error(err); });
     }
 
     public save() {
@@ -120,7 +119,7 @@ export class PlexComponent implements OnInit, OnDestroy {
 
     public runCacher(): void {
         this.jobService.runPlexCacher().subscribe(x => {
-            if(x) {
+            if (x) {
                 this.notificationService.success("Triggered the Plex Full Sync");
             }
         });
@@ -128,7 +127,7 @@ export class PlexComponent implements OnInit, OnDestroy {
 
     public runRecentlyAddedCacher(): void {
         this.jobService.runPlexRecentlyAddedCacher().subscribe(x => {
-            if(x) {
+            if (x) {
                 this.notificationService.success("Triggered the Plex Recently Added Sync");
             }
         });

src/Ombi/ClientApp/app/settings/radarr/radarr.component.ts

@@ -54,7 +54,7 @@ export class RadarrComponent implements OnInit {
 
         this.qualities = [];
         this.qualities.push({ name: "Please Select", id: -1 });
-        
+
         this.rootFolders = [];
         this.rootFolders.push({ path: "Please Select", id: -1 });
         this.minimumAvailabilityOptions = [
@@ -93,7 +93,7 @@ export class RadarrComponent implements OnInit {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        const settings = <IRadarrSettings>form.value;
+        const settings = <IRadarrSettings> form.value;
         this.testerService.radarrTest(settings).subscribe(x => {
             if (x === true) {
                 this.notificationService.success("Successfully connected to Radarr!");
@@ -108,12 +108,12 @@ public onSubmit(form: FormGroup) {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        if(form.controls.defaultQualityProfile.value === "-1" || form.controls.defaultRootPath.value === "Please Select") {
+        if (form.controls.defaultQualityProfile.value === "-1" || form.controls.defaultRootPath.value === "Please Select") {
             this.notificationService.error("Please check your entered values");
             return;
         }
 
-        const settings = <IRadarrSettings>form.value;
+        const settings = <IRadarrSettings> form.value;
         this.settingsService.saveRadarr(settings).subscribe(x => {
             if (x) {
                 this.notificationService.success("Successfully saved Radarr settings");

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

@@ -1,14 +1,16 @@
-import { CommonModule } from "@angular/common";
+import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule, Routes } from "@angular/router";
 import { NgbAccordionModule, NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { ClipboardModule } from "ngx-clipboard/dist";
+import { ClipboardModule } from "ngx-clipboard";
 
 import { AuthGuard } from "../auth/auth.guard";
 import { AuthService } from "../auth/auth.service";
-import { CouchPotatoService, EmbyService, IssuesService, JobService, MobileService, NotificationMessageService, PlexService, RadarrService,
+import {
-         SonarrService, TesterService, ValidationService } from "../services";
+    CouchPotatoService, EmbyService, IssuesService, JobService, MobileService, NotificationMessageService, PlexService, RadarrService,
+    SonarrService, TesterService, ValidationService,
+} from "../services";
 
 import { PipeModule } from "../pipes/pipe.module";
 import { AboutComponent } from "./about/about.component";

src/Ombi/ClientApp/app/settings/sickrage/sickrage.component.ts

@@ -40,7 +40,7 @@ export class SickRageComponent implements OnInit {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        const settings = <ISickRageSettings>form.value;
+        const settings = <ISickRageSettings> form.value;
         this.testerService.sickrageTest(settings).subscribe(x => {
             if (x) {
                 this.notificationService.success("Successfully connected to SickRage!");

src/Ombi/ClientApp/app/settings/sonarr/sonarr.component.ts

@@ -93,7 +93,7 @@ export class SonarrComponent implements OnInit {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        const settings = <ISonarrSettings>form.value;
+        const settings = <ISonarrSettings> form.value;
         this.testerService.sonarrTest(settings).subscribe(x => {
             if (x) {
                 this.notificationService.success("Successfully connected to Sonarr!");
@@ -108,13 +108,13 @@ export class SonarrComponent implements OnInit {
             this.notificationService.error("Please check your entered values");
             return;
         }
-        if(form.controls.defaultQualityProfile) {
+        if (form.controls.defaultQualityProfile) {
-            if(form.controls.defaultQualityProfile.value === "-1") {
+            if (form.controls.defaultQualityProfile.value === "-1") {
                 this.notificationService.error("Please check your entered values");
             }
         }
-        if(form.controls.defaultRootPath) {
+        if (form.controls.defaultRootPath) {
-            if(form.controls.defaultRootPath.value === "Please Select") {
+            if (form.controls.defaultRootPath.value === "Please Select") {
                 this.notificationService.error("Please check your entered values");
             }
         }

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

@@ -17,8 +17,8 @@ import { SidebarModule } from "primeng/primeng";
     CommonModule,
   ],
   exports: [
-      TranslateModule, 
+      TranslateModule,
-      CommonModule, 
+      CommonModule,
       FormsModule,
       SidebarModule,
       IssuesReportComponent,

src/Ombi/ClientApp/app/usermanagement/updatedetails.component.ts

@@ -19,7 +19,7 @@ export class UpdateDetailsComponent implements OnInit {
         this.identityService.getUser().subscribe(x => {
             const localUser = x as IUpdateLocalUser;
             this.form = this.fb.group({
-                 id:[localUser.id],
+                 id: [localUser.id],
                 username: [localUser.userName],
                 emailAddress: [localUser.emailAddress, [Validators.email]],
                 confirmNewPassword: [localUser.confirmNewPassword],

src/Ombi/ClientApp/app/usermanagement/usermanagement-edit.component.ts

@@ -13,7 +13,7 @@ import { NotificationService } from "../services";
 export class UserManagementEditComponent {
     public user: IUser;
     public userId: string;
-    
+
     constructor(private identityService: IdentityService,
                 private route: ActivatedRoute,
                 private notificationService: NotificationService,
@@ -45,13 +45,13 @@ export class UserManagementEditComponent {
                             this.notificationService.error(val);
                         });
                     }
-        
+
                 });
             },
             reject: () => {
                 return;
             },
-        });        
+        });
     }
 
     public resetPassword() {

src/Ombi/ClientApp/app/usermanagement/usermanagement.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 
-import { ICheckbox, ICustomizationSettings, IEmailNotificationSettings,IUser } from "../interfaces";
+import { ICheckbox, ICustomizationSettings, IEmailNotificationSettings, IUser } from "../interfaces";
 import { IdentityService, NotificationService, SettingsService } from "../services";
 
 @Component({
@@ -10,7 +10,7 @@ export class UserManagementComponent implements OnInit {
 
     public users: IUser[];
     public checkAll = false;
-    public emailSettings: IEmailNotificationSettings; 
+    public emailSettings: IEmailNotificationSettings;
     public customizationSettings: ICustomizationSettings;
 
     public order: string = "userName";
@@ -21,9 +21,9 @@ export class UserManagementComponent implements OnInit {
     public bulkMovieLimit?: number;
     public bulkEpisodeLimit?: number;
 
-    constructor(private readonly identityService: IdentityService,
+    constructor(private identityService: IdentityService,
-                private readonly settingsService: SettingsService,
+                private settingsService: SettingsService,
-                private readonly notificationService: NotificationService) { }
+                private notificationService: NotificationService) { }
 
     public ngOnInit() {
         this.users = [];
@@ -37,7 +37,7 @@ export class UserManagementComponent implements OnInit {
     }
 
     public welcomeEmail(user: IUser) {
-        if(!user.emailAddress) {
+        if (!user.emailAddress) {
             this.notificationService.error("The user needs an email address.");
             return;
         }
@@ -45,13 +45,13 @@ export class UserManagementComponent implements OnInit {
             this.notificationService.error("Email Notifications are not setup, cannot send welcome email");
             return;
         }
-        if(!this.emailSettings.notificationTemplates.some(x => {
+        if (!this.emailSettings.notificationTemplates.some(x => {
             return x.enabled && x.notificationType === 8;
         })) {
             this.notificationService.error("The Welcome Email template is not enabled in the Email Setings");
             return;
         }
-        this.identityService.sendWelcomeEmail(user).subscribe();        
+        this.identityService.sendWelcomeEmail(user).subscribe();
         this.notificationService.success(`Sent a welcome email to ${user.emailAddress}`);
     }
 
@@ -74,31 +74,31 @@ export class UserManagementComponent implements OnInit {
         });
 
         this.users.forEach(x => {
-            if(!x.checked) {
+            if (!x.checked) {
                 return;
             }
-            if(anyRoles) {
+            if (anyRoles) {
                 x.claims = this.availableClaims;
             }
-            if(this.bulkEpisodeLimit) {
+            if (this.bulkEpisodeLimit) {
                 x.episodeRequestLimit = this.bulkEpisodeLimit;
             }
-            if(this.bulkMovieLimit) {
+            if (this.bulkMovieLimit) {
                 x.movieRequestLimit = this.bulkMovieLimit;
             }
             this.identityService.updateUser(x).subscribe(y => {
-                if(!y.successful) {
+                if (!y.successful) {
                     this.notificationService.error(`Could not update user ${x.userName}. Reason ${y.errors[0]}`);
                 }
             });
         });
-        
+
         this.notificationService.success(`Updated users`);
         this.showBulkEdit = false;
         this.bulkMovieLimit = undefined;
         this.bulkEpisodeLimit = undefined;
     }
-    
+
     public setOrder(value: string, el: any) {
         el = el.toElement || el.relatedTarget || el.target || el.srcElement;
 
@@ -115,7 +115,7 @@ export class UserManagementComponent implements OnInit {
             previousFilter.className = "";
             el.className = "active";
         }
-    
+
         this.order = value;
-      }
+    }
 }

src/Ombi/ClientApp/app/wizard/emby/emby.component.ts

@@ -11,7 +11,7 @@ import { IEmbySettings } from "../../interfaces";
 })
 export class EmbyComponent implements OnInit {
 
-    private embySettings: IEmbySettings;
+    public embySettings: IEmbySettings;
 
     constructor(private embyService: EmbyService,
                 private router: Router,
@@ -21,7 +21,7 @@ export class EmbyComponent implements OnInit {
     public ngOnInit() {
         this.embySettings = {
             servers: [],
-            id:0,
+            id: 0,
             enable: true,
         };
         this.embySettings.servers.push({

src/Ombi/ClientApp/app/wizard/plex/plex.component.ts

@@ -29,7 +29,7 @@ export class PlexComponent implements OnInit {
                 this.notificationService.error("Username or password was incorrect. Could not authenticate with Plex.");
                 return;
             }
-            
+
             this.identityService.createWizardUser({
                     username: "",
                     password: "",
@@ -50,9 +50,9 @@ export class PlexComponent implements OnInit {
     }
 
     public oauth() {
-        this.plexTv.GetPin(this.clientId, "Ombi").subscribe(pin => {
+        this.plexTv.GetPin(this.clientId, "Ombi").subscribe((pin: any) => {
-            this.plexService.oAuth({wizard: true, pin}).subscribe(x => {
+            this.plexService.oAuth({ wizard: true, pin }).subscribe(x => {
-                if(x.url) {
+                if (x.url) {
                     window.location.href = x.url;
                 }
             });

src/Ombi/ClientApp/app/wizard/plex/plexoauth.component.ts

@@ -21,14 +21,14 @@ export class PlexOAuthComponent implements OnInit {
                 this.pinId = params.pin;
             });
     }
-            
+
     public ngOnInit(): void {
         this.plexOauth.oAuth(this.pinId).subscribe(x => {
-            if(!x.accessToken) {
+            if (!x.accessToken) {
                 return;
                 // RETURN
             }
-            
+
             this.identityService.createWizardUser({
                       username: "",
                       password: "",
@@ -50,5 +50,4 @@ export class PlexOAuthComponent implements OnInit {
                  
         });
     }
-    
 }

src/Ombi/ClientApp/imports.ts

@@ -1,2 +0,0 @@
-import "rxjs/add/operator/catch";
-import "rxjs/add/operator/map";

src/Ombi/ClientApp/main.ts

@@ -1,5 +1,6 @@
-import * as Pace from "pace-progress";
+// Main
 
+import * as Pace from "pace-progress";
 Pace.start();
 
 import "bootstrap/dist/js/bootstrap";
@@ -11,8 +12,6 @@ import "./polyfills";
 
 import "hammerjs";
 
-import "./imports";
-
 import { enableProdMode } from "@angular/core";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppModule } from "./app/app.module";
@@ -29,7 +28,9 @@ if (module.hot) {
             oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
             oldRootElem.parentNode.removeChild(oldRootElem);
         }
-        modulePromise.then(appModule => appModule.destroy());
+        if (modulePromise) {
+            modulePromise.then(appModule => appModule.destroy());
+        }
     });
 } else {
     enableProdMode();

src/Ombi/ClientApp/polyfills.ts

@@ -9,6 +9,7 @@ declare var module: any;
 
 if (module.hot) {
     Error.stackTraceLimit = Infinity;
-    // tslint:disable:no-var-requires
+
+    // tslint:disable-next-line
     require("zone.js/dist/long-stack-trace-zone");
 }

src/Ombi/ClientApp/styles/Styles.scss

@@ -24,3 +24,7 @@ $bg-colour-disabled: #252424;
     background: $primary-colour !important;
     color: white;
 }*/
+
+.label {
+    margin: 3px;
+}

src/Ombi/ClientApp/styles/base.scss

@@ -883,11 +883,6 @@ textarea {
     display: none;
 }
 
-.ui-treetable-toggler.fa.fa-fw.ui-clickable.fa-caret-right,
-.ui-treetable-toggler.fa.fa-fw.ui-clickable.fa-caret-down {
-    display: none;
-}
-
 .ui-state-highlight {
     background: $primary-colour;
 }
@@ -900,15 +895,6 @@ textarea {
     border: 1px solid $form-color-lighter;
 }
 
-.ui-treetable tfoot td, .ui-treetable th {
-    text-align: left;
-}
-
-.ui-treetable tbody td {
-    white-space: inherit;
-    overflow: visible;
-}
-
 table a:not(.btn) {
     text-decoration: none;
 }

src/Ombi/Controllers/RequestController.cs

@@ -153,18 +153,6 @@ namespace Ombi.Controllers
             return await MovieRequestEngine.DenyMovieById(model.Id);
         }
 
-        /// <summary>
-        /// Gets the tv requests.
-        /// </summary>
-        /// <param name="count">The count of items you want to return.</param>
-        /// <param name="position">The position.</param>
-        /// <returns></returns>
-        [HttpGet("tv/{count:int}/{position:int}/tree")]
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> GetTvRequestsTree(int count, int position)
-        {
-            return await TvRequestEngine.GetRequestsTreeNode(count, position);
-        }
-
         /// <summary>
         /// Gets the total amount of TV requests.
         /// </summary>
@@ -267,17 +255,6 @@ namespace Ombi.Controllers
             return await TvRequestEngine.SearchTvRequest(searchTerm);
         }
 
-        /// <summary>
-        /// Searches for a specific tv request
-        /// </summary>
-        /// <param name="searchTerm">The search term.</param>
-        /// <returns></returns>
-        [HttpGet("tv/search/{searchTerm}/tree")]
-        public async Task<IEnumerable<TreeNode<TvRequests, List<ChildRequests>>>> SearchTvTree(string searchTerm)
-        {
-            return await TvRequestEngine.SearchTvRequestTree(searchTerm);
-        }
-
         /// <summary>
         /// Deletes the a specific tv request
         /// </summary>

src/Ombi/Controllers/SearchController.cs

@@ -1,5 +1,4 @@
-using System;
+using System.Collections.Generic;
-using System.Collections.Generic;
 using System.Threading.Tasks;
 
 using Microsoft.AspNetCore.Authorization;
@@ -127,31 +126,6 @@ namespace Ombi.Controllers
             return await TvEngine.Search(searchTerm);
         }
 
-        /// <summary>
-        /// Searches for a Tv Show.
-        /// </summary>
-        /// <param name="searchTerm">The search term.</param>
-        /// <remarks>We use TvMaze as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/{searchTerm}/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> SearchTvTreeNode(string searchTerm)
-        {
-            return await TvEngine.SearchTreeNode(searchTerm);
-        }
-
-        /// <summary>
-        /// Gets extra show information.
-        /// </summary>
-        /// <param name="tvdbId">The TVDB identifier.</param>
-        /// <remarks>We use TvMaze as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/info/{tvdbId}/tree")]
-        public async Task<TreeNode<SearchTvShowViewModel>> GetShowInfoTreeNode(int tvdbId)
-        {
-            if (tvdbId == 0) return new TreeNode<SearchTvShowViewModel>();
-            return await TvEngine.GetShowInformationTreeNode(tvdbId);
-        }
-
         /// <summary>
         /// Gets extra show information.
         /// </summary>
@@ -164,17 +138,6 @@ namespace Ombi.Controllers
             return await TvEngine.GetShowInformation(tvdbId);
         }
 
-        /// <summary>
-        /// Returns Popular Tv Shows
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/popular/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> PopularTvTree()
-        {
-            return await TvEngine.PopularTree();
-        }
-
         /// <summary>
         /// Returns Popular Tv Shows
         /// </summary>
@@ -186,18 +149,6 @@ namespace Ombi.Controllers
             return await TvEngine.Popular();
         }
 
-        /// <summary>
-        /// Returns most Anticiplateds tv shows.
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/anticipated/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> AnticipatedTvTree()
-        {
-            return await TvEngine.AnticipatedTree();
-        }
-
-
         /// <summary>
         /// Returns most Anticiplateds tv shows.
         /// </summary>
@@ -209,16 +160,6 @@ namespace Ombi.Controllers
             return await TvEngine.Anticipated();
         }
 
-        /// <summary>
-        /// Returns Most watched shows.
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/mostwatched/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> MostWatchedTree()
-        {
-            return await TvEngine.MostWatchesTree();
-        }
 
         /// <summary>
         /// Returns Most watched shows.
@@ -231,17 +172,6 @@ namespace Ombi.Controllers
             return await TvEngine.MostWatches();
         }
 
-        /// <summary>
-        /// Returns trending shows
-        /// </summary>
-        /// <remarks>We use Trakt.tv as the Provider</remarks>
-        /// <returns></returns>
-        [HttpGet("tv/trending/tree")]
-        public async Task<IEnumerable<TreeNode<SearchTvShowViewModel>>> TrendingTree()
-        {
-            return await TvEngine.TrendingTree();
-        }
-
         /// <summary>
         /// Returns trending shows
         /// </summary>

src/Ombi/Ombi.csproj

@@ -1,5 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project ToolsVersion="15.0" Sdk="Microsoft.NET.Sdk.Web">
-
   <PropertyGroup>
     <TargetFramework>netcoreapp2.1</TargetFramework>
     <RuntimeIdentifiers>win10-x64;win10-x86;osx-x64;ubuntu-x64;debian.8-x64;centos.7-x64;linux-x64;linux-arm;linux-arm64;</RuntimeIdentifiers>
@@ -9,6 +8,7 @@
     <FileVersion>$(SemVer)</FileVersion>
     <Version>$(FullVer)</Version>
     <PackageVersion></PackageVersion>
+    <TypeScriptToolsVersion>2.8</TypeScriptToolsVersion>
   </PropertyGroup>
   <PropertyGroup>
     <ServerGarbageCollection>false</ServerGarbageCollection>
@@ -23,17 +23,13 @@
     <NoWarn>1701;1702;1705;1591;</NoWarn>
     <DefineConstants>TRACE;RELEASE;NETCOREAPP2_0</DefineConstants>
   </PropertyGroup>
-
-  <Target Name="NpmCommandsDebug" Condition="'$(Configuration)'=='Debug'" AfterTargets="Build">
-    <Exec Command="npm run-script vendor" />
-  </Target>
   
   <ItemGroup>
     <!-- Files not to show in IDE -->
     <Compile Remove="Logs\**" />
     <Compile Remove="Styles\**" />
     <Compile Remove="wwwroot\dist\**" />
-
+    
     <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
     <Content Remove="ClientApp\**" />
     <Content Remove="Logs\**" />
@@ -46,7 +42,17 @@
     <None Remove="Styles\**" />
     <None Remove="wwwroot\dist\**" />
   </ItemGroup>
-  
+  <Target Name="NpmCommandsDebug" Condition="'$(Configuration)'=='Debug'" AfterTargets="Build">
+    <Exec Command="npm run vendor" />
+  </Target>
+  <!-- Disabled as run by CI once for many different runtime builds
+  <Target Name="NpmCommandsRelease" Condition="'$(Configuration)'=='Release'" AfterTargets="Build">
+    <Exec Command="npm run publish" />
+  </Target>
+  -->
+  <Target Name="NpmCommandsClean" AfterTargets="Clean">
+    <Exec Command="npm run clean" />
+  </Target>
   <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
     <ItemGroup>
       <DistFiles Include="wwwroot\dist\**" />
@@ -56,8 +62,6 @@
       </ResolvedFileToPublish>
     </ItemGroup>
   </Target>
-
-
   <ItemGroup>
     <PackageReference Include="AutoMapper" Version="6.1.1" />
     <PackageReference Include="CommandLineParser" Version="2.1.1-beta" />
@@ -94,18 +98,4 @@
     <ProjectReference Include="..\Ombi.TheMovieDbApi\Ombi.Api.TheMovieDb.csproj" />
     <ProjectReference Include="..\Ombi.Updater\Ombi.Updater.csproj" />
   </ItemGroup>
-
-  <ItemGroup>
-    <None Include="wwwroot\loading.css" />
-    <None Include="wwwroot\translations\*.json" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <None Remove="ClientApp\app\animations\fadeinout.ts" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <TypeScriptCompile Include="ClientApp\app\animations\fadeinout.ts" />
-  </ItemGroup>
- 
 </Project>

src/Ombi/Startup.cs

@@ -156,7 +156,12 @@ namespace Ombi
                 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                 {
                     HotModuleReplacement = true,
-                    ConfigFile = "webpack.dev.js"
+                    ConfigFile = "webpack.config.ts",
+                    
+                    //EnvParam = new
+                    //{
+                    //    aot = true // can't use AOT with HMR currently https://github.com/angular/angular-cli/issues/6347
+                    //}
                 });
             }
 

src/Ombi/Views/Shared/_Layout.cshtml

@@ -60,19 +60,19 @@
          -->
          
     @*<!-- Start SmartBanner configuration -->
-  <meta name="smartbanner:title" content="Smart Application">
+          <meta name="smartbanner:title" content="Smart Application">
-  <meta name="smartbanner:author" content="SmartBanner Contributors">
+          <meta name="smartbanner:author" content="SmartBanner Contributors">
-  <meta name="smartbanner:price" content=" ">
+          <meta name="smartbanner:price" content=" ">
-  <meta name="smartbanner:price-suffix-apple" content=" On the App Store">
+          <meta name="smartbanner:price-suffix-apple" content=" On the App Store">
-  <meta name="smartbanner:price-suffix-google" content=" In Google Play">
+          <meta name="smartbanner:price-suffix-google" content=" In Google Play">
-  <meta name="smartbanner:icon-apple" content="http://a3.mzstatic.com/us/r30/Purple60/v4/c1/3b/b0/c13bb085-64c0-cc90-f97a-521b96963986/icon350x350.jpeg">
+          <meta name="smartbanner:icon-apple" content="http://a3.mzstatic.com/us/r30/Purple60/v4/c1/3b/b0/c13bb085-64c0-cc90-f97a-521b96963986/icon350x350.jpeg">
-  <meta name="smartbanner:icon-google" content="http://lh3.ggpht.com/f4oX61ljZ6x8aYDELZOgxlvdUEu73-wSQ4fy5bx6fCRISnZP8T353wdaM43RO_DbGg=w300">
+          <meta name="smartbanner:icon-google" content="http://lh3.ggpht.com/f4oX61ljZ6x8aYDELZOgxlvdUEu73-wSQ4fy5bx6fCRISnZP8T353wdaM43RO_DbGg=w300">
-  <meta name="smartbanner:button" content="View">
+          <meta name="smartbanner:button" content="View">
-  <meta name="smartbanner:button-url-apple" content="https://itunes.apple.com/us/genre/ios/id36?mt=8">
+          <meta name="smartbanner:button-url-apple" content="https://itunes.apple.com/us/genre/ios/id36?mt=8">
-  <meta name="smartbanner:button-url-google" content="https://play.google.com/store">
+          <meta name="smartbanner:button-url-google" content="https://play.google.com/store">
-  <meta name="smartbanner:enabled-platforms" content="android,ios">e.com/store/apps/details?id=com.tidusjar.Ombi">
+          <meta name="smartbanner:enabled-platforms" content="android,ios">e.com/store/apps/details?id=com.tidusjar.Ombi">
-<meta name="smartbanner:enabled-platforms" content="android,ios">
+        <meta name="smartbanner:enabled-platforms" content="android,ios">
-<!-- End SmartBanner configuration -->*@
+        <!-- End SmartBanner configuration -->*@
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="description" content="Ombi, media request tool">
@@ -98,8 +98,10 @@
 
     <link rel="stylesheet" href="~/loading.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
-    <script src="~/dist/vendor.js" asp-append-version="true" defer></script>
+    <environment include="Development">
-    <script src="~/dist/main.js" asp-append-version="true" defer></script>
+        <script src="~/dist/vendor.js" asp-append-version="true" defer></script>
+    </environment>
+    <script src="~/dist/app.js" asp-append-version="true" defer></script>
 </head>
 <body>
     @{

src/Ombi/gulpfile.js

@@ -1,21 +1,25 @@
-'use strict';
+"use strict";
 
-const gulp = require('gulp');
+const gulp = require("gulp");
-const run = require('gulp-run');
+const run = require("gulp-run");
-const runSequence = require('run-sequence');
+const runSequence = require("run-sequence");
-const del = require('del');
+const del = require("del");
-const path = require('path');
+const path = require("path");
-const fs = require('fs');
+const fs = require("fs");
 
-const outputDir = './wwwroot/dist';
+const outputDir = "./wwwroot/dist";
+global.aot = true;
 
 function getEnvOptions() {
-    var options = [];
+    const options = [];
     if (global.prod) {
-        options.push('--env.prod');
+        options.push("--env.prod");
     }
     if (global.analyse) {
-        options.push('--env.analyse');
+        options.push("--env.analyse");
+    }
+    if (global.aot) {
+        options.push("--env.aot");
     }
     if (options.length > 0) {
         return " " + options.join(" ");
@@ -24,12 +28,12 @@ function getEnvOptions() {
     }
 }
 
-
+function webpack(type) {
-function webpack(vendor) {
+    // 'webpack' instead of direct path can cause https://github.com/angular/angular-cli/issues/6417
-    return run(`webpack --config webpack.config${vendor ? '.vendor' : ''}.ts${getEnvOptions()}`).exec();
+    return run(`node node_modules\\webpack\\bin\\webpack.js --config webpack.config${type ? `.${type}` : ""}.ts${getEnvOptions()}`).exec();
 }
 
-gulp.task('vendor', () => {
+gulp.task("vendor", () => {
     let build = false;
     const vendorPath = path.join(outputDir, "vendor.js");
     const vendorExists = fs.existsSync(vendorPath);
@@ -37,44 +41,47 @@ gulp.task('vendor', () => {
         const vendorStat = fs.statSync(vendorPath);
         const packageStat = fs.statSync("package.json");
         const vendorConfigStat = fs.statSync("webpack.config.vendor.ts");
+        const commonConfigStat = fs.statSync("webpack.config.common.ts");
         if (packageStat.mtime > vendorStat.mtime) {
             build = true;
         }
         if (vendorConfigStat.mtime > vendorStat.mtime) {
             build = true;
         }
+        if (commonConfigStat.mtime > vendorStat.mtime) {
+            build = true;
+        }
     } else {
         build = true;
     }
     if (build) {
-        return webpack(true);
+        return webpack("vendor");
     }
 });
 
-
+gulp.task("vendor_force", () => {
-gulp.task('vendor_force', () => {
+    return webpack("vendor");
-    return webpack(true);
 })
 
-gulp.task('main', () => {
+gulp.task("main", () => {
     return webpack()
 });
 
-gulp.task('prod_var', () => {
+gulp.task("prod_var", () => {
     global.prod = true;
 })
 
-gulp.task('analyse_var', () => {
+gulp.task("analyse_var", () => {
     global.analyse = true;
 })
 
-gulp.task('clean', () => {
+gulp.task("clean", () => {
     del.sync(outputDir, { force: true });
 });
 
-
+gulp.task("lint", () => run("npm run lint").exec());
-gulp.task('lint', () => run("npm run lint").exec());
+gulp.task("lint_fix", () => run("npm run lint -- --fix").exec());
-gulp.task('build', callback => runSequence('vendor', 'main', callback));
+gulp.task("build", callback => runSequence("vendor", "main", callback));
-gulp.task('analyse', callback => runSequence('analyse_var', 'build'));
+gulp.task("analyse", callback => runSequence("analyse_var", "clean", "build", callback));
-gulp.task('full', callback => runSequence('clean', 'build'));
+gulp.task("full", callback => runSequence("clean", "build", callback));
-gulp.task('publish', callback => runSequence('prod_var', 'build'));
+gulp.task("publish", callback => runSequence("prod_var", "full", callback));

src/Ombi/package.json

@@ -1,94 +1,93 @@
 {
   "name": "ombi",
+  "version": "2.6.0",
   "private": true,
-  "version": "1.0.0",
   "scripts": {
     "vendor": "gulp vendor",
-    "main": "gulp main",
+    "lint": "tslint -p .",
     "publish": "gulp publish",
-    "lint": "tslint ClientApp/**/*.ts",
+    "restore": "dotnet restore && yarn install",
-    "restore": "dotnet restore && npm install"
+    "clean": "gulp clean"
   },
   "dependencies": {
-    "@angular/animations": "^5.2.5",
+    "@angular/animations": "^6.0.7",
-    "@angular/cdk": "^5.2.1",
+    "@angular/cdk": "^6.3.1",
-    "@angular/common": "^5.2.5",
+    "@angular/common": "^6.0.7",
-    "@angular/compiler": "^5.2.5",
+    "@angular/compiler": "^6.0.7",
-    "@angular/core": "^5.2.5",
+    "@angular/compiler-cli": "^6.0.7",
-    "@angular/forms": "^5.2.5",
+    "@angular/core": "^6.0.7",
-    "@angular/http": "^5.2.5",
+    "@angular/forms": "^6.0.7",
-    "@angular/material": "^5.2.1",
+    "@angular/http": "^6.0.7",
-    "@angular/platform-browser": "^5.2.5",
+    "@angular/material": "^6.3.1",
-    "@angular/platform-browser-dynamic": "^5.2.5",
+    "@angular/platform-browser": "^6.0.7",
-    "@angular/platform-server": "^5.2.5",
+    "@angular/platform-browser-dynamic": "^6.0.7",
-    "@angular/router": "^5.2.5",
+    "@angular/platform-server": "^6.0.7",
-    "@auth0/angular-jwt": "1.0.0-beta.9",
+    "@angular/router": "^6.0.7",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
+    "@auth0/angular-jwt": "^2.0.0",
-    "@ngu/carousel": "^1.4.8",
+    "@ng-bootstrap/ng-bootstrap": "^2.2.0",
-    "@ngx-translate/core": "^8.0.0",
+    "@ngtools/webpack": "^6.1.0-beta.2",
-    "@ngx-translate/http-loader": "^2.0.1",
+    "@ngu/carousel": "^1.4.9-beta-2",
-    "@types/core-js": "^0.9.46",
+    "@ngx-translate/core": "^10.0.2",
-    "@types/extract-text-webpack-plugin": "^3.0.1",
+    "@ngx-translate/http-loader": "^3.0.1",
-    "@types/intro.js": "^2.4.3",
+    "@types/core-js": "^2.5.0",
-    "@types/node": "^8.9.4",
+    "@types/mini-css-extract-plugin": "^0.2.0",
-    "@types/webpack": "^3.8.7",
+    "@types/node": "^10.5.1",
-    "angular-router-loader": "^0.8.2",
+    "@types/webpack": "^4.4.4",
-    "angular2-moment": "^1.8.0",
+    "@types/webpack-bundle-analyzer": "^2.9.2",
+    "@types/webpack-merge": "^4.1.3",
+    "angular-router-loader": "^0.8.5",
     "angular2-template-loader": "^0.6.2",
-    "aspnet-webpack": "^2.0.3",
+    "aspnet-webpack": "^3.0.0",
-    "awesome-typescript-loader": "^3.4.1",
+    "awesome-typescript-loader": "^5.2.0",
     "bootstrap": "3.3.7",
     "bootswatch": "3.3.7",
-    "core-js": "^2.5.3",
+    "copy-webpack-plugin": "^4.5.2",
-    "css": "^2.2.1",
+    "core-js": "^2.5.7",
-    "css-loader": "^0.28.9",
+    "css": "^2.2.3",
+    "css-loader": "^0.28.11",
     "del": "^3.0.0",
-    "event-source-polyfill": "^0.0.11",
+    "event-source-polyfill": "^0.0.12",
-    "expose-loader": "^0.7.4",
+    "expose-loader": "^0.7.5",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.11",
-    "file-loader": "^1.1.6",
     "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
     "gulp-run": "^1.7.1",
     "hammerjs": "^2.0.8",
-    "html-loader": "0.5.1",
+    "html-loader": "^0.5.5",
     "jquery": "^3.3.1",
+    "mini-css-extract-plugin": "^0.4.1",
+    "moment": "^2.22.2",
     "ng2-cookies": "^1.0.12",
-    "ngx-clipboard": "8.1.1",
+    "ngx-clipboard": "^11.1.1",
-    "ngx-infinite-scroll": "^0.6.1",
+    "ngx-infinite-scroll": "^6.0.1",
+    "ngx-moment": "^3.0.1",
     "ngx-order-pipe": "^2.0.1",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.0",
-    "npm": "^5.6.0",
     "pace-progress": "^1.0.2",
-    "primeng": "5.0.2",
+    "primeng": "^6.0.0",
-    "reflect-metadata": "0.1.10",
+    "raw-loader": "^0.5.1",
+    "reflect-metadata": "^0.1.12",
     "run-sequence": "^2.2.1",
-    "rxjs": "5.5.2",
+    "rxjs": "^6.2.1",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.0.3",
-    "style-loader": "^0.19.1",
+    "style-loader": "^0.21.0",
     "to-string-loader": "^1.1.5",
-    "ts-node": "^3.3.0",
+    "ts-node": "^7.0.0",
-    "tslint": "^5.9.1",
+    "tslint": "^5.10.0",
-    "tslint-language-service": "^0.9.8",
+    "tslint-language-service": "^0.9.9",
-    "typescript": "^2.7.1",
+    "typescript": "2.7.2",
-    "uglify-es": "^3.3.10",
+    "uglify-es": "^3.3.9",
-    "uglifyjs-webpack-plugin": "^1.1.8",
+    "uglifyjs-webpack-plugin": "^1.2.7",
-    "url-loader": "^0.6.2",
+    "url-loader": "^1.0.1",
-    "webpack": "^3.11.0",
+    "webpack": "^4.14.0",
-    "webpack-bundle-analyzer": "^2.10.0",
+    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-hot-middleware": "^2.21.0",
+    "webpack-cli": "^3.0.8",
-    "zone.js": "^0.8.20"
+    "webpack-dev-middleware": "^3.1.3",
+    "webpack-hot-middleware": "^2.22.2",
+    "webpack-merge": "^4.1.3",
+    "zone.js": "^0.8.26"
   },
-  "devDependencies": {
+  "resolutions": {
-    "@types/chai": "4.0.4",
+    "@types/tapable": "1.0.0"
-    "@types/jasmine": "2.6.2",
-    "chai": "4.1.2",
-    "jasmine-core": "2.8.0",
-    "karma": "1.7.1",
-    "karma-chai": "0.1.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-jasmine": "1.1.0",
-    "karma-webpack": "2.0.5"
   }
 }

src/Ombi/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": [
-      "es6",
+      "es2017",
       "dom"
     ],
     "moduleResolution": "node",
@@ -27,11 +27,15 @@
       }
     ]
   },
-  "exclude": [
+  "include": [
-    "bin",
+    "ClientApp/**/*",
-    "node_modules"
+    "typings/**/*",
+    "webpack.config.*"
   ],
   "angularCompilerOptions": {
-    "preserveWhitespaces": false
+    "preserveWhitespaces": false,
-  }
+    "genDir": "./ClientApp/app/ngfactory",
-}
+    "entryModule": "ClientApp/app/app.module#AppModule"
+  },
+  "compileOnSave": false
+}

src/Ombi/tslint.json

@@ -8,7 +8,7 @@
     ],
     "max-line-length": [
       true,
-      200
+      250
     ],
     "arrow-parens": false,
     "radix": false,
@@ -16,22 +16,33 @@
     "indent": [
       false
     ],
-    "whitespace": [
-      false
-    ],
     "no-unused-expression": [
       true,
       "allow-new"
     ],
-    "no-trailing-whitespace": [
-      false
-    ],
     "max-classes-per-file": [
       false
     ],
     "no-shadowed-variable": false,
     "comment-format": [
       false
+    ],
+    "no-namespace": [
+      false
+    ],
+    "no-internal-module": [
+      false
+    ],
+    "whitespace": [
+      false, 
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "no-trailing-whitespace":[
+      false
     ]
   }
 }

src/Ombi/typings/globals.d.ts

@@ -0,0 +1,4 @@
+// Globals
+
+declare module "pace-progress";
+declare var __webpack_public_path__: any;

src/Ombi/typings/globals/globals.d.ts

@@ -1,12 +0,0 @@
-// Globals
-
-declare var module: any;
-declare var require: any;
-declare var localStorage: any;
-declare var introJs: any;
-
-declare var __webpack_public_path__: any;
-
-declare module "pace-progress";
-declare module "webpack-bundle-analyzer";
-declare module "uglifyjs-webpack-plugin";

src/Ombi/typings/index.d.ts

@@ -1 +1 @@
-/// <reference path="globals/globals.d.ts" />
+/// <reference path="globals.d.ts" />

src/Ombi/webpack.config.common.ts

@@ -0,0 +1,83 @@
+import { AngularCompilerPlugin } from "@ngtools/webpack";
+import * as MiniCssExtractPlugin from "mini-css-extract-plugin";
+import * as path from "path";
+import { Configuration, ContextReplacementPlugin, ProvidePlugin } from "webpack";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+
+export const outputDir = "./wwwroot/dist";
+
+export function isProd(env: any) {
+    return env && env.prod as boolean;
+}
+
+export function isAOT(env: any) {
+    return env && env.aot as boolean;
+}
+
+export const WebpackCommonConfig = (env: any, type: string) => {
+    const prod = isProd(env);
+    const aot = isAOT(env);
+    const vendor = type === "vendor";
+    console.log(`${prod ? "Production" : "Dev"} ${type} build`);
+    console.log(`Output directory: ${outputDir}`);
+    console.log(`${aot ? "Using" : "Not using"} AOT compiler`);
+    const analyse = env && env.analyse as boolean;
+    if (analyse) { console.log("Analysing build"); }
+    const cssLoader = prod ? "css-loader?minimize" : "css-loader";
+    const bundleConfig: Configuration = {
+        mode: prod ? "production" : "development",
+        resolve: {
+            extensions: [".ts", ".js"],
+            alias: {
+                pace: "pace-progress",
+            },
+        },
+        output: {
+            path: path.resolve(outputDir),
+            filename: "[name].js",
+            chunkFilename: "[id].chunk.js",
+            publicPath: "/dist/",
+        },
+        module: {
+            rules: [
+                { test: /\.ts$/, loader: aot ? "@ngtools/webpack" : ["awesome-typescript-loader?silent=true", "angular2-template-loader", "angular-router-loader"] },
+                { test: /\.html$/, use: "html-loader?minimize=false" },
+                { test: /\.css$/, use: [MiniCssExtractPlugin.loader, cssLoader] },
+                { test: /\.scss$/, exclude: /ClientApp/, use: [MiniCssExtractPlugin.loader, cssLoader, "sass-loader"] },
+                { test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
+                { test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
+                { test: /\.(png|jpg|jpeg|gif|woff|woff2|eot|ttf|svg)(\?|$)/, use: "url-loader?limit=8192" },
+                { test: /[\/\\]@angular[\/\\].+\.js$/, parser: { system: true } }, // ignore System.import warnings https://github.com/angular/angular/issues/21560
+            ],
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
+            new ProvidePlugin({ $: "jquery", jQuery: "jquery", Hammer: "hammerjs/hammer" }), // Global identifiers
+        ].concat(aot && !vendor ? [
+            new AngularCompilerPlugin({
+                mainPath: "./ClientApp/main.ts",
+                tsConfigPath: "./tsconfig.json",
+                skipCodeGeneration: false,
+                compilerOptions: {
+                    noEmit: false,
+                },
+            }),
+        ] : [
+            // AOT chunk splitting does not work while this is active but doesn't seem to be needed under AOT anyway https://github.com/angular/angular-cli/issues/4431
+            new ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/14898
+        ]).concat(analyse ? [
+            new BundleAnalyzerPlugin({
+                analyzerMode: "static",
+                reportFilename: `${type}.html`,
+                openAnalyzer: false,
+            }),
+        ] : []),
+        node: {
+            fs: "empty",
+        },
+    };
+
+    return bundleConfig;
+};

src/Ombi/webpack.config.ts

@@ -1,59 +1,26 @@
-import { CheckerPlugin } from "awesome-typescript-loader";
 import * as path from "path";
-import * as UglifyJSPlugin from "uglifyjs-webpack-plugin";
+import { Configuration, DllReferencePlugin } from "webpack";
-import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import * as webpackMerge from "webpack-merge";
 
-import * as webpack from "webpack";
+import { isAOT, isProd, outputDir, WebpackCommonConfig } from "./webpack.config.common";
 
 module.exports = (env: any) => {
-    // const prod = env && env.prod as boolean;
+    const prod = isProd(env);
-    const prod = true;
+    const aot = isAOT(env);
-    console.log(prod ? "Production" : "Dev" + " main build");
+    if (!prod && aot) { console.warn("Vendor dll bundle will not be used as AOT is enabled"); }
-    const analyse = env && env.analyse as boolean;
+    const bundleConfig: Configuration = webpackMerge(WebpackCommonConfig(env, "main"), {
-    if (analyse) { console.log("Analysing build"); }
+        entry: {
-    const cssLoader = prod ? "css-loader?-url&minimize" : "css-loader?-url";
+            app: "./ClientApp/main.ts",
-    const outputDir = "./wwwroot/dist";
+        },
-    const bundleConfig: webpack.Configuration = {
-        entry: { main: "./ClientApp/main.ts" },
-        stats: { modules: false },
-        context: __dirname,
-        resolve: { extensions: [".ts", ".js"] },
         devtool: prod ? "source-map" : "eval-source-map",
-        output: {
+        plugins: prod || aot ? [] : [
-            filename: "[name].js",
+            // AOT chunk splitting does not work while this is active https://github.com/angular/angular-cli/issues/4565
-            chunkFilename: "[id].[chunkhash].js",
+            new DllReferencePlugin({
-            publicPath: "/dist/",
-            path: path.join(__dirname, outputDir),
-        },
-        module: {
-            rules: [
-                { test: /\.ts$/, include: /ClientApp/, use: ["awesome-typescript-loader?silent=true", "angular2-template-loader", "angular-router-loader"] },
-                { test: /\.html$/, use: "html-loader?minimize=false" },
-                { test: /\.css$/, use: ["to-string-loader", cssLoader] },
-                { test: /\.scss$/, include: /ClientApp(\\|\/)app/, use: ["to-string-loader", cssLoader, "sass-loader"] },
-                { test: /\.scss$/, include: /ClientApp(\\|\/)styles/, use: ["style-loader", cssLoader, "sass-loader"] },
-                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: "url-loader?limit=25000" },
-            ],
-        },
-        plugins: [
-            new CheckerPlugin(),
-            new webpack.DllReferencePlugin({
                 context: __dirname,
                 manifest: require(path.join(__dirname, outputDir, "vendor-manifest.json")),
             }),
-        ].concat(prod ? [
+        ],
-            // Plugins that apply in production builds only
+    });
-            new UglifyJSPlugin({ sourceMap: true }),
-        ] : [
-            // Plugins that apply in development builds only
-        ]).concat(analyse ? [
-            new BundleAnalyzerPlugin({
-                analyzerMode: "static",
-                reportFilename: "main.html",
-                openAnalyzer: false,
-            }),
-        ] : []),
-    };
 
     return bundleConfig;
 };

src/Ombi/webpack.config.vendor.ts

@@ -1,41 +1,25 @@
-import * as ExtractTextPlugin from "extract-text-webpack-plugin";
 import * as path from "path";
-import * as UglifyJSPlugin from "uglifyjs-webpack-plugin";
 import * as webpack from "webpack";
-import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import * as webpackMerge from "webpack-merge";
+import { isProd, outputDir, WebpackCommonConfig } from "./webpack.config.common";
 
 module.exports = (env: any) => {
-    const extractCSS = new ExtractTextPlugin("vendor.css");
+    const prod = isProd(env);
-    const prod = env && env.prod as boolean;
+    const bundleConfig = webpackMerge(WebpackCommonConfig(env, "vendor"), {
-    console.log(prod ? "Production" : "Dev" + " vendor build");
+        output: {
-    const analyse = env && env.analyse as boolean;
+            library: "[name]_[hash]",
-    if (analyse) { console.log("Analysing build"); }
-    const outputDir = "./wwwroot/dist";
-    const bundleConfig = {
-        stats: { modules: false },
-        resolve: {
-            extensions: [".js"],
-            alias: {
-                pace: "pace-progress",
-            },
-        },
-        module: {
-            rules: [
-                { test: /\.(png|woff|woff2|eot|ttf|svg|gif)(\?|$)/, use: "url-loader?limit=100000" },
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: prod ? "css-loader?minimize" : "css-loader" }) },
-                { test: /\.scss(\?|$)/, use: extractCSS.extract({ use: [prod ? "css-loader?minimize" : "css-loader", "sass-loader"] }) },
-            ],
         },
         entry: {
-            vendor: [
+            vendor: (<string[]>[ // add any vendor styles here e.g. bootstrap/dist/css/bootstrap.min.css
                 "pace-progress/themes/orange/pace-theme-flash.css",
                 "primeng/resources/primeng.min.css",
                 "@angular/material/prebuilt-themes/deeppurple-amber.css",
                 "font-awesome/scss/font-awesome.scss",
                 "bootswatch/superhero/bootstrap.min.css",
-
+            ]).concat(prod ? [] : [ // used to speed up dev launch time
                 "@angular/animations",
                 "@angular/common",
+                "@angular/common/http",
                 "@angular/compiler",
                 "@angular/core",
                 "@angular/forms",
@@ -67,41 +51,14 @@ module.exports = (env: any) => {
                 "@ngx-translate/core",
                 "@ngx-translate/http-loader",
                 "ngx-order-pipe",
-                //"smartbanner.js/dist/smartbanner.js",
+            ]),
-                //"smartbanner.js/dist/smartbanner.css",
-            ],
         },
-        output: {
+        plugins: prod ? [] : [
-            publicPath: "/dist/",
-            filename: "[name].js",
-            library: "[name]_[hash]",
-            path: path.join(__dirname, outputDir),
-        },
-        node: {
-            fs: "empty",
-        },
-        plugins: [
-            new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", Hammer: "hammerjs/hammer" }), // Global identifiers
-            new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, "./client")), // Workaround for https://github.com/angular/angular/issues/20357
-            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/11580
-            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/14898
-            extractCSS,
             new webpack.DllPlugin({
                 path: path.join(__dirname, outputDir, "[name]-manifest.json"),
                 name: "[name]_[hash]",
             }),
-        ].concat(prod ? [
+        ],
-            // Plugins that apply in production builds only
+    });
-            new UglifyJSPlugin(),
-        ] : [
-                // Plugins that apply in development builds only
-            ]).concat(analyse ? [
-                new BundleAnalyzerPlugin({
-                    analyzerMode: "static",
-                    reportFilename: "vendor.html",
-                    openAnalyzer: false,
-                }),
-            ] : []),
-    };
     return bundleConfig;
 };