feat(frontend/MkUrlPreview): support expanding ActivityPub notes

locales/index.d.ts

@@ -589,6 +589,7 @@ export interface Locale {
     "enablePlayer": string;
     "disablePlayer": string;
     "expandTweet": string;
+    "expandNote": string;
     "themeEditor": string;
     "description": string;
     "describeFile": string;

locales/ja-JP.yml

@@ -586,6 +586,7 @@ useCw: "内容を隠す"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
 expandTweet: "ツイートを展開する"
+expandNote: "ノートを展開する"
 themeEditor: "テーマエディター"
 description: "説明"
 describeFile: "キャプションを付ける"

packages/frontend/package.json

@@ -134,7 +134,7 @@
 		"start-server-and-test": "2.0.0",
 		"storybook": "7.0.27",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
-		"summaly": "github:misskey-dev/summaly",
+		"summaly": "github:misskey-dev/summaly#d2d8db49943ccb201c1b1b283e9d0a630519fac7",
 		"vite-plugin-turbosnap": "1.0.2",
 		"vitest": "0.33.0",
 		"vitest-fetch-mock": "0.2.2",

packages/frontend/src/components/MkNote.vue

@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
-					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
+					<MkNoteSimple v-if="appearNote.renote" :note="appearNote.renote" :quoted="true"/>
 					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
 						<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
 					</button>
@@ -758,17 +758,6 @@ function showReactions(): void {
 	font-size: 80%;
 }
 
-.quote {
-	padding: 8px 0;
-}
-
-.quoteNote {
-	padding: 16px;
-	border: dashed 1px var(--renote);
-	border-radius: 8px;
-	overflow: clip;
-}
-
 .channel {
 	opacity: 0.7;
 	font-size: 80%;
@@ -905,12 +894,6 @@ function showReactions(): void {
 	}
 }
 
-@container (max-width: 250px) {
-	.quoteNote {
-		padding: 12px;
-	}
-}
-
 .muted {
 	padding: 8px;
 	text-align: center;

packages/frontend/src/components/MkNoteSimple.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root">
+<div :class="[$style.root, quoted ? $style.quoted : null]">
 	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 	<div :class="$style.main">
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
@@ -32,6 +32,7 @@ import { $i } from '@/account';
 const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
+	quoted?: boolean;
 }>();
 
 const showContent = $ref(false);
@@ -80,12 +81,24 @@ const showContent = $ref(false);
 	padding: 0;
 }
 
+.quoted {
+	margin: 8px 0;
+	padding: 16px;
+	border: dashed 1px var(--renote);
+	border-radius: 8px;
+	overflow: clip;
+}
+
 @container (min-width: 250px) {
 	.avatar {
 		margin: 0 10px 0 0;
 		width: 40px;
 		height: 40px;
 	}
+
+	.quoted {
+		padding: 12px;
+	}
 }
 
 @container (min-width: 350px) {

packages/frontend/src/components/MkUrlPreview.vue

@@ -26,13 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
-<template v-else-if="tweetId && tweetExpanded">
+<template v-else-if="postExpanded">
-	<div ref="twitter">
+	<div v-if="tweetId" ref="twitter">
 		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 	</div>
+	<MkNoteSimple v-else-if="note" :note="note" :quoted="true"/>
 	<div :class="$style.action">
-		<MkButton :small="true" inline @click="tweetExpanded = false">
+		<MkButton :small="true" inline @click="postExpanded = false">
-			<i class="ti ti-x"></i> {{ i18n.ts.close }}
+			<i v-if="tweetId" class="ti ti-x"></i> {{ i18n.ts.close }}
 		</MkButton>
 	</div>
 </template>
@@ -59,10 +60,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</component>
 	<template v-if="showActions">
 		<div v-if="tweetId" :class="$style.action">
-			<MkButton :small="true" inline @click="tweetExpanded = true">
+			<MkButton :small="true" inline @click="postExpanded = true">
 				<i class="ti ti-brand-x"></i> {{ i18n.ts.expandTweet }}
 			</MkButton>
 		</div>
+		<div v-if="noteUrl || note" :class="$style.action">
+			<MkButton :small="true" inline @click="resolveNote()">
+				{{ i18n.ts.expandNote }}
+			</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 }}
@@ -78,11 +84,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, onUnmounted } from 'vue';
 import type { summaly } from 'summaly';
