Merge pull request #400 from GetStream/ios-scroll-issues

Ios scroll issues

Author: szuperaz

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

@@ -645,6 +645,9 @@ describe('AttachmentListComponent', () => {
     });
 
     it('should open image viewer modal - single image', () => {
+      const imageModalSpy = jasmine.createSpy();
+      component.imageModalStateChange.subscribe(imageModalSpy);
+
       const attachment = {
         type: 'image',
         image_url: 'http://url1',
@@ -663,6 +666,7 @@ describe('AttachmentListComponent', () => {
       expect(component.imagesToViewCurrentIndex).toBe(0);
       expect(queryImageModalPrevButton()?.style.visibility).toBe('hidden');
       expect(queryImageModalNextButton()?.style.visibility).toBe('hidden');
+      expect(imageModalSpy).toHaveBeenCalledWith('opened');
     });
 
     it('should open image viewer modal - image gallery', () => {
@@ -773,19 +777,23 @@ describe('AttachmentListComponent', () => {
       expect(queryImageModalNextButton()?.style.visibility).toBe('hidden');
     });
 
-    // Will be part of modal implementation
-    // eslint-disable-next-line jasmine/no-disabled-tests
-    xit('should deselect images if modal is closed', () => {
+    it('should deselect images if modal is closed', () => {
+      const imageModalSpy = jasmine.createSpy();
+      component.imageModalStateChange.subscribe(imageModalSpy);
+      imageModalSpy.calls.reset();
       const attachment = {
         type: 'image',
         image_url: 'http://url1',
       };
+      component.attachments = [attachment];
+      component.ngOnChanges({ attachments: {} as SimpleChange });
       component.imagesToView = [attachment];
       fixture.detectChanges();
       queryImageModal().close();
       fixture.detectChanges();
 
       expect(component.imagesToView).toEqual([]);
+      expect(imageModalSpy).toHaveBeenCalledWith('closed');
     });
   });
 

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

@@ -1,8 +1,10 @@
 import {
   Component,
+  EventEmitter,
   HostBinding,
   Input,
   OnChanges,
+  Output,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -43,6 +45,12 @@ export class AttachmentListComponent implements OnChanges {
    * The attachments to display
    */
   @Input() attachments: Attachment<DefaultStreamChatGenerics>[] = [];
+  /**
+   * Emits the state of the image carousel window
+   */
+  @Output() readonly imageModalStateChange = new EventEmitter<
+    'opened' | 'closed'
+  >();
   @HostBinding() class = 'str-chat__attachment-list-angular-host';
   orderedAttachments: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
@@ -172,6 +180,7 @@ export class AttachmentListComponent implements OnChanges {
   }
 
   openImageModal(attachments: Attachment[], selectedIndex = 0) {
+    this.imageModalStateChange.next('opened');
     this.imagesToView = attachments;
     this.imagesToViewCurrentIndex = selectedIndex;
   }
@@ -268,6 +277,7 @@ export class AttachmentListComponent implements OnChanges {
   }
 
   private closeImageModal() {
+    this.imageModalStateChange.next('closed');
     this.imagesToView = [];
   }
 }

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

@@ -23,6 +23,10 @@
           replies' | translate:replyCountParam)}}
         </div>
       </li>
+      <stream-loading-indicator
+        data-testid="top-loading-indicator"
+        *ngIf="isLoading && direction === 'bottom-to-top'"
+      ></stream-loading-indicator>
       <li
         tabindex="0"
         data-testclass="message"
@@ -41,6 +45,10 @@
           "
         ></ng-container>
       </li>
+      <stream-loading-indicator
+        data-testid="bottom-loading-indicator"
+        *ngIf="isLoading && direction === 'top-to-bottom'"
+      ></stream-loading-indicator>
     </ul>
     <ng-template #defaultTypingIndicator let-usersTyping$="usersTyping$">
       <!-- eslint-disable-next-line @angular-eslint/template/no-any -->

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

@@ -40,6 +40,7 @@ describe('MessageListComponent', () => {
   let queryParentMessageReplyCount: () => HTMLElement | null;
   let queryTypingIndicator: () => HTMLElement | null;
   let queryTypingUsers: () => HTMLElement | null;
+  let queryLoadingIndicator: (pos: 'top' | 'bottom') => HTMLElement | null;
 
   beforeEach(() => {
     channelServiceMock = mockChannelService();
@@ -90,6 +91,8 @@ describe('MessageListComponent', () => {
       nativeElement.querySelector('[data-testid="typing-users"]');
     queryParentMessageReplyCount = () =>
       nativeElement.querySelector('[data-testid="reply-count"]');
+    queryLoadingIndicator = (pos: 'top' | 'bottom') =>
+      nativeElement.querySelector(`[data-testid="${pos}-loading-indicator"]`);
     TestBed.inject(StreamI18nService).setTranslation('en');
     fixture.detectChanges();
     const scrollContainer = queryScrollContainer()!;
@@ -870,4 +873,41 @@ describe('MessageListComponent', () => {
       );
     });
   });
+
+  it('should set isLoading flag', () => {
+    expect(component.isLoading).toBeFalse();
+
+    const scrollContainer = queryScrollContainer()!;
+    scrollContainer.scrollTo({ top: 0 });
+    scrollContainer.dispatchEvent(new Event('scroll'));
+    fixture.detectChanges();
+
+    expect(component.isLoading).toBeTrue();
+
+    channelServiceMock.activeChannelMessages$.next(generateMockMessages());
+
+    expect(component.isLoading).toBeFalse();
+  });
+
+  it('should display loading indicator', () => {
+    component.isLoading = false;
+    fixture.detectChanges();
+
+    expect(queryLoadingIndicator('top')).toBeNull();
+    expect(queryLoadingIndicator('bottom')).toBeNull();
+
+    component.direction = 'top-to-bottom';
+    component.isLoading = true;
+    fixture.detectChanges();
+
+    expect(queryLoadingIndicator('top')).toBeNull();
+    expect(queryLoadingIndicator('bottom')).not.toBeNull();
+
+    component.direction = 'bottom-to-top';
+    component.isLoading = true;
+    fixture.detectChanges();
+
+    expect(queryLoadingIndicator('top')).not.toBeNull();
+    expect(queryLoadingIndicator('bottom')).toBeNull();
+  });
 });

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

@@ -58,6 +58,7 @@ export class MessageListComponent
   lastSentMessageId: string | undefined;
   parentMessage: StreamMessage | undefined;
   highlightedMessageId: string | undefined;
+  isLoading = false;
   @ViewChild('scrollContainer')
   private scrollContainer!: ElementRef<HTMLElement>;
   @ViewChild('parentMessageElement')
@@ -276,6 +277,7 @@ export class MessageListComponent
       this.mode === 'main'
         ? void this.channelService.loadMoreMessages(direction)
         : void this.channelService.loadMoreThreadReplies(direction);
+      this.isLoading = true;
     }
     this.prevScrollTop = this.scrollContainer.nativeElement.scrollTop;
   }
@@ -346,6 +348,7 @@ export class MessageListComponent
         : this.channelService.activeThreadMessages$
     ).pipe(
       tap((messages) => {
+        this.isLoading = false;
         if (messages.length === 0) {
           return;
         }

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

@@ -163,25 +163,19 @@
             "
           ></ng-container>
         </div>
-        <div class="str-chat__message-bubble">
+        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->
+        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->
+        <div
+          class="str-chat__message-bubble"
+          style="transform: {{
+            imageAttachmentModalState === 'opened'
+              ? 'none'
+              : 'translate3d(0, 0, 0)'
+          }}"
+        >
           <ng-container *ngIf="hasAttachment && !message?.quoted_message">
-            <ng-template
-              #defaultAttachments
-              let-messageId="messageId"
-              let-attachments="attachments"
-              let-parentMessageId="parentMessageId"
-            >
-              <stream-attachment-list
-                [messageId]="messageId"
-                [attachments]="attachments"
-                [parentMessageId]="parentMessageId"
-              ></stream-attachment-list>
-            </ng-template>
             <ng-container
-              *ngTemplateOutlet="
-                attachmentListTemplate || defaultAttachments;
-                context: getAttachmentListContext()
-              "
+              *ngTemplateOutlet="attachmentsTemplate"
             ></ng-container>
           </ng-container>
           <div
@@ -209,11 +203,11 @@
               "
             >
               <ng-container *ngTemplateOutlet="quotedMessage"></ng-container>
-              <stream-attachment-list
-                *ngIf="hasAttachment && message?.quoted_message"
-                [attachments]="message!.attachments!"
-                [messageId]="message!.id"
-              ></stream-attachment-list>
+              <ng-container *ngIf="hasAttachment && message?.quoted_message">
+                <ng-container
+                  *ngTemplateOutlet="attachmentsTemplate"
+                ></ng-container>
+              </ng-container>
               <div
                 data-testid="client-error-message"
                 *ngIf="message?.type === 'error'"
@@ -365,11 +359,13 @@
           let-messageId="messageId"
           let-attachments="attachments"
           let-parentMessageId="parentMessageId"
+          let-imageModalStateChangeHandler="imageModalStateChangeHandler"
         >
           <stream-attachment-list
             [messageId]="messageId"
             [attachments]="attachments"
             [parentMessageId]="parentMessageId"
+            (imageModalStateChange)="imageModalStateChangeHandler($event)"
           ></stream-attachment-list>
         </ng-template>
         <ng-container
@@ -623,3 +619,26 @@
     </button>
   </div>
 </ng-template>
+
+<ng-template #attachmentsTemplate>
+  <ng-template
+    #defaultAttachments
+    let-messageId="messageId"
+    let-attachments="attachments"
+    let-parentMessageId="parentMessageId"
+    let-imageModalStateChangeHandler="imageModalStateChangeHandler"
+  >
+    <stream-attachment-list
+      [messageId]="messageId"
+      [attachments]="attachments"
+      [parentMessageId]="parentMessageId"
+      (imageModalStateChange)="imageModalStateChangeHandler($event)"
+    ></stream-attachment-list>
+  </ng-template>
+  <ng-container
+    *ngTemplateOutlet="
+      attachmentListTemplate || defaultAttachments;
+      context: getAttachmentListContext()
+    "
+  ></ng-container>
+</ng-template>

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

@@ -89,6 +89,7 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   popperPlacementAuto = NgxPopperjsPlacements.AUTO;
   shouldDisplayTranslationNotice = false;
   displayedMessageTextContent: 'original' | 'translation' = 'original';
+  imageAttachmentModalState: 'opened' | 'closed' = 'closed';
   private quotedMessageAttachments: Attachment[] | undefined;
   private user: UserResponse<DefaultStreamChatGenerics> | undefined;
   private subscriptions: Subscription[] = [];
@@ -258,6 +259,8 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
       messageId: this.message?.id || '',
       attachments: this.message?.attachments || [],
       parentMessageId: this.message?.parent_id,
+      imageModalStateChangeHandler: (state) =>
+        (this.imageAttachmentModalState = state),
     };
   }
 

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

@@ -162,6 +162,7 @@ export type AttachmentListContext = {
   messageId: string;
   attachments: Attachment<DefaultStreamChatGenerics>[];
   parentMessageId?: string;
+  imageModalStateChangeHandler?: (state: 'opened' | 'closed') => {};
 };
 
 export type AvatarType = 'channel' | 'user';