From 0963e6d6e14cf94af294a7ced5bbd2fbd824f95a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Mon, 5 Nov 2018 11:19:40 +0900 Subject: [PATCH] Use Twemoji --- .../common/views/components/autocomplete.vue | 10 +++-- .../app/common/views/components/emoji.vue | 42 +++++++++++++++++++ .../app/common/views/components/index.ts | 2 + .../components/misskey-flavored-markdown.ts | 22 ++-------- src/models/mastodon/emoji.ts | 35 ++++++++++++++++ src/server/api/mastodon.ts | 12 ++++-- 6 files changed, 98 insertions(+), 25 deletions(-) create mode 100644 src/client/app/common/views/components/emoji.vue create mode 100644 src/models/mastodon/emoji.ts diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue index 3f3cd171e..dff0bfd8d 100644 --- a/src/client/app/common/views/components/autocomplete.vue +++ b/src/client/app/common/views/components/autocomplete.vue @@ -40,18 +40,20 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => { }); const emjdb: EmojiDef[] = lib.map((x: any) => ({ - emoji: x[1].char, + emoji: `:${x[0]}:`, name: x[0], - aliasOf: null + aliasOf: null, + url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg` })); lib.forEach((x: any) => { if (x[1].keywords) { x[1].keywords.forEach(k => { emjdb.push({ - emoji: x[1].char, + emoji: `:${x[0]}:`, name: k, - aliasOf: x[0] + aliasOf: x[0], + url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg` }); }); } diff --git a/src/client/app/common/views/components/emoji.vue b/src/client/app/common/views/components/emoji.vue new file mode 100644 index 000000000..2aa62de25 --- /dev/null +++ b/src/client/app/common/views/components/emoji.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 3b20d0753..5665ef88d 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -39,6 +39,7 @@ import urlPreview from './url-preview.vue'; import twitterSetting from './twitter-setting.vue'; import githubSetting from './github-setting.vue'; import fileTypeIcon from './file-type-icon.vue'; +import emoji from './emoji.vue'; import Reversi from './games/reversi/reversi.vue'; import welcomeTimeline from './welcome-timeline.vue'; import uiInput from './ui/input.vue'; @@ -93,6 +94,7 @@ Vue.component('mk-url-preview', urlPreview); Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-github-setting', githubSetting); Vue.component('mk-file-type-icon', fileTypeIcon); +Vue.component('mk-emoji', emoji); Vue.component('mk-reversi', Reversi); Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('ui-input', uiInput); diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts index 68f3aeed1..c7368ecaf 100644 --- a/src/client/app/common/views/components/misskey-flavored-markdown.ts +++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts @@ -188,24 +188,10 @@ export default Vue.component('misskey-flavored-markdown', { } case 'emoji': { - //#region カスタム絵文字 - if (this.customEmojis != null) { - const customEmoji = this.customEmojis.find(e => e.name == token.emoji || (e.aliases || []).includes(token.emoji)); - if (customEmoji) { - return [createElement('img', { - attrs: { - src: customEmoji.url, - alt: token.emoji, - title: token.emoji, - style: 'height: 2.5em; vertical-align: middle;' - } - })]; - } - } - //#endregion - - const emoji = emojilib.lib[token.emoji]; - return [createElement('span', emoji ? emoji.char : token.content)]; + const { emoji } = token; + return [createElement('mk-emoji', { + attrs: { emoji } + })]; } case 'search': { diff --git a/src/models/mastodon/emoji.ts b/src/models/mastodon/emoji.ts new file mode 100644 index 000000000..df19c6e75 --- /dev/null +++ b/src/models/mastodon/emoji.ts @@ -0,0 +1,35 @@ +export type IMastodonEmoji = { + shortcode: string, + url: string, + static_url: string, + visible_in_picker: boolean +}; + +export async function toMastodonEmojis(emoji: any): Promise { + return [{ + shortcode: emoji.name, + url: emoji.url, + static_url: emoji.url, // TODO: Implement ensuring static emoji + visible_in_picker: true + }, ...(emoji.aliases as string[] || []).map(x => ({ + shortcode: x, + url: emoji.url, + static_url: emoji.url, + visible_in_picker: true + }))]; +} + +export function toMisskeyEmojiSync(emoji: IMastodonEmoji) { + return { + name: emoji.shortcode, + url: emoji.url + }; +} + +export function toMisskeyEmojiWithAliasesSync(emoji: IMastodonEmoji, ...aliases: string[]) { + return { + name: emoji.shortcode, + aliases, + url: emoji.url + }; +} diff --git a/src/server/api/mastodon.ts b/src/server/api/mastodon.ts index 33a0b4b5f..d1e1068da 100644 --- a/src/server/api/mastodon.ts +++ b/src/server/api/mastodon.ts @@ -5,17 +5,18 @@ import config from '../../config'; import Meta from '../../models/meta'; import { ObjectID } from 'bson'; import Emoji from '../../models/emoji'; +import { toMastodonEmojis } from '../../models/mastodon/emoji'; const pkg = require('../../../package.json'); // Init router const router = new Router(); router.get('/v1/custom_emojis', async ctx => ctx.body = - await Emoji.find({ host: null }, { + (await Emoji.find({ host: null }, { fields: { _id: false } - })); + })).map(toMastodonEmojis)); router.get('/v1/instance', async ctx => { // TODO: This is a temporary implementation. Consider creating helper methods! const meta = await Meta.findOne() || {}; @@ -40,6 +41,11 @@ router.get('/v1/instance', async ctx => { // TODO: This is a temporary implement notesCount: 0 }; const acct = maintainer.host ? `${maintainer.username}@${maintainer.host}` : maintainer.username; + const emojis = (await Emoji.find({ host: null }, { + fields: { + _id: false + } + })).map(toMastodonEmojis); ctx.body = { uri: config.hostname, @@ -79,7 +85,7 @@ router.get('/v1/instance', async ctx => { // TODO: This is a temporary implement followers_count: maintainer.followersCount, following_count: maintainer.followingCount, statuses_count: maintainer.notesCount, - emojis: [], + emojis: emojis, moved: null, fields: null }