fix: Landing and Login page improvements (#4690)

Ombi-app · Jul 22, 2022 · 6d423b5 · 6d423b5
1 parent c08156c
commit 6d423b5
Show file tree

Hide file tree

Showing 19 changed files with 199 additions and 155 deletions.
diff --git 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
@@ -0,0 +1,6 @@
+<div @fadeInOut class="bg" [style.background-image]="background">
+  <div class="login-gradient-bar">
+  </div>
+
+  <div class="poster-desc">{{name}}</div>
+</div>
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
@@ -0,0 +1,26 @@
+.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;
+}
+
+.poster-desc {
+  padding-left: 1%;
+  color: white;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: end;
+  flex-direction: column;
+}
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
@@ -0,0 +1,43 @@
+import { OmbiCommonModules } from "../modules";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { DomSanitizer } 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;
+    public name: string;
+    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.getRandomBackgroundWithInfo().subscribe((x) => {
+          this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
+          this.name = x.name;
+        });
+    }
+  }
diff --git a/src/Ombi/ClientApp/src/app/components/index.ts b/src/Ombi/ClientApp/src/app/components/index.ts
@@ -0,0 +1 @@
+export * from "./image-background/image-background.component";
diff --git a/src/Ombi/ClientApp/src/app/components/modules.ts b/src/Ombi/ClientApp/src/app/components/modules.ts
@@ -0,0 +1,3 @@
+import { CommonModule } from "@angular/common";
+
+export const OmbiCommonModules = [ CommonModule ];
diff --git a/src/Ombi/ClientApp/src/app/interfaces/IImages.ts b/src/Ombi/ClientApp/src/app/interfaces/IImages.ts
@@ -1,3 +1,7 @@
 export interface IImages {
     url: string;
 }
+export interface IImagesInfo {
+    url: string;
+    name: string;
+}
diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html
@@ -1,5 +1,5 @@
-<div *ngIf="landingPageSettings && customizationSettings">
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
+<div *ngIf="landingPageSettings && customizationSettings" style="overflow:hidden">
+    <ombi-image-background></ombi-image-background>
 
     <div class="small-middle-container">
         <div class="row">

diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss
@@ -26,15 +26,6 @@ div.centered {
     transform: translate(-50%, -50%);
 }
 
-div.bg {
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    height: 100vh;
-    width: 100vw;
-    position: fixed;
-}
 
 .online{
     color:lightgreen;

diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts
@@ -1,48 +1,34 @@
-import { PlatformLocation, APP_BASE_HREF } from "@angular/common";
-import { Component, OnDestroy, OnInit, Inject } from "@angular/core";
+import { APP_BASE_HREF } from "@angular/common";
+import { Component, OnInit, Inject } from "@angular/core";
 
 import { IMediaServerStatus } from "../interfaces";
 import { ICustomizationSettings, ILandingPageSettings } from "../interfaces";
 import { LandingPageService } from "../services";
 import { SettingsService } from "../services";
 
-import { DomSanitizer } from "@angular/platform-browser";
-import { ImageService } from "../services";
-
-import { fadeInOutAnimation } from "../animations/fadeinout";
 import { CustomizationFacade } from "../state/customization";
-import { ThousandShortPipe } from "../pipes/ThousandShortPipe";
 
 @Component({
     templateUrl: "./landingpage.component.html",
-    animations: [fadeInOutAnimation],
     styleUrls: ["./landingpage.component.scss"],
 })
-export class LandingPageComponent implements OnDestroy, OnInit {
+export class LandingPageComponent implements OnInit {
 
     public customizationSettings: ICustomizationSettings;
     public landingPageSettings: ILandingPageSettings;
-    public background: any;
     public mediaServerStatus: IMediaServerStatus;
     public baseUrl: string;
-    private timer: any;
 
     private href: string;
 
     constructor(private settingsService: SettingsService,
-                private images: ImageService, private sanitizer: DomSanitizer, private landingPageService: LandingPageService,
+                private landingPageService: LandingPageService,
                 private customizationFacade: CustomizationFacade,
                 @Inject(APP_BASE_HREF) href :string) { this.href = href }
 
     public ngOnInit() {
         this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
         this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = x);
-        this.images.getRandomBackground().subscribe(x => {
-            this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 19%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 79%, transparent 80%), url(" + x.url + ")");
-        });
-        this.timer = setInterval(() => {
-            this.cycleBackground();
-        }, 30000);
 
         const base = this.href;
         if (base.length > 1) {
@@ -53,18 +39,4 @@ export class LandingPageComponent implements OnDestroy, 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/src/app/login/login.component.html b/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">
 

diff --git 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
@@ -10,25 +10,19 @@ 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 {
   public form: UntypedFormGroup;
   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
@@ -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">
 

diff --git 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,22 +17,19 @@ 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]],
         });
     }
 
     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;