added custom emoji support

src/app/components/create-status/emoji-picker/emoji-picker.component.html

@@ -1,8 +1,5 @@
 <emoji-mart 
-    [showPreview]="false" 
-    [perLine]="7" 
-    [isNative]="true" 
-    [sheetSize]="16"
-    [emojiTooltip]="true"
-    (emojiSelect)="emojiSelected($event)"
-class="emojipicker" title="Pick your emoji…" emoji="point_up"></emoji-mart>
+    *ngIf="loaded"
+    [showPreview]="false" [perLine]="7" [isNative]="true" [sheetSize]="16" [emojiTooltip]="true"
+    [custom]="customEmojis" (emojiSelect)="emojiSelected($event)" class="emojipicker" title="Pick your emoji…"
+    emoji="point_up"></emoji-mart>

src/app/components/create-status/emoji-picker/emoji-picker.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit, HostListener, ElementRef, Output, EventEmitter } from '@angular/core';
 
+import { ToolsService } from '../../../services/tools.service';
+import { NotificationService } from '../../../services/notification.service';
+import { Emoji } from '../../../services/models/mastodon.interfaces';
+
 @Component({
     selector: 'app-emoji-picker',
     templateUrl: './emoji-picker.component.html',
@@ -11,25 +15,62 @@ export class EmojiPickerComponent implements OnInit {
     @Output('closed') public closedEvent = new EventEmitter();
     @Output('emojiSelected') public emojiSelectedEvent = new EventEmitter<string>();
 
-    constructor(private eRef: ElementRef) { }
+    customEmojis: PickerCustomEmoji[] = [];
+    loaded: boolean;
+
+    constructor(
+        private notificationService: NotificationService,
+        private toolsService: ToolsService,
+        private eRef: ElementRef) { }
 
     @HostListener('document:click', ['$event'])
     clickout(event) {
         if (!this.init) return;
 
-        if (!this.eRef.nativeElement.contains(event.target)) {          
+        if (!this.eRef.nativeElement.contains(event.target)) {
             this.closedEvent.emit(null);
         }
     }
 
     ngOnInit() {
+        let currentAccount = this.toolsService.getSelectedAccounts()[0];
+        this.toolsService.getCustomEmojis(currentAccount)
+            .then(emojis => {
+                console.warn(emojis);
+                this.customEmojis = emojis.map(x => this.convertEmoji(x));
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err);
+            })
+            .then(() => {
+                this.loaded = true;
+            });
+
         setTimeout(() => {
             this.init = true;
         }, 0);
     }
 
+    private convertEmoji(emoji: Emoji): PickerCustomEmoji {
+        return new PickerCustomEmoji(emoji.shortcode, [emoji.shortcode], emoji.shortcode, [emoji.shortcode], emoji.url);
+    }
+
     emojiSelected(select: any): boolean {
-        this.emojiSelectedEvent.next(select.emoji.native);
+        if (select.emoji.custom) {
+            this.emojiSelectedEvent.next(select.emoji.colons);
+        } else {
+            this.emojiSelectedEvent.next(select.emoji.native);
+        }
         return false;
     }
 }
+
+class PickerCustomEmoji {
+    constructor(
+        public name: string,
+        public shortNames: string[],
+        public text: string,
+        public keywords: string[],
+        public imageUrl: string) {
+    }
+}

src/app/services/mastodon.service.ts

@@ -2,12 +2,12 @@ import { Injectable } from '@angular/core';
 import { HttpHeaders, HttpClient, HttpResponse } from '@angular/common/http';
 
 import { ApiRoutes } from './models/api.settings';
-import { Account, Status, Results, Context, Relationship, Instance, Attachment, Notification, List, Poll } from "./models/mastodon.interfaces";
+import { Account, Status, Results, Context, Relationship, Instance, Attachment, Notification, List, Poll, Emoji } from "./models/mastodon.interfaces";
 import { AccountInfo } from '../states/accounts.state';
 import { StreamTypeEnum, StreamElement } from '../states/streams.state';
 
 @Injectable()
-export class MastodonService {            
+export class MastodonService {           
     private apiRoutes = new ApiRoutes();
 
     constructor(private readonly httpClient: HttpClient) { }
@@ -367,6 +367,11 @@ export class MastodonService {
         let route = `https://${account.instance}${this.apiRoutes.deleteStatus}`.replace('{0}', statusId.toString());
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
         return this.httpClient.delete<any>(route, { headers: headers }).toPromise();
+    } 
+    
+    getCustomEmojis(account: AccountInfo): Promise<Emoji[]> {
+        let route = `https://${account.instance}${this.apiRoutes.getCustomEmojis}`;
+        return this.httpClient.get<Emoji[]>(route).toPromise();
     }   
 }
 

src/app/services/models/api.settings.ts

@@ -3,6 +3,7 @@ export class ApiRoutes {
     createApp = '/api/v1/apps';
     getToken = '/oauth/token';
     getAccount = '/api/v1/accounts/{0}';
+    getCustomEmojis = '/api/v1/custom_emojis';
     getCurrentAccount = '/api/v1/accounts/verify_credentials';
     getAccountFollowers = '/api/v1/accounts/{0}/followers';
     getAccountFollowing = '/api/v1/accounts/{0}/following';

src/app/services/tools.service.ts

@@ -3,14 +3,14 @@ import { Store } from '@ngxs/store';
 
 import { AccountInfo } from '../states/accounts.state';
 import { MastodonService } from './mastodon.service';
-import { Account, Results, Status } from "./models/mastodon.interfaces";
+import { Account, Results, Status, Emoji } from "./models/mastodon.interfaces";
 import { StatusWrapper } from '../models/common.model';
 import { AccountSettings, SaveAccountSettings } from '../states/settings.state';
 
 @Injectable({
     providedIn: 'root'
 })
-export class ToolsService {
+export class ToolsService {   
     constructor(
         private readonly mastodonService: MastodonService,
         private readonly store: Store) { }
@@ -82,6 +82,15 @@ export class ToolsService {
         }
         return `@${fullHandle}`;
     }
+    
+    getCustomEmojis(account: AccountInfo): Promise<Emoji[]> {
+        //TODO: add cache
+
+        return this.mastodonService.getCustomEmojis(account)
+            .then(emojis => {
+                return emojis.filter(x => x.visible_in_picker);             
+            });
+    }   
 }
 
 export class OpenThreadEvent {