From df27ea743c2558e4ec5a90e776fd00e9cddf5741 Mon Sep 17 00:00:00 2001 From: Anojh Date: Thu, 22 Mar 2018 17:39:56 -0700 Subject: [PATCH 1/4] 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, From 3a99f75daa3091472ee6df637184c5cef5aa9b0a Mon Sep 17 00:00:00 2001 From: Anojh Date: Thu, 22 Mar 2018 20:10:57 -0700 Subject: [PATCH 2/4] improved version --- .../app/landingpage/landingpage.component.ts | 18 ++++++++++-------- .../ClientApp/app/login/login.component.ts | 18 +++++++++++------- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts index ec8122782..08c667af8 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 { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; import { IMediaServerStatus } from "../interfaces"; import { ICustomizationSettings, ILandingPageSettings } from "../interfaces"; @@ -17,13 +17,14 @@ import { fadeInOutAnimation } from "../animations/fadeinout"; animations: [fadeInOutAnimation], styleUrls: ["./landingpage.component.scss"], }) -export class LandingPageComponent implements AfterViewInit, OnInit, OnDestroy { +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, @@ -35,6 +36,9 @@ export class LandingPageComponent implements AfterViewInit, OnInit, OnDestroy { 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) { @@ -47,6 +51,10 @@ export class LandingPageComponent implements AfterViewInit, OnInit, OnDestroy { } public ngOnDestroy() { + clearInterval(this.timer); + } + + public cycleBackground() { setTimeout(() => { this.images.getRandomBackground().subscribe(x => { this.background = ""; @@ -59,10 +67,4 @@ export class LandingPageComponent implements AfterViewInit, OnInit, OnDestroy { }); }, 1000); } - - public ngAfterViewInit() { - setInterval(() => { - this.ngOnDestroy(); - }, 10000); - } } diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts index d65bf0264..ab3e63174 100644 --- a/src/Ombi/ClientApp/app/login/login.component.ts +++ b/src/Ombi/ClientApp/app/login/login.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, OnDestroy, 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"; @@ -20,7 +20,7 @@ import { fadeInOutAnimation } from "../animations/fadeinout"; animations: [fadeInOutAnimation], styleUrls: ["./login.component.scss"], }) -export class LoginComponent implements AfterViewInit, OnDestroy, OnInit { +export class LoginComponent implements OnDestroy, OnInit { public form: FormGroup; public customizationSettings: ICustomizationSettings; @@ -28,6 +28,7 @@ export class LoginComponent implements AfterViewInit, OnDestroy, OnInit { public background: any; public landingFlag: boolean; public baseUrl: string; + private timer: any; private errorBody: string; private errorValidation: string; @@ -70,6 +71,10 @@ export class LoginComponent implements AfterViewInit, OnDestroy, 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; @@ -107,6 +112,10 @@ export class LoginComponent implements AfterViewInit, OnDestroy, OnInit { } public ngOnDestroy() { + clearInterval(this.timer); + } + + private cycleBackground() { setTimeout(() => { this.images.getRandomBackground().subscribe(x => { this.background = ""; @@ -120,9 +129,4 @@ export class LoginComponent implements AfterViewInit, OnDestroy, OnInit { }, 1000); } - public ngAfterViewInit() { - setInterval(() => { - this.ngOnDestroy(); - }, 10000); - } } From 1a352b2da0e8a1091af71cd7b3b2b2e082c793cc Mon Sep 17 00:00:00 2001 From: Anojh Date: Thu, 22 Mar 2018 22:36:11 -0700 Subject: [PATCH 3/4] More optimizations by reducing requests --- src/Ombi/ClientApp/app/landingpage/landingpage.component.ts | 4 ++-- src/Ombi/ClientApp/app/login/login.component.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts index 08c667af8..653f18fd6 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts @@ -59,12 +59,12 @@ export class LandingPageComponent implements OnDestroy, OnInit { this.images.getRandomBackground().subscribe(x => { this.background = ""; }); - }, 1000); + }, 10000); 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); + }, 10000); } } diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts index ab3e63174..4974779b3 100644 --- a/src/Ombi/ClientApp/app/login/login.component.ts +++ b/src/Ombi/ClientApp/app/login/login.component.ts @@ -120,13 +120,13 @@ export class LoginComponent implements OnDestroy, OnInit { this.images.getRandomBackground().subscribe(x => { this.background = ""; }); - }, 1000); + }, 10000); 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); + }, 10000); } } From e221c02299deb33ef61d634461e4ef9af79a82ab Mon Sep 17 00:00:00 2001 From: Anojh Date: Fri, 23 Mar 2018 02:19:34 -0700 Subject: [PATCH 4/4] Removed redundant timers --- src/Ombi/ClientApp/app/landingpage/landingpage.component.ts | 5 ----- src/Ombi/ClientApp/app/login/login.component.ts | 4 ---- 2 files changed, 9 deletions(-) diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts index 653f18fd6..514b1754e 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts @@ -9,7 +9,6 @@ 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({ @@ -55,16 +54,12 @@ export class LandingPageComponent implements OnDestroy, OnInit { } public cycleBackground() { - setTimeout(() => { this.images.getRandomBackground().subscribe(x => { this.background = ""; }); - }, 10000); - 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 + ")"); }); - }, 10000); } } diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts index 4974779b3..661850e86 100644 --- a/src/Ombi/ClientApp/app/login/login.component.ts +++ b/src/Ombi/ClientApp/app/login/login.component.ts @@ -116,17 +116,13 @@ export class LoginComponent implements OnDestroy, OnInit { } private cycleBackground() { - setTimeout(() => { this.images.getRandomBackground().subscribe(x => { this.background = ""; }); - }, 10000); - 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 + ")"); }); - }, 10000); } }