upd: apply changes

This commit is contained in:
Marie 2024-02-03 21:29:46 +01:00
parent e7b86090e1
commit 2a50e6e9e7
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
5 changed files with 59 additions and 66 deletions

View file

@ -332,7 +332,7 @@ function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string
const keymap = { const keymap = {
'r': () => reply(true), 'r': () => reply(true),
'e|a|plus': () => react(true), 'e|a|plus': () => react(true),
'q': () => renote(true), 'q': () => renote(appearNote.value.visibility),
'up|k|shift+tab': focusBefore, 'up|k|shift+tab': focusBefore,
'down|j|tab': focusAfter, 'down|j|tab': focusAfter,
'esc': blur, 'esc': blur,
@ -526,7 +526,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {
@ -548,7 +548,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {

View file

@ -340,7 +340,7 @@ if ($i) {
const keymap = { const keymap = {
'r': () => reply(true), 'r': () => reply(true),
'e|a|plus': () => react(true), 'e|a|plus': () => react(true),
'q': () => renote(true), 'q': () => renote(appearNote.value.visibility),
'esc': blur, 'esc': blur,
'm|o': () => showMenu(true), 'm|o': () => showMenu(true),
's': () => showContent.value !== showContent.value, 's': () => showContent.value !== showContent.value,
@ -540,7 +540,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {
@ -562,7 +562,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {

View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div <div
v-if="!hardMuted && muted === false" v-if="!hardMuted && muted === false"
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="rootEl"
v-hotkey="keymap" v-hotkey="keymap"
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]" :class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined" :tabindex="!isDeleted ? '-1' : undefined"
@ -76,7 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/> />
<div v-if="translating || translation" :class="$style.translation"> <div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/> <MkLoading v-if="translating" mini/>
<div v-else> <div v-else-if="translation">
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b> <b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/> <Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
</div> </div>
@ -255,7 +255,7 @@ if (noteViewInterruptors.length > 0) {
let result: Misskey.entities.Note | null = deepClone(note.value); let result: Misskey.entities.Note | null = deepClone(note.value);
for (const interruptor of noteViewInterruptors) { for (const interruptor of noteViewInterruptors) {
try { try {
result = await interruptor.handler(result); result = await interruptor.handler(result!) as Misskey.entities.Note | null;
if (result === null) { if (result === null) {
isDeleted.value = true; isDeleted.value = true;
return; return;
@ -264,7 +264,7 @@ if (noteViewInterruptors.length > 0) {
console.error(err); console.error(err);
} }
} }
note.value = result; note.value = result as Misskey.entities.Note;
}); });
} }
@ -272,11 +272,11 @@ const isRenote = (
note.value.renote != null && note.value.renote != null &&
note.value.text == null && note.value.text == null &&
note.value.cw == null && note.value.cw == null &&
note.value.fileIds.length === 0 && note.value.fileIds && note.value.fileIds.length === 0 &&
note.value.poll == null note.value.poll == null
); );
const el = shallowRef<HTMLElement>(); const rootEl = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>(); const menuButton = shallowRef<HTMLElement>();
const menuVersionsButton = shallowRef<HTMLElement>(); const menuVersionsButton = shallowRef<HTMLElement>();
const renoteButton = shallowRef<HTMLElement>(); const renoteButton = shallowRef<HTMLElement>();
@ -333,11 +333,11 @@ function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string
const keymap = { const keymap = {
'r': () => reply(true), 'r': () => reply(true),
'e|a|plus': () => react(true), 'e|a|plus': () => react(true),
'q': () => renoteButton.value.renote(true), 'q': () => renote(appearNote.value.visibility),
'up|k|shift+tab': focusBefore, 'up|k|shift+tab': focusBefore,
'down|j|tab': focusAfter, 'down|j|tab': focusAfter,
'esc': blur, 'esc': blur,
'm|o': () => menu(true), 'm|o': () => showMenu(true),
's': () => showContent.value !== showContent.value, 's': () => showContent.value !== showContent.value,
}; };
@ -354,7 +354,7 @@ if (props.mock) {
}, { deep: true }); }, { deep: true });
} else { } else {
useNoteCapture({ useNoteCapture({
rootEl: el, rootEl: rootEl,
note: appearNote, note: appearNote,
pureNote: note, pureNote: note,
isDeletedRef: isDeleted, isDeletedRef: isDeleted,
@ -527,7 +527,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {
@ -549,7 +549,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {
@ -577,7 +577,7 @@ function reply(viaKeyboard = false): void {
reply: appearNote.value, reply: appearNote.value,
channel: appearNote.value.channel, channel: appearNote.value.channel,
animation: !viaKeyboard, animation: !viaKeyboard,
}, () => { }).then(() => {
focus(); focus();
}); });
} }
@ -616,7 +616,7 @@ function react(viaKeyboard = false): void {
noteId: appearNote.value.id, noteId: appearNote.value.id,
override: defaultLike.value, override: defaultLike.value,
}); });
const el = reactButton.value as HTMLElement | null | undefined; const el = reactButton.value;
if (el) { if (el) {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2); const x = rect.left + (el.offsetWidth / 2);
@ -625,7 +625,7 @@ function react(viaKeyboard = false): void {
} }
} else { } else {
blur(); blur();
reactionPicker.show(reactButton.value, reaction => { reactionPicker.show(reactButton.value ?? null, reaction => {
sound.playMisskeySfx('reaction'); sound.playMisskeySfx('reaction');
if (props.mock) { if (props.mock) {
@ -646,8 +646,8 @@ function react(viaKeyboard = false): void {
} }
} }
function undoReact(note): void { function undoReact(targetNote: Misskey.entities.Note): void {
const oldReaction = note.myReaction; const oldReaction = targetNote.myReaction;
if (!oldReaction) return; if (!oldReaction) return;
if (props.mock) { if (props.mock) {
@ -656,7 +656,7 @@ function undoReact(note): void {
} }
misskeyApi('notes/reactions/delete', { misskeyApi('notes/reactions/delete', {
noteId: note.id, noteId: targetNote.id,
}); });
} }
@ -684,22 +684,24 @@ function onContextmenu(ev: MouseEvent): void {
return; return;
} }
const isLink = (el: HTMLElement) => { const isLink = (el: HTMLElement): boolean => {
if (el.tagName === 'A') return true; if (el.tagName === 'A') return true;
// Audio // Audio
if (el.tagName === 'AUDIO') return true; if (el.tagName === 'AUDIO') return true;
if (el.parentElement) { if (el.parentElement) {
return isLink(el.parentElement); return isLink(el.parentElement);
} }
return false;
}; };
if (isLink(ev.target)) return;
if (window.getSelection().toString() !== '') return; if (ev.target && isLink(ev.target as HTMLElement)) return;
if (window.getSelection()?.toString() !== '') return;
if (defaultStore.state.useReactionPickerForContextMenu) { if (defaultStore.state.useReactionPickerForContextMenu) {
ev.preventDefault(); ev.preventDefault();
react(); react();
} else { } else {
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, menuButton, isDeleted, currentClip: currentClip?.value }); const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted, currentClip: currentClip?.value });
os.contextMenu(menu, ev).then(focus).finally(cleanup); os.contextMenu(menu, ev).then(focus).finally(cleanup);
} }
} }
@ -763,7 +765,7 @@ function showRenoteMenu(viaKeyboard = false): void {
getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote), getCopyNoteLinkMenu(note.value, i18n.ts.copyLinkRenote),
{ type: 'divider' }, { type: 'divider' },
getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote), getAbuseNoteMenu(note.value, i18n.ts.reportAbuseRenote),
$i.isModerator || $i.isAdmin ? getUnrenote() : undefined, ($i?.isModerator || $i?.isAdmin) ? getUnrenote() : undefined,
], renoteTime.value, { ], renoteTime.value, {
viaKeyboard: viaKeyboard, viaKeyboard: viaKeyboard,
}); });
@ -783,23 +785,19 @@ function animatedMFM() {
} }
function focus() { function focus() {
el.value.focus(); rootEl.value?.focus();
} }
function blur() { function blur() {
el.value.blur(); rootEl.value?.blur();
} }
function focusBefore() { function focusBefore() {
focusPrev(el.value); focusPrev(rootEl.value ?? null);
} }
function focusAfter() { function focusAfter() {
focusNext(el.value); focusNext(rootEl.value ?? null);
}
function scrollIntoView() {
el.value.scrollIntoView();
} }
function readPromo() { function readPromo() {
@ -816,12 +814,6 @@ function emitUpdReaction(emoji: string, delta: number) {
emit('reaction', emoji); emit('reaction', emoji);
} }
} }
defineExpose({
focus,
blur,
scrollIntoView,
});
</script> </script>
<style lang="scss" module> <style lang="scss" module>

