heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

real-time updates on note detail view

Browse source 
`useNoteCapture` already subscribes to all updates for a note, so
we can tell it when a note gets replied to, too

Since I'm not actually adding any extra subscription in the client,
just an extra callback, there should be no overhead when replies are
not coming in.

Also, all the timelines already call `useNoteCapture` for each note
displayed, so we know the whole `GlobalEventService` thing works fine.

Many thanks to VueJS for taking care of all the DOM complications
This commit is contained in:
dakkar 2023-12-19 09:07:32 +00:00
parent b3b89567ee
commit 683b4aafb2
7 changed files with 42 additions and 4 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({

5
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -372,11 +372,16 @@ const reactionsPagination = computed(() => ({
},
}));
async function addReplyTo(note, replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
}
useNoteCapture({
rootEl: el,
note: appearNote,
pureNote: note,
isDeletedRef: isDeleted,
onReplyCallback: addReplyTo,
});
useTooltip(renoteButton, async (showing) => {

9
packages/frontend/src/components/MkNoteSub.vue
View file

@ -132,6 +132,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 +141,16 @@ const isRenote = (
props.note.poll == null
);
async function addReplyTo(note, replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
}
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,
});
if ($i) {
@ -250,8 +257,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
});
let replies = ref<Misskey.entities.Note[]>([]);
function boostVisibility() {
os.popupMenu([
{

5
packages/frontend/src/components/SkNoteDetailed.vue
View file

@ -380,11 +380,16 @@ const reactionsPagination = computed(() => ({
},
}));
async function addReplyTo(note, replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
}
useNoteCapture({
rootEl: el,
note: appearNote,
pureNote: note,
isDeletedRef: isDeleted,
onReplyCallback: addReplyTo,
});
useTooltip(renoteButton, async (showing) => {

9
packages/frontend/src/components/SkNoteSub.vue
View file

@ -141,6 +141,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 +150,16 @@ const isRenote = (
props.note.poll == null
);
async function addReplyTo(note, replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
}
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,
});
if ($i) {
@ -259,8 +266,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
});
let replies = ref<Misskey.entities.Note[]>([]);
function boostVisibility() {
os.popupMenu([
{

12
packages/frontend/src/scripts/use-note-capture.ts
View file

@ -14,6 +14,7 @@ export function useNoteCapture(props: {
note: Ref<Misskey.entities.Note>;
pureNote: Ref<Misskey.entities.Note>;
isDeletedRef: Ref<boolean>;
onReplyCallback: (note, replyNote: Misskey.entities.Note) => void | undefined;
}) {
const note = props.note;
const pureNote = props.pureNote !== undefined ? props.pureNote : props.note;
@ -25,6 +26,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(pureNote, replyNote);
break;
}
case 'reacted': {
const reaction = body.reaction;