From d106fb39abf8fe17c00e562c1237fcacfe158345 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 16:04:56 +0900
Subject: feat: introduce fluent emoji

---
 packages/client/src/components/MkAutocomplete.vue            | 10 ++++++----
 packages/client/src/components/MkReactionsViewer.details.vue |  1 +
 packages/client/src/components/global/MkEmoji.vue            |  8 +++++---
 3 files changed, 12 insertions(+), 7 deletions(-)

(limited to 'packages/client/src/components')

diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index e1fd5693b6..72783921d5 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/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,9 +59,11 @@ 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) {
@@ -69,7 +71,7 @@ for (const x of lib) {
 				emoji: x.char,
 				name: k,
 				aliasOf: x.name,
-				url: char2filePath(x.char),
+				url: char2path(x.char),
 			});
 		}
 	}
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index fb8d74ad4b..29902a5075 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/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;
 		}
 
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 419850d007..ce1299a39f 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/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
-- 
cgit v1.2.3-freya