merge: fetch linked notes manually, unless we have them in DB - fixes 1006 (!945)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/945

Closes #1006

Approved-by: Marie <github@yuugi.dev>
Approved-by: Hazelnoot <acomputerdog@gmail.com>

1 files changed, 35 insertions, 18 deletions

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 7fcdc2e5d1..922fa86072 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -71,6 +71,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
 			</MkButton>
 		</div>
+		<div v-if="showAsQuote && activityPub && !theNote && !fetchingTheNote" :class="$style.action">
+			<MkButton :small="true" inline @click="fetchNote()">
+				<i class="ti ti-note"></i> {{ i18n.ts.fetchLinkedNote }}
+			</MkButton>
+		</div>
 		<div v-if="!playerEnabled && player.url" :class="$style.action">
 			<MkButton :small="true" inline @click="playerEnabled = true">
 				<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
@@ -150,29 +155,38 @@ const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 const tweetHeight = ref(150);
 const unknownUrl = ref(false);
 const theNote = ref<Misskey.entities.Note | null>(null);
+const fetchingTheNote = ref(false);
 
 onDeactivated(() => {
 	playerEnabled.value = false;
 });
 
-watch(activityPub, async (uri) => {
-		if (!props.showAsQuote) return;
-		if (!uri) return;
-		try {
-			const response = await misskeyApi('ap/show', { uri });
-			if (response.type !== 'Note') return;
-			const theNoteId = response['object'].id;
-			if (theNoteId && props.skipNoteIds && props.skipNoteIds.includes(theNoteId)) {
-				hidePreview.value = true;
-				return;
-			}
-			theNote.value = response['object'];
-		} catch (err) {
-			if (_DEV_) {
-				console.error(`failed to extract note for preview of ${uri}`, err);
-			}
+async function fetchNote() {
+	if (!props.showAsQuote) return;
+	if (!activityPub.value) return;
+	if (theNote.value) return;
+	if (fetchingTheNote.value) return;
+
+	fetchingTheNote.value = true;
+	try {
+		const response = await misskeyApi('ap/show', { uri: activityPub.value });
+		if (response.type !== 'Note') return;
+		const theNoteId = response['object'].id;
+		if (theNoteId && props.skipNoteIds && props.skipNoteIds.includes(theNoteId)) {
+			hidePreview.value = true;
+			return;
 		}
-});
+		theNote.value = response['object'];
+		fetchingTheNote.value = false;
+	} catch (err) {
+		if (_DEV_) {
+			console.error(`failed to extract note for preview of ${activityPub.value}`, err);
+		}
+		activityPub.value = null;
+		fetchingTheNote.value = false;
+		theNote.value = null;
+	}
+}
 
 const requestUrl = new URL(props.url);
 if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');
@@ -199,7 +213,7 @@ window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLa
 
 		return res.json();
 	})
-	.then((info: SummalyResult | null) => {
+	.then((info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
 		if (!info || info.url == null) {
 			fetching.value = false;
 			unknownUrl.value = true;
@@ -217,6 +231,9 @@ window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLa
 		player.value = info.player;
 		sensitive.value = info.sensitive ?? false;
 		activityPub.value = info.activityPub;
+		if (info.haveNoteLocally) {
+			fetchNote();
+		}
 	});
 
 function adjustTweetHeight(message: MessageEvent) {