mirror of https://github.com/Ombi-app/Ombi
fix(discover): 🐛 Created new Image component to handle 429's from TMDB (#4698) and fixed #4635 (#4699)
Jamie
2 years ago
committed by
GitHub
parent
1fe7e9dda2
commit
f22d3da765
@ -0,0 +1 @@
|
||||
<img src="{{baseUrl + src}}" (onError)="onError($event)" [class]="class" [id]="id" [style]="style"/>
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -1 +1,2 @@
|
||||
export * from "./image-background/image-background.component";
|
||||
export * from "./image-background/image-background.component";
|
||||
export * from "./image/image.component";
|
||||
Loading…
Reference in new issue