+import type * as misskey from 'misskey-js';
 import { url as local } from '@/config';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 import { deviceKind } from '@/scripts/device-kind';
 import MkButton from '@/components/MkButton.vue';
+import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import { versatileLang } from '@/scripts/intl-const';
 import { defaultStore } from '@/store';
 
@@ -118,7 +126,9 @@ let player = $ref({
 } as SummalyResult['player']);
 let playerEnabled = $ref(false);
 let tweetId = $ref<string | null>(null);
-let tweetExpanded = $ref(props.detail);
+let noteUrl = $ref<string | null>(null);
+let note = $ref<misskey.entities.Note | null>(null);
+let postExpanded = $ref(props.detail);
 const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 let tweetHeight = $ref(150);
 let unknownUrl = $ref(false);
@@ -137,35 +147,60 @@ if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/
 
 requestUrl.hash = '';
 
-window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`)
+(async (): Promise<void> => {
-	.then(res => {
+	const res = await window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${versatileLang}`);
-		if (!res.ok) {
+	if (!res.ok) {
-			fetching = false;
-			unknownUrl = true;
-			return;
-		}
-
-		return res.json();
-	})
-	.then((info: SummalyResult) => {
-		if (info.url == null) {
-			fetching = false;
-			unknownUrl = true;
-			return;
-		}
-
 		fetching = false;
-		unknownUrl = false;
+		unknownUrl = true;
+		return;
+	}
 
-		title = info.title;
+	const info = await res.json() as SummalyResult;
-		description = info.description;
-		thumbnail = info.thumbnail;
-		icon = info.icon;
-		sitename = info.sitename;
-		player = info.player;
-	});
 
