make sure that the "fetch linked note" button actually remembers that the note is fetched

1 files changed, 56 insertions, 38 deletions

diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 21de04b844..5a5099d8e0 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -71,8 +71,8 @@ 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()">
+		<div v-if="showAsQuote && activityPub && !theNote && $i" :class="$style.action">
+			<MkButton :small="true" :disabled="!!fetching || fetchingTheNote" inline @click="() => refresh(true)">
 				<i class="ti ti-note"></i> {{ i18n.ts.fetchLinkedNote }}
 			</MkButton>
 		</div>
@@ -93,6 +93,7 @@ import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
 import { url as local } from '@@/js/config.js';
 import { versatileLang } from '@@/js/intl-const.js';
 import * as Misskey from 'misskey-js';
+import { maybeMakeRelative } from '@@/js/url.js';
 import type { summaly } from '@misskey-dev/summaly';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
@@ -104,7 +105,7 @@ import { prefer } from '@/preferences.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { warningExternalWebsite } from '@/utility/warning-external-website.js';
 import DynamicNoteSimple from '@/components/DynamicNoteSimple.vue';
-import { maybeMakeRelative } from '@@/js/url.js';
+import { $i } from '@/i';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
@@ -131,7 +132,7 @@ const maybeRelativeUrl = maybeMakeRelative(props.url, local);
 const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
-const fetching = ref(true);
+const fetching = ref<Promise<void> | null>(null);
 const title = ref<string | null>(null);
 const description = ref<string | null>(null);
 const thumbnail = ref<string | null>(null);
@@ -139,11 +140,12 @@ const icon = ref<string | null>(null);
 const sitename = ref<string | null>(null);
 const sensitive = ref<boolean>(false);
 const activityPub = ref<string | null>(null);
-const player = ref({
+const player = ref<SummalyResult['player']>({
 	url: null,
 	width: null,
 	height: null,
-} as SummalyResult['player']);
+	allow: [],
+});
 const playerEnabled = ref(false);
 const tweetId = ref<string | null>(null);
 const tweetExpanded = ref(props.detail);
@@ -173,14 +175,14 @@ async function fetchNote() {
 			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;
+	} finally {
+		fetchingTheNote.value = false;
 	}
 }
 
@@ -198,39 +200,52 @@ if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/
 
 requestUrl.hash = '';
 
-window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`)
-	.then(res => {
-		if (!res.ok) {
-			if (_DEV_) {
-				console.warn(`[HTTP${res.status}] Failed to fetch url preview`);
-			}
-			return null;
-		}
+function refresh(withFetch = false) {
+	const params = new URLSearchParams({
+		url: requestUrl.href,
+		lang: versatileLang,
+	});
+	if (withFetch) {
+		params.set('fetch', 'true');
+	}
 
-		return res.json();
-	})
-	.then((info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
-		if (!info || info.url == null) {
-			fetching.value = false;
-			unknownUrl.value = true;
-			return;
-		}
+	const headers = $i ? { Authorization: `Bearer ${$i.token}` } : undefined;
+	return fetching.value ??= window.fetch(`/url?${params.toString()}`, { headers })
+		.then(res => {
+			if (!res.ok) {
+				if (_DEV_) {
+					console.warn(`[HTTP${res.status}] Failed to fetch url preview`);
+				}
+				return null;
+			}
 
-		fetching.value = false;
-		unknownUrl.value = false;
+			return res.json();
+		})
+		.then(async (info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
+			unknownUrl.value = info != null;
+			title.value = info?.title ?? null;
+			description.value = info?.description ?? null;
+			thumbnail.value = info?.thumbnail ?? null;
+			icon.value = info?.icon ?? null;
+			sitename.value = info?.sitename ?? null;
+			player.value = info?.player ?? {
+				url: null,
+				width: null,
+				height: null,
+				allow: [],
+			};
+			sensitive.value = info?.sensitive ?? false;
+			activityPub.value = info?.activityPub ?? null;
 
-		title.value = info.title;
-		description.value = info.description;
-		thumbnail.value = info.thumbnail;
-		icon.value = info.icon;
-		sitename.value = info.sitename;
-		player.value = info.player;
-		sensitive.value = info.sensitive ?? false;
-		activityPub.value = info.activityPub;
-		if (info.haveNoteLocally) {
-			fetchNote();
-		}
-	});
+			theNote.value = null;
+			if (info?.haveNoteLocally) {
+				await fetchNote();
+			}
+		})
+		.finally(() => {
+			fetching.value = null;
+		});
+}
 
 function adjustTweetHeight(message: MessageEvent) {
 	if (message.origin !== 'https://platform.twitter.com') return;
@@ -256,6 +271,9 @@ window.addEventListener('message', adjustTweetHeight);
 onUnmounted(() => {
 	window.removeEventListener('message', adjustTweetHeight);
 });
+
+// Load initial data
+refresh();
 </script>
 
 <style lang="scss" module>