From f22d3da765799365455b919027f7563e52b347c3 Mon Sep 17 00:00:00 2001 From: Jamie Date: Mon, 25 Jul 2022 21:46:11 +0100 Subject: [PATCH] fix(discover): :bug: Created new Image component to handle 429's from TMDB (#4698) and fixed #4635 (#4699) --- src/Ombi/ClientApp/src/app/app.module.ts | 5 +- .../app/components/image/image.component.html | 1 + .../app/components/image/image.component.ts | 57 +++++++++++++++++++ .../ClientApp/src/app/components/index.ts | 3 +- .../card/discover-card.component.html | 2 +- .../card/discover-card.component.scss | 2 +- .../src/app/discover/discover.module.ts | 2 + .../movie/movie-details.component.html | 8 +-- .../cast-carousel.component.html | 4 +- .../cast-carousel.component.scss | 4 +- .../media-poster/media-poster.component.html | 4 +- .../top-banner/top-banner.component.html | 1 - .../tv-information-panel.component.html | 2 +- .../app/media-details/media-details.module.ts | 2 + 14 files changed, 80 insertions(+), 17 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/components/image/image.component.html create mode 100644 src/Ombi/ClientApp/src/app/components/image/image.component.ts diff --git a/src/Ombi/ClientApp/src/app/app.module.ts b/src/Ombi/ClientApp/src/app/app.module.ts index 30f4b2ea6..24644d1df 100644 --- a/src/Ombi/ClientApp/src/app/app.module.ts +++ b/src/Ombi/ClientApp/src/app/app.module.ts @@ -68,7 +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 { ImageBackgroundComponent, ImageComponent } from "./components/"; import { environment } from "../environments/environment"; const routes: Routes = [ @@ -168,7 +168,8 @@ export function JwtTokenGetter() { [ NgxsReduxDevtoolsPluginModule.forRoot(), ], - ImageBackgroundComponent + ImageBackgroundComponent, + ImageComponent, ], declarations: [ AppComponent, diff --git a/src/Ombi/ClientApp/src/app/components/image/image.component.html b/src/Ombi/ClientApp/src/app/components/image/image.component.html new file mode 100644 index 000000000..3d5553313 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/image/image.component.html @@ -0,0 +1 @@ + diff --git a/src/Ombi/ClientApp/src/app/components/image/image.component.ts b/src/Ombi/ClientApp/src/app/components/image/image.component.ts new file mode 100644 index 000000000..57099016a --- /dev/null +++ b/src/Ombi/ClientApp/src/app/components/image/image.component.ts @@ -0,0 +1,57 @@ +import { OmbiCommonModules } from "../modules"; +import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, ViewEncapsulation } from "@angular/core"; +import { RequestType } from "../../interfaces"; +import { APP_BASE_HREF } from "@angular/common"; + +@Component({ + standalone: true, + selector: 'ombi-image', + imports: [...OmbiCommonModules], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './image.component.html', + }) + export class ImageComponent { + + @Input() public src: string; + @Input() public type: RequestType; + + // Attributes from the parent + @Input() public class: string; + @Input() public id: string; + @Input() public alt: string; + @Input() public style: string; + + public baseUrl: string = ""; + + public defaultTv = "/images/default_tv_poster.png"; + private defaultMovie = "/images/default_movie_poster.png"; + private defaultMusic = "i/mages/default-music-placeholder.png"; + + constructor (@Inject(APP_BASE_HREF) public href: string) { + if (this.href.length > 1) { + this.baseUrl = this.href; + } + } + + public onError(event: any) { + // set to a placeholder + switch(this.type) { + case RequestType.movie: + event.target.src = this.baseUrl + this.defaultMovie; + break; + case RequestType.tvShow: + event.target.src = this.baseUrl + this.defaultTv; + break; + case RequestType.album: + event.target.src = this.baseUrl + this.defaultMusic; + break; + } + + // Retry the original image + const timeout = setTimeout(() => { + event.target.src = this.src; + clearTimeout(timeout); + }, Math.floor(Math.random() * (7000 - 1000 + 1)) + 1000); + } + } \ 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 index 75334a9e4..092f6504b 100644 --- a/src/Ombi/ClientApp/src/app/components/index.ts +++ b/src/Ombi/ClientApp/src/app/components/index.ts @@ -1 +1,2 @@ -export * from "./image-background/image-background.component"; \ No newline at end of file +export * from "./image-background/image-background.component"; +export * from "./image/image.component"; \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html index d7ffbb6c1..a479b5072 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html @@ -9,7 +9,7 @@ {{getAvailabilityStatus()}} - {{result.title}} +
diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss index 5fe422fd7..6a7911257 100644 --- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss +++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.scss @@ -83,7 +83,7 @@ small { } -.image { +::ng-deep .image { border-radius: 10px; opacity: 1; display: block; diff --git a/src/Ombi/ClientApp/src/app/discover/discover.module.ts b/src/Ombi/ClientApp/src/app/discover/discover.module.ts index 414c881e6..eade4e451 100644 --- a/src/Ombi/ClientApp/src/app/discover/discover.module.ts +++ b/src/Ombi/ClientApp/src/app/discover/discover.module.ts @@ -8,6 +8,7 @@ import { PipeModule } from "../pipes/pipe.module"; import { RouterModule } from "@angular/router"; import { SharedModule } from "../shared/shared.module"; import { SkeletonModule } from 'primeng/skeleton'; +import { ImageComponent } from 'app/components'; @NgModule({ imports: [ @@ -18,6 +19,7 @@ import { SkeletonModule } from 'primeng/skeleton'; MatButtonToggleModule, InfiniteScrollModule, SkeletonModule, + ImageComponent ], declarations: [ ...fromComponents.components diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html index 90cf455f0..6659e1ccb 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html @@ -252,9 +252,9 @@
- Poster + alt="Poster" style="display: block;">
@@ -274,9 +274,9 @@
- Poster + alt="Poster" style="display: block;">
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html index 49875514d..e14323a0e 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html @@ -6,10 +6,10 @@
- + - + diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss index b73d71007..644902159 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss @@ -65,7 +65,7 @@ body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled) @media (min-width: 979px) { - .cast-profile-img { + :host ::ng-deep .cast-profile-img { border-radius: 100%; width: 200px; max-height: 200px; @@ -74,7 +74,7 @@ body .ui-carousel .ui-carousel-content .ui-carousel-next:not(.ui-state-disabled) } @media (max-width: 978px) { - .cast-profile-img { + :host ::ng-deep .cast-profile-img { border-radius: 100%; width: 100px; max-height: 100px; diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html index f0a6f04ea..28ef26041 100644 --- a/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html +++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html @@ -1,8 +1,8 @@