in progress

Author: szuperaz

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

@@ -228,7 +228,7 @@ export class AttachmentConfigurationService<
       sizeRestriction = undefined;
       if (displayWarning) {
         console.warn(
-          `Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing`
+          `Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing, attachment URL: ${url}`
         );
       }
     }

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

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { ModalComponent } from '../modal/modal.component';
@@ -46,10 +51,12 @@ describe('AttachmentListComponent', () => {
     TestBed.inject(StreamI18nService).setTranslation();
   });
 
-  beforeEach(() => {
+  beforeEach(fakeAsync(() => {
     fixture = TestBed.createComponent(AttachmentListComponent);
     component = fixture.componentInstance;
     nativeElement = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+    tick();
     queryAttachments = () =>
       Array.from(
         nativeElement.querySelectorAll(
@@ -70,7 +77,6 @@ describe('AttachmentListComponent', () => {
       Array.from(nativeElement.querySelectorAll('[data-testclass="url-link"]'));
     queryCardImages = () =>
       Array.from(nativeElement.querySelectorAll('[data-testclass="card-img"]'));
-    fixture.detectChanges();
     queryActions = () =>
       Array.from(
         nativeElement.querySelectorAll('[data-testclass="attachment-action"]')
@@ -102,7 +108,7 @@ describe('AttachmentListComponent', () => {
           '[data-testclass="video-attachment-parent"]'
         )
       );
-  });
+  }));
 
   it('should display received #attachments ordered', () => {
     component.attachments = [];

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

@@ -1,6 +1,5 @@
 import {
   AfterViewInit,
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   HostBinding,
@@ -73,7 +72,6 @@ export class AttachmentListComponent implements OnChanges, AfterViewInit {
     public readonly customTemplatesService: CustomTemplatesService,
     private channelService: ChannelService,
     private attachmentConfigurationService: AttachmentConfigurationService,
-    private cdRef: ChangeDetectorRef,
     themeService: ThemeService
   ) {
     this.themeVersion = themeService.themeVersion;
@@ -99,8 +97,10 @@ export class AttachmentListComponent implements OnChanges, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.isInited = true;
-    this.cdRef.detectChanges();
+    // Wait next tick to make sure CSS rules are properly applied
+    setTimeout(() => {
+      this.isInited = true;
+    }, 0);
   }
 
   trackByUrl(_: number, attachment: Attachment) {

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

@@ -178,10 +178,16 @@ export class MessageListComponent
           } else {
             this.lastReadMessageId = undefined;
           }
+          this.cdRef.detectChanges();
         }
         const capabilites = channel?.data?.own_capabilities as string[];
-        if (capabilites) {
-          this.enabledMessageActions = capabilites;
+        const capabilitesString = [...(capabilites || [])].sort().join('');
+        const enabledActionsString = [...(this.enabledMessageActions || [])]
+          .sort()
+          .join('');
+        if (capabilitesString !== enabledActionsString) {
+          this.enabledMessageActions = capabilites || [];
+          this.cdRef.detectChanges();
         }
         this.newMessageSubscription?.unsubscribe();
         if (channel) {
@@ -201,7 +207,6 @@ export class MessageListComponent
             });
           });
         }
-        this.cdRef.detectChanges();
       })
     );
     this.subscriptions.push(
@@ -700,6 +705,7 @@ export class MessageListComponent
       if (this.isUserScrolled) {
         this.unreadMessageCount++;
       }
+      this.cdRef.detectChanges();
     }
   }