Merge pull request #2092 from anojht/backgroundanimation

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 { Component, OnDestroy, OnInit } from "@angular/core";
 
 import { IMediaServerStatus } from "../interfaces";
 import { ICustomizationSettings, ILandingPageSettings } from "../interfaces";
@@ -9,17 +9,21 @@ import { SettingsService } from "../services";
 import { DomSanitizer } from "@angular/platform-browser";
 import { ImageService } from "../services";
 
+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 OnDestroy, OnInit {
 
     public customizationSettings: ICustomizationSettings;
     public landingPageSettings: ILandingPageSettings;
     public background: any;
     public mediaServerStatus: IMediaServerStatus;
     public baseUrl: string;
+    private timer: any;
 
     constructor(private settingsService: SettingsService,
                 private images: ImageService, private sanitizer: DomSanitizer, private landingPageService: LandingPageService,
@@ -31,6 +35,9 @@ export class LandingPageComponent implements OnInit {
         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 + ")");
         });
+        this.timer = setInterval(() => {
+            this.cycleBackground();
+        }, 10000);
 
         const base = this.location.getBaseHrefFromDOM();
         if (base.length > 1) {
@@ -41,4 +48,18 @@ export class LandingPageComponent implements 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/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 { 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 OnDestroy, OnInit {
 
     public form: FormGroup;
     public customizationSettings: ICustomizationSettings;
@@ -25,6 +28,7 @@ export class LoginComponent implements OnInit {
     public background: any;
     public landingFlag: boolean;
     public baseUrl: string;
+    private timer: any;
     
     private errorBody: string;
     private errorValidation: string;
@@ -67,6 +71,10 @@ export class LoginComponent implements OnInit {
         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 + ")");
         });
+        this.timer = setInterval(() => {
+            this.cycleBackground();
+        }, 10000);
+
         const base = this.location.getBaseHrefFromDOM();
         if (base.length > 1) {
             this.baseUrl = base;
@@ -102,4 +110,19 @@ export class LoginComponent implements OnInit {
                 }, err => this.notify.error(this.errorBody));
         });
     }
+
+    public ngOnDestroy() {
+        clearInterval(this.timer);
+    }
+
+    private 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/Ombi.csproj

@@ -97,5 +97,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,