Fixes default image for recently requested items.

src/Ombi/ClientApp/src/app/components/detailed-card/detailed-card.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from "@angular/core";
 import { IRecentlyRequested, RequestType } from "../../interfaces";
 import { ImageService } from "app/services";
 import { Subject, takeUntil } from "rxjs";
@@ -6,9 +13,9 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
 
 @Component({
   standalone: false,
-    selector: 'ombi-detailed-card',
+  selector: "ombi-detailed-card",
-    templateUrl: './detailed-card.component.html',
+  templateUrl: "./detailed-card.component.html",
-    styleUrls: ['./detailed-card.component.scss']
+  styleUrls: ["./detailed-card.component.scss"],
 })
 export class DetailedCardComponent implements OnInit, OnDestroy {
   @Input() public request: IRecentlyRequested;
@@ -23,15 +30,14 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
 
   public background: SafeStyle;
 
-    constructor(private imageService: ImageService, private sanitizer: DomSanitizer) { }
+  constructor(
+    private imageService: ImageService,
+    private sanitizer: DomSanitizer
+  ) {}
 
   ngOnInit(): void {
-        if (!this.request.posterPath) {
+    this.loadPosterPath();
-          this.loadImages();
+    this.loadBackgroundPath();
-        } else {
-          this.request.posterPath = `https://image.tmdb.org/t/p/w300${this.request.posterPath}`;
-          this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://image.tmdb.org/t/p/w300" + this.request.background + ")");
-        }
   }
 
   public getStatus(request: IRecentlyRequested) {
@@ -72,21 +78,77 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
     this.$imageSub.complete();
   }
 
-    private loadImages() {
+  private loadPosterPath() {
+    if (this.request.posterPath) {
+      this.setPosterPath(this.request.posterPath);
+      return;
+    }
+
     switch (this.request.type) {
       case RequestType.movie:
-          this.imageService.getMoviePoster(this.request.mediaId).pipe(takeUntil(this.$imageSub)).subscribe(x => this.request.posterPath = x);
+        this.imageService
-          this.imageService.getMovieBackground(this.request.mediaId).pipe(takeUntil(this.$imageSub)).subscribe(x => {
+          .getMoviePoster(this.request.mediaId)
-            this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(" + x + ")");
+          .pipe(takeUntil(this.$imageSub))
-          });
+          .subscribe((x) => this.setPosterPath(x));
         break;
       case RequestType.tvShow:
-          this.imageService.getTmdbTvPoster(Number(this.request.mediaId)).pipe(takeUntil(this.$imageSub)).subscribe(x => this.request.posterPath = `https://image.tmdb.org/t/p/w300${x}`);
+        this.imageService
-          this.imageService.getTmdbTvBackground(Number(this.request.mediaId)).pipe(takeUntil(this.$imageSub)).subscribe(x => {
+          .getTmdbTvPoster(Number(this.request.mediaId))
-            this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://image.tmdb.org/t/p/w300" + x + ")");
+          .pipe(takeUntil(this.$imageSub))
-          });
+          .subscribe((x) => this.setPosterPath(x));
         break;
     }
   }
 
+  private setPosterPath(posterPath: string) {
+    if (!posterPath) {
+      this.request.posterPath = null;
+    } else {
+      this.request.posterPath = this.getImageUrl(posterPath);
+    }
+  }
+
+  private loadBackgroundPath() {
+    if (this.request.background) {
+      this.setBackgroundStyle(this.request.background);
+      return;
+    }
+    
+    // Set background style while image path is loading.
+    this.setBackgroundStyle(null);
+    switch (this.request.type) {
+      case RequestType.movie:
+        this.imageService
+          .getMovieBackground(this.request.mediaId)
+          .pipe(takeUntil(this.$imageSub))
+          .subscribe((x) => this.setBackgroundStyle(x));
+        break;
+      case RequestType.tvShow:
+        this.imageService
+          .getTmdbTvBackground(Number(this.request.mediaId))
+          .pipe(takeUntil(this.$imageSub))
+          .subscribe((x) => this.setBackgroundStyle(x));
+        break;
+    }
+  }
+
+  private setBackgroundStyle(backgroundPath: string) {
+    if (backgroundPath) {
+      this.background = this.sanitizer.bypassSecurityTrustStyle(
+        `linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(${this.getImageUrl(
+          backgroundPath
+        )})`
+      );
+    } else {
+      this.background = "linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5))";
+    }
+  }
+
+  private getImageUrl(path: string) {
+    if (new RegExp("^(http|https)://").test(path)) {
+      return path;
+    } else {
+      return `https://image.tmdb.org/t/p/w300${path}`;
+    }
+  }
 }

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

@@ -1,18 +1,23 @@
 import { OmbiCommonModules } from "../modules";
-import { ChangeDetectionStrategy, Component, ElementRef, Inject, Input, ViewEncapsulation } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+  ViewEncapsulation,
+} from "@angular/core";
 import { RequestType } from "../../interfaces";
 import { APP_BASE_HREF } from "@angular/common";
 
 @Component({
   standalone: true,
-    selector: 'ombi-image',
+  selector: "ombi-image",
   imports: [...OmbiCommonModules],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './image.component.html',
+  templateUrl: "./image.component.html",
 })
 export class ImageComponent {
-
   @Input() public src: string;
   @Input() public type: RequestType;
 
@@ -22,42 +27,51 @@ import { APP_BASE_HREF } from "@angular/common";
   @Input() public alt: string;
   @Input() public style: string;
 
-    public baseUrl: string = "";
+  private baseUrl: string = "";
 
-    public defaultTv = "/images/default_tv_poster.png";
+  private defaultTv = "/images/default_tv_poster.png";
   private defaultMovie = "/images/default_movie_poster.png";
-    private defaultMusic = "i/mages/default-music-placeholder.png";
+  private defaultMusic = "/images/default-music-placeholder.png";
 
-    private alreadyErrored = false;
+  private maxRetries = 1;
+  private retriesPerformed = 0;
 
-    constructor (@Inject(APP_BASE_HREF) public href: string) {
+  constructor(@Inject(APP_BASE_HREF) private href: string) {
     if (this.href.length > 1) {
       this.baseUrl = this.href;
     }
   }
 
-    public onError(event: any) {
+  ngOnInit() {
-        if (this.alreadyErrored) {
+    if (!this.src) {
-            return;
+      // Prevent unnecessary error handling when src is not specified.
+      this.src = this.getPlaceholderImage();
     }
-        // 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;
   }
 
-        this.alreadyErrored = true;
+  public onError(event: any) {
-        // Retry the original image
+    event.target.src = this.getPlaceholderImage();
+
+    if (!this.src || this.retriesPerformed === this.maxRetries) {
+      return;
+    }
+
+    // Retry the original image.
+    this.retriesPerformed++;
     const timeout = setTimeout(() => {
       clearTimeout(timeout);
       event.target.src = this.src;
     }, Math.floor(Math.random() * (7000 - 1000 + 1)) + 1000);
   }
+
+  private getPlaceholderImage() {
+    switch (this.type) {
+      case RequestType.movie:
+        return this.baseUrl + this.defaultMovie;
+      case RequestType.tvShow:
+        return this.baseUrl + this.defaultTv;
+      case RequestType.album:
+        return this.baseUrl + this.defaultMusic;
+    }
+  }
 }