Img fallback

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -26,6 +26,7 @@
         ></ng-container>
         <ng-template #defaultImage let-attachmentContext="attachment">
           <img
+            *ngIf="!imageErrors.includes(attachmentContext)"
             #imgElement
             class="str-chat__message-attachment--img"
             data-testclass="image"
@@ -39,6 +40,7 @@
             [alt]="attachmentContext?.fallback"
             (click)="openImageModal([attachmentContext])"
             (keyup.enter)="openImageModal([attachmentContext])"
+            (error)="imageErrors.push(attachmentContext)"
             [style.--original-height]="
               getImageAttachmentConfiguration(
                 attachmentContext,
@@ -66,6 +68,12 @@
               ).width
             }"
           />
+          <ng-container
+            *ngTemplateOutlet="
+              fallbackImage;
+              context: { attachment: attachmentContext }
+            "
+          ></ng-container>
         </ng-template>
       </ng-container>
       <ng-container *ngIf="isGallery(attachment)">
@@ -106,6 +114,7 @@
                 "
               >
                 <img
+                  *ngIf="!imageErrors.includes(galleryImage)"
                   #imgElement
                   [src]="
                     getImageAttachmentConfiguration(
@@ -114,6 +123,7 @@
                       imgElement
                     ).url
                   "
+                  (error)="imageErrors.push(galleryImage)"
                   [alt]="galleryImage.fallback"
                   [style.--original-height]="
                     getImageAttachmentConfiguration(
@@ -142,6 +152,12 @@
                     ).width
                   }"
                 />
+                <ng-container
+                  *ngTemplateOutlet="
+                    fallbackImage;
+                    context: { attachment: galleryImage }
+                  "
+                ></ng-container>
               </button>
               <button
                 #element
@@ -286,19 +302,10 @@
                 >
                   {{ attachmentContext.title }}
                 </div>
-                <!-- Temporary disabled, will be fixed with this: https://github.com/GetStream/stream-chat-angular/issues/393  -->
-                <!-- <a
-              class="str-chat__message-attachment-file--item-download"
-              data-testclass="file-link"
-              download
-              href="{{ attachment.asset_url }}"
-              target="_blank"
-            >
-              <stream-icon-placeholder
-                class="str-chat__message-attachment-download-icon"
-                icon="download"
-              ></stream-icon-placeholder>
-            </a> -->
+                <stream-icon-placeholder
+                  class="str-chat__message-attachment-download-icon"
+                  icon="download"
+                ></stream-icon-placeholder>
               </div>
               <span
                 class="str-chat__message-attachment-file--item-size"
@@ -514,3 +521,42 @@
     </button>
   </div>
 </ng-template>
+
+<ng-template #fallbackImage let-attachment="attachment">
+  <div
+    *ngIf="imageErrors.includes(attachment)"
+    class="str-chat__image-fallback"
+    data-testclass="str-chat__image-fallback"
+    title="{{ attachment.fallback }}"
+  >
+    <div class="str-chat__image-fallback__icon">
+      <stream-icon-placeholder icon="image-fallback"></stream-icon-placeholder>
+    </div>
+    <div
+      (click)="$event.stopPropagation()"
+      (keyup.enter)="$event.stopPropagation()"
+    >
+      <ng-container
+        *ngTemplateOutlet="
+          downloadIcon;
+          context: { url: getImageAttachmentConfiguration(attachment).url }
+        "
+      ></ng-container>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #downloadIcon let-url="url">
+  <a
+    class="str-chat__message-attachment-file--item-download"
+    data-testclass="file-link"
+    download
+    href="{{ url }}"
+    target="_blank"
+  >
+    <stream-icon-placeholder
+      class="str-chat__message-attachment-download-icon"
+      icon="download"
+    ></stream-icon-placeholder>
+  </a>
+</ng-template>

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.spec.ts

@@ -6,7 +6,10 @@ import { ChannelService } from '../channel.service';
 import { StreamI18nService } from '../stream-i18n.service';
 import { AttachmentListComponent } from './attachment-list.component';
 import { Attachment } from 'stream-chat';
-import { DefaultStreamChatGenerics } from '../types';
+import {
+  DefaultStreamChatGenerics,
+  ImageAttachmentConfiguration,
+} from '../types';
 import { AttachmentConfigurationService } from '../attachment-configuration.service';
 import { ThemeService } from '../theme.service';
 import { SimpleChange } from '@angular/core';
