From c7ee68040d26a549afa3ccf4c27d68db41a1037b Mon Sep 17 00:00:00 2001 From: Anojh Date: Wed, 14 Mar 2018 19:12:50 -0700 Subject: [PATCH 1/2] Dynamic Background Animation --- .../ClientApp/app/animations/fadeinout.ts | 12 ++++++++ .../landingpage/landingpage.component.html | 2 +- .../app/landingpage/landingpage.component.ts | 28 +++++++++++++++++-- .../ClientApp/app/login/login.component.html | 2 +- .../ClientApp/app/login/login.component.ts | 27 ++++++++++++++++-- src/Ombi/Ombi.csproj | 8 ++++++ src/Ombi/webpack.config.vendor.ts | 2 +- 7 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 src/Ombi/ClientApp/app/animations/fadeinout.ts diff --git a/src/Ombi/ClientApp/app/animations/fadeinout.ts b/src/Ombi/ClientApp/app/animations/fadeinout.ts new file mode 100644 index 000000000..8ecf15a15 --- /dev/null +++ b/src/Ombi/ClientApp/app/animations/fadeinout.ts @@ -0,0 +1,12 @@ +import { animate, style, transition, trigger } from "@angular/animations"; +import { AnimationEntryMetadata } from "@angular/core"; + +export const fadeInOutAnimation: AnimationEntryMetadata = trigger("fadeInOut", [ + transition(":enter", [ // :enter is alias to 'void => *' + style({ opacity: 0 }), + animate(1000, style({ opacity: 1 })), + ]), + transition(":leave", [ // :leave is alias to '* => void' + animate(1000, style({ opacity: 0 })), + ]), +]); diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html index 209f9d977..27545b64b 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.html +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.html @@ -1,5 +1,5 @@ 
-
+
diff --git a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts index 0cedce50e..ec8122782 100644 --- a/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts +++ b/src/Ombi/ClientApp/app/landingpage/landingpage.component.ts @@ -1,5 +1,5 @@ import { PlatformLocation } from "@angular/common"; -import { Component, OnInit } from "@angular/core"; +import { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core"; import { IMediaServerStatus } from "../interfaces"; import { ICustomizationSettings, ILandingPageSettings } from "../interfaces"; @@ -9,11 +9,15 @@ import { SettingsService } from "../services"; import { DomSanitizer } from "@angular/platform-browser"; import { ImageService } from "../services"; +import { setTimeout } from "core-js/library/web/timers"; +import { fadeInOutAnimation } from "../animations/fadeinout"; + @Component({ templateUrl: "./landingpage.component.html", + animations: [fadeInOutAnimation], styleUrls: ["./landingpage.component.scss"], }) -export class LandingPageComponent implements OnInit { +export class LandingPageComponent implements AfterViewInit, OnInit, OnDestroy { public customizationSettings: ICustomizationSettings; public landingPageSettings: ILandingPageSettings; @@ -41,4 +45,24 @@ export class LandingPageComponent implements OnInit { this.mediaServerStatus = x; }); } + + public ngOnDestroy() { + setTimeout(() => { + this.images.getRandomBackground().subscribe(x => { + this.background = ""; + }); + }, 1000); + setTimeout(() => { + 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 + ")"); + }); + }, 1000); + } + + public ngAfterViewInit() { + setInterval(() => { + this.ngOnDestroy(); + }, 10000); + } } diff --git a/src/Ombi/ClientApp/app/login/login.component.html b/src/Ombi/ClientApp/app/login/login.component.html index 80c48cabd..5fc0150ff 100644 --- a/src/Ombi/ClientApp/app/login/login.component.html +++ b/src/Ombi/ClientApp/app/login/login.component.html @@ -4,7 +4,7 @@ include the remember me checkbox -->
-
+
diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts index 357a8ca9f..d65bf0264 100644 --- a/src/Ombi/ClientApp/app/login/login.component.ts +++ b/src/Ombi/ClientApp/app/login/login.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core"; import { FormBuilder, FormGroup, Validators } from "@angular/forms"; import { ActivatedRoute, Router } from "@angular/router"; import { TranslateService } from "@ngx-translate/core"; @@ -13,11 +13,14 @@ import { StatusService } from "../services"; import { DomSanitizer } from "@angular/platform-browser"; import { ImageService } from "../services"; +import { fadeInOutAnimation } from "../animations/fadeinout"; + @Component({ templateUrl: "./login.component.html", + animations: [fadeInOutAnimation], styleUrls: ["./login.component.scss"], }) -export class LoginComponent implements OnInit { +export class LoginComponent implements AfterViewInit, OnDestroy, OnInit { public form: FormGroup; public customizationSettings: ICustomizationSettings; @@ -102,4 +105,24 @@ export class LoginComponent implements OnInit { }, err => this.notify.error(this.errorBody)); }); } + + public ngOnDestroy() { + setTimeout(() => { + this.images.getRandomBackground().subscribe(x => { + this.background = ""; + }); + }, 1000); + setTimeout(() => { + 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 + ")"); + }); + }, 1000); + } + + public ngAfterViewInit() { + setInterval(() => { + this.ngOnDestroy(); + }, 10000); + } } diff --git a/src/Ombi/Ombi.csproj b/src/Ombi/Ombi.csproj index 0c2c73360..766404941 100644 --- a/src/Ombi/Ombi.csproj +++ b/src/Ombi/Ombi.csproj @@ -92,5 +92,13 @@ + + + + + + + + diff --git a/src/Ombi/webpack.config.vendor.ts b/src/Ombi/webpack.config.vendor.ts index d4fe38c3a..b50e784f4 100644 --- a/src/Ombi/webpack.config.vendor.ts +++ b/src/Ombi/webpack.config.vendor.ts @@ -80,7 +80,7 @@ module.exports = (env: any) => { }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", Hammer: "hammerjs/hammer" }), // Global identifiers - new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './client')), // Workaround for https://github.com/angular/angular/issues/20357 + new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, "./client")), // Workaround for https://github.com/angular/angular/issues/20357 new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/11580 new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, "./ClientApp")), // Workaround for https://github.com/angular/angular/issues/14898 extractCSS, From 76eb895f7309066e20be56657eed9da4147448a9 Mon Sep 17 00:00:00 2001 From: Anojh Date: Thu, 22 Mar 2018 17:11:12 -0700 Subject: [PATCH 2/2] Fix for issue #1907, which is to add content poster and bg to issue details page. --- .../app/issues/issueDetails.component.html | 21 ++++++------ .../app/issues/issueDetails.component.scss | 9 ++++++ .../app/issues/issueDetails.component.ts | 32 +++++++++++++++++-- .../ClientApp/app/issues/issues.module.ts | 3 +- .../app/requests/movierequests.component.html | 2 +- .../tvrequest-children.component.html | 2 +- .../requests/tvrequest-children.component.ts | 1 + .../app/shared/issues-report.component.ts | 2 ++ 8 files changed, 57 insertions(+), 15 deletions(-) diff --git a/src/Ombi/ClientApp/app/issues/issueDetails.component.html b/src/Ombi/ClientApp/app/issues/issueDetails.component.html index 1c1e0f5c4..bad4885e7 100644 --- a/src/Ombi/ClientApp/app/issues/issueDetails.component.html +++ b/src/Ombi/ClientApp/app/issues/issueDetails.component.html @@ -1,13 +1,16 @@
+
+

{{issue.title}}

- {{IssueStatus[issue.status]}} - {{issue.issueCategory.value}} - -

{{'Issues.ReportedBy' | translate}}: {{issue.userReported.alias}}

-

{{'Issues.ReportedBy' | translate}}: {{issue.userReported.userName}}

+ poster + {{IssueStatus[issue.status]}} + {{issue.issueCategory.value}} + +

{{'Issues.ReportedBy' | translate}}: {{issue.userReported.alias}}

+

{{'Issues.ReportedBy' | translate}}: {{issue.userReported.userName}}

{{'Issues.Subject' | translate}}: {{issue.subject}}

-
+
@@ -26,7 +29,8 @@

- {{'Issues.Comments' | translate}}

+ {{'Issues.Comments' | translate}} +
@@ -51,8 +55,7 @@
- + diff --git a/src/Ombi/ClientApp/app/issues/issueDetails.component.scss b/src/Ombi/ClientApp/app/issues/issueDetails.component.scss index 06b991b46..639b9318c 100644 --- a/src/Ombi/ClientApp/app/issues/issueDetails.component.scss +++ b/src/Ombi/ClientApp/app/issues/issueDetails.component.scss @@ -64,6 +64,15 @@ body{ overflow: hidden; display: flex; } +.myBg { + z-index: -1; +} +.tint { + z-index: -1; +} +img-responsive poster { + display:block; +} img { display: block; width: 100%; diff --git a/src/Ombi/ClientApp/app/issues/issueDetails.component.ts b/src/Ombi/ClientApp/app/issues/issueDetails.component.ts index b4e181c71..8dd0e742d 100644 --- a/src/Ombi/ClientApp/app/issues/issueDetails.component.ts +++ b/src/Ombi/ClientApp/app/issues/issueDetails.component.ts @@ -2,8 +2,9 @@ import { Component, OnInit } from "@angular/core"; import { ActivatedRoute } from "@angular/router"; import { AuthService } from "../auth/auth.service"; -import { IssuesService, NotificationService, SettingsService } from "../services"; +import { ImageService, IssuesService, NotificationService, SearchService, SettingsService } from "../services"; +import { DomSanitizer } from "@angular/platform-browser"; import { IIssues, IIssuesChat, IIssueSettings, INewIssueComments, IssueStatus } from "../interfaces"; @Component({ @@ -22,6 +23,8 @@ export class IssueDetailsComponent implements OnInit { public IssueStatus = IssueStatus; public isAdmin: boolean; public settings: IIssueSettings; + public backgroundPath: any; + public posterPath: any; private issueId: number; @@ -29,7 +32,10 @@ export class IssueDetailsComponent implements OnInit { private route: ActivatedRoute, private authService: AuthService, private settingsService: SettingsService, - private notificationService: NotificationService) { + private notificationService: NotificationService, + private imageService: ImageService, + private searchService: SearchService, + private sanitizer: DomSanitizer) { this.route.params .subscribe((params: any) => { this.issueId = parseInt(params.id); @@ -56,8 +62,8 @@ export class IssueDetailsComponent implements OnInit { providerId: x.providerId, userReported: x.userReported, }; + this.setBackground(x); }); - this.loadComments(); } @@ -85,4 +91,24 @@ export class IssueDetailsComponent implements OnInit { private loadComments() { this.issueService.getComments(this.issueId).subscribe(x => this.comments = x); } + + private setBackground(issue: any) { + if (issue.requestType === 1) { + this.searchService.getMovieInformation(Number(issue.providerId)).subscribe(x => { + this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle + ("url(" + "https://image.tmdb.org/t/p/w1280" + x.backdropPath + ")"); + this.posterPath = "https://image.tmdb.org/t/p/w300/" + x.posterPath; + }); + + } else { + this.imageService.getTvBanner(Number(issue.providerId)).subscribe(x => { + this.backgroundPath = this.sanitizer.bypassSecurityTrustStyle + ("url(" + x + ")"); + }); + this.searchService.getShowInformationTreeNode(Number(issue.providerId)).subscribe(x => { + this.posterPath = x.data.banner; + }); + } + + } } diff --git a/src/Ombi/ClientApp/app/issues/issues.module.ts b/src/Ombi/ClientApp/app/issues/issues.module.ts index 1c5abdeea..d8abe45f8 100644 --- a/src/Ombi/ClientApp/app/issues/issues.module.ts +++ b/src/Ombi/ClientApp/app/issues/issues.module.ts @@ -5,7 +5,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; import { OrderModule } from "ngx-order-pipe"; import { PaginatorModule, SharedModule, TabViewModule } from "primeng/primeng"; -import { IdentityService } from "../services"; +import { IdentityService, SearchService } from "../services"; import { AuthGuard } from "../auth/auth.guard"; @@ -43,6 +43,7 @@ const routes: Routes = [ ], providers: [ IdentityService, + SearchService, ], }) diff --git a/src/Ombi/ClientApp/app/requests/movierequests.component.html b/src/Ombi/ClientApp/app/requests/movierequests.component.html index a4bdf0aed..f798e4b70 100644 --- a/src/Ombi/ClientApp/app/requests/movierequests.component.html +++ b/src/Ombi/ClientApp/app/requests/movierequests.component.html @@ -207,7 +207,7 @@ + [issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId"> diff --git a/src/Ombi/ClientApp/app/requests/tvrequest-children.component.html b/src/Ombi/ClientApp/app/requests/tvrequest-children.component.html index ebf8c5e4f..30e1398eb 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequest-children.component.html +++ b/src/Ombi/ClientApp/app/requests/tvrequest-children.component.html @@ -105,4 +105,4 @@ \ No newline at end of file +[issueCategory]="issueCategorySelected" [id]="issueRequest?.id" [providerId]="issueProviderId" (visibleChange)="issuesBarVisible = $event;"> \ No newline at end of file diff --git a/src/Ombi/ClientApp/app/requests/tvrequest-children.component.ts b/src/Ombi/ClientApp/app/requests/tvrequest-children.component.ts index fc5ec0e69..300599063 100644 --- a/src/Ombi/ClientApp/app/requests/tvrequest-children.component.ts +++ b/src/Ombi/ClientApp/app/requests/tvrequest-children.component.ts @@ -105,6 +105,7 @@ export class TvRequestChildrenComponent { this.issueRequest = req; this.issueCategorySelected = catId; this.issuesBarVisible = true; + this.issueProviderId = req.id.toString(); } private removeRequestFromUi(key: IChildRequests) { diff --git a/src/Ombi/ClientApp/app/shared/issues-report.component.ts b/src/Ombi/ClientApp/app/shared/issues-report.component.ts index e0fbd0a05..de171d5c2 100644 --- a/src/Ombi/ClientApp/app/shared/issues-report.component.ts +++ b/src/Ombi/ClientApp/app/shared/issues-report.component.ts @@ -15,6 +15,8 @@ export class IssuesReportComponent { @Input() public issueCategory: IIssueCategory; @Input() public movie: boolean; @Input() public providerId: string; + @Input() public background: string; + @Input() public posterPath: string; @Output() public visibleChange = new EventEmitter();