misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

merge: Fix "fetch linked note" button for AP previews (!1037)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1037

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Hazelnoot 2025-05-20 22:03:53 +00:00
commit 6c77be64b6
3 changed files with 301 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

98
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -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;
}
return res.json();
})
.then((info: SummalyResult & { haveNoteLocally?: boolean } | null) => {
if (!info || info.url == null) {
fetching.value = false;
unknownUrl.value = true;
return;
}
fetching.value = false;
unknownUrl.value = false;
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();
}
function refresh(withFetch = false) {
const params = new URLSearchParams({
url: requestUrl.href,
lang: versatileLang,
});
if (withFetch) {
params.set('fetch', 'true');
}
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;
}
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;
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>