made changes to the landing page too

This commit is contained in:
tidusjar 2022-07-22 14:47:35 +01:00
parent 5edea28a80
commit 87dae641e1
3 changed files with 6 additions and 43 deletions

View file

@ -1,5 +1,5 @@
<div *ngIf="landingPageSettings && customizationSettings"> <div *ngIf="landingPageSettings && customizationSettings" style="overflow:hidden">
<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div> <ombi-image-background></ombi-image-background>
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row"> <div class="row">

View file

@ -26,15 +26,6 @@ div.centered {
transform: translate(-50%, -50%); 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{ .online{
color:lightgreen; color:lightgreen;

View file

@ -1,48 +1,34 @@
import { PlatformLocation, APP_BASE_HREF } from "@angular/common"; import { APP_BASE_HREF } from "@angular/common";
import { Component, OnDestroy, OnInit, Inject } from "@angular/core"; import { Component, OnInit, Inject } from "@angular/core";
import { IMediaServerStatus } from "../interfaces"; import { IMediaServerStatus } from "../interfaces";
import { ICustomizationSettings, ILandingPageSettings } from "../interfaces"; import { ICustomizationSettings, ILandingPageSettings } from "../interfaces";
import { LandingPageService } from "../services"; import { LandingPageService } from "../services";
import { SettingsService } 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 { CustomizationFacade } from "../state/customization";
import { ThousandShortPipe } from "../pipes/ThousandShortPipe";
@Component({ @Component({
templateUrl: "./landingpage.component.html", templateUrl: "./landingpage.component.html",
animations: [fadeInOutAnimation],
styleUrls: ["./landingpage.component.scss"], styleUrls: ["./landingpage.component.scss"],
}) })
export class LandingPageComponent implements OnDestroy, OnInit { export class LandingPageComponent implements OnInit {
public customizationSettings: ICustomizationSettings; public customizationSettings: ICustomizationSettings;
public landingPageSettings: ILandingPageSettings; public landingPageSettings: ILandingPageSettings;
public background: any;
public mediaServerStatus: IMediaServerStatus; public mediaServerStatus: IMediaServerStatus;
public baseUrl: string; public baseUrl: string;
private timer: any;
private href: string; private href: string;
constructor(private settingsService: SettingsService, constructor(private settingsService: SettingsService,
private images: ImageService, private sanitizer: DomSanitizer, private landingPageService: LandingPageService, private landingPageService: LandingPageService,
private customizationFacade: CustomizationFacade, private customizationFacade: CustomizationFacade,
@Inject(APP_BASE_HREF) href :string) { this.href = href } @Inject(APP_BASE_HREF) href :string) { this.href = href }
public ngOnInit() { public ngOnInit() {
this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x); this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = 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; const base = this.href;
if (base.length > 1) { if (base.length > 1) {
@ -53,18 +39,4 @@ export class LandingPageComponent implements OnDestroy, OnInit {
this.mediaServerStatus = x; 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 + ")");
});
}
} }