mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-07 13:41:13 -07:00
made changes to the landing page too
This commit is contained in:
parent
5edea28a80
commit
87dae641e1
3 changed files with 6 additions and 43 deletions
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 + ")");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue