fix(frontend): ノート購読の挙動改善 (#16023)

* fix(frontend): ノート購読の挙動改善

* fix

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

packages/frontend/src/components/MkNote.vue

@@ -410,12 +410,15 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 	});
 });
 
+let subscribeManuallyToNoteCapture: () => void = () => { };
+
 if (!props.mock) {
-	useNoteCapture({
+	const { subscribe } = useNoteCapture({
 		note: appearNote,
 		parentNote: note,
 		$note: $appearNote,
 	});
+	subscribeManuallyToNoteCapture = subscribe;
 }
 
 if (!props.mock) {
@@ -472,6 +475,8 @@ function renote(viaKeyboard = false) {
 	os.popupMenu(menu, renoteButton.value, {
 		viaKeyboard,
 	});
+
+	subscribeManuallyToNoteCapture();
 }
 
 function reply(): void {
@@ -567,6 +572,11 @@ function undoReact(): void {
 
 	misskeyApi('notes/reactions/delete', {
 		noteId: appearNote.id,
+	}).then(() => {
+		noteEvents.emit(`unreacted:${appearNote.id}`, {
+			userId: $i!.id,
+			reaction: oldReaction,
+		});
 	});
 }
 

packages/frontend/src/components/MkNoteDetailed.vue

@@ -397,7 +397,7 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
-useNoteCapture({
+const { subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
 	note: appearNote,
 	parentNote: note,
 	$note: $appearNote,
@@ -453,6 +453,9 @@ function renote() {
 
 	const { menu } = getRenoteMenu({ note: note, renoteButton });
 	os.popupMenu(menu, renoteButton.value);
+
+	// リノート後は反応が来る可能性があるので手動で購読する
+	subscribeManuallyToNoteCapture();
 }
 
 function reply(): void {
@@ -527,6 +530,11 @@ function undoReact(targetNote: Misskey.entities.Note): void {
 	if (!oldReaction) return;
 	misskeyApi('notes/reactions/delete', {
 		noteId: targetNote.id,
+	}).then(() => {
+		noteEvents.emit(`unreacted:${appearNote.id}`, {
+			userId: $i!.id,
+			reaction: oldReaction,
+		});
 	});
 }
 

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -89,8 +89,7 @@ async function toggleReaction() {
 		}).then(() => {
 			noteEvents.emit(`unreacted:${props.noteId}`, {
 				userId: $i!.id,
-				reaction: props.reaction,
-				emoji: emoji.value,
+				reaction: oldReaction,
 			});
 			if (oldReaction !== props.reaction) {
 				misskeyApi('notes/reactions/create', {

packages/frontend/src/composables/use-note-capture.ts

@@ -191,7 +191,9 @@ export function useNoteCapture(props: {
 	note: Pick<Misskey.entities.Note, 'id' | 'createdAt'>;
 	parentNote: Misskey.entities.Note | null;
 	$note: ReactiveNoteData;
-}) {
+}): {
+	subscribe: () => void;
+} {
 	const { note, parentNote, $note } = props;
 
 	noteEvents.on(`reacted:${note.id}`, onReacted);
@@ -254,6 +256,14 @@ export function useNoteCapture(props: {
 		$note.pollChoices = choices;
 	}
 
+	function subscribe() {
+		if ($i && store.s.realtimeMode) {
+			realtimeSubscribe(props);
+		} else {
+			pollingSubscribe(props);
+		}
+	}
+
 	onUnmounted(() => {
 		noteEvents.off(`reacted:${note.id}`, onReacted);
 		noteEvents.off(`unreacted:${note.id}`, onUnreacted);
@@ -265,19 +275,29 @@ export function useNoteCapture(props: {
 	// TODO: デバイスとサーバーの時計がズレていると不具合の元になるため、ズレを検知して警告を表示するなどのケアが必要かもしれない
 	if (parentNote == null) {
 		if ((Date.now() - new Date(note.createdAt).getTime()) > 1000 * 60 * 5) { // 5min
-			// リノートで表示されているノートでもないし、投稿からある程度経過しているので購読しない
-			return;
+			// リノートで表示されているノートでもないし、投稿からある程度経過しているので自動で購読しない
+			return {
+				subscribe: () => {
+					subscribe();
+				},
+			};
 		}
 	} else {
 		if ((Date.now() - new Date(parentNote.createdAt).getTime()) > 1000 * 60 * 5) { // 5min
-			// リノートで表示されているノートだが、リノートされてからある程度経過しているので購読しない
-			return;
+			// リノートで表示されているノートだが、リノートされてからある程度経過しているので自動で購読しない
+			return {
+				subscribe: () => {
+					subscribe();
+				},
+			};
 		}
 	}
 
-	if ($i && store.s.realtimeMode) {
-		realtimeSubscribe(props);
-	} else {
-		pollingSubscribe(props);
-	}
+	subscribe();
+
+	return {
+		subscribe: () => {
+			// すでに購読しているので何もしない
+		},
+	};
 }