Akash Negi
10 hours ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with
33 additions and
7 deletions
-
libs/ui/src/lib/entity-logo/entity-logo-image-source.service.ts
-
libs/ui/src/lib/entity-logo/entity-logo.component.html
-
libs/ui/src/lib/entity-logo/entity-logo.component.ts
|
|
|
@ -7,6 +7,8 @@ import { Injectable } from '@angular/core'; |
|
|
|
providedIn: 'root' |
|
|
|
}) |
|
|
|
export class EntityLogoImageSourceService { |
|
|
|
private failedImageSources = new Set<string>(); |
|
|
|
|
|
|
|
public getLogoUrlByAssetProfileIdentifier({ |
|
|
|
dataSource, |
|
|
|
symbol |
|
|
|
@ -17,4 +19,12 @@ export class EntityLogoImageSourceService { |
|
|
|
public getLogoUrlByUrl(url: string) { |
|
|
|
return `../api/v1/logo?url=${url}`; |
|
|
|
} |
|
|
|
|
|
|
|
public hasFailed(imageSource: string) { |
|
|
|
return this.failedImageSources.has(imageSource); |
|
|
|
} |
|
|
|
|
|
|
|
public markAsFailed(imageSource: string) { |
|
|
|
this.failedImageSources.add(imageSource); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -1,8 +1,8 @@ |
|
|
|
@if (src) { |
|
|
|
<img |
|
|
|
onerror="this.style.display = 'none'" |
|
|
|
[class.large]="size === 'large'" |
|
|
|
[src]="src" |
|
|
|
[title]="tooltip ? tooltip : ''" |
|
|
|
(error)="onLogoError()" |
|
|
|
/> |
|
|
|
} |
|
|
|
|
|
|
|
@ -23,7 +23,7 @@ export class GfEntityLogoComponent implements OnChanges { |
|
|
|
@Input() tooltip: string; |
|
|
|
@Input() url: string; |
|
|
|
|
|
|
|
public src: string; |
|
|
|
public src: string | undefined; |
|
|
|
|
|
|
|
public constructor( |
|
|
|
private readonly imageSourceService: EntityLogoImageSourceService |
|
|
|
@ -31,12 +31,28 @@ export class GfEntityLogoComponent implements OnChanges { |
|
|
|
|
|
|
|
public ngOnChanges() { |
|
|
|
if (this.dataSource && this.symbol) { |
|
|
|
this.src = this.imageSourceService.getLogoUrlByAssetProfileIdentifier({ |
|
|
|
dataSource: this.dataSource, |
|
|
|
symbol: this.symbol |
|
|
|
}); |
|
|
|
const candidateSrc = |
|
|
|
this.imageSourceService.getLogoUrlByAssetProfileIdentifier({ |
|
|
|
dataSource: this.dataSource, |
|
|
|
symbol: this.symbol |
|
|
|
}); |
|
|
|
|
|
|
|
this.src = this.imageSourceService.hasFailed(candidateSrc) |
|
|
|
? undefined |
|
|
|
: candidateSrc; |
|
|
|
} else if (this.url) { |
|
|
|
this.src = this.imageSourceService.getLogoUrlByUrl(this.url); |
|
|
|
const candidateSrc = this.imageSourceService.getLogoUrlByUrl(this.url); |
|
|
|
|
|
|
|
this.src = this.imageSourceService.hasFailed(candidateSrc) |
|
|
|
? undefined |
|
|
|
: candidateSrc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
public onLogoError() { |
|
|
|
if (this.src) { |
|
|
|
this.imageSourceService.markAsFailed(this.src); |
|
|
|
this.src = undefined; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|