From f6c1cd1236c213ea7b2448476a38443ad633cc73 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 22 Jul 2022 14:05:55 +0100 Subject: [PATCH 1/3] feat: :sparkles: moved the background image out into a standalone component --- src/Ombi/ClientApp/src/app/app.module.ts | 4 +- .../image-background.component.html | 4 ++ .../image-background.component.scss | 16 ++++++++ .../image-background.component.ts | 41 +++++++++++++++++++ .../ClientApp/src/app/components/index.ts | 1 + .../ClientApp/src/app/components/modules.ts | 3 ++ .../src/app/login/login.component.html | 5 +-- .../src/app/login/login.component.scss | 17 -------- .../src/app/login/login.component.ts | 29 ------------- .../app/login/resetpassword.component.html | 5 +-- .../src/app/login/resetpassword.component.ts | 13 ++---- .../login/tokenresetpassword.component.html | 20 ++++----- .../app/login/tokenresetpassword.component.ts | 12 +----- .../src/app/services/image.service.ts | 2 +- 14 files changed, 84 insertions(+), 88 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/components/image-background/image-background.component.html create mode 100644 src/Ombi/ClientApp/src/app/components/image-background/image-background.component.scss create mode 100644 src/Ombi/ClientApp/src/app/components/image-background/image-background.component.ts create mode 100644 src/Ombi/ClientApp/src/app/components/index.ts create mode 100644 src/Ombi/ClientApp/src/app/components/modules.ts 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"; From 5edea28a80ba216f5107d435e06d92f81216032f Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 22 Jul 2022 14:39:09 +0100 Subject: [PATCH 2/3] feat: Added the image background title to the page --- .../image-background.component.html | 2 + .../image-background.component.scss | 10 ++ .../image-background.component.ts | 6 +- .../ClientApp/src/app/interfaces/IImages.ts | 4 + .../src/app/services/image.service.ts | 11 +- src/Ombi/Controllers/V1/ImagesController.cs | 104 ++++++++++++++---- 6 files changed, 111 insertions(+), 26 deletions(-) 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 index 30a15359b..97fff3671 100644 --- 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 @@ -1,4 +1,6 @@
+ +
{{name}}
\ 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 index 41633aa5f..177a22d01 100644 --- 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 @@ -13,4 +13,14 @@ 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; } \ 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 index 2231d13da..ebd228d85 100644 --- 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 @@ -1,6 +1,6 @@ import { OmbiCommonModules } from "../modules"; import { Component, OnDestroy, OnInit } from "@angular/core"; -import { DomSanitizer, SafeStyle } from "@angular/platform-browser"; +import { DomSanitizer } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { ImageService } from "../../services"; import { fadeInOutAnimation } from "app/animations/fadeinout"; @@ -17,6 +17,7 @@ import { fadeInOutAnimation } from "app/animations/fadeinout"; export class ImageBackgroundComponent implements OnInit, OnDestroy { public background: any; + public name: string; private timer: NodeJS.Timer; constructor(private images: ImageService, private sanitizer: DomSanitizer) { } @@ -34,8 +35,9 @@ import { fadeInOutAnimation } from "app/animations/fadeinout"; } private cycleBackground() { - this.images.getRandomBackground().subscribe((x) => { + this.images.getRandomBackgroundWithInfo().subscribe((x) => { this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")"); + this.name = x.name; }); } } \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/interfaces/IImages.ts b/src/Ombi/ClientApp/src/app/interfaces/IImages.ts index 0c73df490..baa1a9829 100644 --- 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/services/image.service.ts b/src/Ombi/ClientApp/src/app/services/image.service.ts index 31699ca7a..c46876d73 100644 --- a/src/Ombi/ClientApp/src/app/services/image.service.ts +++ b/src/Ombi/ClientApp/src/app/services/image.service.ts @@ -4,7 +4,7 @@ import { Observable } from "rxjs"; import { HttpClient } from "@angular/common/http"; -import { IImages } from "../interfaces"; +import { IImages, IImagesInfo } from "../interfaces"; import { ServiceHelpers } from "./service.helpers"; @Injectable() @@ -17,6 +17,10 @@ export class ImageService extends ServiceHelpers { return this.http.get(`${this.url}background/`, {headers: this.headers}); } + public getRandomBackgroundWithInfo(): Observable { + return this.http.get(`${this.url}background/info`, {headers: this.headers}); + } + public getTvBanner(tvdbid: number): Observable { return this.http.get(`${this.url}tv/${tvdbid}`, {headers: this.headers}); } @@ -31,8 +35,9 @@ export class ImageService extends ServiceHelpers { public getMovieBackground(movieDbId: string): Observable { return this.http.get(`${this.url}background/movie/${movieDbId}`, { headers: this.headers }); - } - public getMovieBanner(movieDbId: string): Observable { + } + + public getMovieBanner(movieDbId: string): Observable { return this.http.get(`${this.url}banner/movie/${movieDbId}`, { headers: this.headers }); } diff --git a/src/Ombi/Controllers/V1/ImagesController.cs b/src/Ombi/Controllers/V1/ImagesController.cs index 9683c54b0..0b8a6ce4c 100644 --- a/src/Ombi/Controllers/V1/ImagesController.cs +++ b/src/Ombi/Controllers/V1/ImagesController.cs @@ -45,9 +45,9 @@ public async Task GetTvBanner(int tvdbid) { return string.Empty; } - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); - var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () => FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1)); + var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () => FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1)); if (images == null) { return string.Empty; @@ -70,16 +70,16 @@ public async Task GetTvBanner(int tvdbid) [HttpGet("poster")] public async Task GetRandomPoster() { - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); var rand = new Random(); var val = rand.Next(1, 3); if (val == 1) { - var movies = (await _movieEngineV2.PopularMovies(0, 10, HttpContext.RequestAborted ,"en")).ToArray(); + var movies = (await _movieEngineV2.PopularMovies(0, 10, HttpContext.RequestAborted, "en")).ToArray(); var selectedMovieIndex = rand.Next(movies.Count()); var movie = movies[selectedMovieIndex]; - var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movie.Id}", () => FanartTvApi.GetMovieImages(movie.Id.ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); + var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movie.Id}", () => FanartTvApi.GetMovieImages(movie.Id.ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); if (images == null) { return string.Empty; @@ -99,7 +99,7 @@ public async Task GetRandomPoster() { return images.moviethumb.OrderBy(x => x.likes).Select(x => x.url).FirstOrDefault(); } - } + } else { var tv = (await _tvSearchEngineV2.Popular(0, 10, "en")).ToArray(); @@ -114,9 +114,9 @@ public async Task GetRandomPoster() [HttpGet("poster/movie/{movieDbId}")] public async Task GetMoviePoster(string movieDbId) { - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); - var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1)); + var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1)); if (images == null) { @@ -148,9 +148,9 @@ public async Task GetTvPoster(int tvdbid) { return string.Empty; } - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); - var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () => FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1)); + var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvdbid}", () => FanartTvApi.GetTvImages(tvdbid, key.Value), DateTimeOffset.Now.AddDays(1)); if (images == null) { @@ -178,10 +178,10 @@ public async Task GetTvPoster(int tvdbid) [HttpGet("background/movie/{movieDbId}")] public async Task GetMovieBackground(string movieDbId) { - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + + var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1)); - var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1)); - if (images == null) { return string.Empty; @@ -203,9 +203,9 @@ public async Task GetMovieBackground(string movieDbId) [HttpGet("banner/movie/{movieDbId}")] public async Task GetMovieBanner(string movieDbId) { - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); - var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1)); + var images = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{movieDbId}", () => FanartTvApi.GetMovieImages(movieDbId, key.Value), DateTimeOffset.Now.AddDays(1)); if (images == null) { @@ -246,34 +246,34 @@ public async Task GetBackgroundImage() var movieUrl = string.Empty; var tvUrl = string.Empty; - var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); if (moviesArray.Length > 0) { var item = rand.Next(moviesArray.Length); - var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); + var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); while (!result.moviebackground?.Any() ?? true) { item = rand.Next(moviesArray.Length); - result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); + result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); } var otherRand = new Random(); var res = otherRand.Next(result.moviebackground.Length); - + movieUrl = result.moviebackground[res].url; } if (tvArray.Length > 0) { var item = rand.Next(tvArray.Length); - var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1)); + var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1)); while (!result.showbackground?.Any() ?? true) { item = rand.Next(tvArray.Length); - result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1)); + result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1)); } var otherRand = new Random(); var res = otherRand.Next(result.showbackground.Length); @@ -294,5 +294,67 @@ public async Task GetBackgroundImage() } return new { url = tvUrl }; } + + [HttpGet("background/info")] + public async Task GetBackgroundImageWithInfo() + { + var moviesArray = Options.Movies ?? Array.Empty(); + var tvArray = Options.TvShows ?? Array.Empty(); + + var rand = new Random(); + var movieUrl = string.Empty; + var movieName = string.Empty; + var tvName = string.Empty; + var tvUrl = string.Empty; + + var key = await _cache.GetOrAddAsync(CacheKeys.FanartTv, () => Config.GetAsync(Store.Entities.ConfigurationTypes.FanartTv), DateTimeOffset.Now.AddDays(1)); + + if (moviesArray.Length > 0) + { + var item = rand.Next(moviesArray.Length); + var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); + + while (!result.moviebackground?.Any() ?? true) + { + item = rand.Next(moviesArray.Length); + result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}movie{moviesArray[item]}", () => FanartTvApi.GetMovieImages(moviesArray[item].ToString(), key.Value), DateTimeOffset.Now.AddDays(1)); + } + + var otherRand = new Random(); + var res = otherRand.Next(result.moviebackground.Length); + + movieUrl = result.moviebackground[res].url; + movieName = result.name; + } + if (tvArray.Length > 0) + { + var item = rand.Next(tvArray.Length); + var result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1)); + + while (!result.showbackground?.Any() ?? true) + { + item = rand.Next(tvArray.Length); + result = await _cache.GetOrAddAsync($"{CacheKeys.FanartTv}tv{tvArray[item]}", () => FanartTvApi.GetTvImages(tvArray[item], key.Value), DateTimeOffset.Now.AddDays(1)); + } + var otherRand = new Random(); + var res = otherRand.Next(result.showbackground.Length); + + tvUrl = result.showbackground[res].url; + tvName = result.name; + } + + if (!string.IsNullOrEmpty(movieUrl) && !string.IsNullOrEmpty(tvUrl)) + { + var result = rand.Next(2); + if (result == 0) return new { url = movieUrl, name = movieName }; + if (result == 1) return new { url = tvUrl, name = tvName }; + } + + if (!string.IsNullOrEmpty(movieUrl)) + { + return new { url = movieUrl, name = movieName }; + } + return new { url = tvUrl, name = tvName }; + } } } From 87dae641e16fc8768b59522eff8dabfbdd964ce3 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 22 Jul 2022 14:47:35 +0100 Subject: [PATCH 3/3] made changes to the landing page too --- .../landingpage/landingpage.component.html | 4 +-- .../landingpage/landingpage.component.scss | 9 ----- .../app/landingpage/landingpage.component.ts | 36 +++---------------- 3 files changed, 6 insertions(+), 43 deletions(-) diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html index abad6473f..3b8a46db7 100644 --- a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html +++ b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html @@ -1,5 +1,5 @@ -
-
+
+
diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.scss index 7eb4a4b3c..4c6e7ea9a 100644 --- 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 index 33f8873f8..e2758b146 100644 --- 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 + ")"); - }); - } }