feat: Support for video attachments #231

Author: szuperaz

docusaurus/docs/Angular/components/AttachmentListComponent.mdx

@@ -3,6 +3,7 @@ import AttachmentsScreenshot from "../assets/attachments-screenshot.png";
 The `AttachmentList` compontent displays the attachments of a message. The following attachments are supported:
 
 - Images (including GIFs) are displayed inline
+- Videos are displayed inline
 - Other files can be downloaded
 - Links in a message are enriched with built-in open graph URL scraping
 

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

@@ -74,6 +74,18 @@
         </button>
       </ng-container>
     </div>
+    <video
+      *ngIf="isVideo(attachment)"
+      controls
+      data-testclass="video-attachment"
+      [src]="attachment.asset_url"
+      style="
+        width: 100%;
+        max-width: 400px;
+        height: 300px;
+        border-radius: inherit;
+      "
+    ></video>
     <div
       *ngIf="isFile(attachment)"
       class="

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

@@ -24,6 +24,7 @@ describe('AttachmentListComponent', () => {
   let queryImageModalPrevButton: () => HTMLButtonElement | null;
   let queryImageModalNextButton: () => HTMLButtonElement | null;
   let queryGallery: () => HTMLElement | null;
+  let queryVideos: () => HTMLVideoElement[];
   let sendAction: jasmine.Spy;
 
   const waitForImgComplete = () => {
@@ -92,6 +93,10 @@ describe('AttachmentListComponent', () => {
       ) as HTMLButtonElement;
     queryGallery = () =>
       nativeElement.querySelector('[data-testid="image-gallery"]');
+    queryVideos = () =>
+      Array.from(
+        nativeElement.querySelectorAll('[data-testclass="video-attachment"]')
+      );
   });
 
   it('should display received #attachments ordered', () => {
@@ -126,26 +131,26 @@ describe('AttachmentListComponent', () => {
         title_link: 'https://giphy.com/gifs/game-point-Eq5pb4dR4DJQc',
         type: 'giphy',
       },
+      {
+        type: 'video',
+        asset_url: 'url6',
+      },
     ];
     component.ngOnChanges();
     fixture.detectChanges();
     const attachments = queryAttachments();
 
-    expect(attachments.length).toBe(5);
+    expect(attachments.length).toBe(6);
     expect(
       attachments[0].classList.contains('str-chat__message-attachment--image')
     ).toBeTrue();
 
     expect(
-      attachments[1].classList.contains('str-chat__message-attachment--file')
+      attachments[1].classList.contains('str-chat__message-attachment--video')
     ).toBeTrue();
 
     expect(
-      attachments[1].classList.contains('str-chat__message-attachment--image')
-    ).toBeFalse();
-
-    expect(
-      attachments[2].classList.contains('str-chat__message-attachment--card')
+      attachments[2].classList.contains('str-chat__message-attachment--file')
     ).toBeTrue();
 
     expect(
@@ -156,19 +161,28 @@ describe('AttachmentListComponent', () => {
       attachments[3].classList.contains('str-chat__message-attachment--card')
     ).toBeTrue();
 
+    expect(
+      attachments[3].classList.contains('str-chat__message-attachment--image')
+    ).toBeFalse();
+
     expect(
       attachments[4].classList.contains('str-chat__message-attachment--card')
     ).toBeTrue();
 
     expect(
-      attachments[4].classList.contains('str-chat__message-attachment--giphy')
+      attachments[5].classList.contains('str-chat__message-attachment--card')
+    ).toBeTrue();
+
+    expect(
+      attachments[5].classList.contains('str-chat__message-attachment--giphy')
     ).toBeTrue();
 
     expect(queryImages().length).toBe(1);
     expect(queryFileLinks().length).toBe(1);
     expect(queryUrlLinks().length).toBe(3);
     expect(queryCardImages().length).toBe(3);
     expect(queryActions().length).toBe(0);
+    expect(queryVideos().length).toBe(1);
   });
 
   it('should create gallery', () => {
@@ -763,4 +777,23 @@ describe('AttachmentListComponent', () => {
       expect(component.imagesToView).toEqual([]);
     });
   });
+
+  it(`shouldn't display video links as video attachments`, () => {
+    const attachment = {
+      asset_url: 'https://www.youtube.com/watch?v=m4-HM_sCvtQ',
+      author_name: 'YouTube',
+      image_url: 'https://i.ytimg.com/vi/m4-HM_sCvtQ/mqdefault.jpg',
+      og_scrape_url: 'https://www.youtube.com/watch?v=m4-HM_sCvtQ',
+      text: "Java is one of the most successful and most dreaded technologies in the computer science world. Let's roast this powerful open-source programming language to find out why it has so many haters. \n\n#java #programming #comedy #100SecondsOfCode\n\n🔗 Resources\n\nJava Website https://java.com\nJava in 100 Seconds https://youtu.be/l9AzO1FMgM8\nWhy Java Sucks https://tech.jonathangardner.net/wiki/Why_Java_Sucks\nWhy Java Doesn't Suck https://smartbear.com/blog/please-stop-staying-java-sucks/\n\n🔥 Get More Content - Upgrade to PRO\n\nUpgrade to Fireship PRO at https://fireship.io/pro\nUse code lORhwXd2 for ...",
+      thumb_url: 'https://i.ytimg.com/vi/m4-HM_sCvtQ/mqdefault.jpg',
+      title: 'Java for the Haters in 100 Seconds',
+      title_link: 'https://www.youtube.com/watch?v=m4-HM_sCvtQ',
+      type: 'video',
+    };
+    component.attachments = [attachment];
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    expect(queryVideos().length).toBe(0);
+  });
 });

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

@@ -47,6 +47,7 @@ export class AttachmentListComponent implements OnChanges {
     const containsGallery = images.length >= 2;
     this.orderedAttachments = [
       ...(containsGallery ? this.createGallery(images) : images),
+      ...this.attachments.filter((a) => this.isVideo(a)),
       ...this.attachments.filter((a) => this.isFile(a)),
       ...this.attachments.filter((a) => this.isCard(a)),
     ];
@@ -68,6 +69,14 @@ export class AttachmentListComponent implements OnChanges {
     return attachment.type === 'gallery';
   }
 
+  isVideo(attachment: Attachment) {
+    return (
+      attachment.type === 'video' &&
+      attachment.asset_url &&
+      !attachment.og_scrape_url // links from video share services (such as YouTube or Facebook) are can't be played
+    );
+  }
+
   isCard(attachment: Attachment) {
     return (
       !attachment.type ||

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

@@ -54,7 +54,9 @@
     </div>
     <div
       class="rfu-file-previewer"
-      *ngIf="attachmentUpload.type === 'file'"
+      *ngIf="
+        attachmentUpload.type === 'file' || attachmentUpload.type === 'video'
+      "
       data-testclass="attachment-file-preview"
     >
       <ol>

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

@@ -309,4 +309,16 @@ describe('AttachmentPreviewListComponent', () => {
 
     expect(event.preventDefault).toHaveBeenCalledWith();
   });
+
+  it('should display video files as file attachments', () => {
+    const upload = {
+      file: { name: 'cute-video.mp4', type: 'video/mp4' } as File,
+      state: 'success',
+      type: 'video',
+    } as AttachmentUpload;
+    attachmentUploads$.next([upload]);
+    fixture.detectChanges();
+
+    expect(queryPreviewFiles().length).toBe(1);
+  });
 });

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

@@ -188,18 +188,26 @@ describe('AttachmentService', () => {
       { type: 'image/vnd.adobe.photoshop' },
       { type: 'plain/text' },
     ];
-    const files = [...imageFiles, ...dataFiles];
+    const videoFiles = [
+      { type: 'video/quicktime' },
+      { type: 'video/x-msvideo' },
+    ];
+    const files = [...imageFiles, ...dataFiles, ...videoFiles];
     uploadAttachmentsSpy.and.resolveTo([
       { file: imageFiles[0], state: 'success', url: 'url1', type: 'image' },
       { file: imageFiles[1], state: 'success', url: 'url2', type: 'image' },
       { file: dataFiles[0], state: 'success', url: 'url3', type: 'file' },
       { file: dataFiles[1], state: 'success', url: 'url4', type: 'file' },
+      { file: videoFiles[0], state: 'success', url: 'url5', type: 'video' },
+      { file: videoFiles[1], state: 'success', url: 'url6', type: 'video' },
     ]);
     void service.filesSelected(files as any as FileList);
 
     expect(uploadAttachmentsSpy).toHaveBeenCalledWith([
       { file: imageFiles[0], type: 'image', state: 'uploading' },
       { file: imageFiles[1], type: 'image', state: 'uploading' },
+      { file: videoFiles[0], type: 'video', state: 'uploading' },
+      { file: videoFiles[1], type: 'video', state: 'uploading' },
       { file: dataFiles[0], type: 'file', state: 'uploading' },
       { file: dataFiles[1], type: 'file', state: 'uploading' },
     ]);

projects/stream-chat-angular/src/lib/attachment.service.ts

@@ -55,10 +55,13 @@ export class AttachmentService {
     }
     const imageFiles: File[] = [];
     const dataFiles: File[] = [];
+    const videoFiles: File[] = [];
 
     Array.from(fileList).forEach((file) => {
       if (isImageFile(file)) {
         imageFiles.push(file);
+      } else if (file.type.startsWith('video/')) {
+        videoFiles.push(file);
       } else {
         dataFiles.push(file);
       }
@@ -70,6 +73,11 @@ export class AttachmentService {
         state: 'uploading' as 'uploading',
         type: 'image' as 'image',
       })),
+      ...videoFiles.map((file) => ({
+        file,
+        state: 'uploading' as 'uploading',
+        type: 'video' as 'video',
+      })),
       ...dataFiles.map((file) => ({
         file,
         state: 'uploading' as 'uploading',

projects/stream-chat-angular/src/lib/types.ts

@@ -76,7 +76,7 @@ export type AttachmentUpload = {
   file: File;
   state: 'error' | 'success' | 'uploading';
   url?: string;
-  type: 'image' | 'file';
+  type: 'image' | 'file' | 'video';
   previewUri?: string | ArrayBuffer;
 };