refactor: 絵文字のmute/unmute処理の共通化

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -40,6 +40,7 @@ import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialo
 import { $i } from '@/i.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
+import { makeEmojiMuteKey, mute as muteEmoji, checkMuted as checkEmojiMuted } from '@/utility/emoji-mute';
 
 const props = defineProps<{
 	name: string;
@@ -58,8 +59,8 @@ const react = inject(DI.mfmEmojiReactCallback);
 
 const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substring(1, props.name.length - 1) : props.name).replace('@.', ''));
 const isLocal = computed(() => !props.host && (customEmojiName.value.endsWith('@.') || !customEmojiName.value.includes('@')));
-const emojiCodeToMute = props.name.startsWith(':') ? props.name : `:${props.name}${props.host	? `@${props.host}` : ''}:`;
+const emojiCodeToMute = makeEmojiMuteKey(props);
-const isMuted = computed(() => prefer.r.mutingEmojis.value.includes(emojiCodeToMute));
+const isMuted = computed(() => checkEmojiMuted(emojiCodeToMute));
 const shouldMute = computed(() => !props.ignoreMuted && isMuted.value);
 
 const rawUrl = computed(() => {
@@ -180,10 +181,7 @@ function mute() {
 		if (canceled) {
 			return;
 		}
-		const mutedEmojis = prefer.r.mutingEmojis.value;
+		muteEmoji(emojiCodeToMute);
-		if (!mutedEmojis.includes(emojiCodeToMute)) {
-			prefer.commit('mutingEmojis', [...mutedEmojis, emojiCodeToMute]);
-		}
 	});
 }
 

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

@@ -19,6 +19,7 @@ import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
+import { mute as muteEmoji, unmute as unmuteEmoji, checkMuted as checkMutedEmoji } from '@/utility/emoji-mute.js';
 
 const props = defineProps<{
 	emoji: string;
@@ -34,7 +35,7 @@ const char2path = prefer.s.emojiStyle === 'twemoji' ? char2twemojiFilePath : cha
 const useOsNativeEmojis = computed(() => prefer.s.emojiStyle === 'native');
 const url = computed(() => char2path(props.emoji));
 const colorizedNativeEmoji = computed(() => colorizeEmoji(props.emoji));
-const isMuted = computed(() => prefer.r.mutingEmojis.value.includes(props.emoji));
+const isMuted = checkMutedEmoji(props.emoji);
 const shouldMute = computed(() => isMuted.value && !props.ignoreMuted);
 
 // Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
@@ -50,10 +51,7 @@ function mute() {
 		if (canceled) {
 			return;
 		}
-		const mutedEmojis = prefer.r.mutingEmojis.value;
+		muteEmoji(props.emoji);
-		if (!mutedEmojis.includes(props.emoji)) {
-			prefer.commit('mutingEmojis', [...mutedEmojis, props.emoji]);
-		}
 	});
 }
 
@@ -65,12 +63,7 @@ function unmute() {
 		if (canceled) {
 			return;
 		}
-		const mutedEmojis = prefer.r.mutingEmojis.value;
+		unmuteEmoji(props.emoji);
-		const index = mutedEmojis.indexOf(props.emoji);
-		if (index !== -1) {
-			mutedEmojis.splice(index, 1);
-			prefer.commit('mutingEmojis', mutedEmojis);
-		}
 	});
 }
 

packages/frontend/src/pages/settings/mute-block.emoji-mute.vue

@@ -34,6 +34,7 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { mute as muteEmoji, unmute as unmuteEmoji, checkMuted as isMuted } from '@/utility/emoji-mute.js';
 
 const emojis = prefer.model('mutingEmojis');
 
@@ -56,29 +57,10 @@ function getHTMLElement(ev: MouseEvent): HTMLElement {
 	return target as HTMLElement;
 }
 
-function mute(emoji: string) {
-	const emojiCodeToMute = emoji.startsWith(':') ? emoji : `:${emoji}:`;
-	os.confirm({
-		type: 'question',
-		title: i18n.tsx.muteX({ x: emojiCodeToMute }),
-	}).then(({ canceled }) => {
-		if (canceled) {
-			return;
-		}
-		const mutedEmojis = prefer.r.mutingEmojis.value;
-		if (!mutedEmojis.includes(emojiCodeToMute)) {
-			prefer.commit('mutingEmojis', [...mutedEmojis, emojiCodeToMute]);
-		}
-	});
-}
-
 function add(ev: MouseEvent) {
 	os.pickEmoji(getHTMLElement(ev), { showPinned: false }).then((emoji) => {
 		if (emoji) {
-			const mutedEmojis = prefer.r.mutingEmojis.value;
+			muteEmoji(emoji);
-			if (!mutedEmojis.includes(emoji)) {
-				prefer.commit('mutingEmojis', [...mutedEmojis, emoji]);
-			}
 		}
 	});
 }
@@ -103,10 +85,7 @@ function unmute(emoji: string) {
 		if (canceled) {
 			return;
 		}
-		const mutedEmojis = prefer.r.mutingEmojis.value;
+		unmuteEmoji(emoji);
-		if (mutedEmojis.includes(emoji)) {
-			prefer.commit('mutingEmojis', mutedEmojis.filter((e) => e !== emoji));
-		}
 	});
 }
 </script>

packages/frontend/src/utility/emoji-mute.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue';
+import { prefer } from '@/preferences.js';
+
+// custom絵文字の情報からキーを作成する
+export function makeEmojiMuteKey(props: { name: string; host?: string | null }) {
+	return props.name.startsWith(':') ? props.name : `:${props.name}${props.host ? `@${props.host}` : ''}:`;
+}
+
+export function mute(emoji: string) {
+	const mutedEmojis = prefer.r.mutingEmojis.value;
+	if (!mutedEmojis.includes(emoji)) {
+		prefer.commit('mutingEmojis', [...mutedEmojis, emoji]);
+	}
+}
+
+export function unmute(emoji:string) {
+	const mutedEmojis = prefer.r.mutingEmojis.value;
+	const index = mutedEmojis.indexOf(emoji);
+	if (index !== -1) {
+		mutedEmojis.splice(index, 1);
+		prefer.commit('mutingEmojis', mutedEmojis);
+	}
+}
+
+export function checkMuted(emoji: string) {
+	return computed(() => prefer.r.mutingEmojis.value.includes(emoji));
+}