@@ -17,6 +20,7 @@ describe('AttachmentListComponent', () => {
   let nativeElement: HTMLElement;
   let queryAttachments: () => HTMLElement[];
   let queryImages: () => HTMLImageElement[];
+  let queryFallbackImages: () => HTMLElement[];
   let queryFileLinks: () => HTMLAnchorElement[];
   let queryFileNames: () => HTMLElement[];
   let queryUrlLinks: () => HTMLAnchorElement[];
@@ -58,6 +62,12 @@ describe('AttachmentListComponent', () => {
       );
     queryImages = () =>
       Array.from(nativeElement.querySelectorAll('[data-testclass="image"]'));
+    queryFallbackImages = () =>
+      Array.from(
+        nativeElement.querySelectorAll(
+          '[data-testclass="str-chat__image-fallback"]'
+        )
+      );
     queryFileLinks = () =>
       Array.from(
         nativeElement.querySelectorAll('[data-testclass="file-link"]')
@@ -964,4 +974,20 @@ describe('AttachmentListComponent', () => {
     expect(videoElements[0].src).toContain(attachments[0].asset_url);
     expect(videoElements[0].poster).toContain(attachments[0].thumb_url);
   });
+
+  it(`should display fallback image if image can't be displayed inline`, () => {
+    const attachment = { type: 'image', img_url: 'http://url1' };
+    component.attachments = [attachment];
+    component.ngOnChanges({ attachments: {} as SimpleChange });
+    component.imageErrors = [attachment];
+    component['attachmentConfigurations'] = new Map();
+    component['attachmentConfigurations'].set(attachment, {
+      url: 'http://url1',
+    } as ImageAttachmentConfiguration);
+    fixture.detectChanges();
+
+    expect(queryImages().length).toBe(0);
+
+    expect(queryFallbackImages().length).toBe(1);
+  });
 });

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts

@@ -57,6 +57,7 @@ export class AttachmentListComponent implements OnChanges {
   imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToViewCurrentIndex = 0;
   themeVersion: '1' | '2';
+  imageErrors: Attachment[] = [];
   @ViewChild('modalContent', { static: true })
   private modalContent!: TemplateRef<void>;
   private attachmentConfigurations: Map<
@@ -92,6 +93,7 @@ export class AttachmentListComponent implements OnChanges {
           ...this.attachments.filter((a) => this.isCard(a))
         );
       }
+      this.imageErrors = [];
     }
   }
 
