Dynamic Background Animation

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

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

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

@@ -1,5 +1,5 @@
 <div *ngIf="landingPageSettings && customizationSettings">
-    <div *ngIf="background" class="bg" [style.background-image]="background"></div>
+    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
 
     <div class="centered col-md-12">
         <div class="row">

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

@@ -1,5 +1,5 @@
 import { PlatformLocation } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core";
 
 import { IMediaServerStatus } from "../interfaces";
 import { ICustomizationSettings, ILandingPageSettings } from "../interfaces";
@@ -9,11 +9,15 @@ import { SettingsService } from "../services";
 import { DomSanitizer } from "@angular/platform-browser";
 import { ImageService } from "../services";
 
+import { setTimeout } from "core-js/library/web/timers";
+import { fadeInOutAnimation } from "../animations/fadeinout";
+
 @Component({
     templateUrl: "./landingpage.component.html",
+    animations: [fadeInOutAnimation],
     styleUrls: ["./landingpage.component.scss"],
 })
-export class LandingPageComponent implements OnInit {
+export class LandingPageComponent implements AfterViewInit, OnInit, OnDestroy {
 
     public customizationSettings: ICustomizationSettings;
     public landingPageSettings: ILandingPageSettings;
@@ -41,4 +45,24 @@ export class LandingPageComponent implements OnInit {
             this.mediaServerStatus = x;
         });
     }
+
+    public ngOnDestroy() {
+        setTimeout(() => {
+            this.images.getRandomBackground().subscribe(x => {
+                this.background = "";
+            });
+        }, 1000);
+        setTimeout(() => {
+            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 + ")");
+            });
+        }, 1000);
+    }
+
+    public ngAfterViewInit() {
+        setInterval(() => {
+            this.ngOnDestroy();
+        }, 10000);
+    }
 }

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

@@ -4,7 +4,7 @@ include the remember me checkbox
 -->
 <div *ngIf="form && customizationSettings">
 
-    <div *ngIf="background" class="bg" [style.background-image]="background"></div>
+    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
     <div class="container" id="login">
         <div class="card card-container">
             <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
@@ -13,11 +13,14 @@ import { StatusService } from "../services";
 import { DomSanitizer } from "@angular/platform-browser";
 import { ImageService } from "../services";
 
+import { fadeInOutAnimation } from "../animations/fadeinout";
+
 @Component({
     templateUrl: "./login.component.html",
+    animations: [fadeInOutAnimation],
     styleUrls: ["./login.component.scss"],
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements AfterViewInit, OnDestroy, OnInit {
 
     public form: FormGroup;
     public customizationSettings: ICustomizationSettings;
@@ -102,4 +105,24 @@ export class LoginComponent implements OnInit {
                 }, err => this.notify.error(this.errorBody));
         });
     }
+
+    public ngOnDestroy() {
+        setTimeout(() => {
+            this.images.getRandomBackground().subscribe(x => {
+                this.background = "";
+            });
+        }, 1000);
+        setTimeout(() => {
+            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 + ")");
+            });
+        }, 1000);
+    }
+
+    public ngAfterViewInit() {
+        setInterval(() => {
+            this.ngOnDestroy();
+        }, 10000);
+    }
 }

src/Ombi/Ombi.csproj

@@ -92,5 +92,13 @@
     <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/webpack.config.vendor.ts

@@ -80,7 +80,7 @@ module.exports = (env: any) => {
         },
         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(\\|\/)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,