perf: Remove ngx-emoji-mart

Author: szuperaz

angular.json

@@ -108,7 +108,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1.5mb"
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",

package-lock.json

@@ -76,7 +76,6 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
-    "@ctrl/ngx-emoji-mart": "^6.0.1",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@stream-io/transliterate": "^1.5.2",

package.json

@@ -8,7 +8,6 @@
   "allowedNonPeerDependencies": [
     "angular-mentions",
     "dayjs",
-    "@ctrl/ngx-emoji-mart",
     "@stream-io/transliterate",
     "uuidv4",
     "pretty-bytes"

projects/stream-chat-angular/ng-package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",
-    "@ctrl/ngx-emoji-mart": "^6.0.1",
     "@stream-io/transliterate": "^1.5.2",
     "dayjs": "^1.10.7",
     "pretty-bytes": "^5.6.0",

projects/stream-chat-angular/package.json

@@ -12,10 +12,9 @@
       "
       data-testclass="emoji"
     >
-      <ngx-emoji
-        emoji="{{ getEmojiNameByReaction(reactionType) }}"
-        [size]="16"
-      ></ngx-emoji>
+      <span class="emoji">
+        {{ getEmojiByReaction(reactionType) }}
+      </span>
       &nbsp;
     </li>
     <li>
@@ -79,10 +78,9 @@
           [size]="20"
         ></stream-avatar>
       </div>
-      <ngx-emoji
-        emoji="{{ getEmojiNameByReaction(reactionType) }}"
-        [size]="20"
-      ></ngx-emoji>
+      <span class="emoji" style="width: 20px; height: 20px; top: 10px">
+        {{ getEmojiByReaction(reactionType) }}
+      </span>
       <span
         *ngIf="
           messageReactionCounts[reactionType] &&

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

@@ -12,7 +12,6 @@ import {
   MessageReactionType,
   MessageReactionsComponent,
 } from './message-reactions.component';
-import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import { ChannelService } from '../channel.service';
 import { SimpleChange } from '@angular/core';
 
@@ -42,7 +41,6 @@ describe('MessageReactionsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [EmojiModule],
       declarations: [MessageReactionsComponent, AvatarComponent],
       providers: [{ provide: ChannelService, useValue: channelServiceMock }],
     }).compileComponents();

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

@@ -23,17 +23,17 @@ export type MessageReactionType =
   | 'wow';
 
 const emojiReactionsMapping: { [key in MessageReactionType]: string } = {
-  like: 'thumbsup',
-  angry: 'angry',
-  love: 'heart',
-  haha: 'joy',
-  wow: 'open_mouth',
-  sad: 'disappointed',
+  like: '👍',
+  angry: '😠',
+  love: '❤️',
+  haha: '😂',
+  wow: '😮',
+  sad: '😞',
 };
 @Component({
   selector: 'stream-message-reactions',
   templateUrl: './message-reactions.component.html',
-  styles: [],
+  styles: ['.emoji {position: relative; display: inline-block; }'],
 })
 export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
   @Input() messageId: string | undefined;
@@ -101,7 +101,7 @@ export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
       ?.user;
   }
 
-  getEmojiNameByReaction(reactionType: MessageReactionType) {
+  getEmojiByReaction(reactionType: MessageReactionType) {
     return emojiReactionsMapping[reactionType];
   }
 

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

@@ -12,7 +12,6 @@ import { IconComponent } from './icon/icon.component';
 import { MessageActionsBoxComponent } from './message-actions-box/message-actions-box.component';
 import { AttachmentListComponent } from './attachment-list/attachment-list.component';
 import { MessageReactionsComponent } from './message-reactions/message-reactions.component';
-import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import { NotificationComponent } from './notification/notification.component';
 import { NotificationListComponent } from './notification-list/notification-list.component';
 import { TranslateModule } from '@ngx-translate/core';
@@ -43,7 +42,7 @@ import { StreamAvatarModule } from './stream-avatar.module';
     TextareaDirective,
     HighlightMentionsPipe,
   ],
-  imports: [CommonModule, EmojiModule, TranslateModule, StreamAvatarModule],
+  imports: [CommonModule, TranslateModule, StreamAvatarModule],
   exports: [
     ChannelComponent,
     ChannelHeaderComponent,