From df27ea743c2558e4ec5a90e776fd00e9cddf5741 Mon Sep 17 00:00:00 2001 From: Anojh Date: Thu, 22 Mar 2018 17:39:56 -0700 Subject: [PATCH] Dynamic Background Animation --- .../ClientApp/app/animations/fadeinout.ts | 12 ++++++++ .../landingpage/landingpage.component.html | 2 +- .../app/landingpage/landingpage.component.ts | 28 +++++++++++++++++-- .../ClientApp/app/login/login.component.html | 2 +- .../ClientApp/app/login/login.component.ts | 27 ++++++++++++++++-- src/Ombi/Ombi.csproj | 8 ++++++ src/Ombi/webpack.config.vendor.ts | 2 +- 7 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 src/Ombi/ClientApp/app/animations/fadeinout.ts diff --git a/src/Ombi/ClientApp/app/animations/fadeinout.ts b/src/Ombi/ClientApp/app/animations/fadeinout.ts new file mode 100644 index 000000000..8ecf15a15 --- /dev/null +++ b/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 })), + ]), +]); diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html index 209f9d977..27545b64b 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html @@ -1,5 +1,5 @@ 
-
+
diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts index 0cedce50e..ec8122782 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts +++ b/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); + } } diff --git a/src/Ombi/ClientApp/app/login/login.component.html b/src/Ombi/ClientApp/app/login/login.component.html index 80c48cabd..5fc0150ff 100644 --- a/src/Ombi/ClientApp/app/login/login.component.html +++ b/src/Ombi/ClientApp/app/login/login.component.html @@ -4,7 +4,7 @@ include the remember me checkbox -->
-
+
diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts index 357a8ca9f..d65bf0264 100644 --- a/src/Ombi/ClientApp/app/login/login.component.ts +++ b/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); + } } diff --git a/src/Ombi/Ombi.csproj b/src/Ombi/Ombi.csproj index 0c2c73360..766404941 100644 --- a/src/Ombi/Ombi.csproj +++ b/src/Ombi/Ombi.csproj @@ -92,5 +92,13 @@ + + + + + + + + diff --git a/src/Ombi/webpack.config.vendor.ts b/src/Ombi/webpack.config.vendor.ts index d4fe38c3a..b50e784f4 100644 --- a/src/Ombi/webpack.config.vendor.ts +++ b/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,