fix: URLプレビューの動作改善＋動作設定を可能にする

[samunohito]

fix: #13569

What

• misskey-dev/[email protected]で実装された機能に対応します。
• URLプレビューの有効化・無効化を切り替えられるようにします（issueにないけど、折角なので）
  サーバ側のプレビュー生成エンドポイントはエラーを返すようになり、フロント側はMkUrlPreviewコンポーネントのレンダリングをしなくなります。

Why

fix: #13569

Additional info (optional)

• ローカルのサーバ上でTLに大容量ファイルへのリンク先を貼って生成処理の動作確認
• パケットキャプチャを用いてバックエンドからのプレビュー取得時にUser-Agentが変わっているかを確認
• pnpm migrate / pnpm revertによりテーブル項目のマイグレーションがエラーなく行われることを確認
• URLプレビュー無効化時、MkUrlPreviewを使用するコンポーネントでエラーとならないことを確認

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

[samunohito]

misskey-dev/summaly#23

上記が取り込まれ、新バージョンがリリースされるまで待ち

[codecov]

Codecov Report

Attention: Patch coverage is 84.00000% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 81.06%. Comparing base (f4838e5) to head (9ae5778).

Files	Patch %	Lines
packages/frontend/src/components/MkUrlPreview.vue	33.33%	4 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #13579       +/-   ##
============================================
+ Coverage    66.31%   81.06%   +14.75%     
============================================
  Files          990      189      -801     
  Lines       115724    29717    -86007     
  Branches      4497      542     -3955     
============================================
- Hits         76744    24091    -52653     
+ Misses       38948     5619    -33329     
+ Partials        32        7       -25     

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

[github-actions]

このPRによるapi.jsonの差分

差分はこちら

--- base
+++ head
@@ -501,7 +501,9 @@
                       "type": [
                         "string",
                         "null"
-                      ]
+                      ],
+                      "deprecated": true,
+                      "description": "[Deprecated] Use \"urlPreviewSummaryProxyUrl\" instead."
                     },
                     "themeColor": {
                       "type": [
@@ -520,6 +522,30 @@
                     },
                     "version": {
                       "type": "string"
+                    },
+                    "urlPreviewEnabled": {
+                      "type": "boolean"
+                    },
+                    "urlPreviewTimeout": {
+                      "type": "number"
+                    },
+                    "urlPreviewMaximumContentLength": {
+                      "type": "number"
+                    },
+                    "urlPreviewRequireContentLength": {
+                      "type": "boolean"
+                    },
+                    "urlPreviewUserAgent": {
+                      "type": [
+                        "string",
+                        "null"
+                      ]
+                    },
+                    "urlPreviewSummaryProxyUrl": {
+                      "type": [
+                        "string",
+                        "null"
+                      ]
                     }
                   },
                   "required": [
@@ -620,7 +646,13 @@
                     "themeColor",
                     "tosUrl",
                     "uri",
-                    "version"
+                    "version",
+                    "urlPreviewEnabled",
+                    "urlPreviewTimeout",
+                    "urlPreviewMaximumContentLength",
+                    "urlPreviewRequireContentLength",
+                    "urlPreviewUserAgent",
+                    "urlPreviewSummaryProxyUrl"
                   ]
                 }
               }
@@ -12672,12 +12704,6 @@
                       "type": "string"
                     }
                   },
-                  "summalyProxy": {
-                    "type": [
-                      "string",
-                      "null"
-                    ]
-                  },
                   "deeplAuthKey": {
                     "type": [
                       "string",
@@ -12923,6 +12949,37 @@
                     "items": {
                       "type": "string"
                     }
+                  },
+                  "summalyProxy": {
+                    "type": [
+                      "string",
+                      "null"
+                    ],
+                    "description": "[Deprecated] Use \"urlPreviewSummaryProxyUrl\" instead."
+                  },
+                  "urlPreviewEnabled": {
+                    "type": "boolean"
+                  },
+                  "urlPreviewTimeout": {
+                    "type": "integer"
+                  },
+                  "urlPreviewMaximumContentLength": {
+                    "type": "integer"
+                  },
+                  "urlPreviewRequireContentLength": {
+                    "type": "boolean"
+                  },
+                  "urlPreviewUserAgent": {
+                    "type": [
+                      "string",
+                      "null"
+                    ]
+                  },
+                  "urlPreviewSummaryProxyUrl": {
+                    "type": [
+                      "string",
+                      "null"
+                    ]
                   }
                 }
               }
@@ -78616,6 +78673,9 @@
           "mediaProxy": {
             "type": "string"
           },
