51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import {
|
|
Directive,
|
|
HostBinding,
|
|
HostListener,
|
|
effect,
|
|
inject,
|
|
input,
|
|
signal
|
|
} from '@angular/core';
|
|
import { KlipyService } from '../application/services/klipy.service';
|
|
|
|
@Directive({
|
|
selector: 'img[appChatImageProxyFallback]',
|
|
standalone: true
|
|
})
|
|
export class ChatImageProxyFallbackDirective {
|
|
readonly sourceUrl = input('', { alias: 'appChatImageProxyFallback' });
|
|
|
|
private readonly klipy = inject(KlipyService);
|
|
private readonly renderedSource = signal('');
|
|
private hasAppliedProxyFallback = false;
|
|
|
|
constructor() {
|
|
effect(() => {
|
|
this.hasAppliedProxyFallback = false;
|
|
this.renderedSource.set(this.klipy.buildRenderableImageUrl(this.sourceUrl()));
|
|
});
|
|
}
|
|
|
|
@HostBinding('src')
|
|
get src(): string {
|
|
return this.renderedSource();
|
|
}
|
|
|
|
@HostListener('error')
|
|
handleError(): void {
|
|
if (this.hasAppliedProxyFallback) {
|
|
return;
|
|
}
|
|
|
|
const proxyUrl = this.klipy.buildImageProxyUrl(this.sourceUrl());
|
|
|
|
if (!proxyUrl || proxyUrl === this.renderedSource()) {
|
|
return;
|
|
}
|
|
|
|
this.hasAppliedProxyFallback = true;
|
|
this.renderedSource.set(proxyUrl);
|
|
}
|
|
}
|