From 3f1f35df3164db6739691cdda8f925c296239791 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Mon, 11 Jul 2022 20:23:05 +0100
Subject: [PATCH] fix(images): Retry images with a backoff when we get a Too
 Many requests from TheMovieDb #4685

---
 .../components/card/discover-card.component.html    |  3 +--
 .../components/card/discover-card.component.ts      | 13 +++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

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 40f0d2709..d7ffbb6c1 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,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">
diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts
index 559a962b5..d5557c0b5 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.ts
+++ b/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)