feat(frontend): URLプレビューでsummary_large_image形式の大きいカード表示に対応

[chan-mai]

What

リンクプレビューで twitter:card = summary_large_image 相当の大きいカード表示に対応する。

変更内容:

• @misskey-dev/summaly を 5.3.0 → 5.4.0 に更新。summaly が thumbnailStyle: 'summary' | 'summary_large_image' | null を返すようになった (misskey-dev/summaly#66)
• MkUrlPreview.vue で thumbnailStyle === 'summary_large_image' のとき、サムネイルを上部全幅 (16:9) で表示する大きいカードレイアウトに切り替える。画像は元解像度で取得する（preview=1 パラメータを除去）
• ユーザー設定「URLプレビューを常にコンパクト表示にする」を追加（環境設定 > タイムラインとノート）。オンにすると summary_large_image 指定があっても従来の小さいカードで表示する

Before / After:

Before	After
どんなリンクも一律で左 100px サムネイル + 本文の小さいカード	summary_large_image 指定のリンクは上部全幅サムネイル + 本文の大きいカードで表示

Why

現行の実装はリンク先の種別に関わらず一律で同じ小さなカードに収束してしまい、リンク先ごとの性質を反映した見せ方ができない。twitter:card = summary_large_image にフォールバックする形であれば、既に OGP を整備しているサイトに追加対応を求めずに恩恵を出せる。

Related: #17391

Additional info (optional)

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Add story of storybook
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[github-actions]

このPRによるapi.jsonの差分
差分はありません。
Get diff files from Workflow Page

[codecov]

Codecov Report

❌ Patch coverage is 29.03226% with 22 lines in your changes missing coverage. Please review.
✅ Project coverage is 24.84%. Comparing base (408d056) to head (1f74b4b).
⚠️ Report is 6 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/frontend/src/components/MkUrlPreview.vue	31.81%	13 Missing and 2 partials ⚠️
packages/frontend-shared/js/media-proxy.ts	0.00%	4 Missing ⚠️
.../backend/src/server/file/FileServerProxyHandler.ts	66.66%	1 Missing ⚠️
packages/frontend/src/components/MkLink.vue	0.00%	1 Missing ⚠️
packages/frontend/src/components/MkNote.vue	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #17392      +/-   ##
===========================================
+ Coverage    15.22%   24.84%   +9.62%     
===========================================
  Files          247     1154     +907     
  Lines        12322    39315   +26993     
  Branches      4170    10949    +6779     
===========================================
+ Hits          1876     9768    +7892     
- Misses        8183    23677   +15494     
- Partials      2263     5870    +3607     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Backend memory usage comparison

Before GC

Metric	base (MB)	head (MB)	Diff (MB)	Diff (%)
VmRSS	316.51 MB	323.39 MB	+6.88 MB	+2.17%
VmHWM	316.51 MB	323.39 MB	+6.88 MB	+2.17%
VmSize	23163.16 MB	23170.21 MB	+7.04 MB	+0.03%
VmData	1362.88 MB	1370.49 MB	+7.60 MB	+0.55%

After GC

Metric	base (MB)	head (MB)	Diff (MB)	Diff (%)
VmRSS	316.63 MB	324.22 MB	+7.58 MB	+2.39%
VmHWM	316.63 MB	324.22 MB	+7.58 MB	+2.39%
VmSize	23163.58 MB	23171.21 MB	+7.62 MB	+0.03%
VmData	1363.30 MB	1371.33 MB	+8.02 MB	+0.58%

After Request

Metric	base (MB)	head (MB)	Diff (MB)	Diff (%)
VmRSS	316.98 MB	324.59 MB	+7.61 MB	+2.40%
VmHWM	316.98 MB	324.60 MB	+7.62 MB	+2.40%
VmSize	23163.66 MB	23171.21 MB	+7.54 MB	+0.03%
VmData	1363.46 MB	1371.41 MB	+7.94 MB	+0.58%

See workflow logs for details

[syuilo]

スクリーンショットなどあれば助かります 🙏🏻

[chan-mai]

このような表示になります！

[kakkokari-gtyih]

preview外した場合でも画像の縮小ってされてたかしら
サイト管理者がog imageにGIFを貼っていたり、解像度のめちゃくちゃでかい画像を貼っていた場合にあれかもしれない

画像プロキシに thumbnail オプションを生やして1280x720くらいに縮小してGIF解除して返す（or DriveFile.thumbnailUrlと同等の圧縮・サイズ変更を掛ける）と良いのかも

[kakkokari-gtyih]

あとMkUrlPreviewPopupでは強制的にsummary相当で出すようにする必要がありそう

[poppingmoon]

リンクが複数あるときの表示が気になります
TwitterやBlueskyではリンクが複数あってもカードは1つしか表示されませんが、Misskeyではすべてのリンクに対してプレビューが表示されるので、かなり大きな面積を占めることになるのではないかと思います

現在の実装では、リンクが4つ以上あるノートは折りたたまれることになっていますが、この条件についても考える必要がありそうです

misskey/packages/frontend-shared/js/collapsed.ts

Lines 26 to 28 in bf3c1f6

	if (urls.length >= 4) {
	return true;
	}

[chan-mai]

リンクが複数あるときの表示が気になります
TwitterやBlueskyではリンクが複数あってもカードは1つしか表示されませんが、Misskeyではすべてのリンクに対してプレビューが表示されるので、かなり大きな面積を占めることになるのではないかと思います
現在の実装では、リンクが4つ以上あるノートは折りたたまれることになっていますが、この条件についても考える必要がありそうです

Twitter同様、先頭のURLのみ埋め込み、残りはリンクテキストとしたほうがいいんでしょうか？

[poppingmoon]

[]() と ?[]() が別々にあることを考えると、リンクを貼ったのにプレビューが出ない（ことがある）というのはあまり好まれないかもしれないと思いました

対案としては、リンクが一定数以上あるときはすべて細くするとか、カルーセルにしてスワイプできるようにするとかは思いつきました

[kakkokari-gtyih]

プレビュー対象になるリンクが2件以上の場合はsummary相当にするのが丸い気がしなくもない
あと添付メディアがあって、かつプレビュー対象のリンクが１つでもある場合もsummary相当になるか

[chan-mai]

一旦2件以上の場合はsummary相当になる形で実装してみます🙌🏻

[chan-mai]

とりあえずこんな感じになりました

[chan-mai]

ああsubmoduleでCIコケちゃった
なおします

[kakkokari-gtyih]

• リンクホバー時のプレビュー（強制summary相当）
• メディア添付＋リンク1つの時の挙動（強制summary相当）

[poppingmoon]

ダイレクトメッセージも同様にしたほうがいいと思います

misskey/packages/frontend/src/pages/chat/XMessage.vue

Line 24 in bf3c1f6

<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>

[chan-mai]

• リンクホバー時のプレビュー
• メディア + URL単体
  を追加
• ダイレクトメッセージでも同様の振る舞いをするように変更
  しました

[kakkokari-gtyih]

もろもろ調整した

---

• OGP画像の拡大表示時の画像縦横比は16:9ではなく1.91:1なのでそちらに変更
• ホバー時のURLプレビューは常にコンパクトに