feat: ✨ moved the background image out into a standalone component

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,

src/Ombi/ClientApp/src/app/components/image-background/image-background.component.html

@@ -0,0 +1,4 @@
+<div @fadeInOut class="bg" [style.background-image]="background">
+  <div class="login-gradient-bar">
+  </div>
+</div>

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;
+}

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 + ")");
+        });
+    }
+  }

src/Ombi/ClientApp/src/app/components/index.ts

@@ -0,0 +1 @@
+export * from "./image-background/image-background.component";

src/Ombi/ClientApp/src/app/components/modules.ts

@@ -0,0 +1,3 @@
+import { CommonModule } from "@angular/common";
+
+export const OmbiCommonModules = [ CommonModule ];

src/Ombi/ClientApp/src/app/login/login.component.html

@@ -1,7 +1,4 @@
-<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-    <div class="login-gradient-bar">
-    </div>
-</div>
+<ombi-image-background></ombi-image-background>
 <div class="small-middle-container">
     <div *ngIf="form && customizationSettings && authenticationSettings">
 

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;

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 + ")"
-      );
-    });
-  }
 }

src/Ombi/ClientApp/src/app/login/resetpassword.component.html

@@ -1,8 +1,5 @@
 
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-        <div class="login-gradient-bar">
-        </div>
-    </div>
+<ombi-image-background></ombi-image-background>
     <div class="small-middle-container">
         <div *ngIf="form && customizationSettings">
     

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;

src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html

@@ -1,8 +1,4 @@
-
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-        <div class="login-gradient-bar">
-        </div>
-    </div>
+<ombi-image-background></ombi-image-background>
     <div class="small-middle-container">
         <div *ngIf="form && customizationSettings">
 
@@ -41,8 +37,6 @@
                                 Password is <strong>required</strong></mat-error>
                         </mat-form-field>
 
-                    
-                        
                     <button id="reset" mat-raised-button color="accent" [disabled]="form.invalid" type="submit">{{'Reset Password' | translate}}</button>
 
                     </form>

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 {
                 });
             }
         });
-
     }
 }

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";