View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div <div
v-if="!muted" v-if="!muted"
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="rootEl"
v-hotkey="keymap" v-hotkey="keymap"
:class="$style.root" :class="$style.root"
> >
@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a> <a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
<div v-if="translating || translation" :class="$style.translation"> <div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/> <MkLoading v-if="translating" mini/>
<div v-else> <div v-else-if="translation">
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b> <b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/> <Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
</div> </div>
@ -281,7 +281,7 @@ if (noteViewInterruptors.length > 0) {
let result: Misskey.entities.Note | null = deepClone(note.value); let result: Misskey.entities.Note | null = deepClone(note.value);
for (const interruptor of noteViewInterruptors) { for (const interruptor of noteViewInterruptors) {
try { try {
result = await interruptor.handler(result); result = await interruptor.handler(result!) as Misskey.entities.Note | null;
if (result === null) { if (result === null) {
isDeleted.value = true; isDeleted.value = true;
return; return;
@ -290,19 +290,18 @@ if (noteViewInterruptors.length > 0) {
console.error(err); console.error(err);
} }
} }
note.value = result; note.value = result as Misskey.entities.Note;
}); });
} }
const isRenote = ( const isRenote = (
note.value.renote != null && note.value.renote != null &&
note.value.text == null && note.value.text == null &&
note.value.fileIds.length === 0 && note.value.fileIds && note.value.fileIds.length === 0 &&
note.value.poll == null note.value.poll == null
); );
const el = shallowRef<HTMLElement>(); const rootEl = shallowRef<HTMLElement>();
const noteEl = shallowRef<HTMLElement>();
const menuButton = shallowRef<HTMLElement>(); const menuButton = shallowRef<HTMLElement>();
const menuVersionsButton = shallowRef<HTMLElement>(); const menuVersionsButton = shallowRef<HTMLElement>();
const renoteButton = shallowRef<HTMLElement>(); const renoteButton = shallowRef<HTMLElement>();
@ -349,9 +348,9 @@ if ($i) {
const keymap = { const keymap = {
'r': () => reply(true), 'r': () => reply(true),
'e|a|plus': () => react(true), 'e|a|plus': () => react(true),
'q': () => renoteButton.value.renote(true), 'q': () => renote(appearNote.value.visibility),
'esc': blur, 'esc': blur,
'm|o': () => menu(true), 'm|o': () => showMenu(true),
's': () => showContent.value !== showContent.value, 's': () => showContent.value !== showContent.value,
}; };
@ -396,7 +395,7 @@ async function removeReply(id: Misskey.entities.Note['id']) {
} }
useNoteCapture({ useNoteCapture({
rootEl: el, rootEl: rootEl,
note: appearNote, note: appearNote,
pureNote: note, pureNote: note,
isDeletedRef: isDeleted, isDeletedRef: isDeleted,
@ -549,7 +548,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {
@ -571,7 +570,7 @@ function quote() {
}).then(() => { }).then(() => {
misskeyApi('notes/renotes', { misskeyApi('notes/renotes', {
noteId: appearNote.value.id, noteId: appearNote.value.id,
userId: $i.id, userId: $i?.id,
limit: 1, limit: 1,
quote: true, quote: true,
}).then((res) => { }).then((res) => {
@ -597,7 +596,7 @@ function reply(viaKeyboard = false): void {
reply: appearNote.value, reply: appearNote.value,
channel: appearNote.value.channel, channel: appearNote.value.channel,
animation: !viaKeyboard, animation: !viaKeyboard,
}, () => { }).then(() => {
focus(); focus();
}); });
} }
@ -621,7 +620,7 @@ function react(viaKeyboard = false): void {
} }
} else { } else {
blur(); blur();
reactionPicker.show(reactButton.value, reaction => { reactionPicker.show(reactButton.value ?? null, reaction => {
sound.playMisskeySfx('reaction'); sound.playMisskeySfx('reaction');
misskeyApi('notes/reactions/create', { misskeyApi('notes/reactions/create', {
@ -680,20 +679,22 @@ function undoRenote() : void {
} }
function onContextmenu(ev: MouseEvent): void { function onContextmenu(ev: MouseEvent): void {
const isLink = (el: HTMLElement) => { const isLink = (el: HTMLElement): boolean => {
if (el.tagName === 'A') return true; if (el.tagName === 'A') return true;
if (el.parentElement) { if (el.parentElement) {
return isLink(el.parentElement); return isLink(el.parentElement);
} }
return false;
}; };
if (isLink(ev.target)) return;
if (window.getSelection().toString() !== '') return; if (ev.target && isLink(ev.target as HTMLElement)) return;
if (window.getSelection()?.toString() !== '') return;
if (defaultStore.state.useReactionPickerForContextMenu) { if (defaultStore.state.useReactionPickerForContextMenu) {
ev.preventDefault(); ev.preventDefault();
react(); react();
} else { } else {
const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, menuButton, isDeleted }); const { menu, cleanup } = getNoteMenu({ note: note.value, translating, translation, isDeleted });
os.contextMenu(menu, ev).then(focus).finally(cleanup); os.contextMenu(menu, ev).then(focus).finally(cleanup);
} }
} }
@ -735,11 +736,11 @@ function showRenoteMenu(viaKeyboard = false): void {
} }
function focus() { function focus() {
noteEl.value?.focus(); rootEl.value?.focus();
} }
function blur() { function blur() {
noteEl.value?.blur(); rootEl.value?.blur();
} }
const repliesLoaded = ref(false); const repliesLoaded = ref(false);
@ -776,11 +777,11 @@ const conversationLoaded = ref(false);
function loadConversation() { function loadConversation() {
conversationLoaded.value = true; conversationLoaded.value = true;
if (appearNote.value.replyId == null) return;
misskeyApi('notes/conversation', { misskeyApi('notes/conversation', {
noteId: appearNote.value.replyId, noteId: appearNote.value.replyId,
}).then(res => { }).then(res => {
conversation.value = res.reverse(); conversation.value = res.reverse();
focus();
}); });
} }
@ -807,12 +808,12 @@ function setScrolling() {
onMounted(() => { onMounted(() => {
document.addEventListener('wheel', setScrolling); document.addEventListener('wheel', setScrolling);
isScrolling = false; isScrolling = false;
noteEl.value?.scrollIntoView({ block: 'center' }); rootEl.value?.scrollIntoView({ block: 'center' });
}); });
onUpdated(() => { onUpdated(() => {
if (!isScrolling) { if (!isScrolling) {
noteEl.value?.scrollIntoView({ block: 'center' }); rootEl.value?.scrollIntoView({ block: 'center' });
if (location.hash) { if (location.hash) {
location.replace(location.hash); // Jump to highlighted reply location.replace(location.hash); // Jump to highlighted reply
} }

View file

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA> </MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div> <div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles"> <div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="role in note.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/> <img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
</div> </div>
</div> </div>
<div :class="$style.username"><MkAcct :user="note.user"/></div> <div :class="$style.username"><MkAcct :user="note.user"/></div>