+          "enableUrlPreview": {
+            "type": "boolean"
+          },
           "backgroundImageUrl": {
             "type": [
               "string",
@@ -78697,6 +78757,7 @@
           "enableServiceWorker",
           "translatorAvailable",
           "mediaProxy",
+          "enableUrlPreview",
           "backgroundImageUrl",
           "impressumUrl",
           "logoImageUrl",

Get diff files from Workflow Page

[samunohito]

openにしました

[syuilo]

設定画面のスクショとかあると助かるかも

[samunohito]

コンパネ→全般の中にあります。
セキュリティの中にあったsummaryProxyの項目は以下に統合しました

[syuilo]

使用しない場合は空欄にしてください は別キーで良さそう

[samunohito]

たしかに使いまわせそう。わけます

[samunohito]

わけました

dc118d7

[syuilo]

カッコは表示する側で付けた方が良いかも

[samunohito]

かっこを表示する側でつけるようにしました

9bfc123

[syuilo]

サーバ側のプレビュー生成エンドポイントはエラーを返すようになり、フロント側はMkUrlPreviewコンポーネントのレンダリングをしなくなります。

レンダリングされないとレイアウトシフトが発生してしまいそう

[samunohito]

レンダリングされないとレイアウトシフトが発生してしまいそう

特に問題が起こるような個所はなさそうです。
MkUrlPreviewのレンダリング有無を細工した箇所は以下のファイルなのですが、使用箇所的に影響ない or 表示内容に影響は無いように見えます。

• MkLink
  useTooltipの呼び出し有無のみでレイアウトに影響しない（マウスのせてもtooltipが出なくなる）
• MkUrl
  MkLinkと同様
• MkNote
  MkUrlPreviewにより確保される領域をアテにしたレイアウトではない

PC表示

スマホ表示

• MkNoteDetailed
  MkNoteと同様
• page.text.vue
  MkUrlPreviewにより確保される領域をアテにしたレイアウトではない

PC表示

スマホ表示

[syuilo]

なんかMisskeyが開けないわね

[syuilo]

なんかMisskeyが開けないわね

e2eが落ちてるのも関係している...？

[samunohito]

cypressが死んでるのはこれが絡んでいる可能性
https://github.com/misskey-dev/misskey/pull/8642/files
https://github.com/misskey-dev/misskey/pull/13591/files#diff-6c107e2390c5ad84e123f3be09d7b91ba35de8f8cc550d1f358c75806df47645R33

[samunohito]

（cypressのts化はローカルで検討途中のまま忘れ去られてて…その段階で解決したんだけど、前すぎてどうやったか思い出せない）

[samunohito]

（原因としてはts化ではなく、ts化によって意図せぬ文法が浮き彫りになり、それを修正したことによって今まできちんと動いていなかったものが動くようになったためと推測）

[samunohito]

@syuilo
cypressが死んでるのは別の問題です（indexedDbの初期化まわり）

なんかMisskeyが開けないわね

これ、何か変なログ出てたりしますか？F12のコンソールかバックエンドのログあたりに…

[syuilo]

@syuilo cypressが死んでるのは別の問題です（indexedDbの初期化まわり）

なんかMisskeyが開けないわね

これ、何か変なログ出てたりしますか？F12のコンソールかバックエンドのログあたりに…

どっちも何も出ない

[samunohito]

pnpm migrate忘れとか…そういうのが無いとなると、もう謎

[syuilo]

うーむ謎

[syuilo]

pnpm startであればいけた

[syuilo]

👍🏻 👍🏻

[samunohito]

こちらはstartでもdevでも両方とも見れてるから更に謎…

[tamaina]

urlプレビューがhrefを持たなくなったんだけど仕様？バグ？

[tamaina]

？

[u1-liquid]

これunused variableとして認識されちゃって消したと思われる（実際は:[attr]=という形で使われている）

[tamaina]

lintが自動でいじって消した可能性があるということか

[tamaina]

手元のVS Codeではちゃんと参照が動いてるけど

[tamaina]

（手動で消したとの情報が入りました

[tamaina]

なおした 40bb606

[samunohito]

未使用かと思って消してしまっていた
もうしわけない

[tamaina]

説明書きのクエリ文字列、@misskey-dev/summalyのサーバーのコードを見る限り効いていないような感じがするけど、適用してる実装はあるのかしら

[tamaina]

サーバーのコード

↓

https://github.com/misskey-dev/summaly/blob/509a35abe28dbcee80298683a188f1912571b3f6/src/index.ts#L121