More !wip on the recently added page, got a working carosel now

src/Ombi.Api.FanartTv/FanartTvApi.cs

@@ -32,9 +32,9 @@ namespace Ombi.Api.FanartTv
             }
         }
 
-        public async Task<MovieResult> GetMovieImages(int theMovieDbId, string token)
+        public async Task<MovieResult> GetMovieImages(string movieOrImdbId, string token)
         {
-            var request = new Request($"movies/{theMovieDbId}", Endpoint, HttpMethod.Get);
+            var request = new Request($"movies/{movieOrImdbId}", Endpoint, HttpMethod.Get);
             request.AddHeader("api-key", token);
 
             return await Api.Request<MovieResult>(request);

src/Ombi.Api.FanartTv/IFanartTvApi.cs

@@ -5,7 +5,7 @@ namespace Ombi.Api.FanartTv
 {
     public interface IFanartTvApi
     {
-        Task<MovieResult> GetMovieImages(int theMovieDbId, string token);
+        Task<MovieResult> GetMovieImages(string movieOrImdbId, string token);
         Task<TvResult> GetTvImages(int tvdbId, string token);
     }
 }

src/Ombi.Core/Engine/RecentlyAddedEngine.cs

@@ -31,7 +31,7 @@ namespace Ombi.Core.Engine
             TransformPlexMovies(plexMovies, model);
             TransformEmbyMovies(embyMovies, model);
 
-            return model;
+            return model.Take(30);
         }
 
         public IEnumerable<RecentlyAddedMovieModel> GetRecentlyAddedMovies()

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

@@ -92,7 +92,7 @@
                                 <a [routerLink]="['/usermanagement/updatedetails']">
                                     <i class="fa fa-key"></i>{{ 'NavigationBar.UpdateDetails' | translate }}</a>
                             </li>
-                            <li *ngIf="customizationSettings.mobile" [routerLinkActive]="['active']">
+                            <li *ngIf="customizationSettings?.mobile" [routerLinkActive]="['active']">
                                     <a href="#" (click)="openMobileApp($event)">
                                         <i class="fa fa-mobile"></i>{{ 'NavigationBar.OpenMobileApp' | translate }}</a>
                             </li>

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

@@ -4,14 +4,16 @@
 <p-calendar [(ngModel)]="range" showButtonBar="true" selectionMode="range" (onClose)="close()"></p-calendar>
 <hr />
 
-<p-carousel [value]="movies" [headerText]="'Movies'" (onPage)="page($event)">
-    <ng-template let-movie pTemplate="movie">
-            <img class="img-responsive poster" src="{{movie.posterPath}}" style="width: 30px" alt="poster">
+<ngu-carousel
+      [inputs]="carouselTile">
 
-        {{movie.title}}
-    </ng-template>
-</p-carousel>
+            <ngu-tile NguCarouselItem *ngFor="let movie of movies">
+                <img class="img-responsive poster" src="{{movie.posterPath}}" style="width: 300px" alt="poster">
+            </ngu-tile>
 
+          <button NguCarouselPrev class='leftRs'>&lt;</button>
+          <button NguCarouselNext class='rightRs'>&gt;</button>
+    </ngu-carousel>
 
-<hr/>
-{{movies | json}}
+
+<hr/>

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

@@ -1,16 +1,45 @@
 import { Component, OnInit } from "@angular/core";
+import { NguCarousel } from "@ngu/carousel";
 
 import { ImageService, RecentlyAddedService } from "../services";
 import { IRecentlyAddedMovies, IRecentlyAddedRangeModel } from "./../interfaces";
 
 @Component({
     templateUrl: "recentlyAdded.component.html",
+    styles: [`
+    .leftRs {
+        position: absolute;
+        margin: auto;
+        top: 0;
+        bottom: 0;
+        width: 50px;
+        height: 50px;
+        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
+        border-radius: 999px;
+        left: 0;
+    }
+
+    .rightRs {
+        position: absolute;
+        margin: auto;
+        top: 0;
+        bottom: 0;
+        width: 50px;
+        height: 50px;
+        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
+        border-radius: 999px;
+        right: 0;
+    }
+  `],
 })
 
 export class RecentlyAddedComponent implements OnInit {
     public movies: IRecentlyAddedMovies[];
     public range: Date[];
-  
+    
+    // https://github.com/sheikalthaf/ngu-carousel
+    public carouselTile: NguCarousel;
+    
     constructor(private recentlyAddedService: RecentlyAddedService,
                 private imageService: ImageService) {}
      
@@ -28,11 +57,28 @@ export class RecentlyAddedComponent implements OnInit {
                 this.imageService.getMoviePoster(movie.theMovieDbId).subscribe(p => {
                     movie.posterPath = p;
                 });
+                } else if(movie.imdbId) {
+                    this.imageService.getMoviePoster(movie.imdbId).subscribe(p => {
+                        movie.posterPath = p;
+                    });
                 } else {
                     movie.posterPath = "";
                 }
             });
         });
