!wip

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss

@@ -1,14 +1,15 @@
 $ombi-primary:#3f3f3f;
+$card-background: #2b2b2b;
 #cardImage {
-    max-height: 163px;
+    max-height: 68%;
     border-radius: 5px 5px 0px 0px;
 }
 
 .dark-card {
-    background-color: $ombi-primary;
+    background-color: $card-background;
     border-radius: 8px;
     color: white;
-    height: 360px;
+    height: 435px;
 }
 
 .card-spacing {
@@ -21,13 +22,13 @@ $ombi-primary:#3f3f3f;
     font-weight: bold;
 }
 
-$border-width: 2px;
+$border-width: 3px;
 .movie-image {
     border-bottom: $border-width orange solid;
 }
 
 .tv-image {
-    border-bottom: $border-width teal solid;
+    border-bottom: $border-width #1DE9B6 solid;
 }
 
 .expand {

src/Ombi/ClientApp/src/app/discover/discover.component.html

@@ -1,7 +1,35 @@
 <div class="small-middle-container">
-    <div *ngIf="discoverResults" class="row top-spacing full-height">
+
-            <div class="col-lg-1 col-md-2 col-4 small-padding" *ngFor="let result of discoverResults" [@slideIn]>
+    <div class="row justify-content-md-center top-spacing">
-                <discover-card [result]="result"></discover-card>
+        <div class="btn-group" role="group" aria-label="Basic example">
-            </div>
+            <button type="button" (click)="popular()" mat-raised-button class="btn" color="primary">Popular</button>
+            <button type="button" (click)="trending()" mat-raised-button class="btn" color="primary">Trending</button>
+            <button type="button" (click)="upcoming()" mat-raised-button class="btn" color="primary">Upcoming</button>
+        </div>
     </div>
-</div>
+
+    <div *ngIf="discoverResults" class="row full-height">
+        <div class="col-lg-2 col-md-2 col-4 small-padding" *ngFor="let result of discoverResults">
+            <discover-card [result]="result"></discover-card>
+        </div>
+    </div>
+</div>
+
+<!-- <div class="small-middle-container">
+        <div class="row">
+                <div class="col-lg-5">
+                    <div class="row">
+                        <div class="col-lg-4  small-padding" *ngFor="let result of discoverResults" [@slideIn]>
+                                <discover-card [result]="result"></discover-card>
+                        </div>
+                    </div>    
+                </div>
+                <div class="col-lg-5">
+                        <div class="row">
+                                <div class="col-lg-4  small-padding" *ngFor="let result of discoverResults" [@slideIn]>
+                                        <discover-card [result]="result"></discover-card>
+                                </div>
+                            </div>    
+                </div>
+            </div>
+    </div> -->

src/Ombi/ClientApp/src/app/discover/discover.component.scss

@@ -5,10 +5,11 @@
 
 .small-middle-container{
 	margin: auto;
-	width: 95%;
+	width: 80%;
 }
 
 .small-padding {
-    padding-left: 5px;
+    padding-left: 20px;
-    padding-right: 5px;
+    padding-right: 20px;
+    margin-bottom: 28px;
 }

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

@@ -31,6 +31,33 @@ export class DiscoverComponent implements OnInit {
         this.movies = await this.searchService.popularMovies().toPromise();
         this.tvShows = await this.searchService.popularTv().toPromise();
 
+        this.createModel();
+
+    }
+
+    public async popular() {
+        this.movies = await this.searchService.popularMovies().toPromise();
+        this.tvShows = await this.searchService.popularTv().toPromise();
+
+        this.createModel();
+    }
+    
+    public async trending() {
+        this.movies = await this.searchService.nowPlayingMovies().toPromise();
+        this.tvShows = await this.searchService.trendingTv().toPromise();
+
+        this.createModel();
+    }  
+
+    public async upcoming() {
+        this.movies = await this.searchService.upcomingMovies().toPromise();
+        this.tvShows = await this.searchService.anticipatedTv().toPromise();
+
+        this.createModel();
+    }
+
+    private createModel() {
+        this.discoverResults = [];
         this.movies.forEach(m => {
             this.discoverResults.push({
                 available: m.available,
@@ -57,7 +84,7 @@ export class DiscoverComponent implements OnInit {
                 overview: m.overview
             });
         });
-
+        
         this.shuffle(this.discoverResults);
     }
 

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

@@ -1,3 +1,3 @@
-<input class="form-control quater-width" type="text" [(ngModel)]="selectedItem" placeholder="Search" aria-label="Search" [ngbTypeahead]="searchModel" [resultFormatter]="formatter"
+<input class="form-control quater-width search-bar" type="text" [(ngModel)]="selectedItem" placeholder="Search" aria-label="Search" [ngbTypeahead]="searchModel" [resultFormatter]="formatter"
 [inputFormatter]="formatter" (selectItem)="selected($event)">
 

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

@@ -1,4 +1,5 @@
 $ombi-primary:#3f3f3f;
+$ombi-primary-darker:#2b2b2b;
 $ombi-accent: #258a6d;
 
 .quater-width {
@@ -30,4 +31,12 @@ $ombi-accent: #258a6d;
 ::ng-deep ngb-typeahead-window .dropdown-item.active, .dropdown-item:active {
   text-decoration: none;
   background-color: $ombi-accent;
+}
+
+.search-bar {
+  background-color: $ombi-primary-darker;
+  border: solid 1px $ombi-primary-darker;
+}
+.search-bar:focus {
+  background-color:white;
 }

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

@@ -21,7 +21,21 @@ export class NavSearchComponent {
     public searchFailed = false;
     
     
-    public formatter = (result: IMultiSearchResult) => result.media_type == "movie" ? result.title + ` (${result.release_date.slice(0,4)})` : result.name + ` (${result.release_date.slice(0,4)})`;
+    public formatter = (result: IMultiSearchResult) =>  {
+        if(result.media_type === "movie") {
+            let title = result.title;
+            if(result.release_date) {
+                title += ` (${result.release_date.slice(0,4)})`;
+            }
+            return title;
+        } else {
+            let title = result.name;
+            if(result.release_date) {
+                title += ` (${result.release_date.slice(0,4)})`;
+            }
+            return title;
+        }
+    }
     
     public searchModel = (text$: Observable<string>) =>
     text$.pipe(

src/Ombi/Startup.cs

@@ -1,22 +1,22 @@
-using System;
+using AutoMapper;
-using System.IO;
-using AutoMapper;
 using AutoMapper.EquivalencyExpression;
 using Hangfire;
 using Hangfire.Dashboard;
 using Hangfire.SQLite;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.HttpOverrides;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.SpaServices.AngularCli;
+using Microsoft.AspNetCore.SpaServices;
-using Microsoft.AspNetCore.SpaServices.Webpack;
+using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
 using Microsoft.AspNetCore.StaticFiles;
 using Microsoft.Extensions.Caching.Memory;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.Options;
 using Ombi.Core.Authentication;
 using Ombi.Core.Settings;
 using Ombi.DependencyInjection;
@@ -28,12 +28,22 @@ using Ombi.Store.Context;
 using Ombi.Store.Entities;
 using Ombi.Store.Repository;
 using Serilog;
+using System;
+using System.IO;
 
 namespace Ombi
 {
     public class Startup
     {
         public static StoragePathSingleton StoragePath => StoragePathSingleton.Instance;
+
+        private static readonly Action<ISpaBuilder> ConfigureSpaDefaults =
+            spa =>
+            {
+                spa.Options.SourcePath = "ClientApp";
+                spa.UseProxyToSpaDevelopmentServer("http://localhost:3578");
+            };
+
         public Startup(IHostingEnvironment env)
         {
             Console.WriteLine(env.ContentRootPath);
@@ -61,6 +71,7 @@ namespace Ombi
                     .WriteTo.RollingFile(Path.Combine(StoragePath.StoragePath, "Logs", "log-{Date}.txt"))
                     .CreateLogger();
             }
+
             Log.Logger = config;
 
 
@@ -105,13 +116,11 @@ namespace Ombi
             services.AddJwtAuthentication(Configuration);
 
             services.AddMvc()
-                .AddJsonOptions(x => x.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore);
+                .AddJsonOptions(x =>
+                    x.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore);
 
             services.AddOmbiMappingProfile();
-            services.AddAutoMapper(expression =>
+            services.AddAutoMapper(expression => { expression.AddCollectionMappers(); });
-            {
-                expression.AddCollectionMappers();
-            });
 
             services.RegisterApplicationDependencies(); // Ioc and EF
             services.AddSwagger();
@@ -122,6 +131,7 @@ namespace Ombi
             {
                 i.StoragePath = string.Empty;
             }
+
             var sqliteStorage = $"Data Source={Path.Combine(i.StoragePath, "Schedules.db")};";
 
             services.AddHangfire(x =>
@@ -139,10 +149,7 @@ namespace Ombi
             }));
             services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
 
-            services.AddSpaStaticFiles(configuration =>
+            services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; });
-            {
-                configuration.RootPath = "ClientApp/dist";
-            });
 
             // Build the intermediate service provider
             return services.BuildServiceProvider();
@@ -195,23 +202,25 @@ namespace Ombi
                     ombiService.SaveSettings(settings);
                 }
             }
+
             if (settings.BaseUrl.HasValue())
             {
                 app.UsePathBase(settings.BaseUrl);
             }
 
-            app.UseHangfireServer(new BackgroundJobServerOptions { WorkerCount = 1, ServerTimeout = TimeSpan.FromDays(1), ShutdownTimeout = TimeSpan.FromDays(1)});
+            app.UseHangfireServer(new BackgroundJobServerOptions
+                {WorkerCount = 1, ServerTimeout = TimeSpan.FromDays(1), ShutdownTimeout = TimeSpan.FromDays(1)});
             if (env.IsDevelopment())
             {
                 app.UseHangfireDashboard(settings.BaseUrl.HasValue() ? $"{settings.BaseUrl}/hangfire" : "/hangfire",
                     new DashboardOptions
                     {
-                        Authorization = new[] { new HangfireAuthorizationFilter() }
+                        Authorization = new[] {new HangfireAuthorizationFilter()}
                     });
             }
 
-            GlobalJobFilters.Filters.Add(new AutomaticRetryAttribute { Attempts = 3 });
+            GlobalJobFilters.Filters.Add(new AutomaticRetryAttribute {Attempts = 3});
-            
+
             // Setup the scheduler
             var jobSetup = app.ApplicationServices.GetService<IJobSetup>();
             jobSetup.Setup();
@@ -221,7 +230,7 @@ namespace Ombi
             settingsctx.Seed();
             externalctx.Seed();
 
-            var provider = new FileExtensionContentTypeProvider { Mappings = { [".map"] = "application/octet-stream" } };
+            var provider = new FileExtensionContentTypeProvider {Mappings = {[".map"] = "application/octet-stream"}};
 
             app.UseStaticFiles(new StaticFileOptions()
             {
@@ -241,30 +250,62 @@ namespace Ombi
                 c.SwaggerEndpoint("/swagger/v2/swagger.json", "API V2");
             });
 
-            app.UseMvc(routes =>
+            app.UseMvcWithDefaultRoute();
+            if (env.IsDevelopment())
             {
-                routes.MapRoute(
+                app.MapWhen(IsSpaRoute, spaApp => { UseSpaWithoutIndexHtml(spaApp, ConfigureSpaDefaults); });
-                    name: "default",
+            }
-                    template: "{controller=Home}/{action=Index}/{id?}");
-            });
-
-            app.UseSpa(spa =>
-            {
-                spa.Options.SourcePath = "ClientApp";
-                if (env.IsDevelopment())
-                {
-                    spa.UseProxyToSpaDevelopmentServer("http://localhost:3578");
-                    //spa.UseAngularCliServer("start");
-                }
-            });
         }