-function adjustTweetHeight(message: any) {
+	fetching = false;
+	unknownUrl = false;
+
+	title = info.title;
+	description = info.description;
+	thumbnail = info.thumbnail;
+	icon = info.icon;
+	sitename = info.sitename;
+	player = info.player;
+	noteUrl = info.activityPub;
+
+	if (postExpanded) {
+		await resolveNote();
+	}
+})();
+
+async function resolveNote(): Promise<void> {
+	if (note) {
+		// Reuse the data
+		postExpanded = true;
+		return;
+	}
+	if (!noteUrl) {
+		// Note does not exist
+		return;
+	}
+
+	try {
+		fetching = true;
+		const result = await os.api('ap/show', { uri: noteUrl });
+		if (result.type === 'Note') {
+			note = result.object;
+			postExpanded = true;
+		} else {
+			postExpanded = false;
+		}
+	} finally {
+		// Prevent repeated resolving
+		noteUrl = null;
+		fetching = false;
+	}
+}
+
+function adjustTweetHeight(message: any): void {
 	if (message.origin !== 'https://platform.twitter.com') return;
 	const embed = message.data?.['twttr.embed'];
 	if (embed?.method !== 'twttr.private.resize') return;

packages/frontend/test/url-preview.test.ts

@@ -3,17 +3,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { describe, test, assert, afterEach } from 'vitest';
+import { describe, test, assert, afterEach, beforeAll, vi } from 'vitest';
 import { render, cleanup, type RenderResult } from '@testing-library/vue';
 import './init';
 import type { summaly } from 'summaly';
 import { components } from '@/components';
 import { directives } from '@/directives';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import type * as misskey from "misskey-js";
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
-describe('MkMediaImage', () => {
+describe('MkUrlPreview', () => {
 	const renderPreviewBy = async (summary: Partial<SummalyResult>): Promise<RenderResult> => {
 		if (!summary.player) {
 			summary.player = {
@@ -47,13 +48,18 @@ describe('MkMediaImage', () => {
 		return result;
 	};
 
-	const renderAndOpenPreview = async (summary: Partial<SummalyResult>): Promise<HTMLIFrameElement | null> => {
+	const renderAndOpenPreview = async (summary: Partial<SummalyResult>): Promise<RenderResult> => {
 		const mkUrlPreview = await renderPreviewBy(summary);
 		const buttons = mkUrlPreview.getAllByRole('button');
 		buttons[0].click();
 		// Wait for the click event to be fired
 		await Promise.resolve();
 
+		return mkUrlPreview;
+	};
+
+	const renderAndOpenPreviewInIFrame = async (summary: Partial<SummalyResult>): Promise<HTMLIFrameElement | null> => {
+		const mkUrlPreview = await renderAndOpenPreview(summary);
 		return mkUrlPreview.container.querySelector('iframe');
 	};
 
@@ -85,7 +91,7 @@ describe('MkMediaImage', () => {
 	});
 
 	test('Having a player should setup the iframe', async () => {
-		const iframe = await renderAndOpenPreview({
+		const iframe = await renderAndOpenPreviewInIFrame({
 			url: 'https://example.local',
 			player: {
 				url: 'https://example.local/player',
@@ -103,7 +109,7 @@ describe('MkMediaImage', () => {
 	});
 
 	test('Having a player with `allow` field should set permissions', async () => {
-		const iframe = await renderAndOpenPreview({
+		const iframe = await renderAndOpenPreviewInIFrame({
 			url: 'https://example.local',
 			player: {
 				url: 'https://example.local/player',
@@ -117,7 +123,7 @@ describe('MkMediaImage', () => {
 	});
 
 	test('Having a player width should keep the fixed aspect ratio', async () => {
-		const iframe = await renderAndOpenPreview({
+		const iframe = await renderAndOpenPreviewInIFrame({
 			url: 'https://example.local',
 			player: {
 				url: 'https://example.local/player',
@@ -131,7 +137,7 @@ describe('MkMediaImage', () => {
 	});
 
 	test('Having a player width should keep the fixed height', async () => {
-		const iframe = await renderAndOpenPreview({
+		const iframe = await renderAndOpenPreviewInIFrame({
 			url: 'https://example.local',
 			player: {
 				url: 'https://example.local/player',
@@ -143,4 +149,41 @@ describe('MkMediaImage', () => {
 		assert.exists(iframe, 'iframe should exist');
 		assert.strictEqual(iframe?.parentElement?.style.paddingTop, '200px');
 	});
+
+	describe('ActivityPub notes', () => {
+		afterEach(() => {
+			vi.clearAllMocks();
+		});
+
+		test('Preview a note', async () => {
+			vi.mock('@/os', () => {
+				return {
+					api(endpoint: string): unknown {
+						if (endpoint === 'ap/show') {
+							return {
+								type: 'Note',
+								object: {
+									text: 'Mizuki',
+									createdAt: new Date().toISOString(),
+									user: {},
+									files: [] as misskey.entities.DriveFile[],
+								} as misskey.entities.Note,
+							};
+						}
+						throw new Error(`Unexpected api call ${endpoint}`);
+					},
+				};
+			});
+
+			const url = 'https://example.local';
+			const renderResult = await renderAndOpenPreview({
+				url,
+				description: 'Misskey',
+				activityPub: url,
+			});
+
+			assert.notExists(renderResult.queryByText('Misskey'), 'Original description should disappear');
+			assert.exists(renderResult.queryByText('Mizuki'), 'ActivityPub fetch result should appear');
+		});
+	});
 });

pnpm-lock.yaml

@@ -996,7 +996,7 @@ importers:
         specifier: github:misskey-dev/storybook-addon-misskey-theme
         version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.0.27)(@storybook/components@7.1.0)(@storybook/core-events@7.0.27)(@storybook/manager-api@7.0.27)(@storybook/preview-api@7.0.27)(@storybook/theming@7.0.27)(@storybook/types@7.0.27)(react-dom@18.2.0)(react@18.2.0)
       summaly:
-        specifier: github:misskey-dev/summaly
+        specifier: github:misskey-dev/summaly#d2d8db49943ccb201c1b1b283e9d0a630519fac7
         version: github.com/misskey-dev/summaly/d2d8db49943ccb201c1b1b283e9d0a630519fac7
       vite-plugin-turbosnap:
         specifier: 1.0.2