+
+        this.carouselTile = {
+          grid: {xs: 2, sm: 3, md: 3, lg: 5, all: 0},
+          slide: 2,
+          speed: 400,
+          animation: "lazy",
+          point: {
+            visible: true,
+          },
+          load: 2,
+          touch: true,
+          easing: "ease",
+        };
      }
 
      public close() {

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

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { OrderModule } from "ngx-order-pipe";
-import { CalendarModule, CarouselModule, PaginatorModule, SharedModule, TabViewModule } from "primeng/primeng";
+import { CalendarModule, PaginatorModule, SharedModule, TabViewModule } from "primeng/primeng";
 
 import { IdentityService, ImageService, RecentlyAddedService } from "../services";
 
@@ -13,6 +13,8 @@ import { SharedModule as OmbiShared } from "../shared/shared.module";
 
 import { RecentlyAddedComponent } from "./recentlyAdded.component";
 
+import { NguCarouselModule } from "@ngu/carousel";
+
 const routes: Routes = [
     { path: "", component: RecentlyAddedComponent, canActivate: [AuthGuard] },
 ];
@@ -27,7 +29,7 @@ const routes: Routes = [
         PaginatorModule,
         TabViewModule,
         CalendarModule,
-        CarouselModule,
+        NguCarouselModule,
     ],
     declarations: [
         RecentlyAddedComponent,

src/Ombi/ClientApp/app/services/index.ts

@@ -0,0 +1,16 @@
+export * from "./applications";
+export * from "./helpers";
+export * from "./identity.service";
+export * from "./image.service";
+export * from "./landingpage.service";
+export * from "./notification.service";
+export * from "./request.service";
+export * from "./search.service";
+export * from "./service.helpers";
+export * from "./settings.service";
+export * from "./status.service";
+export * from "./job.service";
+export * from "./issues.service";
+export * from "./mobile.service";
+export * from "./notificationMessage.service";
+export * from "./recentlyAdded.service";

src/Ombi/Controllers/ImagesController.cs

@@ -8,6 +8,7 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.Extensions.Caching.Memory;
 using Microsoft.Extensions.Options;
+using Ombi.Api.TheMovieDb;
 using Ombi.Config;
 using Ombi.Helpers;
 
@@ -17,16 +18,16 @@ namespace Ombi.Controllers
     [Produces("application/json")]
     public class ImagesController : Controller
     {
-        public ImagesController(IFanartTvApi api, IApplicationConfigRepository config,
+        public ImagesController(IFanartTvApi fanartTvApi, IApplicationConfigRepository config,
             IOptions<LandingPageBackground> options, ICacheService c)
         {
-            Api = api;
+            FanartTvApi = fanartTvApi;
             Config = config;
             Options = options.Value;
             _cache = c;
         }
 
-        private IFanartTvApi Api { get; }
+        private IFanartTvApi FanartTvApi { get; }
         private IApplicationConfigRepository Config { get; }
         private LandingPageBackground Options { get; }
         private readonly ICacheService _cache;
@@ -36,7 +37,7 @@ namespace Ombi.Controllers
         {
             var key = await _cache.GetOrAdd(CacheKeys.FanartTv, async () => await Config.Get(Store.Entities.ConfigurationTypes.FanartTv), DateTime.Now.AddDays(1));
 
-            var images = await Api.GetTvImages(tvdbid, key.Value);
+            var images = await FanartTvApi.GetTvImages(tvdbid, key.Value);
             if (images == null)
             {
                 return string.Empty;
@@ -53,11 +54,11 @@ namespace Ombi.Controllers
         }
 
         [HttpGet("poster/movie/{movieDbId}")]
-        public async Task<string> GetMoviePoster(int movieDbId)
+        public async Task<string> GetMoviePoster(string movieDbId)
         {
             var key = await _cache.GetOrAdd(CacheKeys.FanartTv, async () => await Config.Get(Store.Entities.ConfigurationTypes.FanartTv), DateTime.Now.AddDays(1));
 
-            var images = await Api.GetMovieImages(movieDbId, key.Value);
+            var images = await FanartTvApi.GetMovieImages(movieDbId, key.Value);
 
             if (images == null)
             {
@@ -82,7 +83,7 @@ namespace Ombi.Controllers
         {
             var key = await _cache.GetOrAdd(CacheKeys.FanartTv, async () => await Config.Get(Store.Entities.ConfigurationTypes.FanartTv), DateTime.Now.AddDays(1));
 
-            var images = await Api.GetTvImages(tvdbid, key.Value);
+            var images = await FanartTvApi.GetTvImages(tvdbid, key.Value);
 
             if (images == null)
             {
@@ -117,11 +118,11 @@ namespace Ombi.Controllers
             if (moviesArray.Any())
             {
                 var item = rand.Next(moviesArray.Length);
-                var result = await Api.GetMovieImages(moviesArray[item], key.Value);
+                var result = await FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value);
  
                 while (!result.moviebackground.Any())
                 {
-                    result = await Api.GetMovieImages(moviesArray[item], key.Value);
+                    result = await FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value);
                 }
 
                 movieUrl = result.moviebackground[0].url;
@@ -129,11 +130,11 @@ namespace Ombi.Controllers
             if(tvArray.Any())
             {
                 var item = rand.Next(tvArray.Length);
-                var result = await Api.GetTvImages(tvArray[item], key.Value);
+                var result = await FanartTvApi.GetTvImages(tvArray[item], key.Value);
 
                 while (!result.showbackground.Any())
                 {
-                    result = await Api.GetTvImages(tvArray[item], key.Value);
+                    result = await FanartTvApi.GetTvImages(tvArray[item], key.Value);
                 }
 
                 tvUrl = result.showbackground[0].url;

src/Ombi/package.json

@@ -24,6 +24,7 @@
     "@angular/router": "^5.2.5",
     "@auth0/angular-jwt": "1.0.0-beta.9",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0",
+    "@ngu/carousel": "^1.4.8",
     "@ngx-translate/core": "^8.0.0",
     "@ngx-translate/http-loader": "^2.0.1",
     "@types/core-js": "^0.9.46",