diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4e4143c3..55363929 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html index 6fcd7b98..d37da194 100644 --- a/src/app/components/stream/status/status.component.html +++ b/src/app/components/stream/status/status.component.html @@ -1,14 +1,12 @@
- {{ status.account.display_name }} boosted + boosted
- {{ notificationAccount.display_name }} favorited your status + favorited your status
@@ -16,7 +14,7 @@
- {{ notificationAccount.display_name }} boosted your status + boosted your status
@@ -29,7 +27,7 @@ {{displayedStatus.account.acct}} diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts index 4b882883..5becff16 100644 --- a/src/app/components/stream/status/status.component.ts +++ b/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.status.uri); - this.statusContent = this.emojiConverter.applyEmojis(this.displayedStatus.emojis, this.displayedStatus.content, EmojiTypeEnum.medium, this.status.uri); + // this.statusAccountName = this.emojiConverter.applyEmojis(this.displayedStatus.account.emojis, this.displayedStatus.account.display_name, EmojiTypeEnum.small); + this.statusContent = this.emojiConverter.applyEmojis(this.displayedStatus.emojis, this.displayedStatus.content, EmojiTypeEnum.medium); } get statusWrapper(): StatusWrapper { return this._statusWrapper; diff --git a/src/app/pipes/account-emoji.pipe.spec.ts b/src/app/pipes/account-emoji.pipe.spec.ts new file mode 100644 index 00000000..1a5384a5 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/pipes/account-emoji.pipe.ts b/src/app/pipes/account-emoji.pipe.ts new file mode 100644 index 00000000..f8e69a35 --- /dev/null +++ b/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) + } +} diff --git a/src/app/tools/emoji.tools.ts b/src/app/tools/emoji.tools.ts index ee5a460e..471d582d 100644 --- a/src/app/tools/emoji.tools.ts +++ b/src/app/tools/emoji.tools.ts @@ -1,41 +1,54 @@ -import { Emoji } from '../services/models/mastodon.interfaces'; -import * as EmojiOne from 'emojione'; +import { Emoji } from "../services/models/mastodon.interfaces"; +import * as EmojiOne from "emojione"; export class EmojiConverter { - applyEmojis(emojis: Emoji[], text: string, type: EmojiTypeEnum, url: string): string { - //const instanceUrl = 'https://' + url.split('https://')[1].split('/')[0]; + applyEmojis(emojis: Emoji[], text: string, type: EmojiTypeEnum): string { + //const instanceUrl = 'https://' + url.split('https://')[1].split('/')[0]; + if(!text) return text; - let className = 'emoji-small'; - if (type === EmojiTypeEnum.medium) { - className = 'emoji-medium'; - } - - emojis.forEach(emoji => { - text = text.replace(`:${emoji.shortcode}:`, `:${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; + let className = "emoji-small"; + if (type === EmojiTypeEnum.medium) { + className = "emoji-medium"; } + + if (emojis) { + emojis.forEach(emoji => { + text = text.replace( + `:${emoji.shortcode}:`, + `:${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, - medium -} \ No newline at end of file + small, + medium +}