fix(discover): 🐛 Created new Image component to handle 429's from TMDB (#4698) and fixed #4635

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,

src/Ombi/ClientApp/src/app/components/image/image.component.html

@@ -0,0 +1 @@
+<img src="{{baseUrl + src}}" (onError)="onError($event)" [class]="class" [id]="id" [style]="style"/>

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 = "images/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.defaultMovie;
+                break;
+            case RequestType.tvShow:
+                event.target.src = this.defaultTv;
+                break;
+            case RequestType.album:
+                event.target.src = 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);
+    }
+  }

src/Ombi/ClientApp/src/app/components/index.ts

@@ -1 +1,2 @@
-export * from "./image-background/image-background.component";
+export * from "./image-background/image-background.component";
+export * from "./image/image.component";

src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html

@@ -9,7 +9,7 @@
             <span class="indicator"></span><span class="indicator-text" id="availabilityStatus{{result.id}}">{{getAvailabilityStatus()}}</span>
         </div>
     </div>
-        <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image" (error)="onImageError($event)" alt="{{result.title}}">
+    <ombi-image [src]="result.posterPath" [type]="result.type" [routerLink]="generateDetailsLink()" id="cardImage" class="image" alt="{{result.title}}"></ombi-image>
         <div [ngClass]="result.posterPath.includes('images/') ? 'middle-show' : 'middle'">
             <a class="poster-overlay" [routerLink]="generateDetailsLink()">
                 <div class="summary">

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;

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

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

@@ -252,9 +252,9 @@
                                             <div class="sidebar affixable affix-top preview-poster">
                                                 <div class="poster">
                                                     <a [routerLink]="'/details/movie/'+r.id">
-                                                        <img class="real grow" matTooltip="{{r.title}}"
+                                                        <ombi-image class="real grow" matTooltip="{{r.title}}"
                                                             src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
-                                                            alt="Poster" style="display: block;">
+                                                            alt="Poster" style="display: block;"> </ombi-image>
                                                     </a>
                                                 </div>
                                             </div>
@@ -274,9 +274,9 @@
                                             <div class="sidebar affixable affix-top preview-poster">
                                                 <div class="poster ">
                                                     <a [routerLink]="'/details/movie/'+r.id">
-                                                        <img class="real grow" matTooltip="{{r.title}}"
+                                                        <ombi-image class="real grow" matTooltip="{{r.title}}"
                                                             src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}"
-                                                            alt="Poster" style="display: block;">
+                                                            alt="Poster" style="display: block;"></ombi-image>
                                                     </a>
                                                 </div>
                                             </div>

src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html

@@ -6,10 +6,10 @@
                 <div class="row justify-content-md-center mat-card mat-card-flat carousel-item">
                     <div class="bottom-space">
                         <a *ngIf="item.image" [routerLink]="'/discover/actor/' + item.id">
-                            <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.image}}">
+                            <ombi-image class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.image}}"></ombi-image>
                         </a>
                         <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
-                            <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}">
+                            <ombi-image class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}"></ombi-image>
                         </a>
                         <!-- TODO get profile image default -->
 

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;

src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html

@@ -1,8 +1,8 @@
 <div class="col-md-2 col-sm-3 hidden-xs">
     <div class="sidebar sidebar-poster affixable affix-top">
         <div class="poster mobile-poster">
-            <img class="real" src="{{posterPath}}" alt="Poster"
+            <ombi-image class="real" src="{{posterPath}}" alt="Poster"
-                style="display: block;">
+                style="display: block;"></ombi-image>
         </div>
         <!--Underneith poster-->
         <br />

src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html

@@ -2,7 +2,6 @@
     <section id="summary-wrapper">
         <div class="full-screenshot enabled" [style.background-image]="background"></div>
         <div class="full-screenshot enabled overlay"></div>
-        <!--<div class="shadow-base" [ngClass]="available ? 'available-bottom-border' : ''"></div>-->
 
         <div class="container summary">
             <div class="container title-top-banner">

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-information-panel/tv-information-panel.component.html

@@ -2,7 +2,7 @@
     <div>
         <div class="rating medium-font">
             <span *ngIf="tv.rating">
-                <img class="rating-small" src="{{baseUrl}}/images/tmdb-logo.svg"> {{tv.rating * 10}}%
+                <img class="rating-small" src="{{baseUrl}}/images/tmdb-logo.svg"> {{tv.rating * 10 | number : '1.2-2'}}%
             </span>
             <span *ngIf="ratings?.score && ratings?.class">
                 <img class="rating-small" src="{{baseUrl}}/images/{{ratings.class === 'rotten' ? 'rotten-rotten.svg' : 'rotten-fresh.svg'}}"> {{ratings.score}}%

src/Ombi/ClientApp/src/app/media-details/media-details.module.ts

@@ -12,6 +12,7 @@ import * as fromComponents from './components';
 import { AuthGuard } from "../auth/auth.guard";
 import { ArtistDetailsComponent } from "./components/artist/artist-details.component";
 import { ReactiveFormsModule } from "@angular/forms";
+import { ImageComponent } from "app/components";
 
 
 const routes: Routes = [
@@ -27,6 +28,7 @@ const routes: Routes = [
         ReactiveFormsModule,
         PipeModule,
         CarouselModule,
+        ImageComponent,
     ],
     declarations: [
         ...fromComponents.components