diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts index d0fa55615..30f4b2ea6 100644 --- a/src/Ombi/ClientApp/src/app/app.module.ts +++ b/src/Ombi/ClientApp/src/app/app.module.ts @@ -68,6 +68,7 @@ import { TooltipModule } from "primeng/tooltip"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { TranslateService } from "@ngx-translate/core"; import { UnauthorizedInterceptor } from "./auth/unauthorized.interceptor"; +import { ImageBackgroundComponent } from "./components/"; import { environment } from "../environments/environment"; const routes: Routes = [ @@ -166,7 +167,8 @@ export function JwtTokenGetter() { ...environment.production ? [] : [ NgxsReduxDevtoolsPluginModule.forRoot(), - ] + ], + ImageBackgroundComponent ], declarations: [ AppComponent, diff --git a/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.html b/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.html new file mode 100644 index 000000000..30a15359b --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.html @@ -0,0 +1,4 @@ +
+
+
+
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.scss b/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.scss new file mode 100644 index 000000000..41633aa5f --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.scss @@ -0,0 +1,16 @@ +.login-gradient-bar{ + background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent; + height:100%; + width:100%; + position: absolute; +} + +.bg { + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + height: 100vh; + width: 100vw; + position: fixed; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.ts b/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.ts new file mode 100644 index 000000000..2231d13da --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/image-background/image-background.component.ts @@ -0,0 +1,41 @@ +import { OmbiCommonModules } from "../modules"; +import { Component, OnDestroy, OnInit } from "@angular/core"; +import { DomSanitizer, SafeStyle } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { ImageService } from "../../services"; +import { fadeInOutAnimation } from "app/animations/fadeinout"; + +@Component({ + standalone: true, + selector: 'ombi-image-background', + templateUrl: './image-background.component.html', + styleUrls: ['./image-background.component.scss'], + imports: [...OmbiCommonModules, BrowserAnimationsModule], + providers: [ ImageService ], + animations: [ fadeInOutAnimation ], + }) + export class ImageBackgroundComponent implements OnInit, OnDestroy { + + public background: any; + private timer: NodeJS.Timer; + + constructor(private images: ImageService, private sanitizer: DomSanitizer) { } + + public ngOnDestroy(): void { + clearTimeout(this.timer); + } + + public ngOnInit(): void { + this.cycleBackground(); + + this.timer = setInterval(() => { + this.cycleBackground(); + }, 30000); + } + + private cycleBackground() { + this.images.getRandomBackground().subscribe((x) => { + this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")"); + }); + } + } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/components/index.ts b/src/Ombi/ClientApp/src/app/components/index.ts new file mode 100644 index 000000000..75334a9e4 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/index.ts @@ -0,0 +1 @@ +export * from "./image-background/image-background.component"; \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/components/modules.ts b/src/Ombi/ClientApp/src/app/components/modules.ts new file mode 100644 index 000000000..1bf5697e6 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/modules.ts @@ -0,0 +1,3 @@ +import { CommonModule } from "@angular/common"; + +export const OmbiCommonModules = [ CommonModule ]; \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/login/login.component.html b/src/Ombi/ClientApp/src/app/login/login.component.html index c0932999b..71caa80b4 100644 --- a/src/Ombi/ClientApp/src/app/login/login.component.html +++ b/src/Ombi/ClientApp/src/app/login/login.component.html @@ -1,7 +1,4 @@ -
-
-
-
+
diff --git a/src/Ombi/ClientApp/src/app/login/login.component.scss b/src/Ombi/ClientApp/src/app/login/login.component.scss index 4ad645dd8..df368ee0c 100644 --- a/src/Ombi/ClientApp/src/app/login/login.component.scss +++ b/src/Ombi/ClientApp/src/app/login/login.component.scss @@ -11,23 +11,6 @@ img.center { max-width: 100%; } -.login-gradient-bar{ - background: linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.6) 20.0%, rgba(0,0,0,0.6) 80.0%, transparent 60%),transparent; - height:100%; - width:100%; - position: absolute; -} - -div.bg { - background-position: center center; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - height: 100vh; - width: 100vw; - position: fixed; -} - .card-container.card { max-width: 500px; padding: 45px 45px; diff --git a/src/Ombi/ClientApp/src/app/login/login.component.ts b/src/Ombi/ClientApp/src/app/login/login.component.ts index 780808172..6e8efc00b 100644 --- a/src/Ombi/ClientApp/src/app/login/login.component.ts +++ b/src/Ombi/ClientApp/src/app/login/login.component.ts @@ -10,17 +10,12 @@ import { PlexTvService } from "../services"; import { SettingsService } from "../services"; import { StatusService } from "../services"; -import { DomSanitizer } from "@angular/platform-browser"; -import { ImageService } from "../services"; - -import { fadeInOutAnimation } from "../animations/fadeinout"; import { StorageService } from "../shared/storage/storage-service"; import { MatSnackBar } from "@angular/material/snack-bar"; import { CustomizationFacade } from "../state/customization"; @Component({ templateUrl: "./login.component.html", - animations: [fadeInOutAnimation], styleUrls: ["./login.component.scss"], }) export class LoginComponent implements OnDestroy, OnInit { @@ -28,7 +23,6 @@ export class LoginComponent implements OnDestroy, OnInit { public customizationSettings: ICustomizationSettings; public authenticationSettings: IAuthenticationSettings; public plexEnabled: boolean; - public background: any; public landingFlag: boolean; public baseUrl: string; public loginWithOmbi: boolean; @@ -46,7 +40,6 @@ export class LoginComponent implements OnDestroy, OnInit { public get appNameTranslate(): object { return { appName: this.appName }; } - private timer: any; private clientId: string; private errorBody: string; @@ -62,8 +55,6 @@ export class LoginComponent implements OnDestroy, OnInit { private fb: UntypedFormBuilder, private settingsService: SettingsService, private customziationFacade: CustomizationFacade, - private images: ImageService, - private sanitizer: DomSanitizer, private route: ActivatedRoute, @Inject(APP_BASE_HREF) href: string, private translate: TranslateService, @@ -111,14 +102,6 @@ export class LoginComponent implements OnDestroy, OnInit { this.headerAuth(); }); this.settingsService.getClientId().subscribe((x) => (this.clientId = x)); - this.images.getRandomBackground().subscribe((x) => { - this.background = this.sanitizer.bypassSecurityTrustStyle( - "url(" + x.url + ")" - ); - }); - this.timer = setInterval(() => { - this.cycleBackground(); - }, 30000); const base = this.href; if (base.length > 1) { @@ -284,18 +267,6 @@ export class LoginComponent implements OnDestroy, OnInit { } public ngOnDestroy() { - clearInterval(this.timer); clearInterval(this.pinTimer); } - - private cycleBackground() { - this.images.getRandomBackground().subscribe((x) => { - this.background = ""; - }); - this.images.getRandomBackground().subscribe((x) => { - this.background = this.sanitizer.bypassSecurityTrustStyle( - "url(" + x.url + ")" - ); - }); - } } diff --git a/src/Ombi/ClientApp/src/app/login/resetpassword.component.html b/src/Ombi/ClientApp/src/app/login/resetpassword.component.html index 9fbeb7eda..201223800 100644 --- a/src/Ombi/ClientApp/src/app/login/resetpassword.component.html +++ b/src/Ombi/ClientApp/src/app/login/resetpassword.component.html @@ -1,8 +1,5 @@  -
- -
+
diff --git a/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts b/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts index 97d8e88f9..bd0376cb1 100644 --- a/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts +++ b/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts @@ -1,16 +1,14 @@ -import { PlatformLocation, APP_BASE_HREF } from "@angular/common"; +import { APP_BASE_HREF } from "@angular/common"; import { Component, OnInit, Inject } from "@angular/core"; import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms"; -import { DomSanitizer } from "@angular/platform-browser"; import { fadeInOutAnimation } from "../animations/fadeinout"; import { ICustomizationSettings } from "../interfaces"; -import { IdentityService, ImageService, NotificationService, SettingsService } from "../services"; +import { IdentityService, NotificationService, SettingsService } from "../services"; import { CustomizationFacade } from "../state/customization"; @Component({ templateUrl: "./resetpassword.component.html", - animations: [fadeInOutAnimation], styleUrls: ["./login.component.scss"], }) export class ResetPasswordComponent implements OnInit { @@ -19,12 +17,11 @@ export class ResetPasswordComponent implements OnInit { public customizationSettings: ICustomizationSettings; public emailSettingsEnabled: boolean; public baseUrl: string; - public background: any; private href: string; constructor(private identityService: IdentityService, private notify: NotificationService, private fb: UntypedFormBuilder, private settingsService: SettingsService, @Inject(APP_BASE_HREF) href:string, - private images: ImageService, private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade) { + private customizationFacade: CustomizationFacade) { this.href = href; this.form = this.fb.group({ email: ["", [Validators.required]], @@ -32,9 +29,7 @@ export class ResetPasswordComponent implements OnInit { } public ngOnInit() { - 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 + ")"); - }); + const base = this.href; if (base.length > 1) { this.baseUrl = base; diff --git a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html index 6a1c2567f..bd8bc3e38 100644 --- a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html +++ b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html @@ -1,11 +1,7 @@ - -
- -
+
- +
diff --git a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts index 590c233f9..b7ef08281 100644 --- a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts +++ b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts @@ -1,10 +1,9 @@ import { ActivatedRoute, Params } from "@angular/router"; import { Component, OnInit } from "@angular/core"; import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms"; -import { IdentityService, ImageService } from "../services"; +import { IdentityService } from "../services"; import { CustomizationFacade } from "../state/customization"; -import { DomSanitizer } from "@angular/platform-browser"; import { ICustomizationSettings } from "../interfaces"; import { IResetPasswordToken } from "../interfaces"; import { NotificationService } from "../services"; @@ -19,13 +18,10 @@ export class TokenResetPasswordComponent implements OnInit { public form: UntypedFormGroup; public customizationSettings: ICustomizationSettings; - public background: any; public baseUrl: string; constructor(private identityService: IdentityService, private router: Router, private route: ActivatedRoute, private notify: NotificationService, - private fb: UntypedFormBuilder, private location: PlatformLocation, private images: ImageService, - private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade, - ) { + private fb: UntypedFormBuilder, private location: PlatformLocation, private customizationFacade: CustomizationFacade) { this.route.queryParams .subscribe((params: Params) => { @@ -39,9 +35,6 @@ export class TokenResetPasswordComponent implements OnInit { } public ngOnInit() { - 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 + ")"); - }); const base = this.location.getBaseHrefFromDOM(); if (base.length > 1) { this.baseUrl = base; @@ -65,6 +58,5 @@ export class TokenResetPasswordComponent implements OnInit { }); } }); - } } diff --git a/src/Ombi/ClientApp/src/app/services/image.service.ts b/src/Ombi/ClientApp/src/app/services/image.service.ts index 521a207e3..31699ca7a 100644 --- a/src/Ombi/ClientApp/src/app/services/image.service.ts +++ b/src/Ombi/ClientApp/src/app/services/image.service.ts @@ -1,4 +1,4 @@ -import { PlatformLocation, APP_BASE_HREF } from "@angular/common"; +import { APP_BASE_HREF } from "@angular/common"; import { Injectable, Inject } from "@angular/core"; import { Observable } from "rxjs";