oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

feat(frontend/reactions): リアクションミュート機能を追加しました (MisskeyIO#758)

Browse source
This commit is contained in:
まっちゃてぃー。 2024-10-20 05:31:35 +09:00 • committed by GitHub
parent 65f0138bd7
commit a73a09a999
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 114 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/MkEmojiPickerDialog.vue
View file

@ -29,15 +29,29 @@ SPDX-License-Identifier: AGPL-3.0-only
:max-height="maxHeight"
@chosen="chosen"
/>
<div v-if="manualReactionInput" :class="$style.remoteReactionInputWrapper">
<span>{{ i18n.ts.remoteCustomEmojiMuted }}</span>
<MkInput v-model="remoteReactionName" placeholder=":emojiname@host:" autocapitalize="off"/>
<MkButton :disabled="!(remoteReactionName && remoteReactionName[0] === ':')" @click="chosen(remoteReactionName)">
{{ i18n.ts.add }}
</MkButton>
<div :class="$style.emojiContainer">
<MkCustomEmoji v-if="remoteReactionName && remoteReactionName[0] === ':' " :class="$style.emoji" :name="remoteReactionName" :normal="true"/>
</div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import * as Misskey from 'misskey-js';
import { shallowRef } from 'vue';
import { shallowRef, ref } from 'vue';
import { i18n } from '@/i18n.js';
import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
import { defaultStore } from '@/store.js';
import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
const props = withDefaults(defineProps<{
manualShowing?: boolean | null;
@ -47,12 +61,14 @@ const props = withDefaults(defineProps<{
asReactionPicker?: boolean;
targetNote?: Misskey.entities.Note;
choseAndClose?: boolean;
manualReactionInput?: boolean;
}>(), {
manualShowing: null,
showPinned: true,
pinnedEmojis: undefined,
asReactionPicker: false,
choseAndClose: true,
manualReactionInput: false,
});
const emit = defineEmits<{
@ -64,6 +80,8 @@ const emit = defineEmits<{
const modal = shallowRef<InstanceType<typeof MkModal>>();
const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
const remoteReactionName = ref('');
function chosen(emoji: string) {
emit('done', emoji);
if (props.choseAndClose) {
@ -88,4 +106,16 @@ function opening() {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.remoteReactionInputWrapper {
margin-top: var(--margin);
padding: 16px;
border-radius: var(--radius);
background: var(--popup);
}
.emojiContainer {
height: 48px;
width: 48px;
}
</style>

11
packages/frontend/src/components/MkReactionsViewer.vue
View file

@ -22,6 +22,7 @@ import * as Misskey from 'misskey-js';
import { inject, watch, ref } from 'vue';
import XReaction from '@/components/MkReactionsViewer.reaction.vue';
import { defaultStore } from '@/store.js';
import { $i } from '@/account.js';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
@ -45,6 +46,13 @@ if (props.note.myReaction && !Object.keys(reactions.value).includes(props.note.m
reactions.value[props.note.myReaction] = props.note.reactions[props.note.myReaction];
}
function shouldDisplayReaction([reaction]: [string, number]): boolean {
if (!$i) return true; // 非ログイン状態なら全部のリアクションを見れるように
if (reaction === props.note.myReaction) return true; // 自分がつけたリアクションなら表示する
if (!defaultStore.state.mutedReactions.includes(reaction.replace('@.', ''))) return true; // ローカルの絵文字には @. というsuffixがつくのでそれを消してから比較してあげる
return false;
}
function onMockToggleReaction(emoji: string, count: number) {
if (!mock) return;
@ -80,7 +88,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
newReactions.push([props.note.myReaction, newSource[props.note.myReaction]]);
}
reactions.value = newReactions;
reactions.value = newReactions.filter(shouldDisplayReaction);
}, { immediate: true, deep: true });
</script>
@ -104,6 +112,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
flex-wrap: wrap;
align-items: center;
margin: 4px -2px 0 -2px;
max-width: 100%;
&:empty {
display: none;