Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

emojis functionnal in user names

This commit is contained in:
Nicolas Constant 2019-04-25 22:52:14 +02:00
parent 3e76605d47
commit b0cd7721a7
6 changed files with 80 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -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,

10
src/app/components/stream/status/status.component.html
View File

@ -1,14 +1,12 @@
<div class="reblog" *ngIf="reblog">
<a class="reblog__profile-link" href (click)="openAccount(status.account)">{{ status.account.display_name }} <img
*ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
<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
</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"
(click)="openAccount(notificationAccount)">{{ notificationAccount.display_name }}</a> favorited your status
<a href class="notification--link" (click)="openAccount(notificationAccount)" innerHTML="{{ notificationAccount | accountEmoji }}"></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>

8
src/app/components/stream/status/status.component.ts
View File

@ -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;

8
src/app/pipes/account-emoji.pipe.spec.ts Normal file
View File

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

15
src/app/pipes/account-emoji.pipe.ts Normal file
View File

@ -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)
}
}

81
src/app/tools/emoji.tools.ts
View File

@ -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}:`, `<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;
let className = "emoji-small";
if (type === EmojiTypeEnum.medium) {
className = "emoji-medium";
}
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,
medium
}
small,
medium
}