@@ -202,13 +204,18 @@ export class AttachmentListComponent implements OnChanges {
 
   getImageAttachmentConfiguration(
     attachment: Attachment,
-    type: 'gallery' | 'single',
-    element: HTMLElement
+    type?: 'gallery' | 'single',
+    element?: HTMLElement
   ): ImageAttachmentConfiguration {
     const existingConfiguration = this.attachmentConfigurations.get(attachment);
     if (existingConfiguration) {
       return existingConfiguration as ImageAttachmentConfiguration;
     }
+    if (!type || !element) {
+      throw new Error(
+        'Provide HTTML element and type to get image attachment configuration'
+      );
+    }
     const configuration =
       this.attachmentConfigurationService.getImageAttachmentConfiguration(
         attachment,

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.html

@@ -167,7 +167,10 @@
           "
         ></ng-container>
         <img
-          *ngIf="attachmentUpload.url || attachmentUpload.previewUri"
+          *ngIf="
+            (attachmentUpload.url || attachmentUpload.previewUri) &&
+            !imagePreviewErrors.includes(attachmentUpload)
+          "
           src="{{
             attachmentUpload.url
               ? attachmentUpload.url
@@ -176,7 +179,20 @@
           alt="{{ attachmentUpload.file.name }}"
           class="str-chat__attachment-preview-thumbnail"
           data-testclass="attachment-image"
+          (error)="imagePreviewErrors.push(attachmentUpload)"
         />
+        <div
+          *ngIf="imagePreviewErrors.includes(attachmentUpload)"
+          class="str-chat__image-fallback"
+          data-testclass="str-chat__image-fallback"
+          title="{{ attachmentUpload.file.name }}"
+        >
+          <div class="str-chat__image-fallback__icon">
+            <stream-icon-placeholder
+              icon="image-fallback"
+            ></stream-icon-placeholder>
+          </div>
+        </div>
       </div>
       <div
         class="str-chat__attachment-preview-file"

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.spec.ts

@@ -10,6 +10,7 @@ describe('AttachmentPreviewListComponent', () => {
   let fixture: ComponentFixture<AttachmentPreviewListComponent>;
   let attachmentUploads$: Subject<AttachmentUpload[]>;
   let queryImagePreviews: () => HTMLElement[];
+  let queryImageFallbacks: () => HTMLElement[];
   let queryLoadingIndicators: () => HTMLElement[];
   let queryPreviewImages: () => HTMLImageElement[];
   let queryPreviewFiles: () => HTMLElement[];
@@ -46,6 +47,12 @@ describe('AttachmentPreviewListComponent', () => {
           '[data-testclass="attachment-file-preview"]'
         )
       );
+    queryImageFallbacks = () =>
+      Array.from(
+        nativeElement.querySelectorAll(
+          '[data-testclass="str-chat__image-fallback"]'
+        )
+      );
     component.attachmentUploads$ = attachmentUploads$;
     fixture.detectChanges();
   });
@@ -188,6 +195,7 @@ describe('AttachmentPreviewListComponent', () => {
     const previewImage = queryPreviewImages()[0];
 
     expect(previewImage.src).toContain(previewUri);
+    expect(queryImageFallbacks().length).toBe(0);
 
     const url = 'http://url/to/img';
     attachmentUploads$.next([{ file, state: 'success', url, type: 'image' }]);
@@ -196,6 +204,22 @@ describe('AttachmentPreviewListComponent', () => {
     expect(previewImage.src).toContain(url);
   });
 
+  it(`should display image fallback if preview isn't working`, () => {
+    const file = { name: 'my_image.png', type: 'image/png' } as File;
+    const attachmentUpload = {
+      file,
+      state: 'success' as 'success',
+      url: 'http://url/to/img',
+      type: 'image' as 'image',
+    };
+    attachmentUploads$.next([attachmentUpload]);
+    component.imagePreviewErrors = [attachmentUpload];
+    fixture.detectChanges();
+
+    expect(queryPreviewImages().length).toBe(0);
+    expect(queryImageFallbacks().length).toBe(1);
+  });
+
   it('should retry file upload', () => {
     const upload = {
       file: { name: 'contract.pdf', type: 'application/pdf' } as File,

projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts

@@ -1,7 +1,16 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Observable } from 'rxjs';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 import { ThemeService } from '../theme.service';
 import { AttachmentUpload } from '../types';
+import { Attachment } from 'stream-chat';
 
 /**
  * The `AttachmentPreviewList` component displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
@@ -11,7 +20,7 @@ import { AttachmentUpload } from '../types';
   templateUrl: './attachment-preview-list.component.html',
   styles: [],
 })
-export class AttachmentPreviewListComponent {
+export class AttachmentPreviewListComponent implements OnChanges, OnDestroy {
   /**
    * A stream that emits the current file uploads and their states
    */
@@ -25,10 +34,28 @@ export class AttachmentPreviewListComponent {
    */
   @Output() readonly deleteAttachment = new EventEmitter<AttachmentUpload>();
   themeVersion: '1' | '2';
+  imagePreviewErrors: Attachment[] = [];
+  private attachmentUploadsSubscription?: Subscription;
 
   constructor(themeService: ThemeService) {
     this.themeVersion = themeService.themeVersion;
   }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.attachmentUploads$) {
+      this.attachmentUploadsSubscription?.unsubscribe();
+      this.attachmentUploadsSubscription = this.attachmentUploads$?.subscribe(
+        (attachments) => {
+          if (attachments.length === 0) {
+            this.imagePreviewErrors = [];
+          }
+        }
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.attachmentUploadsSubscription?.unsubscribe();
+  }
 
   attachmentUploadRetried(file: File) {
     this.retryAttachmentUpload.emit(file);

projects/stream-chat-angular/src/lib/icon/icon.component.html

@@ -378,3 +378,14 @@
   />
   <path d="M13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="white" />
 </svg>
+<svg
+  *ngIf="icon === 'image-fallback'"
+  fill="none"
+  viewBox="0 0 18 18"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM11.14 8.86L8.14 12.73L6 10.14L3 14H15L11.14 8.86Z"
+    fill="#080707"
+  />
+</svg>

projects/stream-chat-angular/src/lib/icon/icon.component.ts

@@ -22,7 +22,8 @@ export type Icon =
   | 'attach'
   | 'unspecified-filetype'
   | 'download'
-  | 'error';
+  | 'error'
+  | 'image-fallback';
 
 /**
  * The `Icon` component can be used to display different icons (i. e. message delivered icon).