fix: Landing and Login page improvements (#4690)

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

@@ -68,6 +68,7 @@ import { TooltipModule } from "primeng/tooltip";
 import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { TranslateService } from "@ngx-translate/core";
 import { UnauthorizedInterceptor } from "./auth/unauthorized.interceptor";
+import { ImageBackgroundComponent } from "./components/";
 import { environment } from "../environments/environment";
 
 const routes: Routes = [
@@ -166,7 +167,8 @@ export function JwtTokenGetter() {
         ...environment.production ? [] :
         [
             NgxsReduxDevtoolsPluginModule.forRoot(),
-        ]
+        ],
+        ImageBackgroundComponent
     ],
     declarations: [
         AppComponent,

src/Ombi/ClientApp/src/app/components/image-background/image-background.component.html

@@ -0,0 +1,6 @@
+<div @fadeInOut class="bg" [style.background-image]="background">
+  <div class="login-gradient-bar">
+  </div>
+
+  <div class="poster-desc">{{name}}</div>
+</div>

src/Ombi/ClientApp/src/app/components/image-background/image-background.component.scss

@@ -0,0 +1,26 @@
+.login-gradient-bar{
+  background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent;
+  height:100%;
+  width:100%;
+  position: absolute;
+}
+
+.bg {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+}
+
+.poster-desc {
+  padding-left: 1%;
+  color: white;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: end;
+  flex-direction: column;
+}

src/Ombi/ClientApp/src/app/components/image-background/image-background.component.ts

@@ -0,0 +1,43 @@
+import { OmbiCommonModules } from "../modules";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { ImageService } from "../../services";
+import { fadeInOutAnimation } from "app/animations/fadeinout";
+
+@Component({
+    standalone: true,
+    selector: 'ombi-image-background',
+    templateUrl: './image-background.component.html',
+    styleUrls: ['./image-background.component.scss'],
+    imports: [...OmbiCommonModules, BrowserAnimationsModule],
+    providers: [ ImageService ],
+    animations: [ fadeInOutAnimation ],
+  })
+  export class ImageBackgroundComponent implements OnInit, OnDestroy {
+
+    public background: any;
+    public name: string;
+    private timer: NodeJS.Timer;
+
+    constructor(private images: ImageService, private sanitizer: DomSanitizer) { }
+
+    public ngOnDestroy(): void {
+        clearTimeout(this.timer);
+    }
+
+    public ngOnInit(): void {
+        this.cycleBackground();
+
+        this.timer = setInterval(() => {
+           this.cycleBackground();
+        }, 30000);
+    }
+
+    private cycleBackground() {
+        this.images.getRandomBackgroundWithInfo().subscribe((x) => {
+          this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
+          this.name = x.name;
+        });
+    }
+  }

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

@@ -0,0 +1 @@
+export * from "./image-background/image-background.component";

src/Ombi/ClientApp/src/app/components/modules.ts

@@ -0,0 +1,3 @@
+import { CommonModule } from "@angular/common";
+
+export const OmbiCommonModules = [ CommonModule ];

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

@@ -1,3 +1,7 @@
 export interface IImages {
     url: string;
 }
+export interface IImagesInfo {
+    url: string;
+    name: string;
+}

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

@@ -1,5 +1,5 @@
-<div *ngIf="landingPageSettings && customizationSettings">
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
+<div *ngIf="landingPageSettings && customizationSettings" style="overflow:hidden">
+    <ombi-image-background></ombi-image-background>
 
     <div class="small-middle-container">
         <div class="row">

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

@@ -26,15 +26,6 @@ div.centered {
     transform: translate(-50%, -50%);
 }
 
-div.bg {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    height: 100vh;
-    width: 100vw;
-    position: fixed;
-}
 
 .online{
     color:lightgreen;

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

@@ -1,48 +1,34 @@
-import { PlatformLocation, APP_BASE_HREF } from "@angular/common";
-import { Component, OnDestroy, OnInit, Inject } from "@angular/core";
+import { APP_BASE_HREF } from "@angular/common";
+import { Component, OnInit, Inject } from "@angular/core";
 
 import { IMediaServerStatus } from "../interfaces";
 import { ICustomizationSettings, ILandingPageSettings } from "../interfaces";
 import { LandingPageService } from "../services";
 import { SettingsService } from "../services";
 
-import { DomSanitizer } from "@angular/platform-browser";
-import { ImageService } from "../services";
-
-import { fadeInOutAnimation } from "../animations/fadeinout";
 import { CustomizationFacade } from "../state/customization";
-import { ThousandShortPipe } from "../pipes/ThousandShortPipe";
 
 @Component({
     templateUrl: "./landingpage.component.html",
-    animations: [fadeInOutAnimation],
     styleUrls: ["./landingpage.component.scss"],
 })
-export class LandingPageComponent implements OnDestroy, OnInit {
+export class LandingPageComponent implements OnInit {
 
     public customizationSettings: ICustomizationSettings;
     public landingPageSettings: ILandingPageSettings;
-    public background: any;
     public mediaServerStatus: IMediaServerStatus;
     public baseUrl: string;
-    private timer: any;
 
     private href: string;
 
     constructor(private settingsService: SettingsService,
-                private images: ImageService, private sanitizer: DomSanitizer, private landingPageService: LandingPageService,
+                private landingPageService: LandingPageService,
                 private customizationFacade: CustomizationFacade,
                 @Inject(APP_BASE_HREF) href :string) { this.href = href }
 
     public ngOnInit() {
         this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
         this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = x);
-        this.images.getRandomBackground().subscribe(x => {
-            this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 19%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 79%, transparent 80%), url(" + x.url + ")");
-        });
-        this.timer = setInterval(() => {
-            this.cycleBackground();
-        }, 30000);
 
         const base = this.href;
         if (base.length > 1) {
@@ -53,18 +39,4 @@ export class LandingPageComponent implements OnDestroy, OnInit {
             this.mediaServerStatus = x;
         });
     }
-
-    public ngOnDestroy() {
-        clearInterval(this.timer);
-    }
-
-    public cycleBackground() {
-            this.images.getRandomBackground().subscribe(x => {
-                this.background = "";
-            });
-            this.images.getRandomBackground().subscribe(x => {
-                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 + ")");
-            });
-    }
 }

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

@@ -1,7 +1,4 @@
-<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-    <div class="login-gradient-bar">
-    </div>
-</div>
+<ombi-image-background></ombi-image-background>
 <div class="small-middle-container">
     <div *ngIf="form && customizationSettings && authenticationSettings">
 

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

@@ -11,23 +11,6 @@ img.center {
     max-width: 100%;
 }
 
-.login-gradient-bar{
-    background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent;
-    height:100%;
-    width:100%;
-    position: absolute;
-}
-
-div.bg {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    height: 100vh;
-    width: 100vw;
-    position: fixed;
-}
-
 .card-container.card {
     max-width: 500px;
     padding: 45px 45px;

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

@@ -10,17 +10,12 @@ import { PlexTvService } from "../services";
 import { SettingsService } from "../services";
 import { StatusService } from "../services";
 
-import { DomSanitizer } from "@angular/platform-browser";
-import { ImageService } from "../services";
-
-import { fadeInOutAnimation } from "../animations/fadeinout";
 import { StorageService } from "../shared/storage/storage-service";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { CustomizationFacade } from "../state/customization";
 
 @Component({
   templateUrl: "./login.component.html",
-  animations: [fadeInOutAnimation],
   styleUrls: ["./login.component.scss"],
 })
 export class LoginComponent implements OnDestroy, OnInit {
@@ -28,7 +23,6 @@ export class LoginComponent implements OnDestroy, OnInit {
   public customizationSettings: ICustomizationSettings;
   public authenticationSettings: IAuthenticationSettings;
   public plexEnabled: boolean;
-  public background: any;
   public landingFlag: boolean;
   public baseUrl: string;
   public loginWithOmbi: boolean;
@@ -46,7 +40,6 @@ export class LoginComponent implements OnDestroy, OnInit {
   public get appNameTranslate(): object {
     return { appName: this.appName };
   }
-  private timer: any;
   private clientId: string;
 
   private errorBody: string;
@@ -62,8 +55,6 @@ export class LoginComponent implements OnDestroy, OnInit {
     private fb: UntypedFormBuilder,
     private settingsService: SettingsService,
     private customziationFacade: CustomizationFacade,
-    private images: ImageService,
-    private sanitizer: DomSanitizer,
     private route: ActivatedRoute,
     @Inject(APP_BASE_HREF) href: string,
     private translate: TranslateService,
@@ -111,14 +102,6 @@ export class LoginComponent implements OnDestroy, OnInit {
         this.headerAuth();
       });
     this.settingsService.getClientId().subscribe((x) => (this.clientId = x));
-    this.images.getRandomBackground().subscribe((x) => {
-      this.background = this.sanitizer.bypassSecurityTrustStyle(
-        "url(" + x.url + ")"
-      );
-    });
-    this.timer = setInterval(() => {
-      this.cycleBackground();
-    }, 30000);
 
     const base = this.href;
     if (base.length > 1) {
@@ -284,18 +267,6 @@ export class LoginComponent implements OnDestroy, OnInit {
   }
 
   public ngOnDestroy() {
-    clearInterval(this.timer);
     clearInterval(this.pinTimer);
   }
-
-  private cycleBackground() {
-    this.images.getRandomBackground().subscribe((x) => {
-      this.background = "";
-    });
-    this.images.getRandomBackground().subscribe((x) => {
-      this.background = this.sanitizer.bypassSecurityTrustStyle(
-        "url(" + x.url + ")"
-      );
-    });
-  }
 }

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

@@ -1,8 +1,5 @@
 
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-        <div class="login-gradient-bar">
-        </div>
-    </div>
+<ombi-image-background></ombi-image-background>
     <div class="small-middle-container">
         <div *ngIf="form && customizationSettings">
     

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

@@ -1,16 +1,14 @@
-import { PlatformLocation, APP_BASE_HREF } from "@angular/common";
+import { APP_BASE_HREF } from "@angular/common";
 import { Component, OnInit, Inject } from "@angular/core";
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
-import { DomSanitizer } from "@angular/platform-browser";
 import { fadeInOutAnimation } from "../animations/fadeinout";
 
 import { ICustomizationSettings } from "../interfaces";
-import { IdentityService, ImageService, NotificationService, SettingsService } from "../services";
+import { IdentityService, NotificationService, SettingsService } from "../services";
 import { CustomizationFacade } from "../state/customization";
 
 @Component({
     templateUrl: "./resetpassword.component.html",
-    animations: [fadeInOutAnimation],
     styleUrls: ["./login.component.scss"],
 })
 export class ResetPasswordComponent implements OnInit {
@@ -19,12 +17,11 @@ export class ResetPasswordComponent implements OnInit {
     public customizationSettings: ICustomizationSettings;
     public emailSettingsEnabled: boolean;
     public baseUrl: string;
-    public background: any;
     private href: string;
 
     constructor(private identityService: IdentityService, private notify: NotificationService,
                 private fb: UntypedFormBuilder, private settingsService: SettingsService, @Inject(APP_BASE_HREF) href:string,
-                private images: ImageService, private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade) {
+                private customizationFacade: CustomizationFacade) {
                     this.href = href;
         this.form = this.fb.group({
             email: ["", [Validators.required]],
@@ -32,9 +29,7 @@ export class ResetPasswordComponent implements OnInit {
     }
 
     public ngOnInit() {
-        this.images.getRandomBackground().subscribe(x => {
-            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 + ")");
-        });
+
         const base = this.href;
         if (base.length > 1) {
             this.baseUrl = base;

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

@@ -1,11 +1,7 @@
-
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-        <div class="login-gradient-bar">
-        </div>
-    </div>
+<ombi-image-background></ombi-image-background>
     <div class="small-middle-container">
         <div *ngIf="form && customizationSettings">
-    
+
             <mat-card class="mat-elevation-z8 top-margin login-card">
                 <H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
                 <H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
@@ -13,7 +9,7 @@
                 <mat-card-content id="login-box">
                     <div *ngIf="form.value.password !== form.value.confirmPassword" class="alert alert-danger">The passwords do not match</div>
                     <div *ngIf="form.invalid && form.dirty" class="alert alert-danger">
-        
+
                         <div *ngIf="form.get('password').hasError('required')">The Password is required</div>
                         <div *ngIf="form.get('email').hasError('required')">The Email is required</div>
                         <div *ngIf="form.get('confirmPassword').hasError('required')">The Confirm Password is required</div>
@@ -41,16 +37,14 @@
                                 Password is <strong>required</strong></mat-error>
                         </mat-form-field>
 
-                    
-                        
                     <button id="reset" mat-raised-button color="accent" [disabled]="form.invalid" type="submit">{{'Reset Password' | translate}}</button>
-        
+
                     </form>
                 </mat-card-content>
-    
 
-    
+
+
             </mat-card>
-    
+
         </div>
     </div>

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

@@ -1,10 +1,9 @@
 import { ActivatedRoute, Params } from "@angular/router";
 import { Component, OnInit } from "@angular/core";
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
-import { IdentityService, ImageService } from "../services";
+import { IdentityService } from "../services";
 
 import { CustomizationFacade } from "../state/customization";
-import { DomSanitizer } from "@angular/platform-browser";
 import { ICustomizationSettings } from "../interfaces";
 import { IResetPasswordToken } from "../interfaces";
 import { NotificationService } from "../services";
@@ -19,13 +18,10 @@ export class TokenResetPasswordComponent implements OnInit {
 
     public form: UntypedFormGroup;
     public customizationSettings: ICustomizationSettings;
-    public background: any;
     public baseUrl: string;
 
     constructor(private identityService: IdentityService, private router: Router, private route: ActivatedRoute, private notify: NotificationService,
-                private fb: UntypedFormBuilder, private location: PlatformLocation, private images: ImageService,
-                private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade,
-                ) {
+                private fb: UntypedFormBuilder, private location: PlatformLocation, private customizationFacade: CustomizationFacade) {
 
         this.route.queryParams
             .subscribe((params: Params) => {
@@ -39,9 +35,6 @@ export class TokenResetPasswordComponent implements OnInit {
     }
 
     public ngOnInit() {
-        this.images.getRandomBackground().subscribe(x => {
-            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 + ")");
-        });
         const base = this.location.getBaseHrefFromDOM();
         if (base.length > 1) {
             this.baseUrl = base;
@@ -65,6 +58,5 @@ export class TokenResetPasswordComponent implements OnInit {
                 });
             }
         });
-
     }
 }

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

@@ -1,10 +1,10 @@
-import { PlatformLocation, APP_BASE_HREF } from "@angular/common";
+import { APP_BASE_HREF } from "@angular/common";
 import { Injectable, Inject } from "@angular/core";
 import { Observable } from "rxjs";
 
 import { HttpClient } from "@angular/common/http";
 
-import { IImages } from "../interfaces";
+import { IImages, IImagesInfo } from "../interfaces";
 import { ServiceHelpers } from "./service.helpers";
 
 @Injectable()
@@ -17,6 +17,10 @@ export class ImageService extends ServiceHelpers {
         return this.http.get<IImages>(`${this.url}background/`, {headers: this.headers});
     }
 
+    public getRandomBackgroundWithInfo(): Observable<IImagesInfo> {
+        return this.http.get<IImagesInfo>(`${this.url}background/info`, {headers: this.headers});
+    }
+
     public getTvBanner(tvdbid: number): Observable<string> {
         return this.http.get<string>(`${this.url}tv/${tvdbid}`, {headers: this.headers});
     }
@@ -31,8 +35,9 @@ export class ImageService extends ServiceHelpers {
 
     public getMovieBackground(movieDbId: string): Observable<string> {
         return this.http.get<string>(`${this.url}background/movie/${movieDbId}`, { headers: this.headers });
-    }  
-      public getMovieBanner(movieDbId: string): Observable<string> {
+    }
+
+    public getMovieBanner(movieDbId: string): Observable<string> {
         return this.http.get<string>(`${this.url}banner/movie/${movieDbId}`, { headers: this.headers });
     }
 

src/Ombi/Controllers/V1/ImagesController.cs

@@ -45,9 +45,9 @@ namespace Ombi.Controllers.V1
             {
                 return string.Empty;
             }
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
 
-            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () =>  FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1));
+            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () => FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1));
             if (images == null)
             {
                 return string.Empty;
@@ -70,16 +70,16 @@ namespace Ombi.Controllers.V1
         [HttpGet("poster")]
         public async Task<string> GetRandomPoster()
         {
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
             var rand = new Random();
             var val = rand.Next(1, 3);
             if (val == 1)
             {
-                var movies = (await _movieEngineV2.PopularMovies(0, 10, HttpContext.RequestAborted ,"en")).ToArray();
+                var movies = (await _movieEngineV2.PopularMovies(0, 10, HttpContext.RequestAborted, "en")).ToArray();
                 var selectedMovieIndex = rand.Next(movies.Count());
                 var movie = movies[selectedMovieIndex];
 
-                var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movie.Id}", () =>  FanartTvApi.GetMovieImages(movie.Id.ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
+                var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movie.Id}", () => FanartTvApi.GetMovieImages(movie.Id.ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
                 if (images == null)
                 {
                     return string.Empty;
@@ -99,7 +99,7 @@ namespace Ombi.Controllers.V1
                 {
                     return images.moviethumb.OrderBy(x => x.likes).Select(x => x.url).FirstOrDefault();
                 }
-            } 
+            }
             else
             {
                 var tv = (await _tvSearchEngineV2.Popular(0, 10, "en")).ToArray();
@@ -114,9 +114,9 @@ namespace Ombi.Controllers.V1
         [HttpGet("poster/movie/{movieDbId}")]
         public async Task<string> GetMoviePoster(string movieDbId)
         {
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
 
-            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () =>  FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1));
+            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1));
 
             if (images == null)
             {
@@ -148,9 +148,9 @@ namespace Ombi.Controllers.V1
             {
                 return string.Empty;
             }
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
 
-            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () =>  FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1));
+            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () => FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1));
 
             if (images == null)
             {
@@ -178,10 +178,10 @@ namespace Ombi.Controllers.V1
         [HttpGet("background/movie/{movieDbId}")]
         public async Task<string> GetMovieBackground(string movieDbId)
         {
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+
+            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1));
 
-            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () =>  FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1));
-            
             if (images == null)
             {
                 return string.Empty;
@@ -203,9 +203,9 @@ namespace Ombi.Controllers.V1
         [HttpGet("banner/movie/{movieDbId}")]
         public async Task<string> GetMovieBanner(string movieDbId)
         {
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
 
-            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () =>  FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1));
+            var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1));
 
             if (images == null)
             {
@@ -246,34 +246,34 @@ namespace Ombi.Controllers.V1
             var movieUrl = string.Empty;
             var tvUrl = string.Empty;
 
-            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () =>  Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
 
             if (moviesArray.Length > 0)
             {
                 var item = rand.Next(moviesArray.Length);
-                var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () =>  FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
+                var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
 
                 while (!result.moviebackground?.Any() ?? true)
                 {
                     item = rand.Next(moviesArray.Length);
-                    result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () =>  FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
+                    result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
 
                 }
 
                 var otherRand = new Random();
                 var res = otherRand.Next(result.moviebackground.Length);
-                
+
                 movieUrl = result.moviebackground[res].url;
             }
             if (tvArray.Length > 0)
             {
                 var item = rand.Next(tvArray.Length);
-                var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () =>  FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1));
+                var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1));
 
                 while (!result.showbackground?.Any() ?? true)
                 {
                     item = rand.Next(tvArray.Length);
-                    result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () =>  FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1));
+                    result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1));
                 }
                 var otherRand = new Random();
                 var res = otherRand.Next(result.showbackground.Length);
