From 4813fda392173358e759b83df676728406f63d25 Mon Sep 17 00:00:00 2001 From: tai-cha Date: Wed, 7 May 2025 03:01:35 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=B5=B5=E6=96=87=E5=AD=97?= =?UTF-8?q?=E3=81=AEmute/unmute=E5=87=A6=E7=90=86=E3=81=AE=E5=85=B1?= =?UTF-8?q?=E9=80=9A=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/global/MkCustomEmoji.vue | 10 +++---- .../src/components/global/MkEmoji.vue | 15 +++-------- .../pages/settings/mute-block.emoji-mute.vue | 27 +++---------------- packages/frontend/src/utility/emoji-mute.ts | 27 +++++++++++++++++++ 4 files changed, 38 insertions(+), 41 deletions(-) create mode 100644 packages/frontend/src/utility/emoji-mute.ts diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue index 64cdb118e5..ee84f96224 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.vue +++ b/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 isMuted = computed(() => prefer.r.mutingEmojis.value.includes(emojiCodeToMute)); +const emojiCodeToMute = makeEmojiMuteKey(props); +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; - if (!mutedEmojis.includes(emojiCodeToMute)) { - prefer.commit('mutingEmojis', [...mutedEmojis, emojiCodeToMute]); - } + muteEmoji(emojiCodeToMute); }); } diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue index 76e932cdc0..04f2ee33e5 100644 --- a/packages/frontend/src/components/global/MkEmoji.vue +++ b/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; - if (!mutedEmojis.includes(props.emoji)) { - prefer.commit('mutingEmojis', [...mutedEmojis, props.emoji]); - } + muteEmoji(props.emoji); }); } @@ -65,12 +63,7 @@ function unmute() { if (canceled) { return; } - const mutedEmojis = prefer.r.mutingEmojis.value; - const index = mutedEmojis.indexOf(props.emoji); - if (index !== -1) { - mutedEmojis.splice(index, 1); - prefer.commit('mutingEmojis', mutedEmojis); - } + unmuteEmoji(props.emoji); }); } diff --git a/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue b/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue index 1aecefbdff..e269cda0c5 100644 --- a/packages/frontend/src/pages/settings/mute-block.emoji-mute.vue +++ b/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; - if (!mutedEmojis.includes(emoji)) { - prefer.commit('mutingEmojis', [...mutedEmojis, emoji]); - } + muteEmoji(emoji); } }); } @@ -103,10 +85,7 @@ function unmute(emoji: string) { if (canceled) { return; } - const mutedEmojis = prefer.r.mutingEmojis.value; - if (mutedEmojis.includes(emoji)) { - prefer.commit('mutingEmojis', mutedEmojis.filter((e) => e !== emoji)); - } + unmuteEmoji(emoji); }); } diff --git a/packages/frontend/src/utility/emoji-mute.ts b/packages/frontend/src/utility/emoji-mute.ts new file mode 100644 index 0000000000..da48562474 --- /dev/null +++ b/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)); +}