fix(client): カスタム絵文字にアニメーション画像を再生しない設定が適用されていない問題を修正

2 files changed, 16 insertions, 9 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36d9fcc4f4..8dca1170d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,9 @@ You should also include the user name that made the change.
 ### Improvements
 - ロールで広告の非表示が有効になっている場合は最初から広告を非表示にするように
 
+### Bugfixes
+- Client: カスタム絵文字にアニメーション画像を再生しない設定が適用されていない問題を修正
+
 ## 13.2.6 (2023/02/01)
 ### Changes
 - docker-compose.ymlをdocker-compose.yml.exampleにしました。docker-compose.ymlとしてコピーしてから使用してください。
diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue
index 93c47f0c27..e6dedd0354 100644
--- a/packages/frontend/src/components/global/MkCustomEmoji.vue
+++ b/packages/frontend/src/components/global/MkCustomEmoji.vue
@@ -18,19 +18,23 @@ const props = defineProps<{
 }>();
 
 const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substr(1, props.name.length - 2) : props.name).replace('@.', ''));
-const url = computed(() => {
+
+const rawUrl = computed(() => {
 	if (props.url) {
 		return props.url;
-	} else if (props.host == null && !customEmojiName.value.includes('@')) {
-		const found = customEmojis.value.find(x => x.name === customEmojiName.value);
-		return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
-	} else {
-		const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
-		return defaultStore.state.disableShowingAnimatedImages
-			? getStaticImageUrl(rawUrl)
-			: rawUrl;
 	}
+	if (props.host == null && !customEmojiName.value.includes('@')) {
+		return customEmojis.value.find(x => x.name === customEmojiName.value)?.url || null;
+	}
+	return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
 });
+
+const url = computed(() =>
+	defaultStore.reactiveState.disableShowingAnimatedImages.value && rawUrl.value
+		? getStaticImageUrl(rawUrl.value)
+		: rawUrl.value
+);
+
 const alt = computed(() => `:${customEmojiName.value}:`);
 let errored = $ref(url.value == null);
 </script>