made changes to the landing page too

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 + ")");
-            });
-    }
 }