Remove device-width API and mobile-press class from message component

projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.spec.ts

@@ -50,17 +50,6 @@ describe('ChannelListToggleService', () => {
     expect(spy).toHaveBeenCalledOnceWith(false);
   });
 
-  it(`shouldn't set state to closed, if active channel changed, but no on mobile`, () => {
-    spyOnProperty(window, 'innerWidth').and.returnValue(1000);
-    service.open();
-    const spy = jasmine.createSpy();
-    service.isOpen$.subscribe(spy);
-    spy.calls.reset();
-    service.channelSelected();
-
-    expect(spy).not.toHaveBeenCalled();
-  });
-
   it(`shouldn't emit the same state twice`, () => {
     const spy = jasmine.createSpy();
     service.isOpen$.subscribe(spy);
@@ -72,7 +61,7 @@ describe('ChannelListToggleService', () => {
     expect(spy).toHaveBeenCalledOnceWith(true);
   });
 
-  it('should watch for outside clicks, if menu is opened on mobile', () => {
+  it('should watch for outside clicks, if menu is opened', () => {
     spyOnProperty(window, 'innerWidth').and.returnValue(300);
     service.setMenuElement({} as HTMLElement);
     service.open();
@@ -99,12 +88,4 @@ describe('ChannelListToggleService', () => {
       jasmine.any(Function)
     );
   });
-
-  it(`shouldn't watch for outside clicks, if menu is opened, but not on mobile`, () => {
-    spyOnProperty(window, 'innerWidth').and.returnValue(1000);
-    service.setMenuElement({} as HTMLElement);
-    service.open();
-
-    expect(addEventListenerSpy).not.toHaveBeenCalled();
-  });
 });

projects/stream-chat-angular/src/lib/channel-list/channel-list-toggle.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, first } from 'rxjs/operators';
-import { getDeviceWidth } from '../device-width';
 
 /**
  * The `ChannelListToggleService` can be used to toggle the channel list.
@@ -22,9 +21,7 @@ export class ChannelListToggleService {
       .asObservable()
       .pipe(distinctUntilChanged());
     this.isOpen$.pipe(filter((s) => s)).subscribe(() => {
-      if (getDeviceWidth().device === 'mobile') {
-        this.watchForOutsideClicks();
-      }
+      this.watchForOutsideClicks();
     });
   }
 
@@ -61,9 +58,7 @@ export class ChannelListToggleService {
    * This method should be called if a channel was selected, if on mobile, the channel list will be closed.
    */
   channelSelected() {
-    if (getDeviceWidth().device === 'mobile') {
-      this.close();
-    }
+    this.close();
   }
 
   private watchForOutsideClicks() {

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

@@ -8,7 +8,6 @@
   [class.str-chat__message--me]="isSentByCurrentUser"
   [class.str-chat__message--other]="!isSentByCurrentUser"
   [class.str-chat__message-simple--me]="isSentByCurrentUser"
-  [class.mobile-press]="isPressedOnMobile"
   [class.str-chat__message--has-attachment]="hasAttachment"
   [class.str-chat__message--with-reactions]="hasReactions"
   [class.str-chat__message-with-thread-link]="shouldDisplayThreadLink"
@@ -182,7 +181,11 @@
               "
             ></ng-container>
           </ng-container>
-          <div class="str-chat__message-text" *ngIf="message?.text">
+          <div
+            class="str-chat__message-text"
+            tabindex="0"
+            *ngIf="message?.text"
+          >
             <div
               data-testid="inner-message"
               class="
@@ -233,11 +236,7 @@
                   ) | translate
                 }}
               </div>
-              <div
-                (click)="textClicked()"
-                (keyup.enter)="textClicked()"
-                data-testid="text"
-              >
+              <div data-testid="text">
                 <p>
                   <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->
                   <ng-container *ngFor="let part of messageTextParts">

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

@@ -537,34 +537,6 @@ describe('MessageComponent', () => {
     expect(messageActionsBoxComponent.message).toBe(message);
   });
 
-  it('should add CSS class if text is clicked on mobile', () => {
-    expect(component.isPressedOnMobile).toBeFalse();
-    spyOnProperty(window, 'innerWidth').and.returnValue(300);
-    const text = queryText();
-    text?.click();
-    fixture.detectChanges();
-
-    expect(component.isPressedOnMobile).toBeTrue();
-    expect(queryContainer()?.classList.contains('mobile-press')).toBeTrue();
-  });
-
-  it('should remove CSS class after message is deselected', () => {
-    component.isPressedOnMobile = false;
-    fixture.detectChanges();
-
-    expect(queryContainer()?.classList.contains('mobile-press')).toBeFalse();
-  });
-
-  it(`shouldn't add CSS class if text was clicked on desktop`, () => {
-    spyOnProperty(window, 'innerWidth').and.returnValue(1200);
-    const text = queryText();
-    text?.click();
-    fixture.detectChanges();
-
-    expect(component.isPressedOnMobile).toBeFalse();
-    expect(queryContainer()?.classList.contains('mobile-press')).toBeFalse();
-  });
-
   it('should display attachment if message has attachment', () => {
     expect(
       queryContainer()?.classList.contains('str-chat__message--has-attachment')

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

@@ -13,7 +13,6 @@ import {
 import { UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
-import { getDeviceWidth } from '../device-width';
 import {
   AttachmentListContext,
   MentionTemplateContext,
@@ -66,7 +65,6 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
   isEditing: boolean | undefined;
   isActionBoxOpen = false;
   isReactionSelectorOpen = false;
-  isPressedOnMobile = false;
   visibleMessageActionsCount = 0;
   messageTextParts: MessagePart[] = [];
   mentionTemplate: TemplateRef<MentionTemplateContext> | undefined;
@@ -240,24 +238,6 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
     void this.channelService.resendMessage(this.message!);
   }
 
-  textClicked() {
-    if (getDeviceWidth().device !== 'mobile') {
-      this.isPressedOnMobile = false;
-      return;
-    }
-    if (this.isPressedOnMobile) {
-      return;
-    }
-    this.isPressedOnMobile = true;
-    const eventHandler = (event: Event) => {
-      if (!this.container?.nativeElement.contains(event.target as Node)) {
-        this.isPressedOnMobile = false;
-        window.removeEventListener('click', eventHandler);
-      }
-    };
-    window.addEventListener('click', eventHandler);
-  }
-
   setAsActiveParentMessage() {
     void this.channelService.setAsActiveParentMessage(this.message);
   }

projects/stream-chat-angular/src/public-api.ts

@@ -42,7 +42,6 @@ export * from './lib/modal/modal.component';
 export * from './lib/read-by';
 export * from './lib/is-image-attachment';
 export * from './lib/is-image-file';
-export * from './lib/device-width';
 export * from './lib/message-preview';
 export * from './lib/notification.service';
 export * from './lib/transliteration.service';