fix(images): Retry images with a backoff when we get a Too Many requests from TheMovieDb #4685

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

@@ -9,8 +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"
-            alt="{{result.title}}">
+        <img [routerLink]="generateDetailsLink()" id="cardImage" src="{{result.posterPath}}" class="image" (error)="onImageError($event)" alt="{{result.title}}">
         <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.ts

@@ -169,6 +169,19 @@ export class DiscoverCardComponent implements OnInit {
         }
     }
 
+    public onImageError(event: any) {
+        const originalSrc = event.target.src;
+
+        // set to a placeholder
+        event.target.src = "../../../images/default_movie_poster.png";
+
+        // Retry the original image
+        const timeout = setTimeout(() => {
+            event.target.src = originalSrc;
+            clearTimeout(timeout);
+        }, Math.floor(Math.random() * (7000 - 1000 + 1)) + 1000);
+    }
+
     private getExtraMovieInfo() {
         if (!this.result.imdbid) {
             this.searchService.getFullMovieDetails(+this.result.id)