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 25.80645% with 23 lines in your changes missing coverage. Please review.
✅ Project coverage is 17.00%. Comparing base (a75f3ad) to head (b5b8e91).
⚠️ Report is 5 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/frontend/src/components/MkUrlPreview.vue	36.36%	12 Missing and 2 partials ⚠️
packages/frontend-shared/js/media-proxy.ts	0.00%	4 Missing ⚠️
.../backend/src/server/file/FileServerProxyHandler.ts	0.00%	1 Missing and 2 partials ⚠️
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    24.87%   17.00%   -7.88%     
===========================================
  Files         1161     1161              
  Lines        39629    39651      +22     
  Branches     11041    11050       +9     
===========================================
- Hits          9859     6742    -3117     
- Misses       23849    26278    +2429     
- Partials      5921     6631     +710     

☔ View full report in Codecov by Harness.
📢 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	306.38 MB	304.79 MB	-1.58 MB	-0.51%
VmHWM	306.38 MB	304.79 MB	-1.58 MB	-0.51%
VmSize	23171.08 MB	23151.32 MB	-19.76 MB	-0.08%
VmData	1371.82 MB	1351.65 MB	-20.16 MB	-1.47%

After GC

Metric	base (MB)	head (MB)	Diff (MB)	Diff (%)
VmRSS	306.40 MB	304.80 MB	-1.60 MB	-0.52%
VmHWM	306.40 MB	304.80 MB	-1.60 MB	-0.52%
VmSize	23171.83 MB	23151.49 MB	-20.34 MB	-0.08%
VmData	1372.57 MB	1351.82 MB	-20.75 MB	-1.51%

After Request

Metric	base (MB)	head (MB)	Diff (MB)	Diff (%)
VmRSS	306.83 MB	305.14 MB	-1.68 MB	-0.54%
VmHWM	306.83 MB	305.14 MB	-1.68 MB	-0.54%
VmSize	23171.92 MB	23151.49 MB	-20.42 MB	-0.08%
VmData	1372.66 MB	1351.82 MB	-20.83 MB	-1.51%

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コケちゃった
なおします

[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プレビューは常にコンパクトに

[poppingmoon]

プレイヤーを開くとカードは消えるのでコンパクトにしなくてもいいと思います

[kakkokari-gtyih]

コンフリクト解消

[kakkokari-gtyih]

コンフリクト解消

[kakkokari-gtyih]

プレイヤーを開くとカードは消えるのでコンパクトにしなくてもいいと思います

たいおうしました

[kakkokari-gtyih]

コンフリクト解消

[syuilo]

オプトアウトかオプトインか悩ましいわね

[kakkokari-gtyih]

だいぶ条件絞ってるのでそんなに影響ないと思うけど