From a599ffa0ee5db8bbd284e6c3185b9ea7234d2f99 Mon Sep 17 00:00:00 2001
From: "Hartung, Michael" <michael.hartung@uni-hamburg.de>
Date: Thu, 13 Apr 2023 17:29:52 +0200
Subject: [PATCH] use images from cdn

---
 src/app/app.module.ts                         |  4 +++-
 .../image-fallback.directive.spec.ts          |  8 ++++++++
 .../image-fallback.directive.ts               | 20 +++++++++++++++++++
 src/app/image/image.component.html            | 16 +++++++--------
 src/app/image/image.component.ts              |  6 +++---
 5 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 src/app/directives/image-fallback/image-fallback.directive.spec.ts
 create mode 100644 src/app/directives/image-fallback/image-fallback.directive.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 83a854be..a15619f9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -48,7 +48,7 @@ import { PrivacyBannerComponent } from './components/privacy-banner/privacy-bann
 import { ParserWarningComponent } from './components/parser-warning/parser-warning.component';
 import { GroupWarningComponent } from './components/group-warning/group-warning.component';
 import { NetworkWarningComponent } from './components/network-warning/network-warning.component';
-import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { SummaryNodeComponent } from './pages/explorer-page/summary-node/summary-node/summary-node.component';
 import { NetworkOverviewComponent } from './pages/explorer-page/network-overview/network-overview/network-overview.component';
 import { InfoTileEdgeComponent } from './components/info-tile-edge/info-tile-edge/info-tile-edge.component';
@@ -56,6 +56,7 @@ import { NetworkEmptyWarningComponent } from './components/network-empty-warning
 import { BugReportComponent } from './components/bug-report/bug-report.component';
 import { ViewListComponent } from './components/analysis-panel/view-list/view-list.component';
 import { ImageComponent } from './image/image.component';
+import { ImageFallbackDirective } from './directives/image-fallback/image-fallback.directive';
 
 
 @NgModule({
@@ -101,6 +102,7 @@ import { ImageComponent } from './image/image.component';
     BugReportComponent,
     ViewListComponent,
     ImageComponent,
+    ImageFallbackDirective,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/directives/image-fallback/image-fallback.directive.spec.ts b/src/app/directives/image-fallback/image-fallback.directive.spec.ts
new file mode 100644
index 00000000..bc5e23d0
--- /dev/null
+++ b/src/app/directives/image-fallback/image-fallback.directive.spec.ts
@@ -0,0 +1,8 @@
+import { ImageFallbackDirective } from './image-fallback.directive';
+
+describe('ImageFallbackDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ImageFallbackDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/src/app/directives/image-fallback/image-fallback.directive.ts b/src/app/directives/image-fallback/image-fallback.directive.ts
new file mode 100644
index 00000000..82d9e6d6
--- /dev/null
+++ b/src/app/directives/image-fallback/image-fallback.directive.ts
@@ -0,0 +1,20 @@
+import { Directive, Input, HostBinding, HostListener } from '@angular/core';
+
+@Directive({
+  selector: 'img[fallback]'
+})
+export class ImageFallbackDirective {
+
+  constructor() { }
+
+  @Input()
+  @HostBinding('src')
+  src: string;
+
+  @Input() fallback: string;
+
+  @HostListener('error')
+  onError() {
+    this.src = this.fallback;
+  }
+}
\ No newline at end of file
diff --git a/src/app/image/image.component.html b/src/app/image/image.component.html
index 71b5958c..d8531739 100644
--- a/src/app/image/image.component.html
+++ b/src/app/image/image.component.html
@@ -1,9 +1,7 @@
-<picture>
-  <source srcset="{{ _source }}" />
-  <img
-    src="{{ _source }}"
-    alt="{{ _alt }}"
-    title="{{ _title }}"
-    class="{{ _class }}"
-  />
-</picture>
+<img
+  alt="{{ _alt }}"
+  title="{{ _title }}"
+  class="{{ _class }}"
+  src="{{ _source }}"
+  fallback="https://cdn.drugst.one/{{ version }}/assets/{{ _source }}"
+/>
diff --git a/src/app/image/image.component.ts b/src/app/image/image.component.ts
index 1db83ad6..41c72ab9 100644
--- a/src/app/image/image.component.ts
+++ b/src/app/image/image.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { version } from '../../version';
 
 @Component({
   selector: 'app-image',
@@ -10,12 +11,10 @@ export class ImageComponent implements OnInit {
   constructor() { }
 
   public _source: string;
-  public format: string;
+  public version: string;
 
   @Input() set _src(src: string) {
     this._source = src;
-    // get file ending behind last '.' as format
-    this.format = this._source.split('.').slice(-1)[0];
   }
 
   @Input() _alt: string;
@@ -23,6 +22,7 @@ export class ImageComponent implements OnInit {
   @Input() _class: string;
 
   ngOnInit(): void {
+    this.version = version;
   }
 
 }
-- 
GitLab