amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: real-time updates on note detail view (#246)

Browse Source 
Closes #223

Reviewed-on: https://git.joinsharkey.org/Sharkey/Sharkey/pulls/246
Reviewed-by: Marie <marie@kaifa.ch>
This commit is contained in:
Marie 2023-12-23 21:00:00 +01:00
commit 53365159e8
7 changed files with 91 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/backend/src/core/GlobalEventService.ts
View File

@ -130,6 +130,9 @@ export interface NoteEventTypes {
reaction: string;
userId: MiUser['id'];
};
replied: {
id: MiNote['id'];
};
}
type NoteStreamEventTypes = {
[key in keyof NoteEventTypes]: {

3
packages/backend/src/core/NoteCreateService.ts
View File

@ -780,6 +780,9 @@ export class NoteCreateService implements OnApplicationShutdown {
// If has in reply to note
if (data.reply) {
this.globalEventService.publishNoteStream(data.reply.id, 'replied', {
id: note.id,
});
// 通知
if (data.reply.userHost === null) {
const isThreadMuted = await this.noteThreadMutingsRepository.exist({

16
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -170,7 +170,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -372,11 +372,25 @@ const reactionsPagination = computed(() => ({
},
}));
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
}
useNoteCapture({
rootEl: el,
note: appearNote,
pureNote: note,
isDeletedRef: isDeleted,
onReplyCallback: addReplyTo,
});
useTooltip(renoteButton, async (showing) => {

24
packages/frontend/src/components/MkNoteSub.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < numberOfReplies">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@ -110,6 +110,7 @@ const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
detail?: boolean;
expandAllCws?: boolean;
onDeleteCallback?: (id: Misskey.entities.Note['id']) => void;
// how many notes are in between this one and the note being viewed in detail
depth?: number;
@ -132,6 +133,7 @@ const likeButton = shallowRef<HTMLElement>();
let appearNote = computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note);
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
const replies = ref<Misskey.entities.Note[]>([]);
const isRenote = (
props.note.renote != null &&
@ -140,10 +142,26 @@ const isRenote = (
props.note.poll == null
);
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
}
useNoteCapture({
rootEl: el,
note: appearNote,
isDeletedRef: isDeleted,
// only update replies if we are, in fact, showing replies
onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
onDeleteCallback: props.detail && props.depth < numberOfReplies.value ? props.onDeleteCallback : undefined,
});
if ($i) {
@ -250,8 +268,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
});
let replies = ref<Misskey.entities.Note[]>([]);
function boostVisibility() {
os.popupMenu([
{

16
packages/frontend/src/components/SkNoteDetailed.vue
View File

@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -380,11 +380,25 @@ const reactionsPagination = computed(() => ({
},
}));
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
}
useNoteCapture({
rootEl: el,
note: appearNote,
pureNote: note,
isDeletedRef: isDeleted,
onReplyCallback: addReplyTo,
});
useTooltip(renoteButton, async (showing) => {

24
packages/frontend/src/components/SkNoteSub.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
<div v-if="!hideLine" :class="$style.line"></div>
<div :class="$style.main">
<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
<template v-if="depth < numberOfReplies">
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
</template>
<div v-else :class="$style.more">
<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@ -119,6 +119,7 @@ const props = withDefaults(defineProps<{
note: Misskey.entities.Note;
detail?: boolean;
expandAllCws?: boolean;
onDeleteCallback?: (id: Misskey.entities.Note['id']) => void;
// how many notes are in between this one and the note being viewed in detail
depth?: number;
@ -141,6 +142,7 @@ const likeButton = shallowRef<HTMLElement>();
let appearNote = computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note);
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
const replies = ref<Misskey.entities.Note[]>([]);
const isRenote = (
props.note.renote != null &&
@ -149,10 +151,26 @@ const isRenote = (
props.note.poll == null
);
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
}
useNoteCapture({
rootEl: el,
note: appearNote,
isDeletedRef: isDeleted,
// only update replies if we are, in fact, showing replies
onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
onDeleteCallback: props.detail && props.depth < numberOfReplies.value ? props.onDeleteCallback : undefined,
});
if ($i) {
@ -259,8 +277,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
});
let replies = ref<Misskey.entities.Note[]>([]);
function boostVisibility() {
os.popupMenu([
{

15
packages/frontend/src/scripts/use-note-capture.ts
View File

@ -14,6 +14,8 @@ export function useNoteCapture(props: {
note: Ref<Misskey.entities.Note>;
pureNote: Ref<Misskey.entities.Note>;
isDeletedRef: Ref<boolean>;
onReplyCallback: (replyNote: Misskey.entities.Note) => void | undefined;
onDeleteCallback: (id: Misskey.entities.Note['id']) => void | undefined;
}) {
const note = props.note;
const pureNote = props.pureNote !== undefined ? props.pureNote : props.note;
@ -25,6 +27,17 @@ export function useNoteCapture(props: {
if ((id !== note.value.id) && (id !== pureNote.value.id)) return;
switch (type) {
case 'replied': {
if (!props.onReplyCallback) break;
const replyNote = await os.api("notes/show", {
noteId: body.id,
});
await props.onReplyCallback(replyNote);
break;
}
case 'reacted': {
const reaction = body.reaction;
@ -76,6 +89,8 @@ export function useNoteCapture(props: {
case 'deleted': {
props.isDeletedRef.value = true;
if (props.onDeleteCallback) await props.onDeleteCallback(id);
break;
}