emojis functionnal in user names

src/app/app.module.ts

@@ -56,6 +56,7 @@ import { DirectMessagesComponent } from './components/floating-column/manage-acc
 import { MentionsComponent } from './components/floating-column/manage-account/mentions/mentions.component';
 import { NotificationsComponent } from './components/floating-column/manage-account/notifications/notifications.component';
 import { SettingsState } from './states/settings.state';
+import { AccountEmojiPipe } from './pipes/account-emoji.pipe';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -100,7 +101,8 @@ const routes: Routes = [
     FavoritesComponent,
     DirectMessagesComponent,
     MentionsComponent,
-    NotificationsComponent
+    NotificationsComponent,
+    AccountEmojiPipe
   ],
   imports: [
     FontAwesomeModule,

src/app/components/stream/status/status.component.html

@@ -1,14 +1,12 @@
 <div class="reblog" *ngIf="reblog">
-    <a class="reblog__profile-link" href (click)="openAccount(status.account)">{{ status.account.display_name }} <img
+    <a class="reblog__profile-link" href (click)="openAccount(status.account)"><span innerHTML="{{ status.account | accountEmoji }}"></span> <img *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
-            *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
 </div>
 <div *ngIf="notificationType === 'favourite'">
     <div class="notification--icon">
         <fa-icon class="favorite" [icon]="faStar"></fa-icon>
     </div>
     <div class="notification--label">
-        <a href class="notification--link"
+        <a href class="notification--link" (click)="openAccount(notificationAccount)" innerHTML="{{ notificationAccount  | accountEmoji }}"></a> favorited your status
-            (click)="openAccount(notificationAccount)">{{ notificationAccount.display_name }}</a> favorited your status
     </div>
 </div>
 <div *ngIf="notificationType === 'reblog'">
@@ -16,7 +14,7 @@
         <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
     </div>
     <div class="notification--label">
-        <a href class="notification--link" (click)="openAccount(notificationAccount)">{{ notificationAccount.display_name }}</a> boosted your status
+        <a href class="notification--link" (click)="openAccount(notificationAccount)" innerHTML="{{ notificationAccount | accountEmoji }}"></a> boosted your status
     </div>
 </div>
 <div class="status">
@@ -29,7 +27,7 @@
             <img *ngIf="notificationAccount" class="notification--avatar" src="{{ notificationAccount.avatar }}" />
             <span class="status__name">
                 <span class="status__name--displayname"
-                    innerHTML="{{statusAccountName}}"></span><span
+                    innerHTML="{{displayedStatus.account | accountEmoji}}"></span><span
                     class="status__name--username">{{displayedStatus.account.acct}}</span>
             </span>
         </a>

src/app/components/stream/status/status.component.ts

@@ -20,7 +20,7 @@ export class StatusComponent implements OnInit {
 
     displayedStatus: Status;
 
-    statusAccountName: string;
+    // statusAccountName: string;
     statusContent: string;
 
     reblog: boolean;
@@ -67,11 +67,9 @@ export class StatusComponent implements OnInit {
             this.hasAttachments = true;
         }
 
-
         // const instanceUrl = 'https://' + this.status.uri.split('https://')[1].split('/')[0];
-
+        // this.statusAccountName = this.emojiConverter.applyEmojis(this.displayedStatus.account.emojis, this.displayedStatus.account.display_name, EmojiTypeEnum.small);
-        this.statusAccountName = this.emojiConverter.applyEmojis(this.displayedStatus.account.emojis, this.displayedStatus.account.display_name, EmojiTypeEnum.small,  this.status.uri);
+        this.statusContent = this.emojiConverter.applyEmojis(this.displayedStatus.emojis, this.displayedStatus.content, EmojiTypeEnum.medium);
-        this.statusContent = this.emojiConverter.applyEmojis(this.displayedStatus.emojis, this.displayedStatus.content, EmojiTypeEnum.medium,  this.status.uri);
     }
     get statusWrapper(): StatusWrapper {
         return this._statusWrapper;

src/app/pipes/account-emoji.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { AccountEmojiPipe } from './account-emoji.pipe';
+
+describe('AccountEmojiPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AccountEmojiPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/account-emoji.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { EmojiConverter, EmojiTypeEnum } from '../tools/emoji.tools';
+import { Account } from '../services/models/mastodon.interfaces';
+
+@Pipe({
+  name: "accountEmoji"
+})
+export class AccountEmojiPipe implements PipeTransform {
+  private emojiConverter = new EmojiConverter();
+
+  transform(value: Account, args?: any): any {
+    return this.emojiConverter.applyEmojis(value.emojis, value.display_name, EmojiTypeEnum.small)
+  }
+}

src/app/tools/emoji.tools.ts

@@ -1,41 +1,54 @@
-import { Emoji } from '../services/models/mastodon.interfaces';
+import { Emoji } from "../services/models/mastodon.interfaces";
-import * as EmojiOne from 'emojione';
+import * as EmojiOne from "emojione";
 
 export class EmojiConverter {
-    applyEmojis(emojis: Emoji[], text: string, type: EmojiTypeEnum, url: string): string {
+  applyEmojis(emojis: Emoji[], text: string, type: EmojiTypeEnum): string {
-        //const instanceUrl = 'https://' + url.split('https://')[1].split('/')[0];
+    //const instanceUrl = 'https://' + url.split('https://')[1].split('/')[0];
+    if(!text) return text;
 
-        let className = 'emoji-small';
+    let className = "emoji-small";
-        if (type === EmojiTypeEnum.medium) {
+    if (type === EmojiTypeEnum.medium) {
-            className = 'emoji-medium';
+      className = "emoji-medium";
-        }
-
-        emojis.forEach(emoji => {
-            text = text.replace(`:${emoji.shortcode}:`, `<img class="${className}" src="${emoji.url}" title=":${emoji.shortcode}:" alt=":${emoji.shortcode}:" />`);
-        });
-
-        text = EmojiOne.toImage(text);
-
-        while (text.includes('class="emojione"')) {
-            text = text.replace('class="emojione"', `class="emojione ${className}"`);
-        }
-
-        //FIXME: clean up this mess...
-        // while (text.includes('https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/')) {
-        //     text = text.replace('https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/', instanceUrl + '/emoji/');
-        //     text = text.replace('.png', '.svg');
-        // }
-
-        while (text.includes('https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/')) {
-            text = text.replace('https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/', 'assets/emoji/72x72/');
-            // text = text.replace('.png', '.svg');
-        }
-
-        return text;
     }
+
+    if (emojis) {
+      emojis.forEach(emoji => {
+        text = text.replace(
+          `:${emoji.shortcode}:`,
+          `<img class="${className}" src="${emoji.url}" title=":${
+            emoji.shortcode
+          }:" alt=":${emoji.shortcode}:" />`
+        );
+      });
+    }
+
+    text = EmojiOne.toImage(text);
+
+    while (text.includes('class="emojione"')) {
+      text = text.replace('class="emojione"', `class="emojione ${className}"`);
+    }
+
+    //FIXME: clean up this mess...
+    // while (text.includes('https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/')) {
+    //     text = text.replace('https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/', instanceUrl + '/emoji/');
+    //     text = text.replace('.png', '.svg');
+    // }
+
+    while (
+      text.includes("https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/")
+    ) {
+      text = text.replace(
+        "https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/",
+        "assets/emoji/72x72/"
+      );
+      // text = text.replace('.png', '.svg');
+    }
+
+    return text;
+  }
 }
 
 export enum EmojiTypeEnum {
-    small,
+  small,
-    medium
+  medium
-}
+}