-    }
 
-    public class HangfireAuthorizationFilter : IDashboardAuthorizationFilter
+        private static bool IsSpaRoute(HttpContext context)
-    {
-        public bool Authorize(DashboardContext context)
         {
-            return true;
+            var path = context.Request.Path;
+            // This should probably be a compiled regex
+            return path.StartsWithSegments("/static")
+                   || path.StartsWithSegments("/sockjs-node")
+                   || path.StartsWithSegments("/socket.io")
+                   || path.ToString().Contains(".hot-update.");
         }
+
+        private static void UseSpaWithoutIndexHtml(IApplicationBuilder app, Action<ISpaBuilder> configuration)
+        {
+            if (configuration == null)
+            {
+                throw new ArgumentNullException(nameof(configuration));
+            }
+
+            // Use the options configured in DI (or blank if none was configured). We have to clone it
+            // otherwise if you have multiple UseSpa calls, their configurations would interfere with one another.
+            var optionsProvider = app.ApplicationServices.GetService<IOptions<SpaOptions>>();
+            var options = new SpaOptions();
+
+            var spaBuilder = new DefaultSpaBuilder(app, options);
+            configuration.Invoke(spaBuilder);
+        }
+
+        private class DefaultSpaBuilder : ISpaBuilder
+        {
+            public IApplicationBuilder ApplicationBuilder { get; }
+
+            public SpaOptions Options { get; }
+
+            public DefaultSpaBuilder(IApplicationBuilder applicationBuilder, SpaOptions options)
+            {
+                ApplicationBuilder = applicationBuilder
+                                     ?? throw new ArgumentNullException(nameof(applicationBuilder));
+
+                Options = options
+                          ?? throw new ArgumentNullException(nameof(options));
+            }
+        }
+
+        public class HangfireAuthorizationFilter : IDashboardAuthorizationFilter
+        {
+            public bool Authorize(DashboardContext context)
+            {
+                return true;
+            }
+        }
+
     }
 }

