merge: real-time updates on note detail view (#246)
Closes #223 Reviewed-on: https://git.joinsharkey.org/Sharkey/Sharkey/pulls/246 Reviewed-by: Marie <marie@kaifa.ch>
This commit is contained in:
commit
53365159e8
7 changed files with 91 additions and 10 deletions
|
@ -130,6 +130,9 @@ export interface NoteEventTypes {
|
|||
reaction: string;
|
||||
userId: MiUser['id'];
|
||||
};
|
||||
replied: {
|
||||
id: MiNote['id'];
|
||||
};
|
||||
}
|
||||
type NoteStreamEventTypes = {
|
||||
[key in keyof NoteEventTypes]: {
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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([
|
||||
{
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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([
|
||||
{
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue