Fix retry logic for image urls

main
trivernis 4 months ago
parent db01332c15
commit c616ffeb6c
Signed by: Trivernis
GPG Key ID: 7E6D18B61C8D2F4B

@ -9,9 +9,9 @@ import {
OnDestroy, OnDestroy,
OnInit, OnInit,
Output, Output,
ViewChild ViewChild,
} from "@angular/core"; } from "@angular/core";
import {SafeResourceUrl} from "@angular/platform-browser"; import { SafeResourceUrl } from "@angular/platform-browser";
@Component({ @Component({
selector: "app-content-aware-image", selector: "app-content-aware-image",
@ -58,12 +58,21 @@ export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
} }
public checkSize(): void { public checkSize(): void {
if (this.imageElement?.nativeElement && this.imageContainer?.nativeElement) { if (
this.adjustSize(this.imageElement.nativeElement, this.imageContainer.nativeElement); this.imageElement?.nativeElement &&
this.imageContainer?.nativeElement
) {
this.adjustSize(
this.imageElement.nativeElement,
this.imageContainer.nativeElement,
);
} }
} }
public onImageLoad(image: HTMLImageElement, imageContainer: HTMLDivElement): void { public onImageLoad(
image: HTMLImageElement,
imageContainer: HTMLDivElement,
): void {
this.adjustSize(image, imageContainer); this.adjustSize(image, imageContainer);
this.appLoadEnd.emit(); this.appLoadEnd.emit();
} }
@ -73,18 +82,24 @@ export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
* @param {HTMLImageElement} image * @param {HTMLImageElement} image
* @param {HTMLDivElement} imageContainer * @param {HTMLDivElement} imageContainer
*/ */
public adjustSize(image: HTMLImageElement, imageContainer: HTMLDivElement): void { public adjustSize(
image: HTMLImageElement,
imageContainer: HTMLDivElement,
): void {
const containerHeight = Math.abs(imageContainer.clientHeight); const containerHeight = Math.abs(imageContainer.clientHeight);
const containerWidth = Math.abs(imageContainer.clientWidth); const containerWidth = Math.abs(imageContainer.clientWidth);
if (this.previousWidth != containerWidth || this.previousHeight != containerHeight) { if (
this.previousWidth !== containerWidth ||
this.previousHeight !== containerHeight
) {
this.previousHeight = containerHeight; this.previousHeight = containerHeight;
this.previousWidth = containerWidth; this.previousWidth = containerWidth;
const imageRelativeHeight = image.naturalHeight / containerHeight; const imageRelativeHeight = image.naturalHeight / containerHeight;
const imageRelativeWidth = image.naturalWidth / containerWidth; const imageRelativeWidth = image.naturalWidth / containerWidth;
const scaleWidth = imageRelativeWidth > imageRelativeHeight; const scaleWidth = imageRelativeWidth > imageRelativeHeight;
if (scaleWidth != this.scaleWidth) { if (scaleWidth !== this.scaleWidth) {
this.scaleWidth = scaleWidth; this.scaleWidth = scaleWidth;
this.changeDetector.detectChanges(); this.changeDetector.detectChanges();
} }
@ -96,6 +111,7 @@ export class ContentAwareImageComponent implements OnInit, DoCheck, OnDestroy {
if (this.retryCount < this.maxRetry) { if (this.retryCount < this.maxRetry) {
this.retryCount++; this.retryCount++;
image.src = "";
setTimeout(() => { setTimeout(() => {
image.src = imageSrc; image.src = imageSrc;
}, this.retryDelay * this.retryCount); }, this.retryDelay * this.retryCount);

Loading…
Cancel
Save