src/Ombi/Views/Shared/_Layout.cshtml

@@ -59,7 +59,6 @@
 
 
          -->
-         
     @*<!-- Start SmartBanner configuration -->
           <meta name="smartbanner:title" content="Smart Application">
           <meta name="smartbanner:author" content="SmartBanner Contributors">
@@ -81,6 +80,8 @@
     <title>@appName</title>
     <meta property="og:title" content=“@appName” />
     <meta property="og:image" content="~/images/logo.png" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
     <meta property="og:site_name" content=“@appName” />
     <base href="/@baseUrl" />
     <link rel="apple-touch-icon" sizes="180x180" href="~/images/favicon/apple-touch-icon.png">
@@ -92,40 +93,34 @@
     <meta name="msapplication-config" content="~/images/favicon/browserconfig.xml">
     <meta name="theme-color" content="#df691a">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">  
-    
+    <link rel="stylesheet" href="/loading.css" />
+    <script src="//maps.google.com/maps/api/js?libraries=visualization&key=AIzaSyBDar8LXU5vbURGTMcNLI0f9AsoSnpiV3I" async defer></script>
+
     @if (s?.CollectAnalyticData ?? true)
     {
         <!-- Global site tag (gtag.js) - Google Analytics -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=UA-89270627-3"></script>
         <script>
             window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
+            function gtag() { dataLayer.push(arguments); }
             gtag('js', new Date());
 
             gtag('config', 'UA-89270627-3');
         </script>
     }
 
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-    <link rel="stylesheet" href="~/loading.css" asp-append-version="true" />
-    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
-    <environment include="Development">
-        <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>
     @{
         if (customization.CustomCss.HasValue())
         {
-           <style>
+            <style>
                 @Html.Raw(customization.CustomCss)
             </style>
         }
     }
-
+    <app-ombi><p class="loading">Loading<span>.</span><span>.</span><span>.</span></p></app-ombi>
-    @RenderBody()
 </body>
 </html>