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..514b1754e 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 { 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 + ")"); + }); + } } 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..661850e86 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 { 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 + ")"); + }); + } + } diff --git a/src/Ombi/Ombi.csproj b/src/Ombi/Ombi.csproj index 393de0e23..3b7e7400e 100644 --- a/src/Ombi/Ombi.csproj +++ b/src/Ombi/Ombi.csproj @@ -97,5 +97,13 @@ + + + + + + + + diff --git a/src/Ombi/webpack.config.vendor.ts b/src/Ombi/webpack.config.vendor.ts index 1fdacb684..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,