feat: introduce fluent emoji

.dockerignore

@@ -14,6 +14,7 @@ packages/*/node_modules
 redis/
 files/
 misskey-assets/
+fluent-emojis/
 .pnp.*
 .yarn/*
 !.yarn/patches

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "misskey-assets"]
 	path = misskey-assets
 	url = https://github.com/misskey-dev/assets.git
+[submodule "fluent-emojis"]
+	path = fluent-emojis
+	url = https://github.com/misskey-dev/emojis.git

CHANGELOG.md

@@ -43,6 +43,7 @@ You should also include the user name that made the change.
 - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina
 - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz
 - Client: add user list widget @syuilo
+- Client: introduce fluent emoji @syuilo
 - Client: improve overall performance of client @syuilo
 
 ### Bugfixes

locales/ja-JP.yml

@@ -456,7 +456,8 @@ language: "言語"
 uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されました"
 aboutX: "{x}について"
-useOsNativeEmojis: "OSネイティブの絵文字を使用"
+emojiStyle: "絵文字のスタイル"
+native: "ネイティブ"
 disableDrawer: "メニューをドロワーで表示しない"
 youHaveNoGroups: "グループがありません"
 joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"

packages/backend/src/server/web/ClientServerService.ts

@@ -217,6 +217,21 @@ export class ClientServerService {
 			return reply.sendFile('/apple-touch-icon.png', staticAssets);
 		});
 
+		fastify.get<{ Params: { path: string } }>('/fluent-emoji/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
+
+			if (!path.match(/^[0-9a-f-]+\.png$/)) {
+				reply.code(404);
+				return;
+			}
+
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+
+			return await reply.sendFile(path, `${_dirname}/../../../../../fluent-emojis/dist/`, {
+				maxAge: ms('30 days'),
+			});
+		});
+
 		fastify.get<{ Params: { path: string } }>('/twemoji/:path(.*)', async (request, reply) => {
 			const path = request.params.path;
 

packages/client/src/components/MkAutocomplete.vue

@@ -18,7 +18,7 @@
 	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
 		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
 			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span v-else-if="defaultStore.state.emojiStyle != 'native'" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 			<span v-else class="emoji">{{ emoji.emoji }}</span>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
@@ -36,7 +36,7 @@
 <script lang="ts">
 import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import contains from '@/scripts/contains';
-import { char2filePath } from '@/scripts/twemoji-base';
+import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { acct } from '@/filters/user';
 import * as os from '@/os';
@@ -59,17 +59,19 @@ const lib = emojilist.filter(x => x.category !== 'flags');
 const emjdb: EmojiDef[] = lib.map(x => ({
 	emoji: x.char,
 	name: x.name,
-	url: char2filePath(x.char),
+	url: char2path(x.char),
 }));
 
+const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+
 for (const x of lib) {
 	if (x.keywords) {
 		for (const k of x.keywords) {
 			emjdb.push({
 				emoji: x.char,
 				name: k,
 				aliasOf: x.name,
-				url: char2filePath(x.char),
+				url: char2path(x.char),
 			});
 		}
 	}

packages/client/src/components/MkReactionsViewer.details.vue

@@ -56,6 +56,7 @@ function getReactionName(reaction: string): string {
 			display: block;
 			width: 60px;
 			font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+			object-fit: contain;
 			margin: 0 auto;
 		}
 

packages/client/src/components/global/MkEmoji.vue

@@ -9,7 +9,7 @@
 import { computed } from 'vue';
 import { CustomEmoji } from 'misskey-js/built/entities';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { char2filePath } from '@/scripts/twemoji-base';
+import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 import { getEmojiName } from '@/scripts/emojilist';
@@ -22,14 +22,16 @@ const props = defineProps<{
 	isReaction?: boolean;
 }>();
 
+const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+
 const isCustom = computed(() => props.emoji.startsWith(':'));
 const char = computed(() => isCustom.value ? undefined : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
+const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
 const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
 const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : undefined);
 const url = computed(() => {
 	if (char.value) {
-		return char2filePath(char.value);
+		return char2path(char.value);
 	} else {
 		const rawUrl = (customEmoji.value as CustomEmoji).url;
 		return defaultStore.state.disableShowingAnimatedImages

packages/client/src/pages/settings/general.vue

@@ -48,10 +48,16 @@
 		<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
 		<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
 		<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
-		<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
-			{{ i18n.ts.useOsNativeEmojis }}
-			<div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
-		</FormSwitch>
+		<div class="_formBlock">
+			<FormRadios v-model="emojiStyle">
+				<template #label>{{ i18n.ts.emojiStyle }}</template>
+				<option value="native">{{ i18n.ts.native }}</option>
+				<option value="fluentEmoji">Fluent Emoji</option>
+				<option value="twemoji">Twemoji</option>
+			</FormRadios>
+			<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
+		</div>
+
 		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
 
 		<FormRadios v-model="fontSize" class="_formBlock">
@@ -129,7 +135,7 @@ const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEff
 const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
 const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
 const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
-const useOsNativeEmojis = computed(defaultStore.makeGetterSetter('useOsNativeEmojis'));
+const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
 const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));

packages/client/src/pages/settings/preferences-backups.vue

@@ -63,7 +63,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'imageNewTab',
 	'disableShowingAnimatedImages',
 	'disablePagesScript',
-	'useOsNativeEmojis',
+	'emojiStyle',
 	'disableDrawer',
 	'useBlurEffectForModal',
 	'useBlurEffect',

packages/client/src/scripts/emoji-base.ts

@@ -0,0 +1,20 @@
+const twemojiSvgBase = '/twemoji';
+const fluentEmojiPngBase = '/fluent-emoji';
+
+export function char2twemojiFilePath(char: string): string {
+	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+	codes = codes.filter(x => x && x.length);
+	const fileName = codes.join('-');
+	return `${twemojiSvgBase}/${fileName}.svg`;
+}
+
+export function char2fluentEmojiFilePath(char: string): string {
+	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	// Fluent Emojiは国旗非対応 https://github.com/microsoft/fluentui-emoji/issues/25
+	if (codes[0]?.startsWith('1f1')) return char2twemojiFilePath(char);
+	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+	codes = codes.filter(x => x && x.length);
+	const fileName = codes.map(x => x!.padStart(4, '0')).join('-');
+	return `${fluentEmojiPngBase}/${fileName}.png`;
+}

packages/client/src/store.ts

@@ -174,9 +174,9 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
-	useOsNativeEmojis: {
+	emojiStyle: {
 		where: 'device',
-		default: false,
+		default: 'twemoji', // twemoji / fluentEmoji / native
 	},
 	disableDrawer: {
 		where: 'device',