@@ -294,5 +294,67 @@ namespace Ombi.Controllers.V1
             }
             return new { url = tvUrl };
         }
+
+        [HttpGet("background/info")]
+        public async Task<object> GetBackgroundImageWithInfo()
+        {
+            var moviesArray = Options.Movies ?? Array.Empty<int>();
+            var tvArray = Options.TvShows ?? Array.Empty<int>();
+
+            var rand = new Random();
+            var movieUrl = string.Empty;
+            var movieName = string.Empty;
+            var tvName = string.Empty;
+            var tvUrl = string.Empty;
+
+            var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1));
+
+            if (moviesArray.Length > 0)
+            {
+                var item = rand.Next(moviesArray.Length);
+                var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
+
+                while (!result.moviebackground?.Any() ?? true)
+                {
+                    item = rand.Next(moviesArray.Length);
+                    result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1));
+                }
+
+                var otherRand = new Random();
+                var res = otherRand.Next(result.moviebackground.Length);
+
+                movieUrl = result.moviebackground[res].url;
+                movieName = result.name;
+            }
+            if (tvArray.Length > 0)
+            {
+                var item = rand.Next(tvArray.Length);
+                var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1));
+
+                while (!result.showbackground?.Any() ?? true)
+                {
+                    item = rand.Next(tvArray.Length);
+                    result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1));
+                }
+                var otherRand = new Random();
+                var res = otherRand.Next(result.showbackground.Length);
+
+                tvUrl = result.showbackground[res].url;
+                tvName = result.name;
+            }
+
+            if (!string.IsNullOrEmpty(movieUrl) && !string.IsNullOrEmpty(tvUrl))
+            {
+                var result = rand.Next(2);
+                if (result == 0) return new { url = movieUrl, name = movieName };
+                if (result == 1) return new { url = tvUrl, name = tvName };
+            }
+
+            if (!string.IsNullOrEmpty(movieUrl))
+            {
+                return new { url = movieUrl, name = movieName };
+            }
+            return new { url = tvUrl, name = tvName };
+        }
     }
 }