emojis functionnal in user names
This commit is contained in:
parent
3e76605d47
commit
b0cd7721a7
|
@ -56,6 +56,7 @@ import { DirectMessagesComponent } from './components/floating-column/manage-acc
|
||||||
import { MentionsComponent } from './components/floating-column/manage-account/mentions/mentions.component';
|
import { MentionsComponent } from './components/floating-column/manage-account/mentions/mentions.component';
|
||||||
import { NotificationsComponent } from './components/floating-column/manage-account/notifications/notifications.component';
|
import { NotificationsComponent } from './components/floating-column/manage-account/notifications/notifications.component';
|
||||||
import { SettingsState } from './states/settings.state';
|
import { SettingsState } from './states/settings.state';
|
||||||
|
import { AccountEmojiPipe } from './pipes/account-emoji.pipe';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: "", redirectTo: "home", pathMatch: "full" },
|
{ path: "", redirectTo: "home", pathMatch: "full" },
|
||||||
|
@ -100,7 +101,8 @@ const routes: Routes = [
|
||||||
FavoritesComponent,
|
FavoritesComponent,
|
||||||
DirectMessagesComponent,
|
DirectMessagesComponent,
|
||||||
MentionsComponent,
|
MentionsComponent,
|
||||||
NotificationsComponent
|
NotificationsComponent,
|
||||||
|
AccountEmojiPipe
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
FontAwesomeModule,
|
FontAwesomeModule,
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
<div class="reblog" *ngIf="reblog">
|
<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>
|
||||||
<div *ngIf="notificationType === 'favourite'">
|
<div *ngIf="notificationType === 'favourite'">
|
||||||
<div class="notification--icon">
|
<div class="notification--icon">
|
||||||
<fa-icon class="favorite" [icon]="faStar"></fa-icon>
|
<fa-icon class="favorite" [icon]="faStar"></fa-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="notification--label">
|
<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>
|
</div>
|
||||||
<div *ngIf="notificationType === 'reblog'">
|
<div *ngIf="notificationType === 'reblog'">
|
||||||
|
@ -16,7 +14,7 @@
|
||||||
<fa-icon class="boost" [icon]="faRetweet"></fa-icon>
|
<fa-icon class="boost" [icon]="faRetweet"></fa-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="notification--label">
|
<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>
|
</div>
|
||||||
<div class="status">
|
<div class="status">
|
||||||
|
@ -29,7 +27,7 @@
|
||||||
<img *ngIf="notificationAccount" class="notification--avatar" src="{{ notificationAccount.avatar }}" />
|
<img *ngIf="notificationAccount" class="notification--avatar" src="{{ notificationAccount.avatar }}" />
|
||||||
<span class="status__name">
|
<span class="status__name">
|
||||||
<span class="status__name--displayname"
|
<span class="status__name--displayname"
|
||||||
innerHTML="{{statusAccountName}}"></span><span
|
innerHTML="{{displayedStatus.account | accountEmoji}}"></span><span
|
||||||
class="status__name--username">{{displayedStatus.account.acct}}</span>
|
class="status__name--username">{{displayedStatus.account.acct}}</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -20,7 +20,7 @@ export class StatusComponent implements OnInit {
|
||||||
|
|
||||||
displayedStatus: Status;
|
displayedStatus: Status;
|
||||||
|
|
||||||
statusAccountName: string;
|
// statusAccountName: string;
|
||||||
statusContent: string;
|
statusContent: string;
|
||||||
|
|
||||||
reblog: boolean;
|
reblog: boolean;
|
||||||
|
@ -67,11 +67,9 @@ export class StatusComponent implements OnInit {
|
||||||
this.hasAttachments = true;
|
this.hasAttachments = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// const instanceUrl = 'https://' + this.status.uri.split('https://')[1].split('/')[0];
|
// 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 {
|
get statusWrapper(): StatusWrapper {
|
||||||
return this._statusWrapper;
|
return this._statusWrapper;
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { AccountEmojiPipe } from './account-emoji.pipe';
|
||||||
|
|
||||||
|
describe('AccountEmojiPipe', () => {
|
||||||
|
it('create an instance', () => {
|
||||||
|
const pipe = new AccountEmojiPipe();
|
||||||
|
expect(pipe).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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)
|
||||||
|
}
|
||||||
|
}
|
|
@ -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 {
|
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 {
|
export enum EmojiTypeEnum {
|
||||||
small,
|
small,
|
||||||
medium
|
medium
|
||||||
}
|
}
|
Loading…
Reference in New Issue