fix(backend): configテンプレートのallowedPrivateNetworksをリスト記法に変更してエラーの発生を抑制 (#17701)

* fix(backend): configテンプレートのallowedPrivateNetworksをリスト記法に変更してエラーの発生を抑制

* fix

.claude/commands/harness-audit.md

@@ -35,7 +35,7 @@ Misskey リポジトリの `.claude/` 構成を 7 カテゴリで採点し、改
 | 2 | Context Efficiency | frontmatter description の冗長度、SKILL.md の長さ分布、重複情報、CLAUDE.md の肥大化 |
 | 3 | Quality Gates | Stop / PreToolUse / PostToolUse hook の整備、`/quality-gate` 等の完了前ゲートの有無、自動 lint/typecheck |
 | 4 | Memory Persistence | `.claude/skills/*/SKILL.md` と `references/` の同期状態を評価。プロジェクト側 `.claude/memory/` は未採用方針 (auto-memory はユーザーホーム側で自動運用) のため、ここを採点起点にせず既定 5/10 から開始する |
-| 5 | Eval Coverage | `working-on-backend` / `working-on-frontend` の testing リファレンス (backend-testing.md / frontend-testing.md) の網羅、Misskey 固有の e2e/fed/Storybook/Cypress 適用ガイド |
+| 5 | Eval Coverage | `working-on-backend` / `working-on-frontend` の testing リファレンス (backend-testing.md / frontend-testing.md) の網羅、Misskey 固有の e2e/fed/Storybook/Playwright 適用ガイド |
 | 6 | Security Guardrails | SPDX 規約適用、migration 不変性ルール、ja-JP.yml 限定編集ルール、secrets 検出 |
 | 7 | Cost Efficiency | enabledPlugins の重複・過剰、context-budget の整備、MCP 過剰登録なし |
 

.claude/commands/quality-gate.md

@@ -21,7 +21,7 @@ note: 元 ECC 版は言語自動判定 + format/lint/type のジェネリック
 
 `/quality-gate [scope]`
 
-完了前の **軽量** 品質チェック。重い E2E / 連合テスト (test:e2e / test:fed / Cypress) は CI 側で実行されるため、本コマンドには含めない。
+完了前の **軽量** 品質チェック。重い E2E / 連合テスト (test:e2e / test:fed / Playwright) は CI 側で実行されるため、本コマンドには含めない。
 
 ## Scope
 
@@ -120,4 +120,4 @@ Frontend ut: PASS  (87/87)
 
 - ジェネリックな言語自動判定を排除し、Misskey 固定 pipeline に。
 - formatter フェーズなし (Misskey は ESLint --fix のみ採用)。
-- e2e / federation / Cypress は重いため除外し CI 側に委譲。
+- e2e / federation / Playwright は重いため除外し CI 側に委譲。

.claude/skills/working-on-backend/references/knowledge/backend-testing.md

@@ -26,7 +26,7 @@ cp .github/misskey/test.yml .config/test.yml
 
 補足:
 
-- ルートの `pnpm start:test` (Cypress 用にテストサーバーを起動するコマンド) を使う経路では実行時に `ncp` で自動コピーされる ([package.json](../../../../../package.json))。それ以外で backend テストを直接走らせる時は上記の手動コピーが必要
+- ルートの `pnpm start:test` (Playwright 用にテストサーバーを起動するコマンド) を使う経路では実行時に `ncp` で自動コピーされる ([package.json](../../../../../package.json))。それ以外で backend テストを直接走らせる時は上記の手動コピーが必要
 - すでに `.config/test.yml` があれば各テストスクリプトの内部 `compile-config` で十分なので、追加で `pnpm --filter backend compile-config` を叩く必要はない
 - `pnpm start:test` は backend e2e テスト (`pnpm --filter backend test:e2e`) の前提ではない (ポート競合の元になるため使わないこと)
 

.claude/skills/working-on-frontend/SKILL.md

@@ -27,7 +27,7 @@ SKILL.md 本体は references への索引だけ。具体的な手順や規約
 - SCSS Modules / `--MI_THEME-*` `--MI-*` CSS 変数 / グローバル utility class (`_button` 等) → [references/knowledge/scss-modules.md](references/knowledge/scss-modules.md)
 - `os.alert` / `os.confirm` / `os.popup` 等 UI ヘルパー (ブラウザ標準 `alert()` 直呼びは禁止) → [references/knowledge/os-api.md](references/knowledge/os-api.md)
 - `*.stories.impl.ts` 併設規則 + 複数 story / argTypes / layout / action パターン → [references/knowledge/storybook.md](references/knowledge/storybook.md)
-- frontend Vitest / Cypress E2E の書き方と前提 → [references/knowledge/frontend-testing.md](references/knowledge/frontend-testing.md)
+- frontend Vitest / Playwright E2E の書き方と前提 → [references/knowledge/frontend-testing.md](references/knowledge/frontend-testing.md)
 
 ## 必ず最後に通る場所
 

.claude/skills/working-on-frontend/references/knowledge/frontend-testing.md

@@ -1,4 +1,4 @@
-# Frontend テスト (Vitest / Cypress)
+# Frontend テスト (Vitest / Playwright)
 
 Misskey frontend のテスト構成。
 
@@ -13,11 +13,11 @@ pnpm --filter frontend test-and-coverage   # カバレッジ付き
 
 - 主な配置: `packages/frontend/test/*.test.ts` (例: `i18n.test.ts`, `theme.test.ts`, `is-birthday.test.ts`)
 - ビルドツール周りなど対象コードと隣接させた方が分かりやすいテストは、コードと同じディレクトリに `*.test.ts` として置く (例: [packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts](../../../../../packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts))
-- 共有コンポーネント (`MkX.vue`) のユニットテストは現状少なく、`*.spec.ts` / `__tests__/` 形式は採用していない (Storybook + Cypress でカバー)
+- 共有コンポーネント (`MkX.vue`) のユニットテストは現状少なく、`*.spec.ts` / `__tests__/` 形式は採用していない (Storybook + Playwright でカバー)
 
-## Cypress E2E
+## Playwright E2E
 
-Cypress は **起動済みのテストサーバー** に対して走るため、unit より前提が多い。[.github/workflows/test-frontend.yml](../../../../../.github/workflows/test-frontend.yml) の `e2e` ジョブと同じ手順をローカルで踏む:
+Playwright は **起動済みのテストサーバー** に対して走るため、unit より前提が多い。[.github/workflows/test-frontend.yml](../../../../../.github/workflows/test-frontend.yml) の `e2e` ジョブと同じ手順をローカルで踏む:
 
 ```bash
 # 1. テスト用 DB / Redis を起動 (テスト用ポート。開発用の compose.local-db.yml ではない)
@@ -29,15 +29,14 @@ cp .github/misskey/test.yml .config/test.yml
 # 3. 全体ビルド
 pnpm build
 
-# 4. テストサーバー起動 + Cypress 実行 (いずれもルートから)
-pnpm e2e                # 内部で pnpm start:test を起動し http://localhost:61812 を待って Cypress run
-pnpm cy:open            # 対話的に開く (サーバーは別途 pnpm start:test で起動しておく)
+# 4. テストサーバー起動 + Playwright 実行 (いずれもルートから)
+pnpm e2e                # 内部で pnpm start:test を起動し http://localhost:61812 を待って Playwright を実行
 ```
 
-- 設定: ルート [cypress.config.ts](../../../../../cypress.config.ts)
-- テスト本体は [cypress/](../../../../../cypress/) 配下
+- 設定: ルート [packages/frontend/playwright.config.ts](../../../../../packages/frontend/playwright.config.ts) で、`packages/frontend/test/e2e/` 配下の `*.spec.ts` を対象にする
+- テスト本体は [packages/frontend/test/e2e/](../../../../../packages/frontend/test/e2e/) 配下に配置する。
 
-新規 frontend 機能の E2E は Cypress に書くのが基本。ただし対象は主要 UI フロー (login / post / drive etc) に限定し、細かい単位テストは Vitest または Storybook で代替する慣習。
+新規 frontend 機能の E2E は Playwright に書くのが基本。ただし対象は主要 UI フロー (login / post / drive etc) に限定し、細かい単位テストは Vitest または Storybook で代替する慣習。
 
 ## Storybook (視覚確認 + Chromatic 視覚回帰)
 
@@ -55,6 +54,6 @@ pnpm --filter frontend build-storybook    # 静的ビルド
 frontend のテスト種別で DB / Redis の要否が違う:
 
 - **Vitest (unit)** — DB 不要。ロジック / コンポーネント単体のテストで backend に繋がない (CI の `vitest` ジョブにも `services:` は無い)
-- **Cypress (E2E)** — テストサーバー (`pnpm start:test`) 経由で backend に繋ぐため DB / Redis が必要。**テスト用ポートの [packages/backend/test/compose.yml](../../../../../packages/backend/test/compose.yml)** を使う (上記 Cypress E2E の手順を参照)
+- **Playwright (E2E)** — テストサーバー (`pnpm start:test`) 経由で backend に繋ぐため DB / Redis が必要。**テスト用ポートの [packages/backend/test/compose.yml](../../../../../packages/backend/test/compose.yml)** を使う (上記 Playwright E2E の手順を参照)
 
 開発用の `compose.local-db.yml` (db `5432` / redis `6379`) は **テストには使わない**。テスト用の `packages/backend/test/compose.yml` (`54312` / `56312`) とはポートが異なり、混同すると接続できない。

.config/docker_example.yml

@@ -233,9 +233,8 @@ proxyBypassHosts:
 # For security reasons, uploading attachments from the intranet is prohibited,
 # but exceptions can be made from the following settings. Default value is "undefined".
 # Read changelog to learn more (Improvements of 12.90.0 (2021/09/04)).
-#allowedPrivateNetworks: [
-#  '127.0.0.1/32'
-#]
+#allowedPrivateNetworks:
+#  - '127.0.0.1/32'
 
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000

.config/example.yml

@@ -303,8 +303,31 @@ id: 'aidx'
 
 #sentryForBackend:
 #  enableNodeProfiling: true
+#  # Specify Sentry integration names to disable individual auto-instrumentation.
+#  # The names are integration .name values, not factory function names.
+#  # To check enabled names, set `options.debug: true` and see
+#  # "Integration installed: <name>" in the Sentry logs.
+#  #
+#  # As of 2026-07-07 / @sentry/node 10.62.0, useful names for Misskey include:
+#  #   Postgres  ... DB queries (when pg is externalized)
+#  #   Redis     ... ioredis commands
+#  #   Fastify   ... inbound HTTP routes
+#  #   Http      ... inbound/outbound HTTP; disabling this can also affect request isolation
+#  #   NodeFetch ... fetch/undici requests
+#  disabledIntegrations: ['Postgres']
 #  options:
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
+#    # By default, Misskey prevents Sentry trace headers (`sentry-trace` and
+#    # `baggage`) from being sent to remote ActivityPub/Webhook/etc. hosts.
+#    # To intentionally propagate distributed traces to trusted internal services,
+#    # list only those internal URL patterns here.
+#    # Avoid broad patterns that match remote servers unless you intentionally
+#    # want to restore Sentry's legacy behavior of propagating traces to all
+#    # outbound HTTP requests.
+#    #tracePropagationTargets: []
+#    # Internal allowlist example:
+#    #tracePropagationTargets:
+#    #  - 'internal-service.example'
 
 #sentryForFrontend:
 #  vueIntegration:
@@ -383,9 +406,8 @@ proxyBypassHosts:
 # For security reasons, uploading attachments from the intranet is prohibited,
 # but exceptions can be made from the following settings. Default value is "undefined".
 # Read changelog to learn more (Improvements of 12.90.0 (2021/09/04)).
-#allowedPrivateNetworks: [
-#  '127.0.0.1/32'
-#]
+#allowedPrivateNetworks:
+#  - '127.0.0.1/32'
 
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000

.config/playwright-devcontainer.yml

@@ -218,9 +218,8 @@ proxyBypassHosts:
 # Media Proxy
 #mediaProxy: https://example.com/proxy
 
-allowedPrivateNetworks: [
-  '127.0.0.1/32'
-]
+allowedPrivateNetworks:
+ - '127.0.0.1/32'
 
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000

.devcontainer/devcontainer.yml

@@ -205,9 +205,8 @@ proxyBypassHosts:
 # Media Proxy
 #mediaProxy: https://example.com/proxy
 
-allowedPrivateNetworks: [
-  '127.0.0.1/32'
-]
+allowedPrivateNetworks:
+ - '127.0.0.1/32'
 
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000

.devcontainer/init.sh

@@ -12,4 +12,4 @@ pnpm install --frozen-lockfile
 cp .devcontainer/devcontainer.yml .config/default.yml
 pnpm build
 pnpm migrate
-pnpm exec cypress install
+pnpm --filter frontend exec playwright install --with-deps chromium

.github/labeler.yml

@@ -16,7 +16,7 @@
 'packages/frontend:test':
 - any:
   - changed-files:
-    - any-glob-to-any-file: ['cypress/**/*']
+    - any-glob-to-any-file: ['packages/frontend/test/**/*']
 
 'packages/sw':
 - any:

.github/workflows/check-spdx-license-id.yml

@@ -44,7 +44,6 @@ jobs:
           }
 
           directories=(
-            "cypress/e2e"
             "packages/backend/migration"
             "packages/backend/src"
             "packages/backend/test"

.github/workflows/report-api-diff.yml

@@ -65,7 +65,7 @@ jobs:
             echo '```diff' >> ./output.md
             cat ./api.json.diff >> ./output.md
             echo '```' >> ./output.md
-            echo '</details>' >> ./output.md
+            echo '</details>' >> .output.md
           fi
 
           echo "$FOOTER" >> ./output.md

.github/workflows/test-frontend.yml

@@ -57,11 +57,6 @@ jobs:
     name: E2E tests (frontend)
     runs-on: ubuntu-latest
 
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [chrome]
-
     services:
       postgres:
         image: postgres:18
@@ -79,12 +74,6 @@ jobs:
     - uses: actions/checkout@v6.0.3
       with:
         submodules: true
-    # https://github.com/cypress-io/cypress-docker-images/issues/150
-    #- name: Install mplayer for FireFox
-    #  run: sudo apt install mplayer -y
-    #  if: ${{ matrix.browser == 'firefox' }}
-    #- uses: browser-actions/setup-firefox@latest
-    #  if: ${{ matrix.browser == 'firefox' }}
     - name: Setup pnpm
       uses: pnpm/action-setup@v6.0.9
     - name: Use Node.js
@@ -97,29 +86,14 @@ jobs:
       run: cp .github/misskey/test.yml .config
     - name: Build
       run: pnpm build
-    # https://github.com/cypress-io/cypress/issues/4351#issuecomment-559489091
-    - name: ALSA Env
-      run: echo -e 'pcm.!default {\n type hw\n card 0\n}\n\nctl.!default {\n type hw\n card 0\n}' > ~/.asoundrc
-    # XXX: This tries reinstalling Cypress if the binary is not cached
-    # Remove this when the cache issue is fixed
-    - name: Cypress install
-      run: pnpm exec cypress install
-    - name: Cypress run
-      uses: cypress-io/github-action@v7.4.0
+    - name: Playwright install
+      working-directory: packages/frontend
+      run: pnpm exec playwright install --with-deps chromium
+    - name: Test
+      run: pnpm start-server-and-test start:test http://localhost:61812 "pnpm --filter frontend test:e2e"
       timeout-minutes: 15
-      with:
-        install: false
-        start: pnpm start:test
-        wait-on: 'http://localhost:61812'
-        headed: true
-        browser: ${{ matrix.browser }}
     - uses: actions/upload-artifact@v7
       if: failure()
       with:
-        name: ${{ matrix.browser }}-cypress-screenshots
-        path: cypress/screenshots
-    - uses: actions/upload-artifact@v7
-      if: always()
-      with:
-        name: ${{ matrix.browser }}-cypress-videos
-        path: cypress/videos
+        name: playwright-e2e-artifacts
+        path: packages/frontend/test/e2e/artifacts

.gitignore

@@ -23,9 +23,8 @@ packages/sw/.yarn/cache
 # pnpm
 .pnpm-store
 
-# Cypress
-cypress/screenshots
-cypress/videos
+# Playwright
+packages/frontend/test/e2e/artifacts
 
 # Coverage
 coverage
@@ -35,7 +34,7 @@ coverage
 !/.config/example.yml
 !/.config/docker_example.yml
 !/.config/docker_example.env
-!/.config/cypress-devcontainer.yml
+!/.config/playwright-devcontainer.yml
 docker-compose.yml
 ./compose.yml
 .devcontainer/compose.yml

CHANGELOG.md

@@ -21,16 +21,30 @@
 ### Client
 - 2025.4.0 以前の設定情報の移行処理が削除されました
 	- 2025.4.0 から直接 2026.6.0 以上にアップデートする場合は設定が移行されませんので注意してください。移行したい場合は一度 2026.5.1 を経由してください。
+- Enhance: 画像ビューワーを独自実装に変更・動画プレイヤーを統合
+  - 操作性の改善
+  - ビューワーとMisskeyの各種機能との統合を強化
+  - パフォーマンスの向上
+  - Enhance: マウスホイールで拡大縮小できるように
+  - Fix: 幅が狭い画面で動画の再生が困難な問題を修正
+  - Fix: 一部の画像のみセンシティブなとき、ビューワー内で画像を切り替えるとセンシティブな画像がそのまま表示される問題を修正
+  - Fix: 一部の画像をビューワーで読み込んだ際に正しく表示されない問題を修正
+- Fix: 「画像を新しいタブで開く」が機能しなくなっていた問題を修正
 - Fix: デバイスタイプをスマートフォンに固定している状態で画面幅が広いとき、画面左上のアイコンが表示されない問題を修正
 - Fix: チャットでIMEの変換を確定するEnterでメッセージが送信されてしまうことがある問題を修正
 - Fix: 自分へのメンションに対する色分けで、判定が大文字/小文字を区別していた問題を修正
+- Fix: いくつかのイベントリスナーが正しく解除されない問題を修正（メモリ使用量の改善）
 
 ### Server
 - Enhance: センシティブメディアの判定を外部サービス ([sensitive-detector](https://github.com/misskey-dev/sensitive-detector)) に分離し、`nsfwjs` / `@tensorflow/tfjs(-node)` の同梱と NSFW 判定モデルを廃止 (#16804)
+- Enhance: Sentry バックエンドの自動計装を `sentryForBackend.disabledIntegrations` で個別に無効化できるように
 - Enhance: Node.js 22.23.0以降、24.17.0以降、26.4.0以降をサポートするように
 - Enhance: Docker Image の Node.js を 26.4.0 に、Debian を trixie (v13) に更新
+- Enhance: URLプレビューの結果を内部でキャッシュするように
 - Fix: `/stats` API のレスポンス型が正しくない問題を修正
 - Fix: ハッシュタグに関連するデータを更新する際のエラーハンドリングを修正
+- Fix: Sentry 使用環境下にて、Misskey が発行した SQL クエリが span に含まれない問題を修正
+- Fix: Sentry 使用環境下にて、外部送信リクエストへ `sentry-trace` / `baggage` ヘッダーが既定で付与されないように
 
 ## 2026.6.0
 

chart/files/default.yml

@@ -224,9 +224,8 @@ id: "aidx"
 # Media Proxy
 #mediaProxy: https://example.com/proxy
 
-#allowedPrivateNetworks: [
-#  '127.0.0.1/32'
-#]
+allowedPrivateNetworks:
+ - '127.0.0.1/32'
 
 # Upload or download file size limits (bytes)
 #maxFileSize: 262144000

cypress.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from 'cypress'
-
-export default defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:61812',
-  },
-})

cypress/e2e/basic.cy.ts

@@ -1,265 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-describe('Before setup instance', () => {
-	beforeEach(() => {
-		cy.resetState();
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-  it('successfully loads', () => {
-    cy.visitHome();
-  });
-
-	it('setup instance', () => {
-    cy.visitHome();
-
-		cy.intercept('POST', '/api/admin/accounts/create').as('signup');
-
-		cy.get('[data-cy-admin-initial-password] input').type('example_password_please_change_this_or_you_will_get_hacked');
-		cy.get('[data-cy-admin-username] input').type('admin');
-		cy.get('[data-cy-admin-password] input').type('admin1234');
-		cy.get('[data-cy-admin-ok]').click();
-
-		// なぜか動かない
-		//cy.wait('@signup').should('have.property', 'response.statusCode');
-		cy.wait('@signup');
-
-		cy.intercept('POST', '/api/admin/update-meta').as('update-meta');
-
-		cy.get('[data-cy-next]').click();
-		cy.get('[data-cy-server-name] input').type('Testskey');
-		cy.get('[data-cy-server-setup-wizard-apply]').click();
-
-		cy.wait('@update-meta');
-  });
-});
-
-describe('After setup instance', () => {
-	beforeEach(() => {
-		cy.resetState();
-
-		// インスタンス初期セットアップ
-		cy.registerUser('admin', 'pass', true);
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-  it('successfully loads', () => {
-    cy.visitHome();
-  });
-
-	it('signup', () => {
-		cy.visitHome();
-
-		cy.intercept('POST', '/api/signup').as('signup');
-
-		cy.get('[data-cy-signup]').click();
-		cy.get('[data-cy-signup-rules-continue]').should('be.disabled');
-		cy.get('[data-cy-signup-rules-notes-agree] [data-cy-switch-toggle]').click();
-		cy.get('[data-cy-modal-dialog-ok]').click();
-		cy.get('[data-cy-signup-rules-continue]').should('not.be.disabled');
-		cy.get('[data-cy-signup-rules-continue]').click();
-
-		cy.get('[data-cy-signup-submit]').should('be.disabled');
-		cy.get('[data-cy-signup-username] input').type('alice');
-		cy.get('[data-cy-signup-submit]').should('be.disabled');
-		cy.get('[data-cy-signup-password] input').type('alice1234');
-		cy.get('[data-cy-signup-submit]').should('be.disabled');
-		cy.get('[data-cy-signup-password-retype] input').type('alice1234');
-		cy.get('[data-cy-signup-submit]').should('be.disabled');
-		cy.get('[data-cy-signup-invitation-code] input').type('test-invitation-code');
-		cy.get('[data-cy-signup-submit]').should('not.be.disabled');
-		cy.get('[data-cy-signup-submit]').click();
-
-		cy.wait('@signup');
-  });
-
-  it('signup with duplicated username', () => {
-		cy.registerUser('alice', 'alice1234');
-
-		cy.visitHome();
-
-		// ユーザー名が重複している場合の挙動確認
-		cy.get('[data-cy-signup]').click();
-		cy.get('[data-cy-signup-rules-continue]').should('be.disabled');
-		cy.get('[data-cy-signup-rules-notes-agree] [data-cy-switch-toggle]').click();
-		cy.get('[data-cy-modal-dialog-ok]').click();
-		cy.get('[data-cy-signup-rules-continue]').should('not.be.disabled');
-		cy.get('[data-cy-signup-rules-continue]').click();
-
-		cy.get('[data-cy-signup-username] input').type('alice');
-		cy.get('[data-cy-signup-password] input').type('alice1234');
-		cy.get('[data-cy-signup-password-retype] input').type('alice1234');
-		cy.get('[data-cy-signup-submit]').should('be.disabled');
-  });
-});
-
-describe('After user signup', () => {
-	beforeEach(() => {
-		cy.resetState();
-
-		// インスタンス初期セットアップ
-		cy.registerUser('admin', 'pass', true);
-
-		// ユーザー作成
-		cy.registerUser('alice', 'alice1234');
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-  it('successfully loads', () => {
-    cy.visitHome();
-  });
-
-	it('signin', () => {
-		cy.visitHome();
-
-		cy.intercept('POST', '/api/signin-flow').as('signin');
-
-		cy.get('[data-cy-signin]').click();
-
-		cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
-		// Enterキーで続行できるかの確認も兼ねる
-		cy.get('[data-cy-signin-username] input').type('alice{enter}');
-
-		cy.get('[data-cy-signin-page-password]').should('be.visible', { timeout: 10000 });
-		// Enterキーで続行できるかの確認も兼ねる
-		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
-
-		cy.wait('@signin');
-  });
-
-	it('suspend', function() {
-		cy.request('POST', '/api/admin/suspend-user', {
-			i: this.admin.token,
-			userId: this.alice.id,
-		});
-
-		cy.visitHome();
-
-		cy.get('[data-cy-signin]').click();
-
-		cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
-		cy.get('[data-cy-signin-username] input').type('alice{enter}');
-
-		// TODO: cypressにブラウザの言語指定できる機能が実装され次第英語のみテストするようにする
-		cy.contains(/アカウントが凍結されています|This account has been suspended due to/gi);
-	});
-});
-
-describe('After user signed in', () => {
-	beforeEach(() => {
-		cy.resetState();
-
-		// インスタンス初期セットアップ
-		cy.registerUser('admin', 'pass', true);
-
-		// ユーザー作成
-		cy.registerUser('alice', 'alice1234');
-
-		cy.login('alice', 'alice1234');
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-  it('successfully loads', () => {
-		// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-		cy.get('[data-cy-user-setup-continue]', { timeout: 30000 }).should('be.visible');
-  });
-
-	it('account setup wizard', () => {
-		// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-		cy.get('[data-cy-user-setup-continue]', { timeout: 30000 }).click();
-
-		cy.get('[data-cy-user-setup-user-name] input').type('ありす');
-		cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ');
-		// TODO: アイコン設定テスト
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		// プライバシー設定
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		// フォローはスキップ
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		// プッシュ通知設定はスキップ
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		cy.get('[data-cy-user-setup-continue]').click();
-  });
-});
-
-describe('After user setup', () => {
-	beforeEach(() => {
-		cy.resetState();
-
-		// インスタンス初期セットアップ
-		cy.registerUser('admin', 'pass', true);
-
-		// ユーザー作成
-		cy.registerUser('alice', 'alice1234');
-
-		cy.login('alice', 'alice1234');
-
-		// アカウント初期設定ウィザード
-		// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-		cy.get('[data-cy-user-setup] [data-cy-modal-window-close]', { timeout: 30000 }).click();
-		cy.get('[data-cy-modal-dialog-ok]').click();
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-	it('note', () => {
-		cy.get('[data-cy-open-post-form]').should('be.visible');
-		cy.get('[data-cy-open-post-form]').click();
-		cy.get('[data-cy-post-form-text]').type('Hello, Misskey!');
-		cy.get('[data-cy-open-post-form-submit]').click();
-
-		cy.contains('Hello, Misskey!', { timeout: 15000 });
-  });
-
-	it('open note form with hotkey', () => {
-		// Wait until the page loads
-		cy.get('[data-cy-open-post-form]').should('be.visible');
-		// Use trigger() to give different `code` to test if hotkeys also work on non-QWERTY keyboards.
-		cy.document().trigger("keydown", { eventConstructor: 'KeyboardEvent', key: "n", code: "KeyL" });
-		// See if the form is opened
-		cy.get('[data-cy-post-form-text]').should('be.visible');
-		// Close it
-		cy.focused().trigger("keydown", { eventConstructor: 'KeyboardEvent', key: "Escape", code: "Escape" });
-		// See if the form is closed
-		cy.get('[data-cy-post-form-text]').should('not.be.visible');
-  });
-});
-
-// TODO: 投稿フォームの公開範囲指定のテスト
-// TODO: 投稿フォームのファイル添付のテスト
-// TODO: 投稿フォームのハッシュタグ保持フィールドのテスト

cypress/e2e/router.cy.ts

@@ -1,35 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-describe('Router transition', () => {
-	describe('Redirect', () => {
-		// サーバの初期化。ルートのテストに関しては各describeごとに1度だけ実行で十分だと思う（使いまわした方が早い）
-		before(() => {
-			cy.resetState();
-
-			// インスタンス初期セットアップ
-			cy.registerUser('admin', 'pass', true);
-
-			// ユーザー作成
-			cy.registerUser('alice', 'alice1234');
-
-			cy.login('alice', 'alice1234');
-
-			// アカウント初期設定ウィザード
-			// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-			cy.get('[data-cy-user-setup] [data-cy-modal-window-close]', { timeout: 30000 }).click();
-			cy.wait(500);
-			cy.get('[data-cy-modal-dialog-ok]').click();
-		});
-
-		it('redirect to user profile', () => {
-			// テストのためだけに用意されたリダイレクト用ルートに飛ぶ
-			cy.visit('/redirect-test');
-
-			// プロフィールページのURLであることを確認する
-			cy.url().should('include', '/@alice')
-		});
-	});
-});

cypress/e2e/widgets.cy.ts

@@ -1,76 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-/* flaky
-describe('After user signed in', () => {
-	beforeEach(() => {
-		cy.resetState();
-		cy.viewport('macbook-16');
-
-		// インスタンス初期セットアップ
-		cy.registerUser('admin', 'pass', true);
-
-		// ユーザー作成
-		cy.registerUser('alice', 'alice1234');
-
-		cy.login('alice', 'alice1234');
-
-		// アカウント初期設定ウィザード
-		cy.get('[data-cy-user-setup] [data-cy-modal-window-close]').click();
-		cy.get('[data-cy-modal-dialog-ok]').click();
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-  it('widget edit toggle is visible', () => {
-		cy.get('[data-cy-widget-edit]').should('be.visible');
-  });
-
-	it('widget select should be visible in edit mode', () => {
-		cy.get('[data-cy-widget-edit]').click();
-		cy.get('[data-cy-widget-select]').should('be.visible');
-  });
-
-	it('first widget should be removed', () => {
-		cy.get('[data-cy-widget-edit]').click();
-		cy.get('[data-cy-customize-container]:first-child [data-cy-customize-container-remove]._button').click();
-		cy.get('[data-cy-customize-container]').should('have.length', 2);
-	});
-
-	function buildWidgetTest(widgetName) {
-		it(`${widgetName} widget should get added`, () => {
-			cy.get('[data-cy-widget-edit]').click();
-			cy.get('[data-cy-widget-select] select').select(widgetName, { force: true });
-			cy.get('[data-cy-bg]._modalBg[data-cy-transparent]').click({ multiple: true, force: true });
-			cy.get('[data-cy-widget-add]').click({ force: true });
-			cy.get(`[data-cy-mkw-${widgetName}]`).should('exist');
-		});
-	}
-
-	buildWidgetTest('memo');
-	buildWidgetTest('notifications');
-	buildWidgetTest('timeline');
-	buildWidgetTest('calendar');
-	buildWidgetTest('rss');
-	buildWidgetTest('trends');
-	buildWidgetTest('clock');
-	buildWidgetTest('activity');
-	buildWidgetTest('photos');
-	buildWidgetTest('digitalClock');
-	buildWidgetTest('federation');
-	buildWidgetTest('postForm');
-	buildWidgetTest('slideshow');
-	buildWidgetTest('serverMetric');
-	buildWidgetTest('onlineUsers');
-	buildWidgetTest('jobQueue');
-	buildWidgetTest('button');
-	buildWidgetTest('aiscript');
-	buildWidgetTest('aichan');
-});
-*/

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/support/commands.ts

@@ -1,67 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-
-Cypress.Commands.add('visitHome', () => {
-	cy.visit('/');
-	cy.get('button', { timeout: 30000 }).should('be.visible');
-})
-
-Cypress.Commands.add('resetState', () => {
-	// iframe.contentWindow.indexedDB.deleteDatabase() がchromeのバグで使用できないため、indexedDBを無効化している。
-	// see https://github.com/misskey-dev/misskey/issues/13605#issuecomment-2053652123
-	/*
-	cy.window().then(win => {
-		win.indexedDB.deleteDatabase('keyval-store');
-	});
-	 */
-	cy.request('POST', '/api/reset-db', {}).as('reset');
-	cy.get('@reset').its('status').should('equal', 204);
-	cy.reload(true);
-});
-
-Cypress.Commands.add('registerUser', (username, password, isAdmin = false) => {
-	const route = isAdmin ? '/api/admin/accounts/create' : '/api/signup';
-
-	cy.request('POST', route, {
-		username: username,
-		password: password,
-		...(isAdmin ? { setupPassword: 'example_password_please_change_this_or_you_will_get_hacked' } : {}),
-	}).its('body').as(username);
-});
-
-Cypress.Commands.add('login', (username, password) => {
-	cy.visitHome();
-
-	cy.intercept('POST', '/api/signin-flow').as('signin');
-
-	cy.get('[data-cy-signin]').click();
-	cy.get('[data-cy-signin-page-input]').should('be.visible', { timeout: 1000 });
-	cy.get('[data-cy-signin-username] input').type(`${username}{enter}`);
-	cy.get('[data-cy-signin-page-password]').should('be.visible', { timeout: 10000 });
-	cy.get('[data-cy-signin-password] input').type(`${password}{enter}`);
-
-	cy.wait('@signin').as('signedIn');
-});

cypress/support/e2e.ts

@@ -1,34 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-Cypress.on('uncaught:exception', (err, runnable) => {
-	if ([
-		'The source image cannot be decoded',
-
-		// Chrome
-		'ResizeObserver loop limit exceeded',
-
-		// Firefox
-		'ResizeObserver loop completed with undelivered notifications',
-	].some(msg => err.message.includes(msg))) {
-		return false;
-	}
-});

cypress/support/index.ts

@@ -1,19 +0,0 @@
-declare global {
-	namespace Cypress {
-		interface Chainable {
-			login(username: string, password: string): Chainable<void>;
-
-			registerUser(
-				username: string,
-				password: string,
-				isAdmin?: boolean
-			): Chainable<void>;
-
-			resetState(): Chainable<void>;
-
-			visitHome(): Chainable<void>;
-		}
-	}
-}
-
-export {}

cypress/tsconfig.json

@@ -1,8 +0,0 @@
-{
-	"compilerOptions": {
-		"lib": ["dom"],
-		"target": "esnext",
-		"types": ["cypress", "node"]
-	},
-	"include": ["./**/*.ts"]
-}

package.json

@@ -1,12 +1,12 @@
 {
 	"name": "misskey",
-	"version": "2026.7.0-alpha.1",
+	"version": "2026.7.0-alpha.3",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/misskey-dev/misskey.git"
 	},
-	"packageManager": "pnpm@11.8.0",
+	"packageManager": "pnpm@11.9.0",
 	"workspaces": [
 		"packages/misskey-js",
 		"packages/i18n",
@@ -41,10 +41,8 @@
 		"dev": "node scripts/dev.mjs",
 		"check-dts": "node scripts/check-dts.mjs",
 		"lint": "pnpm --no-bail -r lint && pnpm check-dts",
-		"cy:open": "pnpm cypress open --config-file=cypress.config.ts",
-		"cy:run": "pnpm cypress run",
-		"e2e": "pnpm start-server-and-test start:test http://localhost:61812 cy:run",
-		"e2e-dev-container": "ncp ./.config/cypress-devcontainer.yml ./.config/test.yml && pnpm start-server-and-test start:test http://localhost:61812 cy:run",
+		"e2e": "pnpm start-server-and-test start:test http://localhost:61812 \"pnpm --filter frontend test:e2e\"",
+		"e2e-dev-container": "ncp ./.config/playwright-devcontainer.yml ./.config/test.yml && pnpm start-server-and-test start:test http://localhost:61812 \"pnpm --filter frontend test:e2e\"",
 		"backend-unit-test": "cd packages/backend && pnpm test",
 		"backend-unit-test-and-coverage": "cd packages/backend && pnpm test-and-coverage",
 		"test": "pnpm -r test",
@@ -57,23 +55,21 @@
 		"esbuild": "0.28.1",
 		"execa": "9.6.1",
 		"ignore-walk": "9.0.0",
-		"js-yaml": "4.2.0",
-		"tar": "7.5.16"
+		"js-yaml": "5.2.0",
+		"tar": "7.5.19"
 	},
 	"devDependencies": {
 		"@eslint/js": "9.39.4",
 		"@misskey-dev/eslint-plugin": "2.1.0",
-		"@types/js-yaml": "4.0.9",
-		"@types/node": "26.0.0",
-		"@typescript-eslint/eslint-plugin": "8.61.1",
-		"@typescript-eslint/parser": "8.61.1",
+		"@types/node": "26.0.1",
+		"@typescript-eslint/eslint-plugin": "8.62.0",
+		"@typescript-eslint/parser": "8.62.0",
 		"@typescript/native-preview": "7.0.0-dev.20260426.1",
 		"cross-env": "10.1.0",
-		"cypress": "15.17.0",
 		"eslint": "9.39.4",
-		"globals": "17.6.0",
+		"globals": "17.7.0",
 		"ncp": "2.0.0",
-		"pnpm": "11.8.0",
+		"pnpm": "11.9.0",
 		"start-server-and-test": "3.0.11",
 		"typescript": "5.9.3"
 	}

packages/backend/package.json

@@ -51,8 +51,8 @@
 		"utf-8-validate": "6.0.6"
 	},
 	"dependencies": {
-		"@aws-sdk/client-s3": "3.1073.0",
-		"@aws-sdk/lib-storage": "3.1073.0",
+		"@aws-sdk/client-s3": "3.1075.0",
+		"@aws-sdk/lib-storage": "3.1075.0",
 		"@fastify/accepts": "5.0.4",
 		"@fastify/cors": "11.2.0",
 		"@fastify/http-proxy": "11.5.0",
@@ -63,23 +63,22 @@
 		"@misskey-dev/emoji-data": "17.0.3",
 		"@misskey-dev/sharp-read-bmp": "1.3.1",
 		"@misskey-dev/summaly": "5.5.1",
-		"@napi-rs/canvas": "1.0.0",
+		"@napi-rs/canvas": "1.0.1",
 		"@nestjs/common": "11.1.27",
 		"@nestjs/core": "11.1.27",
 		"@nestjs/testing": "11.1.27",
 		"@oxc-project/runtime": "0.137.0",
 		"@peertube/http-signature": "1.7.0",
-		"@sentry/node": "10.59.0",
-		"@sentry/profiling-node": "10.59.0",
-		"@simplewebauthn/server": "13.3.1",
-		"@sinonjs/fake-timers": "15.4.0",
-		"@smithy/node-http-handler": "4.8.1",
+		"@sentry/node": "10.62.0",
+		"@sentry/profiling-node": "10.62.0",
+		"@simplewebauthn/server": "13.3.2",
+		"@smithy/node-http-handler": "4.8.2",
 		"accepts": "1.3.8",
 		"ajv": "8.20.0",
 		"archiver": "8.0.0",
 		"bcryptjs": "3.0.3",
 		"blurhash": "2.0.5",
-		"bullmq": "5.79.0",
+		"bullmq": "5.79.2",
 		"cacheable-lookup": "7.0.0",
 		"chalk": "5.6.2",
 		"chalk-template": "1.1.2",
@@ -88,12 +87,12 @@
 		"content-disposition": "2.0.1",
 		"date-fns": "4.4.0",
 		"deep-email-validator": "0.1.27",
-		"fastify": "5.8.5",
+		"fastify": "5.9.0",
 		"fastify-raw-body": "5.0.0",
 		"feed": "5.2.1",
 		"file-type": "22.0.1",
 		"fluent-ffmpeg": "2.1.3",
-		"got": "15.0.5",
+		"got": "15.0.7",
 		"hpagent": "1.2.0",
 		"http-link-header": "1.1.3",
 		"i18n": "workspace:*",
@@ -110,10 +109,10 @@
 		"misskey-js": "workspace:*",
 		"misskey-reversi": "workspace:*",
 		"ms": "3.0.0-canary.202508261828",
-		"nanoid": "5.1.14",
+		"nanoid": "5.1.16",
 		"nested-property": "4.0.0",
 		"node-fetch": "3.3.2",
-		"node-html-parser": "7.1.0",
+		"node-html-parser": "8.0.3",
 		"nodemailer": "9.0.1",
 		"os-utils": "0.0.14",
 		"otpauth": "9.5.1",
@@ -135,7 +134,7 @@
 		"slacc": "0.1.5",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
-		"systeminformation": "5.31.7",
+		"systeminformation": "5.31.11",
 		"tinycolor2": "1.6.0",
 		"tmp": "0.2.7",
 		"tsc-alias": "1.8.17",
@@ -150,16 +149,16 @@
 		"@kitajs/ts-html-plugin": "4.1.4",
 		"@nestjs/platform-express": "11.1.27",
 		"@rollup/plugin-esm-shim": "0.1.8",
-		"@sentry/vue": "10.59.0",
+		"@sentry/vue": "10.62.0",
+		"@sinonjs/fake-timers": "15.4.0",
 		"@types/accepts": "1.3.7",
 		"@types/archiver": "8.0.0",
 		"@types/fluent-ffmpeg": "2.1.28",
 		"@types/http-link-header": "1.0.7",
-		"@types/js-yaml": "4.0.9",
 		"@types/jsonld": "1.5.15",
 		"@types/mime-types": "3.0.1",
 		"@types/ms": "2.1.0",
-		"@types/node": "26.0.0",
+		"@types/node": "26.0.1",
 		"@types/nodemailer": "8.0.1",
 		"@types/pg": "8.20.0",
 		"@types/qrcode": "1.5.6",
@@ -170,14 +169,13 @@
 		"@types/semver": "7.7.1",
 		"@types/simple-oauth2": "5.0.8",
 		"@types/sinonjs__fake-timers": "15.0.1",
-		"@types/supertest": "7.2.0",
 		"@types/tinycolor2": "1.4.6",
 		"@types/tmp": "0.2.6",
 		"@types/vary": "1.1.3",
 		"@types/web-push": "3.6.4",
 		"@types/ws": "8.18.1",
-		"@typescript-eslint/eslint-plugin": "8.61.1",
-		"@typescript-eslint/parser": "8.61.1",
+		"@typescript-eslint/eslint-plugin": "8.62.0",
+		"@typescript-eslint/parser": "8.62.0",
 		"@vitest/coverage-v8": "4.1.9",
 		"aws-sdk-client-mock": "4.1.0",
 		"cbor2": "2.3.0",
@@ -185,11 +183,10 @@
 		"eslint-plugin-import": "2.32.0",
 		"execa": "9.6.1",
 		"fkill": "10.0.3",
-		"js-yaml": "4.2.0",
+		"js-yaml": "5.2.0",
 		"pid-port": "2.1.1",
-		"rolldown": "1.1.2",
+		"rolldown": "1.1.3",
 		"simple-oauth2": "5.1.0",
-		"supertest": "7.2.2",
 		"vite": "8.1.0",
 		"vitest": "4.1.9",
 		"vitest-mock-extended": "4.0.0"

packages/backend/rolldown.config.ts

@@ -3,6 +3,7 @@ import { version as summalyVersion } from '@misskey-dev/summaly';
 import type { Plugin, ExternalOption } from 'rolldown';
 import { execa, execaNode } from 'execa';
 import type { ResultPromise } from 'execa';
+import fkill from 'fkill';
 import esmShim from '@rollup/plugin-esm-shim';
 
 /**
@@ -10,6 +11,7 @@ import esmShim from '@rollup/plugin-esm-shim';
  */
 function backendDevServerPlugin(): Plugin {
 	let backendProcess: ResultPromise | null = null;
+	let backendShutdownPromise: Promise<void> | null = null;
 
 	async function runBuildAssets() {
 		await execa('pnpm', ['run', 'build-assets'], {
@@ -20,12 +22,31 @@ function backendDevServerPlugin(): Plugin {
 	}
 
 	async function killBackendProcess() {
-		if (backendProcess) {
-			backendProcess.catch(() => {}); // backendProcess.kill()によって発生する例外を無視するためにcatch()を呼び出す
-			backendProcess.kill();
-			await new Promise(resolve => backendProcess!.on('exit', resolve));
-			backendProcess = null;
-		}
+		if (backendShutdownPromise) return backendShutdownPromise;
+		if (!backendProcess) return;
+
+		const processToKill = backendProcess;
+		backendProcess = null;
+		processToKill.catch(() => {}); // プロセスの終了によって発生する例外を無視するためにcatch()を呼び出す
+
+		backendShutdownPromise = (async () => {
+			if (process.platform === 'win32' && processToKill.pid != null) {
+				await fkill(processToKill.pid, {
+					force: true,
+					tree: true,
+					silent: true,
+					waitForExit: 5000,
+				});
+			} else {
+				processToKill.kill();
+			}
+
+			await processToKill.catch(() => {});
+		})().finally(() => {
+			backendShutdownPromise = null;
+		});
+
+		return backendShutdownPromise;
 	}
 
 	return {
@@ -49,6 +70,9 @@ function backendDevServerPlugin(): Plugin {
 				await runBuildAssets();
 			}
 		},
+		async closeWatcher() {
+			await killBackendProcess();
+		},
 	};
 }
 
@@ -75,6 +99,8 @@ export default defineConfig((args) => {
 		're2',
 		'ipaddr.js',
 		'file-type',
+		// バンドルするとSentryの自動計装が正しく行われなくなるため外しておく
+		'pg',
 	];
 
 	const define: Record<string, string> = {

packages/backend/scripts/compile_config.js

@@ -11,7 +11,7 @@
 import fs from 'node:fs';
 import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import yaml from 'js-yaml';
+import { load as loadYaml } from 'js-yaml';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -34,7 +34,7 @@ function yamlToJson(ymlPath) {
 	console.log(`${ymlPath} → ${OUTPUT_PATH}`);
 
 	const yamlContent = fs.readFileSync(ymlPath, 'utf-8');
-	const jsonContent = yaml.load(yamlContent);
+	const jsonContent = loadYaml(yamlContent);
 	if (!fs.existsSync(dirname(OUTPUT_PATH))) {
 		fs.mkdirSync(dirname(OUTPUT_PATH), { recursive: true });
 	}

packages/backend/src/config.ts

@@ -20,6 +20,12 @@ type RedisOptionsSource = Partial<RedisOptions> & {
 	prefix?: string;
 };
 
+type SentryBackendConfig = {
+	options: Partial<Sentry.NodeOptions>;
+	enableNodeProfiling: boolean;
+	disabledIntegrations?: string[];
+};
+
 /**
  * 設定ファイルの型
  */
@@ -64,7 +70,7 @@ type Source = {
 		index: string;
 		scope?: 'local' | 'global' | string[];
 	};
-	sentryForBackend?: { options: Partial<Sentry.NodeOptions>; enableNodeProfiling: boolean; };
+	sentryForBackend?: SentryBackendConfig;
 	sentryForFrontend?: {
 		options: Partial<SentryVue.BrowserOptions> & { dsn: string };
 		vueIntegration?: SentryVue.VueIntegrationOptions | null;
@@ -201,7 +207,7 @@ export type Config = {
 	redisForJobQueue: RedisOptions & RedisOptionsSource;
 	redisForTimelines: RedisOptions & RedisOptionsSource;
 	redisForReactions: RedisOptions & RedisOptionsSource;
-	sentryForBackend: { options: Partial<Sentry.NodeOptions>; enableNodeProfiling: boolean; } | undefined;
+	sentryForBackend: SentryBackendConfig | undefined;
 	sentryForFrontend: {
 		options: Partial<SentryVue.BrowserOptions> & { dsn: string };
 		vueIntegration?: SentryVue.VueIntegrationOptions | null;

packages/backend/src/core/EmailService.ts

@@ -3,11 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { URLSearchParams } from 'node:url';
 import * as nodemailer from 'nodemailer';
 import juice from 'juice';
 import { Inject, Injectable } from '@nestjs/common';
-import { validate as validateEmail } from 'deep-email-validator';
 import { UtilityService } from '@/core/UtilityService.js';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
@@ -197,6 +195,7 @@ export class EmailService {
 			} else if (this.meta.enableTruemailApi && this.meta.truemailInstance && this.meta.truemailAuthKey != null) {
 				validated = await this.trueMail(this.meta.truemailInstance, emailAddress, this.meta.truemailAuthKey);
 			} else {
+				const { validate: validateEmail } = await import('deep-email-validator');
 				validated = await validateEmail({
 					email: emailAddress,
 					validateRegex: true,

packages/backend/src/core/telemetry/adapters/SentryTelemetryAdapter.ts

@@ -6,6 +6,63 @@
 import type { Config } from '@/config.js';
 import type { TelemetryAdapter, TelemetryCaptureMessageOptions } from './TelemetryAdapter.js';
 
+type SentryIntegrationsOption = NonNullable<import('@sentry/node').NodeOptions['integrations']>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SentryIntegrationFactory = Extract<SentryIntegrationsOption, (integrations: any[]) => any[]>;
+type SentryIntegration = Parameters<SentryIntegrationFactory>[0][number];
+type SentryNodeOptions = import('@sentry/node').NodeOptions;
+
+type BuildSentryIntegrationsOptions = {
+	disabledIntegrations?: string[];
+	enableNodeProfiling: boolean;
+	nodeProfilingIntegration?: () => SentryIntegration;
+	warn?: (message: string) => void;
+};
+
+export function buildSentryIntegrations(options: BuildSentryIntegrationsOptions): SentryIntegrationFactory {
+	return (defaults) => {
+		const disabledIntegrations = new Set(options.disabledIntegrations ?? []);
+		const defaultIntegrationNames = new Set(defaults.map((integration) => integration.name));
+		const unknownIntegrations = [...disabledIntegrations].filter((name) => !defaultIntegrationNames.has(name));
+
+		if (unknownIntegrations.length > 0) {
+			(options.warn ?? console.warn)(`Unknown Sentry integration configured in sentryForBackend.disabledIntegrations: ${unknownIntegrations.join(', ')}`);
+		}
+
+		return [
+			...defaults.filter((integration) => !disabledIntegrations.has(integration.name)),
+			...(options.enableNodeProfiling && options.nodeProfilingIntegration != null ? [options.nodeProfilingIntegration()] : []),
+		];
+	};
+}
+
+export function buildSentryNodeOptions(
+	config: NonNullable<Config['sentryForBackend']>,
+	nodeProfilingIntegration?: () => SentryIntegration,
+): SentryNodeOptions {
+	return {
+		// Do not send Sentry trace headers to remote ActivityPub/Webhook/etc. hosts by default.
+		// Admins can opt in for trusted internal services via sentryForBackend.options.
+		tracePropagationTargets: [],
+
+		// Performance Monitoring
+		tracesSampleRate: 1.0, //  Capture 100% of the transactions
+
+		// Set sampling rate for profiling - this is relative to tracesSampleRate
+		profilesSampleRate: 1.0,
+
+		maxBreadcrumbs: 0,
+
+		...config.options,
+
+		integrations: buildSentryIntegrations({
+			disabledIntegrations: config.disabledIntegrations,
+			enableNodeProfiling: config.enableNodeProfiling,
+			nodeProfilingIntegration,
+		}),
+	};
+}
+
 export class SentryTelemetryAdapter implements TelemetryAdapter {
 	private constructor(
 		private readonly Sentry: typeof import('@sentry/node'),
@@ -16,21 +73,7 @@ export class SentryTelemetryAdapter implements TelemetryAdapter {
 		const Sentry = await import('@sentry/node');
 		const { nodeProfilingIntegration } = await import('@sentry/profiling-node');
 
-		Sentry.init({
-			integrations: [
-				...(config.enableNodeProfiling ? [nodeProfilingIntegration()] : []),
-			],
-
-			// Performance Monitoring
-			tracesSampleRate: 1.0, //  Capture 100% of the transactions
-
-			// Set sampling rate for profiling - this is relative to tracesSampleRate
-			profilesSampleRate: 1.0,
-
-			maxBreadcrumbs: 0,
-
-			...config.options,
-		});
+		Sentry.init(buildSentryNodeOptions(config, nodeProfilingIntegration));
 
 		return new SentryTelemetryAdapter(Sentry);
 	}

packages/backend/src/env.ts

@@ -11,6 +11,7 @@ const envOption = {
 	verbose: false,
 	withLogTime: false,
 	quiet: false,
+	enableCrossOriginIsolation: false,
 };
 
 for (const key of Object.keys(envOption) as (keyof typeof envOption)[]) {

packages/backend/src/misc/cache.ts

@@ -204,14 +204,13 @@ export class RedisSingleCache<T> {
 	}
 }
 
-// TODO: メモリ節約のためあまり参照されないキーを定期的に削除できるようにする？
-
 export class MemoryKVCache<T> {
 	private readonly cache = new Map<string, { date: number; value: T; }>();
 	private readonly gcIntervalHandle = setInterval(() => this.gc(), 1000 * 60 * 3); // 3m
 
 	constructor(
 		private readonly lifetime: number,
+		private readonly limit: number = Infinity,
 	) {}
 
 	@bindThis
@@ -220,6 +219,25 @@ export class MemoryKVCache<T> {
 	 * @deprecated これを直接呼び出すべきではない。InternalEventなどで変更を全てのプロセス/マシンに通知するべき
 	 */
 	public set(key: string, value: T): void {
+		if (this.limit <= 0) {
+			throw new Error('Limit must be greater than 0');
+		}
+
+		if (this.limit !== Infinity) {
+			this.gc();
+
+			// 挿入順を更新して LRU を保つため、同一キーは一度削除する
+			this.cache.delete(key);
+
+			while (this.cache.size >= this.limit) {
+				const oldestKey = this.cache.keys().next().value;
+				if (oldestKey == null) {
+					throw new Error('Cache is empty but size exceeds the limit');
+				}
+				this.cache.delete(oldestKey);
+			}
+		}
+
 		this.cache.set(key, {
 			date: Date.now(),
 			value,
@@ -234,6 +252,11 @@ export class MemoryKVCache<T> {
 			this.cache.delete(key);
 			return undefined;
 		}
+		if (this.limit !== Infinity) {
+			// access 順を更新して LRU を保つ
+			this.cache.delete(key);
+			this.cache.set(key, cached);
+		}
 		return cached.value;
 	}
 

packages/backend/src/server/ServerService.ts

@@ -21,6 +21,7 @@ import { genIdenticon } from '@/misc/gen-identicon.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import { bindThis } from '@/decorators.js';
+import { envOption } from '@/env.js';
 import { ActivityPubServerService } from './ActivityPubServerService.js';
 import { NodeinfoServerService } from './NodeinfoServerService.js';
 import { ApiServerService } from './api/ApiServerService.js';
@@ -89,6 +90,15 @@ export class ServerService implements OnApplicationShutdown {
 			});
 		}
 
+		// for test
+		if (envOption.enableCrossOriginIsolation) {
+			fastify.addHook('onRequest', (request, reply, done) => {
+				reply.header('Cross-Origin-Opener-Policy', 'same-origin');
+				reply.header('Cross-Origin-Embedder-Policy', 'credentialless');
+				done();
+			});
+		}
+
 		// Register raw-body parser for ActivityPub HTTP signature validation.
 		await fastify.register(fastifyRawBody, {
 			global: false,

packages/backend/src/server/web/UrlPreviewService.ts

@@ -3,13 +3,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { Inject, Injectable } from '@nestjs/common';
+import { Inject, Injectable, OnApplicationShutdown } from '@nestjs/common';
 import type { SummalyResult } from '@misskey-dev/summaly';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { HttpRequestService } from '@/core/HttpRequestService.js';
 import type Logger from '@/logger.js';
+import { deepClone } from '@/misc/clone.js';
 import { query } from '@/misc/prelude/url.js';
+import { MemoryKVCache } from '@/misc/cache.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
@@ -18,8 +20,9 @@ import { MiMeta } from '@/models/Meta.js';
 import type { FastifyRequest, FastifyReply } from 'fastify';
 
 @Injectable()
-export class UrlPreviewService {
+export class UrlPreviewService implements OnApplicationShutdown {
 	private logger: Logger;
+	private summaryCache: MemoryKVCache<SummalyResult>;
 	private readonly summalyDefaultUserAgent: string;
 
 	constructor(
@@ -34,6 +37,7 @@ export class UrlPreviewService {
 		private loggerService: LoggerService,
 	) {
 		this.logger = this.loggerService.getLogger('url-preview');
+		this.summaryCache = new MemoryKVCache<SummalyResult>(1000 * 60 * 60, 100); // 1h, 100件
 		this.summalyDefaultUserAgent = `SummalyBot/${_SUMMALY_VERSION_} (${this.config.url}; +https://github.com/misskey-dev/summaly/blob/master/README.md)`;
 	}
 
@@ -80,20 +84,32 @@ export class UrlPreviewService {
 			: `Getting preview of ${url}@${lang} ...`);
 
 		try {
-			const summary = this.meta.urlPreviewSummaryProxyUrl
-				? await this.fetchSummaryFromProxy(url, this.meta, lang)
-				: await this.fetchSummary(url, this.meta, lang);
+			const fetcher = async () => {
+				const result = await (
+					this.meta.urlPreviewSummaryProxyUrl
+					? this.fetchSummaryFromProxy(url, lang)
+					: this.fetchSummary(url, lang)
+				);
+
+				if (!result.url.startsWith('http://') && !result.url.startsWith('https://')) {
+					return undefined;
+				}
+
+				if (result.player.url && !result.player.url.startsWith('http://') && !result.player.url.startsWith('https://')) {
+					return undefined;
+				}
+
+				return result;
+			};
+
+			const summary = deepClone(await this.summaryCache.fetchMaybe(`${url}@${lang ?? '_DEFAULT_'}`, fetcher));
+
+			if (summary == null) {
+				throw new Error('Invalid summary');
+			}
 
 			this.logger.succ(`Got preview of ${url}: ${summary.title}`);
 
-			if (!(summary.url.startsWith('http://') || summary.url.startsWith('https://'))) {
-				throw new Error('unsupported schema included');
-			}
-
-			if (summary.player.url && !(summary.player.url.startsWith('http://') || summary.player.url.startsWith('https://'))) {
-				throw new Error('unsupported schema included');
-			}
-
 			summary.icon = this.wrap(summary.icon);
 			summary.thumbnail = this.wrap(summary.thumbnail);
 
@@ -120,7 +136,8 @@ export class UrlPreviewService {
 		}
 	}
 
-	private async fetchSummary(url: string, meta: MiMeta, lang?: string): Promise<SummalyResult> {
+	@bindThis
+	private async fetchSummary(url: string, lang?: string): Promise<SummalyResult> {
 		const { summaly } = await import('@misskey-dev/summaly');
 
 		return summaly(url, {
@@ -130,25 +147,36 @@ export class UrlPreviewService {
 				http: this.httpRequestService.httpAgent,
 				https: this.httpRequestService.httpsAgent,
 			},
-			userAgent: meta.urlPreviewUserAgent ?? this.summalyDefaultUserAgent,
-			operationTimeout: meta.urlPreviewTimeout,
-			contentLengthLimit: meta.urlPreviewMaximumContentLength,
-			contentLengthRequired: meta.urlPreviewRequireContentLength,
+			userAgent: this.meta.urlPreviewUserAgent ?? this.summalyDefaultUserAgent,
+			operationTimeout: this.meta.urlPreviewTimeout,
+			contentLengthLimit: this.meta.urlPreviewMaximumContentLength,
+			contentLengthRequired: this.meta.urlPreviewRequireContentLength,
 		});
 	}
 
-	private fetchSummaryFromProxy(url: string, meta: MiMeta, lang?: string): Promise<SummalyResult> {
-		const proxy = meta.urlPreviewSummaryProxyUrl!;
+	@bindThis
+	private fetchSummaryFromProxy(url: string, lang?: string): Promise<SummalyResult> {
+		const proxy = this.meta.urlPreviewSummaryProxyUrl!;
 		const queryStr = query({
 			url: url,
 			lang: lang ?? 'ja-JP',
 			followRedirects: this.meta.urlPreviewAllowRedirect,
-			userAgent: meta.urlPreviewUserAgent ?? this.summalyDefaultUserAgent,
-			operationTimeout: meta.urlPreviewTimeout,
-			contentLengthLimit: meta.urlPreviewMaximumContentLength,
-			contentLengthRequired: meta.urlPreviewRequireContentLength,
+			userAgent: this.meta.urlPreviewUserAgent ?? this.summalyDefaultUserAgent,
+			operationTimeout: this.meta.urlPreviewTimeout,
+			contentLengthLimit: this.meta.urlPreviewMaximumContentLength,
+			contentLengthRequired: this.meta.urlPreviewRequireContentLength,
 		});
 
 		return this.httpRequestService.getJson<SummalyResult>(`${proxy}?${queryStr}`, 'application/json, */*', undefined, true);
 	}
+
+	@bindThis
+	public dispose(): void {
+		this.summaryCache.dispose();
+	}
+
+	@bindThis
+	public onApplicationShutdown(): void {
+		this.dispose();
+	}
 }

packages/backend/test/unit/SentryTelemetryAdapter.ts

@@ -0,0 +1,60 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { describe, expect, test, vi } from 'vitest';
+import { buildSentryIntegrations } from '@/core/telemetry/adapters/SentryTelemetryAdapter.js';
+
+type TestIntegration = Parameters<ReturnType<typeof buildSentryIntegrations>>[0][number];
+
+function testIntegration(name: string): TestIntegration {
+	return { name };
+}
+
+describe('SentryTelemetryAdapter', () => {
+	test('removes disabled integrations from Sentry defaults', () => {
+		const integrations = buildSentryIntegrations({
+			disabledIntegrations: ['Postgres'],
+			enableNodeProfiling: false,
+		});
+
+		const result = integrations([
+			testIntegration('Http'),
+			testIntegration('Postgres'),
+			testIntegration('Redis'),
+		]);
+
+		expect(result.map((integration: TestIntegration) => integration.name)).toEqual(['Http', 'Redis']);
+	});
+
+	test('keeps profiling integration when enabled', () => {
+		const integrations = buildSentryIntegrations({
+			disabledIntegrations: [],
+			enableNodeProfiling: true,
+			nodeProfilingIntegration: () => testIntegration('ProfilingIntegration'),
+		});
+
+		const result = integrations([
+			testIntegration('Http'),
+		]);
+
+		expect(result.map((integration: TestIntegration) => integration.name)).toEqual(['Http', 'ProfilingIntegration']);
+	});
+
+	test('warns about unknown disabled integration names without removing defaults', () => {
+		const warn = vi.fn();
+		const integrations = buildSentryIntegrations({
+			disabledIntegrations: ['Unknown'],
+			enableNodeProfiling: false,
+			warn,
+		});
+
+		const result = integrations([
+			testIntegration('Http'),
+		]);
+
+		expect(result.map((integration: TestIntegration) => integration.name)).toEqual(['Http']);
+		expect(warn).toHaveBeenCalledWith('Unknown Sentry integration configured in sentryForBackend.disabledIntegrations: Unknown');
+	});
+});

packages/backend/test/unit/core/telemetry/adapters/SentryTelemetryAdapter.ts

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+process.env.NODE_ENV = 'test';
+
+import { describe, expect, test } from 'vitest';
+import { buildSentryNodeOptions } from '../../../../../src/core/telemetry/adapters/SentryTelemetryAdapter.js';
+
+describe('buildSentryNodeOptions', () => {
+	test('disables outbound trace propagation by default', () => {
+		const options = buildSentryNodeOptions({
+			enableNodeProfiling: false,
+			options: {},
+		});
+
+		expect(options.tracePropagationTargets).toEqual([]);
+	});
+
+	test('allows explicit tracePropagationTargets to override the default', () => {
+		const options = buildSentryNodeOptions({
+			enableNodeProfiling: false,
+			options: {
+				tracePropagationTargets: ['^https://internal\\.example/'],
+			},
+		});
+
+		expect(options.tracePropagationTargets).toEqual(['^https://internal\\.example/']);
+	});
+});

packages/backend/test/unit/misc/cache.ts

@@ -38,6 +38,29 @@ describe('misc:MemoryKVCache', () => {
 		cache.dispose();
 	});
 
+	test('keeps current behavior when limit is omitted', () => {
+		const cache = new MemoryKVCache<number>(1000 * 60);
+		cache.set('a', 1);
+		cache.set('b', 2);
+		cache.set('c', 3);
+		expect(cache.get('a')).toBe(1);
+		expect(cache.get('b')).toBe(2);
+		expect(cache.get('c')).toBe(3);
+		cache.dispose();
+	});
+
+	test('evicts least recently used entry when limit is reached', () => {
+		const cache = new MemoryKVCache<number>(1000 * 60, 2);
+		cache.set('a', 1);
+		cache.set('b', 2);
+		expect(cache.get('a')).toBe(1);
+		cache.set('c', 3);
+		expect(cache.get('a')).toBe(1);
+		expect(cache.get('b')).toBeUndefined();
+		expect(cache.get('c')).toBe(3);
+		cache.dispose();
+	});
+
 	describe('gc()', () => {
 		test('removes expired entries', () => {
 			const cache = new MemoryKVCache<string>(1000);

packages/frontend-builder/package.json

@@ -11,16 +11,16 @@
 	},
 	"devDependencies": {
 		"@types/estree": "1.0.9",
-		"@types/node": "26.0.0",
-		"@typescript-eslint/eslint-plugin": "8.61.1",
-		"@typescript-eslint/parser": "8.61.1",
+		"@types/node": "26.0.1",
+		"@typescript-eslint/eslint-plugin": "8.62.0",
+		"@typescript-eslint/parser": "8.62.0",
 		"rollup": "4.62.2"
 	},
 	"dependencies": {
 		"i18n": "workspace:*",
 		"magic-string": "0.30.21",
 		"oxc-walker": "1.0.0",
-		"rolldown": "1.1.2",
+		"rolldown": "1.1.3",
 		"vite": "8.1.0"
 	}
 }

packages/frontend-embed/package.json

@@ -10,9 +10,6 @@
 		"lint": "pnpm typecheck && pnpm eslint"
 	},
 	"dependencies": {
-		"@rollup/plugin-json": "6.1.0",
-		"@rollup/pluginutils": "5.4.0",
-		"@vitejs/plugin-vue": "6.0.7",
 		"buraha": "0.0.1",
 		"frontend-shared": "workspace:*",
 		"i18n": "workspace:*",
@@ -21,42 +18,34 @@
 		"mfm-js": "0.26.0",
 		"misskey-js": "workspace:*",
 		"punycode.js": "2.3.1",
-		"rollup": "4.62.2",
-		"shiki": "4.2.0",
+		"shiki": "4.3.0",
 		"tinycolor2": "1.6.0",
-		"uuid": "14.0.0",
-		"vue": "3.5.38"
+		"uuid": "14.0.1",
+		"vue": "3.5.39"
 	},
 	"devDependencies": {
 		"@misskey-dev/emoji-assets": "17.0.3",
 		"@misskey-dev/summaly": "5.5.1",
+		"@rollup/plugin-json": "6.1.0",
+		"@rollup/pluginutils": "5.4.0",
 		"@tabler/icons-webfont": "3.35.0",
 		"@testing-library/vue": "8.1.0",
-		"@types/estree": "1.0.9",
-		"@types/micromatch": "4.0.10",
-		"@types/node": "26.0.0",
+		"@types/node": "26.0.1",
 		"@types/punycode.js": "npm:@types/punycode@2.1.4",
 		"@types/tinycolor2": "1.4.6",
 		"@types/ws": "8.18.1",
-		"@typescript-eslint/eslint-plugin": "8.61.1",
-		"@typescript-eslint/parser": "8.61.1",
+		"@typescript-eslint/eslint-plugin": "8.62.0",
+		"@typescript-eslint/parser": "8.62.0",
 		"@vitest/coverage-v8": "4.1.9",
-		"@vue/runtime-core": "3.5.38",
-		"acorn": "8.17.0",
-		"cross-env": "10.1.0",
+		"@vitejs/plugin-vue": "6.0.7",
+		"@vue/runtime-core": "3.5.39",
 		"eslint-plugin-import": "2.32.0",
 		"eslint-plugin-vue": "10.9.2",
-		"happy-dom": "20.10.6",
 		"intersection-observer": "0.12.2",
 		"lightningcss": "1.32.0",
-		"micromatch": "4.0.8",
-		"msw": "2.14.6",
-		"prettier": "3.8.4",
 		"sass-embedded": "1.100.0",
-		"start-server-and-test": "3.0.11",
 		"tsx": "4.22.4",
 		"vite": "8.1.0",
-		"vite-plugin-turbosnap": "1.0.3",
 		"vue-component-type-helpers": "3.3.5",
 		"vue-eslint-parser": "10.4.1",
 		"vue-tsc": "3.3.5"

packages/frontend-embed/vite.config.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import pluginVue from '@vitejs/plugin-vue';
 import { defineConfig, type UserConfig } from 'vite';
-import * as yaml from 'js-yaml';
+import { load as loadYaml } from 'js-yaml';
 import { promises as fsp } from 'fs';
 
 import locales from 'i18n';
@@ -11,7 +11,7 @@ import pluginJson5 from './lib/vite-plugin-json5.js';
 import { pluginRemoveUnrefI18n } from '../frontend-builder/rollup-plugin-remove-unref-i18n';
 import { Features } from 'lightningcss';
 
-const url = process.env.NODE_ENV === 'development' ? (yaml.load(await fsp.readFile('../../.config/default.yml', 'utf-8')) as any).url : null;
+const url = process.env.NODE_ENV === 'development' ? (loadYaml(await fsp.readFile('../../.config/default.yml', 'utf-8')) as any).url : null;
 const host = url ? (new URL(url)).hostname : undefined;
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];

packages/frontend-shared/package.json

@@ -8,10 +8,10 @@
 		"lint": "pnpm typecheck && pnpm eslint"
 	},
 	"devDependencies": {
-		"@types/node": "26.0.0",
+		"@types/node": "26.0.1",
 		"@types/tinycolor2": "1.4.6",
-		"@typescript-eslint/eslint-plugin": "8.61.1",
-		"@typescript-eslint/parser": "8.61.1",
+		"@typescript-eslint/eslint-plugin": "8.62.0",
+		"@typescript-eslint/parser": "8.62.0",
 		"eslint-plugin-vue": "10.9.2",
 		"vue-eslint-parser": "10.4.1"
 	},
@@ -23,8 +23,8 @@
 		"i18n": "workspace:*",
 		"json5": "2.2.3",
 		"misskey-js": "workspace:*",
-		"shiki": "4.2.0",
+		"shiki": "4.3.0",
 		"tinycolor2": "1.6.0",
-		"vue": "3.5.38"
+		"vue": "3.5.39"
 	}
 }

packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts

@@ -61,7 +61,6 @@ it('Composition API (standard)', () => {
 import { c as api, d as store, i as i18n, aD as notePage, bN as ImgWithBlurhash, bY as getStaticImageUrl, _ as _export_sfc } from './app-!~{001}~.js';
 import { M as MkContainer } from './MkContainer-!~{03M}~.js';
 import { b as defineComponent, a as ref, e as onMounted, z as resolveComponent, g as openBlock, h as createBlock, i as withCtx, K as createTextVNode, E as toDisplayString, u as unref, l as createBaseVNode, q as normalizeClass, B as createCommentVNode, k as createElementBlock, F as Fragment, C as renderList, A as createVNode } from './vue-!~{002}~.js';
-import './photoswipe-!~{003}~.js';
 
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("i", { class: "ti ti-photo" }, null, -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -179,7 +178,6 @@ export { index_photos as default };
 import { c as api, d as store, i as i18n, aD as notePage, bN as ImgWithBlurhash, bY as getStaticImageUrl, _ as _export_sfc } from './app-!~{001}~.js';
 import { M as MkContainer } from './MkContainer-!~{03M}~.js';
 import { b as defineComponent, a as ref, e as onMounted, z as resolveComponent, g as openBlock, h as createBlock, i as withCtx, K as createTextVNode, E as toDisplayString, u as unref, l as createBaseVNode, q as normalizeClass, B as createCommentVNode, k as createElementBlock, F as Fragment, C as renderList, A as createVNode } from './vue-!~{002}~.js';
-import './photoswipe-!~{003}~.js';
 
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("i", { class: "ti ti-photo" }, null, -1);
 const index_photos = /* @__PURE__ */ defineComponent({

packages/frontend/package.json

@@ -9,8 +9,10 @@
 		"build-storybook-pre": "(tsgo -p .storybook || echo done.) && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js",
 		"build-storybook": "pnpm build-storybook-pre && storybook build --webpack-stats-json storybook-static",
 		"chromatic": "chromatic",
-		"test": "vitest --run --globals",
-		"test-and-coverage": "vitest --run --coverage --globals",
+		"test": "vitest --run --globals --config vitest.config.unit.ts",
+		"test-and-coverage": "vitest --run --coverage --globals --config vitest.config.unit.ts",
+		"test:e2e": "playwright test --config playwright.config.ts",
+		"test:browser": "vitest --run --globals --config vitest.config.browser.ts",
 		"typecheck": "vue-tsc --noEmit",
 		"eslint": "eslint --quiet \"src/**/*.{ts,vue}\"",
 		"lint": "pnpm typecheck && pnpm eslint"
@@ -20,7 +22,7 @@
 		"@mcaptcha/core-glue": "0.1.0-alpha-5",
 		"@misskey-dev/browser-image-resizer": "2024.1.0",
 		"@misskey-dev/emoji-data": "17.0.3",
-		"@sentry/vue": "10.59.0",
+		"@sentry/vue": "10.62.0",
 		"@simplewebauthn/browser": "13.3.0",
 		"@syuilo/aiscript": "1.2.1",
 		"@syuilo/aiscript-0-19-0": "npm:@syuilo/aiscript@^0.19.0",
@@ -35,12 +37,10 @@
 		"chartjs-chart-matrix": "3.0.4",
 		"chartjs-plugin-gradient": "0.6.1",
 		"chartjs-plugin-zoom": "2.2.0",
-		"chromatic": "17.5.0",
 		"compare-versions": "6.1.1",
 		"cropperjs": "2.1.1",
 		"date-fns": "4.4.0",
 		"eventemitter3": "5.0.4",
-		"execa": "9.6.1",
 		"exifreader": "4.41.0",
 		"frontend-shared": "workspace:*",
 		"i18n": "workspace:*",
@@ -56,23 +56,23 @@
 		"misskey-bubble-game": "workspace:*",
 		"misskey-js": "workspace:*",
 		"misskey-reversi": "workspace:*",
-		"photoswipe": "5.4.4",
 		"punycode.js": "2.3.1",
 		"qr-code-styling": "1.9.2",
 		"qr-scanner": "1.4.2",
 		"sanitize-html": "2.17.5",
-		"shiki": "4.2.0",
+		"seedrandom": "3.0.5",
+		"shiki": "4.3.0",
 		"textarea-caret": "3.1.0",
-		"three": "0.184.0",
 		"throttle-debounce": "5.0.2",
 		"tinycolor2": "1.6.0",
 		"v-code-diff": "1.13.1",
-		"vue": "3.5.38",
+		"vue": "3.5.39",
 		"wanakana": "5.3.1"
 	},
 	"devDependencies": {
 		"@misskey-dev/emoji-assets": "17.0.3",
 		"@misskey-dev/summaly": "5.5.1",
+		"@playwright/test": "1.61.1",
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/pluginutils": "5.4.0",
 		"@storybook/addon-essentials": "8.6.18",
@@ -97,20 +97,23 @@
 		"@types/insert-text-at-cursor": "0.3.2",
 		"@types/matter-js": "0.20.2",
 		"@types/micromatch": "4.0.10",
-		"@types/node": "26.0.0",
+		"@types/node": "26.0.1",
 		"@types/punycode.js": "npm:@types/punycode@2.1.4",
 		"@types/sanitize-html": "2.16.1",
 		"@types/seedrandom": "3.0.8",
 		"@types/textarea-caret": "3.0.4",
 		"@types/throttle-debounce": "5.0.2",
 		"@types/tinycolor2": "1.4.6",
-		"@typescript-eslint/eslint-plugin": "8.61.1",
-		"@typescript-eslint/parser": "8.61.1",
+		"@typescript-eslint/eslint-plugin": "8.62.0",
+		"@typescript-eslint/parser": "8.62.0",
+		"@vitest/browser-playwright": "4.1.9",
 		"@vitest/coverage-v8": "4.1.9",
-		"@vue/compiler-core": "3.5.38",
+		"@vue/compiler-core": "3.5.39",
 		"astring": "1.9.0",
+		"chromatic": "17.7.2",
 		"eslint-plugin-import": "2.32.0",
 		"eslint-plugin-vue": "10.9.2",
+		"execa": "9.6.1",
 		"happy-dom": "20.10.6",
 		"intersection-observer": "0.12.2",
 		"lightningcss": "1.32.0",
@@ -120,13 +123,13 @@
 		"msw-storybook-addon": "2.0.7",
 		"nodemon": "3.1.14",
 		"oxc-walker": "1.0.0",
-		"prettier": "3.8.4",
+		"playwright": "1.61.1",
+		"prettier": "3.9.1",
 		"react": "19.2.7",
 		"react-dom": "19.2.7",
-		"rolldown": "1.1.2",
+		"rolldown": "1.1.3",
 		"rollup-plugin-visualizer": "7.0.1",
 		"sass-embedded": "1.100.0",
-		"seedrandom": "3.0.5",
 		"storybook": "10.4.6",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"tsx": "4.22.4",

packages/frontend/playwright.config.ts

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	testDir: './test/e2e',
+	reporter: 'list',
+	fullyParallel: false,
+	workers: 1,
+	timeout: 60_000,
+	expect: {
+		timeout: 10_000,
+	},
+	outputDir: './test/e2e/artifacts',
+	use: {
+		locale: 'en-US',
+		baseURL: 'http://localhost:61812',
+		headless: true,
+		screenshot: 'only-on-failure',
+		trace: 'retain-on-failure',
+		video: 'off',
+	},
+	projects: [{
+		name: 'chromium',
+		use: {
+			browserName: 'chromium',
+		},
+	}],
+});

packages/frontend/src/components/MkBlurhash.vue

@@ -0,0 +1,183 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<canvas
+	v-show="show"
+	ref="canvas"
+	:width="canvasWidth"
+	:height="canvasHeight"
+	draggable="false"
+	tabindex="-1"
+	style="-webkit-user-drag: none;"
+></canvas>
+</template>
+
+<script lang="ts">
+import DrawBlurhash from '@/workers/draw-blurhash?worker';
+import TestWebGL2 from '@/workers/test-webgl2?worker';
+import { WorkerMultiDispatch } from '@@/js/worker-multi-dispatch.js';
+
+// テスト環境で Web Worker インスタンスは作成できない
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+const isTest = (import.meta.env.MODE === 'test' || window.isPlaywright);
+
+const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resolve => {
+	if (isTest) {
+		const canvas = window.document.createElement('canvas');
+		canvas.width = 64;
+		canvas.height = 64;
+		resolve(canvas);
+		return;
+	}
+
+	const testWorker = new TestWebGL2();
+	testWorker.addEventListener('message', event => {
+		if (event.data.result) {
+			const workers = new WorkerMultiDispatch(
+				() => new DrawBlurhash(),
+				Math.min(navigator.hardwareConcurrency - 1, 4),
+			);
+			resolve(workers);
+		} else {
+			const canvas = window.document.createElement('canvas');
+			canvas.width = 64;
+			canvas.height = 64;
+			resolve(canvas);
+		}
+		testWorker.terminate();
+	});
+});
+
+</script>
+
+<script lang="ts" setup>
+import { watch, ref, shallowRef, useTemplateRef, onMounted, onUnmounted } from 'vue';
+import { genId } from '@/utility/id.js';
+import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
+
+const props = withDefaults(defineProps<{
+	blurhash: string | null;
+	onlyAvgColor?: boolean;
+	width?: number;
+	height?: number;
+	// v-showが何故か動作しないため
+	show?: boolean;
+}>(), {
+	onlyAvgColor: false,
+	width: 64,
+	height: 64,
+	show: true,
+});
+
+const canvas = useTemplateRef('canvas');
+const canvasWidth = ref(64);
+const canvasHeight = ref(64);
+const viewId = genId();
+const bitmapTmp = shallowRef<CanvasImageSource | undefined>();
+
+watch([() => props.width, () => props.height, canvas], () => {
+	const ratio = props.width / props.height;
+	if (ratio > 1) {
+		canvasWidth.value = Math.round(64 * ratio);
+		canvasHeight.value = 64;
+	} else {
+		canvasWidth.value = 64;
+		canvasHeight.value = Math.round(64 / ratio);
+	}
+}, {
+	immediate: true,
+});
+
+watch(() => props.blurhash, () => {
+	draw();
+});
+
+function drawImage(bitmap: CanvasImageSource) {
+	// canvasがない（mountedされていない）場合はTmpに保存しておく
+	if (!canvas.value) {
+		bitmapTmp.value = bitmap;
+		return;
+	}
+
+	// canvasがあれば描画する
+	bitmapTmp.value = undefined;
+	const ctx = canvas.value.getContext('2d');
+	if (!ctx) return;
+	ctx.drawImage(bitmap, 0, 0, canvasWidth.value, canvasHeight.value);
+}
+
+function drawAvg() {
+	if (!canvas.value) return;
+
+	const color = (props.blurhash != null && extractAvgColorFromBlurhash(props.blurhash)) || '#888';
+
+	const ctx = canvas.value.getContext('2d');
+	if (!ctx) return;
+
+	// avgColorでお茶をにごす
+	ctx.beginPath();
+	ctx.fillStyle = color;
+	ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value);
+}
+
+async function draw() {
+	if (isTest && props.blurhash == null) return;
+
+	drawAvg();
+
+	if (props.blurhash == null) return;
+
+	if (props.onlyAvgColor) return;
+
+	const work = await canvasPromise;
+	if (work instanceof WorkerMultiDispatch) {
+		work.postMessage(
+			{
+				id: viewId,
+				hash: props.blurhash,
+			},
+			undefined,
+		);
+	} else {
+		try {
+			const { render } = await import('buraha');
+			render(props.blurhash, work);
+			drawImage(work);
+		} catch (error) {
+			console.error('Error occurred during drawing blurhash', error);
+		}
+	}
+}
+
+function workerOnMessage(event: MessageEvent) {
+	if (event.data.id !== viewId) return;
+	drawImage(event.data.bitmap as ImageBitmap);
+}
+
+canvasPromise.then(work => {
+	if (work instanceof WorkerMultiDispatch) {
+		work.addListener(workerOnMessage);
+	}
+
+	draw();
+});
+
+onMounted(() => {
+	// drawImageがmountedより先に呼ばれている場合はここで描画する
+	if (bitmapTmp.value) {
+		drawImage(bitmapTmp.value);
+	}
+});
+
+onUnmounted(() => {
+	canvasPromise.then(work => {
+		if (work instanceof WorkerMultiDispatch) {
+			work.removeListener(workerOnMessage);
+		}
+	});
+});
+</script>

packages/frontend/src/components/MkCaptcha.vue

@@ -21,8 +21,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div v-else>
 			<div style="font-size: 13px; margin-bottom: 4px;">Type "ai-chan-kawaii" to pass captcha</div>
-			<input v-model="testcaptchaInput" data-cy-testcaptcha-input/>
-			<button type="button" data-cy-testcaptcha-submit @click="testcaptchaSubmit">Submit</button>
+			<input v-model="testcaptchaInput" data-testid="testcaptcha-input"/>
+			<button type="button" data-testid="testcaptcha-submit" @click="testcaptchaSubmit">Submit</button>
 		</div>
 	</div>
 	<div v-else ref="captchaEl"></div>

packages/frontend/src/components/MkDialog.vue

@@ -31,8 +31,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkInput>
 		<MkSelect v-if="select" v-model="selectedValue" :items="selectDef" autofocus></MkSelect>
 		<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
-			<MkButton v-if="showOkButton" data-cy-modal-dialog-ok inline primary rounded :autofocus="!input && !select" :disabled="okButtonDisabledReason != null" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
-			<MkButton v-if="showCancelButton || input || select" data-cy-modal-dialog-cancel inline rounded @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
+			<MkButton v-if="showOkButton" data-testid="modal-dialog-ok" inline primary rounded :autofocus="!input && !select" :disabled="okButtonDisabledReason != null" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
+			<MkButton v-if="showCancelButton || input || select" data-testid="modal-dialog-cancel" inline rounded @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
 		</div>
 		<div v-if="actions" :class="$style.buttons">
 			<MkButton v-for="action in actions" :key="action.text" inline rounded :primary="action.primary" :danger="action.danger" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>

packages/frontend/src/components/MkFolder.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div ref="rootEl" :class="$style.root" role="group" :aria-expanded="opened">
 	<MkStickyContainer>
 		<template #header>
-			<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
+			<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-testid="folder-header" @click="toggle">
 				<div :class="$style.headerIcon"><slot name="icon"></slot></div>
 				<div :class="$style.headerText">
 					<div :class="$style.headerTextMain">

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -14,18 +14,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined"
 		:leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined"
 	>
-		<canvas
-			v-show="hide"
+		<MkBlurhash
 			key="canvas"
-			ref="canvas"
 			:class="$style.canvas"
-			:width="canvasWidth"
-			:height="canvasHeight"
-			:title="title ?? undefined"
-			draggable="false"
-			tabindex="-1"
-			style="-webkit-user-drag: none;"
-		></canvas>
+			:blurhash="hash ?? null"
+			:height="imgHeight ?? undefined"
+			:width="imgWidth ?? undefined"
+			:onlyAvgColor="props.onlyAvgColor"
+			:show="hide"
+		/>
 		<img
 			v-show="!hide"
 			key="img"
@@ -36,6 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:src="src ?? undefined"
 			:title="title ?? undefined"
 			:alt="alt ?? undefined"
+			:data-marker="marker ?? undefined"
 			loading="eager"
 			decoding="async"
 			draggable="false"
@@ -46,50 +44,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 
-<script lang="ts">
-import DrawBlurhash from '@/workers/draw-blurhash?worker';
-import TestWebGL2 from '@/workers/test-webgl2?worker';
-import { WorkerMultiDispatch } from '@@/js/worker-multi-dispatch.js';
-import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurhash.js';
-
-// テスト環境で Web Worker インスタンスは作成できない
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const isTest = (import.meta.env.MODE === 'test' || window.Cypress != null);
-
-const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resolve => {
-	if (isTest) {
-		const canvas = window.document.createElement('canvas');
-		canvas.width = 64;
-		canvas.height = 64;
-		resolve(canvas);
-		return;
-	}
-
-	const testWorker = new TestWebGL2();
-	testWorker.addEventListener('message', event => {
-		if (event.data.result) {
-			const workers = new WorkerMultiDispatch(
-				() => new DrawBlurhash(),
-				Math.min(navigator.hardwareConcurrency - 1, 4),
-			);
-			resolve(workers);
-		} else {
-			const canvas = window.document.createElement('canvas');
-			canvas.width = 64;
-			canvas.height = 64;
-			resolve(canvas);
-		}
-		testWorker.terminate();
-	});
-});
-</script>
-
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref } from 'vue';
-import { genId } from '@/utility/id.js';
-import { render } from 'buraha';
+import { computed, nextTick, useTemplateRef, watch, ref } from 'vue';
 import { prefer } from '@/preferences.js';
+import MkBlurhash from '@/components/MkBlurhash.vue';
 
 const props = withDefaults(defineProps<{
 	transition?: {
@@ -110,6 +68,7 @@ const props = withDefaults(defineProps<{
 	cover?: boolean;
 	forceBlurhash?: boolean;
 	onlyAvgColor?: boolean; // 軽量化のためにBlurhashを使わずに平均色だけを描画
+	marker?: string;
 }>(), {
 	transition: null,
 	src: null,
@@ -122,16 +81,11 @@ const props = withDefaults(defineProps<{
 	onlyAvgColor: false,
 });
 
-const viewId = genId();
-const canvas = useTemplateRef('canvas');
 const root = useTemplateRef('root');
 const img = useTemplateRef('img');
 const loaded = ref(false);
-const canvasWidth = ref(64);
-const canvasHeight = ref(64);
 const imgWidth = ref(props.width);
 const imgHeight = ref(props.height);
-const bitmapTmp = ref<CanvasImageSource | undefined>();
 const hide = computed(() => !loaded.value || props.forceBlurhash);
 
 function waitForDecode() {
@@ -150,14 +104,6 @@ function waitForDecode() {
 
 watch([() => props.width, () => props.height, root], () => {
 	const ratio = props.width / props.height;
-	if (ratio > 1) {
-		canvasWidth.value = Math.round(64 * ratio);
-		canvasHeight.value = 64;
-	} else {
-		canvasWidth.value = 64;
-		canvasHeight.value = Math.round(64 / ratio);
-	}
-
 	const clientWidth = root.value?.clientWidth ?? 300;
 	imgWidth.value = clientWidth;
 	imgHeight.value = Math.round(clientWidth / ratio);
@@ -165,97 +111,10 @@ watch([() => props.width, () => props.height, root], () => {
 	immediate: true,
 });
 
-function drawImage(bitmap: CanvasImageSource) {
-	// canvasがない（mountedされていない）場合はTmpに保存しておく
-	if (!canvas.value) {
-		bitmapTmp.value = bitmap;
-		return;
-	}
-
-	// canvasがあれば描画する
-	bitmapTmp.value = undefined;
-	const ctx = canvas.value.getContext('2d');
-	if (!ctx) return;
-	ctx.drawImage(bitmap, 0, 0, canvasWidth.value, canvasHeight.value);
-}
-
-function drawAvg() {
-	if (!canvas.value) return;
-
-	const color = (props.hash != null && extractAvgColorFromBlurhash(props.hash)) || '#888';
-
-	const ctx = canvas.value.getContext('2d');
-	if (!ctx) return;
-
-	// avgColorでお茶をにごす
-	ctx.beginPath();
-	ctx.fillStyle = color;
-	ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value);
-}
-
-async function draw() {
-	if (isTest && props.hash == null) return;
-
-	drawAvg();
-
-	if (props.hash == null) return;
-
-	if (props.onlyAvgColor) return;
-
-	const work = await canvasPromise;
-	if (work instanceof WorkerMultiDispatch) {
-		work.postMessage(
-			{
-				id: viewId,
-				hash: props.hash,
-			},
-			undefined,
-		);
-	} else {
-		try {
-			render(props.hash, work);
-			drawImage(work);
-		} catch (error) {
-			console.error('Error occurred during drawing blurhash', error);
-		}
-	}
-}
-
-function workerOnMessage(event: MessageEvent) {
-	if (event.data.id !== viewId) return;
-	drawImage(event.data.bitmap as ImageBitmap);
-}
-
-canvasPromise.then(work => {
-	if (work instanceof WorkerMultiDispatch) {
-		work.addListener(workerOnMessage);
-	}
-
-	draw();
-});
-
 watch(() => props.src, () => {
 	waitForDecode();
-});
-
-watch(() => props.hash, () => {
-	draw();
-});
-
-onMounted(() => {
-	// drawImageがmountedより先に呼ばれている場合はここで描画する
-	if (bitmapTmp.value) {
-		drawImage(bitmapTmp.value);
-	}
-	waitForDecode();
-});
-
-onUnmounted(() => {
-	canvasPromise.then(work => {
-		if (work instanceof WorkerMultiDispatch) {
-			work.removeListener(workerOnMessage);
-		}
-	});
+}, {
+	immediate: true,
 });
 </script>
 

packages/frontend/src/components/MkLightbox.item.fileinfo.vue

@@ -0,0 +1,39 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<div :class="$style.root" class="_gaps_s">
+		<MkKeyValue v-if="content.filename != null">
+			<template #key>{{ i18n.ts.fileName }}</template>
+			<template #value>{{ content.filename }}</template>
+		</MkKeyValue>
+		<MkKeyValue v-if="content.file != null">
+			<template #key>{{ i18n.ts.description }}</template>
+			<template #value>
+				<div :class="$style.pre">{{ content.file.comment ? content.file.comment : `(${i18n.ts.none})` }}</div>
+			</template>
+		</MkKeyValue>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import { i18n } from '@/i18n.js';
+import type { Content } from '@/components/MkLightbox.item.vue';
+
+const props = defineProps<{
+	content: Content;
+}>();
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 4px 14px;
+}
+
+.pre {
+	white-space: pre-wrap;
+}
+</style>

packages/frontend/src/components/MkLightbox.vue

@@ -0,0 +1,300 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<!-- durationは子Itemコンポーネントがフェードイン/アウトするdurationと合わせる -->
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_root_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_root_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_root_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_root_leaveTo : ''"
+	:duration="{ enter: prefer.s.animation ? openAnimDuration : 0, leave: prefer.s.animation ? closeAnimDuration : 0 }"
+	appear
+	@afterLeave="onAfterLeave"
+>
+	<!-- v-ifを使うとfalseになったとき(transitionが行われている間)子コンポーネントの更新が停止するのか子コンポーネントがアニメーションされなくなる -->
+	<div v-show="showing" ref="rootEl" v-hotkey.global="keymap" :class="$style.root" :style="{ zIndex }">
+		<div :class="[$style.bg]" class="_modalBg"></div>
+		<div ref="mainEl" :class="$style.main">
+			<div
+				ref="itemsEl"
+				:class="[$style.items, { [$style.itemsTransition]: enableSlideTransition }]"
+				:style="{ translate: `${contentsOffset}px 0` }"
+				@transitionend.self="onSlideTransitionFinished"
+				@transitioncancel.self="onSlideTransitionFinished"
+			>
+				<div v-for="(content, i) in contents" :key="content.url" ref="itemEl" :class="$style.item">
+					<XItem
+						:ref="(comp) => { items.set(i, comp as InstanceType<typeof XItem>); }"
+						:content="content"
+						:initiallyOpened="i === (props.defaultIndex ?? 0)"
+						:activated="activatedIndexes.has(i)"
+						@close="onItemClose"
+						@horizontalSwipe="onHorizontalSwipe"
+						@prev="onPrev"
+						@next="onNext"
+						@cancelHorizontalSwipe="onCancelHorizontalSwipe"
+					/>
+				</div>
+			</div>
+
+			<button v-if="!isTouchUsing && currentIndex > 0" class="_button" :class="[$style.prevButton]" @click="onPrev"><div :class="$style.buttonIcon"><i class="ti ti-arrow-left"></i></div></button>
+			<button v-if="!isTouchUsing && currentIndex < contents.length - 1" class="_button" :class="[$style.nextButton]" @click="onNext"><div :class="$style.buttonIcon"><i class="ti ti-arrow-right"></i></div></button>
+		</div>
+	</div>
+</Transition>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue';
+import XItem from './MkLightbox.item.vue';
+import type { Content } from './MkLightbox.item.vue';
+import type { Keymap } from '@/utility/hotkey.js';
+import * as os from '@/os.js';
+import { prefer } from '@/preferences.js';
+import { isTouchUsing } from '@/utility/touch.js';
+
+const props = withDefaults(defineProps<{
+	defaultIndex?: number;
+	contents: Content[];
+}>(), {
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const activatedIndexes = ref(new Set<number>());
+const items = new Map<number, InstanceType<typeof XItem>>();
+const currentIndex = ref(props.defaultIndex ?? 0);
+
+watch(currentIndex, (newIndex, oldIndex) => {
+	activatedIndexes.value.add(newIndex);
+
+	nextTick(() => {
+		if (oldIndex != null && items.has(oldIndex)) {
+			items.get(oldIndex)!.onDeactive();
+		}
+		if (items.has(newIndex)) {
+			items.get(newIndex)!.onActive();
+		}
+	});
+}, { immediate: true });
+
+watch(currentIndex, (newIndex) => {
+	for (let i = 0; i < props.contents.length; i++) {
+		const content = props.contents[i];
+		if (content.sourceElement != null) {
+			content.sourceElement.style.visibility = i === newIndex ? 'hidden' : '';
+		}
+	}
+}, { immediate: false });
+
+const openAnimDuration = 200;
+const closeAnimDuration = 200;
+const slideAnimDuration = 300;
+const zIndex = os.claimZIndex('high');
+const showing = ref(true);
+const screenWidth = ref(window.innerWidth);
+const contentsOffset = ref(currentIndex.value * -window.innerWidth);
+const enableSlideTransition = ref(false);
+let currentScrollLeft = contentsOffset.value;
+
+function onResize() {
+	screenWidth.value = window.innerWidth;
+	scrollToCurrentIndex();
+}
+
+window.addEventListener('resize', onResize, { passive: true });
+
+function onHorizontalSwipe(offset: number) {
+	if (currentIndex.value === 0 && offset > 0) { // これ以上戻れない
+		contentsOffset.value = currentScrollLeft + (offset / 3);
+	} else if (currentIndex.value === props.contents.length - 1 && offset < 0) { // これ以上進めない
+		contentsOffset.value = currentScrollLeft + (offset / 3);
+	} else {
+		contentsOffset.value = currentScrollLeft + offset;
+	}
+}
+
+function scrollToCurrentIndex() {
+	const targetOffset = currentIndex.value * -screenWidth.value;
+	currentScrollLeft = targetOffset;
+
+	if (!prefer.s.animation || contentsOffset.value === targetOffset) {
+		enableSlideTransition.value = false;
+		contentsOffset.value = targetOffset;
+		return;
+	}
+
+	enableSlideTransition.value = true;
+	contentsOffset.value = targetOffset;
+}
+
+/** ギャラリーそのものを閉じるための内部処理（閉じる処理を書く場合は `close` か、item内では `closeThis` を使う） */
+function closeGallery() {
+	showing.value = false;
+	if (window.location.hash === '#pswp') {
+		window.history.back();
+	}
+}
+
+function close() {
+	if (items.has(currentIndex.value)) {
+		items.get(currentIndex.value)!.closeThis();
+	} else {
+		closeGallery();
+	}
+}
+
+function onSlideTransitionFinished(ev: TransitionEvent) {
+	if (ev.propertyName !== 'translate') return;
+	enableSlideTransition.value = false;
+}
+
+function onCancelHorizontalSwipe() {
+	scrollToCurrentIndex();
+}
+
+function onNext() {
+	if (currentIndex.value < props.contents.length - 1) {
+		currentIndex.value++;
+	}
+	scrollToCurrentIndex();
+}
+
+function onPrev() {
+	if (currentIndex.value > 0) {
+		currentIndex.value--;
+	}
+	scrollToCurrentIndex();
+}
+
+function onItemClose() {
+	closeGallery();
+}
+
+function onAfterLeave() {
+	for (const content of props.contents) {
+		if (content.sourceElement != null) {
+			content.sourceElement.style.visibility = '';
+		}
+	}
+	emit('closed');
+}
+
+function onPopState() {
+	if (showing.value) {
+		close();
+	}
+}
+
+onMounted(() => {
+	window.history.pushState(null, '', '#pswp');
+	window.addEventListener('popstate', onPopState);
+});
+
+const keymap = {
+	'esc': () => close(),
+	'arrowleft': {
+		allowRepeat: true,
+		callback: () => onPrev(),
+	},
+	'arrowright': {
+		allowRepeat: true,
+		callback: () => onNext(),
+	},
+} as const satisfies Keymap;
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', onResize);
+	window.removeEventListener('popstate', onPopState);
+});
+
+defineExpose({
+	close,
+});
+</script>
+
+<style lang="scss" module>
+.transition_root_enterActive,
+.transition_root_leaveActive {
+	> .bg {
+		transition: opacity v-bind("closeAnimDuration + 'ms'"); // 子Itemコンポーネントがフェードイン/アウトするdurationと合わせる
+	}
+}
+.transition_root_enterFrom,
+.transition_root_leaveTo {
+	pointer-events: none;
+	> .bg {
+		opacity: 0;
+	}
+}
+
+.root {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.bg {
+}
+
+.main {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.items {
+	position: absolute;
+	display: flex;
+	width: calc(v-bind("screenWidth + 'px'") * v-bind("contents.length"));
+	height: 100dvh;
+	overflow: clip;
+	contain: strict;
+}
+
+.itemsTransition {
+	pointer-events: none;
+	transition: translate v-bind("slideAnimDuration + 'ms'") cubic-bezier(0.45, 0, 0.55, 1);
+}
+
+.item {
+	width: 100dvw;
+	height: 100dvh;
+	overflow: clip;
+	contain: strict;
+	flex-shrink: 0;
+}
+
+.prevButton,
+.nextButton {
+	position: absolute;
+	top: 0;
+	width: 70px;
+	height: 100%;
+	display: grid;
+	place-items: center;
+}
+.prevButton {
+	left: 0;
+}
+.nextButton {
+	right: 0;
+}
+
+.buttonIcon {
+	width: 45px;
+	height: 45px;
+	display: grid;
+	place-items: center;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 100%;
+	color: #fff;
+}
+</style>

packages/frontend/src/components/MkMediaAudio.vue

@@ -49,8 +49,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				tabindex="-1"
 				@click.stop="togglePlayPause"
 			>
-				<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
-				<i v-else class="ti ti-player-play-filled"></i>
+				<i v-if="isPlaying" class="ti ti-player-pause"></i>
+				<i v-else class="ti ti-player-play"></i>
 			</button>
 		</div>
 		<div :class="[$style.controlsChild, $style.controlsRight]">
@@ -100,6 +100,7 @@ import { hms } from '@/filters/hms.js';
 import MkMediaRange from '@/components/MkMediaRange.vue';
 import { $i, iAmModerator } from '@/i.js';
 import { prefer } from '@/preferences.js';
+import { getFileMenu } from '@/utility/get-file-menu.js';
 import { canRevealFile, shouldHideFileByDefault } from '@/utility/sensitive-file.js';
 
 const props = defineProps<{
@@ -208,56 +209,11 @@ function showMenu(ev: MouseEvent) {
 		{
 			type: 'divider',
 		},
-		{
-			text: i18n.ts.hide,
-			icon: 'ti ti-eye-off',
-			action: () => {
-				hide.value = true;
-			},
-		},
 	];
 
-	if (iAmModerator) {
-		menu.push({
-			text: props.audio.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-			icon: props.audio.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
-			danger: true,
-			action: () => toggleSensitive(props.audio),
-		});
-	}
-
-	const details: MenuItem[] = [];
-	if ($i?.id === props.audio.userId) {
-		details.push({
-			type: 'link',
-			text: i18n.ts._fileViewer.title,
-			icon: 'ti ti-info-circle',
-			to: `/my/drive/file/${props.audio.id}`,
-		});
-	}
-
-	if (iAmModerator) {
-		details.push({
-			type: 'link',
-			text: i18n.ts.moderation,
-			icon: 'ti ti-photo-exclamation',
-			to: `/admin/file/${props.audio.id}`,
-		});
-	}
-
-	if (details.length > 0) {
-		menu.push({ type: 'divider' }, ...details);
-	}
-
-	if (prefer.s.devMode) {
-		menu.push({ type: 'divider' }, {
-			icon: 'ti ti-hash',
-			text: i18n.ts.copyFileId,
-			action: () => {
-				copyToClipboard(props.audio.id);
-			},
-		});
-	}
+	menu.push(...getFileMenu(props.audio, (newState) => {
+		hide.value = newState;
+	}));
 
 	menuShowing.value = true;
 	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
@@ -268,20 +224,6 @@ function showMenu(ev: MouseEvent) {
 	});
 }
 
-async function toggleSensitive(file: Misskey.entities.DriveFile) {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: file.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
-	});
-
-	if (canceled) return;
-
-	os.apiWithDialog('drive/files/update', {
-		fileId: file.id,
-		isSensitive: !file.isSensitive,
-	});
-}
-
 // MediaControl: Common State
 const oncePlayed = ref(false);
 const isReady = ref(false);

packages/frontend/src/components/MkMediaImage.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[hide ? $style.hidden : $style.visible, (image.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive]" @click="reveal" @contextmenu.stop="onContextmenu">
+<div :class="[hide ? $style.hidden : $style.visible, (image.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive]" @click="onClick" @contextmenu.stop="onContextmenu">
 	<component
 		:is="disableImageLink ? 'div' : 'a'"
 		v-bind="disableImageLink ? {
@@ -29,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:height="image.properties.height"
 			:style="hide ? 'filter: brightness(0.7);' : null"
 			:class="$style.image"
+			:marker="marker"
 		/>
 		<div
 			v-else-if="prefer.s.dataSaver.media || hide"
@@ -42,6 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:alt="image.comment || image.name"
 			:title="image.comment || image.name"
 			:class="$style.image"
+			:data-marker="marker"
 		/>
 	</component>
 	<template v-if="hide">
@@ -68,16 +70,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { watch, ref, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import type { MenuItem } from '@/types/menu.js';
-import { copyToClipboard } from '@/utility/copy-to-clipboard';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import bytes from '@/filters/bytes.js';
 import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
-import { $i, iAmModerator } from '@/i.js';
 import { prefer } from '@/preferences.js';
 import { shouldHideFileByDefault, canRevealFile } from '@/utility/sensitive-file.js';
+import { getFileMenu } from '@/utility/get-file-menu.js';
 
 const props = withDefaults(defineProps<{
 	image: Misskey.entities.DriveFile;
@@ -85,12 +85,17 @@ const props = withDefaults(defineProps<{
 	cover?: boolean;
 	disableImageLink?: boolean;
 	controls?: boolean;
+	marker?: string;
 }>(), {
 	cover: false,
 	disableImageLink: false,
 	controls: true,
 });
 
+const emit = defineEmits<{
+	(event: 'mediaClick', ev: PointerEvent): void;
+}>();
+
 const hide = ref(true);
 
 const url = computed(() => (props.raw || prefer.s.loadRawImages)
@@ -100,8 +105,9 @@ const url = computed(() => (props.raw || prefer.s.loadRawImages)
 		: props.image.thumbnailUrl!,
 );
 
-async function reveal(ev: PointerEvent) {
+async function onClick(ev: PointerEvent) {
 	if (!props.controls) {
+		emit('mediaClick', ev);
 		return;
 	}
 
@@ -112,6 +118,8 @@ async function reveal(ev: PointerEvent) {
 		}
 
 		hide.value = false;
+	} else {
+		emit('mediaClick', ev);
 	}
 }
 
@@ -123,80 +131,12 @@ watch(() => props.image, (newImage) => {
 	immediate: true,
 });
 
-function getMenu() {
-	const menuItems: MenuItem[] = [];
-
-	menuItems.push({
-		text: i18n.ts.hide,
-		icon: 'ti ti-eye-off',
-		action: () => {
-			hide.value = true;
-		},
-	});
-
-	if (iAmModerator) {
-		menuItems.push({
-			text: props.image.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-			icon: 'ti ti-eye-exclamation',
-			danger: true,
-			action: async () => {
-				const { canceled } = await os.confirm({
-					type: 'warning',
-					text: props.image.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
-				});
-
-				if (canceled) return;
-
-				os.apiWithDialog('drive/files/update', {
-					fileId: props.image.id,
-					isSensitive: !props.image.isSensitive,
-				});
-			},
-		});
-	}
-
-	const details: MenuItem[] = [];
-	if ($i?.id === props.image.userId) {
-		details.push({
-			type: 'link',
-			text: i18n.ts._fileViewer.title,
-			icon: 'ti ti-info-circle',
-			to: `/my/drive/file/${props.image.id}`,
-		});
-	}
-
-	if (iAmModerator) {
-		details.push({
-			type: 'link',
-			text: i18n.ts.moderation,
-			icon: 'ti ti-photo-exclamation',
-			to: `/admin/file/${props.image.id}`,
-		});
-	}
-
-	if (details.length > 0) {
-		menuItems.push({ type: 'divider' }, ...details);
-	}
-
-	if (prefer.s.devMode) {
-		menuItems.push({ type: 'divider' }, {
-			icon: 'ti ti-hash',
-			text: i18n.ts.copyFileId,
-			action: () => {
-				copyToClipboard(props.image.id);
-			},
-		});
-	}
-
-	return menuItems;
-}
-
 function showMenu(ev: PointerEvent) {
-	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	os.popupMenu(getFileMenu(props.image, (newHide) => { hide.value = newHide; }), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 }
 
 function onContextmenu(ev: PointerEvent) {
-	os.contextMenu(getMenu(), ev);
+	os.contextMenu(getFileMenu(props.image, (newHide) => { hide.value = newHide; }), ev);
 }
 </script>
 

packages/frontend/src/components/MkMediaList.vue

@@ -20,8 +20,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 			]"
 		>
 			<template v-for="media in mediaList.filter(media => previewable(media))">
-				<XVideo v-if="media.type.startsWith('video')" :key="`video:${media.id}`" :class="$style.media" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="`image:${media.id}`" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/>
+				<XVideo
+					v-if="media.type.startsWith('video')"
+					:key="`video:${media.id}`"
+					:class="$style.media"
+					:video="media"
+					@mediaClick="onMediaClick(media)"
+				/>
+				<XImage
+					v-else-if="media.type.startsWith('image')"
+					:key="`image:${media.id}`"
+					:marker="`${markerId}:${media.id}`"
+					:disableImageLink="true"
+					:class="$style.media"
+					:image="media"
+					:raw="raw"
+					@mediaClick="onMediaClick(media)"
+				/>
 			</template>
 		</div>
 	</div>
@@ -29,18 +44,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, useTemplateRef } from 'vue';
+import { computed, markRaw, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
 import { FILE_TYPE_BROWSERSAFE } from '@@/js/const.js';
+import type { Content } from '@/components/MkLightbox.item.vue';
 import XBanner from '@/components/MkMediaBanner.vue';
 import XImage from '@/components/MkMediaImage.vue';
 import XVideo from '@/components/MkMediaVideo.vue';
 import * as os from '@/os.js';
-import { focusParent } from '@/utility/focus.js';
 import { prefer } from '@/preferences.js';
+import { genId } from '@/utility/id.js';
 
 const props = defineProps<{
 	mediaList: Misskey.entities.DriveFile[];
@@ -48,18 +61,8 @@ const props = defineProps<{
 }>();
 
 const gallery = useTemplateRef('gallery');
-const pswpZIndex = os.claimZIndex('middle');
-window.document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
 const count = computed(() => props.mediaList.filter(media => previewable(media)).length);
-let lightbox: PhotoSwipeLightbox | null = null;
-
-let activeEl: HTMLElement | null = null;
-
-const popstateHandler = (): void => {
-	if (lightbox?.pswp && lightbox.pswp.isOpen === true) {
-		lightbox.pswp.close();
-	}
-};
+const markerId = genId();
 
 async function calcAspectRatio() {
 	if (!gallery.value) return;
@@ -96,121 +99,9 @@ onMounted(() => {
 	calcAspectRatio();
 
 	if (gallery.value == null) return; // TSを黙らすため
-
-	lightbox = new PhotoSwipeLightbox({
-		dataSource: props.mediaList
-			.filter(media => {
-				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
-				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
-			})
-			.map(media => {
-				const item = {
-					src: media.url,
-					w: media.properties.width,
-					h: media.properties.height,
-					// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-					alt: media.comment || media.name,
-					// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-					comment: media.comment || media.name,
-				};
-				if (media.properties.orientation != null && media.properties.orientation >= 5) {
-					[item.w, item.h] = [item.h, item.w];
-				}
-				return item;
-			}),
-		gallery: gallery.value,
-		mainClass: 'pswp',
-		children: '.image',
-		thumbSelector: '.image',
-		loop: false,
-		padding: window.innerWidth > 500 ? {
-			top: 32,
-			bottom: 90,
-			left: 32,
-			right: 32,
-		} : {
-			top: 0,
-			bottom: 78,
-			left: 0,
-			right: 0,
-		},
-		imageClickAction: 'close',
-		tapAction: 'close',
-		bgOpacity: 1,
-		showAnimationDuration: 100,
-		hideAnimationDuration: 100,
-		returnFocus: false,
-		pswpModule: PhotoSwipe,
-	});
-
-	lightbox.addFilter('itemData', (itemData) => {
-		// element is children
-		const { element } = itemData;
-
-		const id = element?.dataset.id;
-		const file = props.mediaList.find(media => media.id === id);
-		if (!file) return itemData;
-
-		itemData.src = file.url;
-		itemData.w = Number(file.properties.width);
-		itemData.h = Number(file.properties.height);
-		if (file.properties.orientation != null && file.properties.orientation >= 5) {
-			[itemData.w, itemData.h] = [itemData.h, itemData.w];
-		}
-		itemData.msrc = file.thumbnailUrl ?? undefined;
-		// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-		itemData.alt = file.comment || file.name;
-		// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-		itemData.comment = file.comment || file.name;
-		itemData.thumbCropped = true;
-
-		return itemData;
-	});
-
-	lightbox.on('uiRegister', () => {
-		lightbox?.pswp?.ui?.registerElement({
-			name: 'altText',
-			className: 'pswp__alt-text-container',
-			appendTo: 'wrapper',
-			onInit: (el, pswp) => {
-				const textBox = window.document.createElement('p');
-				textBox.className = 'pswp__alt-text _acrylic';
-				el.appendChild(textBox);
-
-				pswp.on('change', () => {
-					textBox.textContent = pswp.currSlide?.data.comment;
-				});
-			},
-		});
-	});
-
-	lightbox.on('afterInit', () => {
-		activeEl = window.document.activeElement instanceof HTMLElement ? window.document.activeElement : null;
-		focusParent(activeEl, true, true);
-		lightbox?.pswp?.element?.focus({
-			preventScroll: true,
-		});
-		window.history.pushState(null, '', '#pswp');
-	});
-
-	lightbox.on('destroy', () => {
-		focusParent(activeEl, true, false);
-		activeEl = null;
-		if (window.location.hash === '#pswp') {
-			window.history.back();
-		}
-	});
-
-	window.addEventListener('popstate', popstateHandler);
-
-	lightbox.init();
 });
 
 onUnmounted(() => {
-	window.removeEventListener('popstate', popstateHandler);
-	lightbox?.destroy();
-	lightbox = null;
-	activeEl = null;
 });
 
 const previewable = (file: Misskey.entities.DriveFile): boolean => {
@@ -219,11 +110,47 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
 	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
 };
 
-const openGallery = () => {
-	if (props.mediaList.filter(media => previewable(media)).length > 0) {
-		lightbox?.loadAndOpen(0);
+function onMediaClick(file: Misskey.entities.DriveFile) {
+	if (prefer.s.imageNewTab) {
+		window.open(file.url, '_blank');
+		return;
 	}
-};
+	openGallery(file.id);
+}
+
+async function openGallery(id?: string) {
+	if (id == null) {
+		const firstImage = props.mediaList.find(media => previewable(media));
+		if (firstImage == null) return;
+		id = firstImage.id;
+	}
+
+	const getElementByMarker = (marker: string) => {
+		if (gallery.value == null) return null;
+		const found = gallery.value.querySelector(`[data-marker="${marker}"]`) as HTMLElement | null;
+		if (found == null) return null;
+		return markRaw(found);
+	};
+
+	const contents = props.mediaList.filter(media => previewable(media)).map<Content>(media => ({
+		id: media.id,
+		type: media.type.startsWith('video') ? 'video' : 'image',
+		url: media.url,
+		thumbnailUrl: media.thumbnailUrl,
+		width: media.properties.width ?? 0,
+		height: media.properties.height ?? 0,
+		filename: media.name,
+		file: media,
+		sourceElement: getElementByMarker(`${markerId}:${media.id}`),
+	}));
+
+	const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkLightbox.vue').then(x => x.default), {
+		defaultIndex: contents.findIndex(conten => conten.id === id),
+		contents: contents,
+	}, {
+		closed: () => dispose(),
+	});
+}
 
 defineExpose({
 	openGallery,
@@ -316,6 +243,7 @@ defineExpose({
 .media {
 	overflow: hidden; // clipにするとバグる
 	border-radius: 8px;
+	cursor: zoom-in;
 }
 
 @container (min-width: 500px) {
@@ -331,42 +259,4 @@ defineExpose({
 		}
 	}
 }
-
-:global(.pswp) {
-	--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
-	--pswp-bg: var(--MI_THEME-modalBg) !important;
-}
-</style>
-
-<style lang="scss">
-.pswp__bg {
-	background: var(--MI_THEME-modalBg);
-	backdrop-filter: var(--MI-modalBgFilter);
-}
-
-.pswp__alt-text-container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	position: absolute;
-	bottom: 20px;
-	left: 50%;
-	transform: translateX(-50%);
-
-	width: 75%;
-	max-width: 800px;
-}
-
-.pswp__alt-text {
-	color: var(--MI_THEME-fg);
-	margin: 0 auto;
-	text-align: center;
-	padding: var(--MI-margin);
-	border-radius: var(--MI-radius);
-	max-height: 8em;
-	overflow-y: auto;
-	text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px;
-	white-space: pre-line;
-}
 </style>

packages/frontend/src/components/MkMediaRange.vue

@@ -5,11 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- Media系専用のinput range -->
 <template>
-<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--MI_THEME-scrollbarHandle);'">
-	<div :class="$style.controlsSeekbar">
-		<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
-		<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
-	</div>
+<div :class="$style.controlsSeekbar">
+	<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
+	<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
 </div>
 </template>
 
@@ -18,10 +16,8 @@ import { computed } from 'vue';
 
 withDefaults(defineProps<{
 	buffer?: number;
-	sliderBgWhite?: boolean;
 }>(), {
 	buffer: undefined,
-	sliderBgWhite: false,
 });
 
 const emit = defineEmits<{
@@ -38,6 +34,8 @@ const modelValue = computed({
 <style lang="scss" module>
 .controlsSeekbar {
 	position: relative;
+	--sliderBg: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
+	--thumbSize: 17px;
 }
 
 .seek {
@@ -49,7 +47,7 @@ const modelValue = computed({
 	border-radius: 26px;
 	color: var(--MI_THEME-accent);
 	display: block;
-	height: 19px;
+	height: 24px;
 	margin: 0;
 	min-width: 0;
 	padding: 0;
@@ -83,11 +81,11 @@ const modelValue = computed({
 		border: 0;
 		border-radius: 100%;
 		box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
-		height: 13px;
-		margin-top: -4px;
+		height: var(--thumbSize);
+		margin-top: calc((5px - var(--thumbSize)) / 2);
 		position: relative;
 		transition: all .2s ease;
-		width: 13px;
+		width: var(--thumbSize);
 
 		&:active {
 			box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
@@ -99,10 +97,10 @@ const modelValue = computed({
 		border: 0;
 		border-radius: 100%;
 		box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
-		height: 13px;
+		height: var(--thumbSize);
 		position: relative;
 		transition: all .2s ease;
-		width: 13px;
+		width: var(--thumbSize);
 
 		&:active {
 			box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
@@ -119,7 +117,7 @@ const modelValue = computed({
 .buffer {
 	appearance: none;
 	background: transparent;
-	color: var(--sliderBg);
+	color: color(from var(--MI_THEME-accent) srgb r g b / 0.25);
 	border: 0;
 	border-radius: 99rem;
 	height: 5px;

packages/frontend/src/components/MkMediaVideo.vue

@@ -6,17 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div
 	ref="playerEl"
-	v-hotkey="keymap"
 	tabindex="0"
 	:class="[
-		$style.videoContainer,
-		controlsShowing && $style.active,
+		$style.root,
 		(video.isSensitive && prefer.s.highlightSensitiveMedia) && $style.sensitive,
 	]"
-	@mouseover.passive="onMouseOver"
-	@mousemove.passive="onMouseMove"
-	@mouseleave.passive="onMouseLeave"
-	@contextmenu.stop
+	@contextmenu.stop="onContextmenu"
 	@keydown.stop
 >
 	<button v-if="hide" :class="$style.hidden" @click="reveal">
@@ -27,154 +22,49 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</button>
 
-	<div v-else-if="prefer.s.useNativeUiForVideoAudioPlayer" :class="$style.videoRoot">
-		<video
-			ref="videoEl"
+	<div v-else :class="$style.videoRoot" @click="emit('mediaClick', $event)">
+		<img
+			v-if="video.thumbnailUrl"
+			:class="$style.video"
+			:src="video.thumbnailUrl"
+			:alt="video.comment ?? undefined"
+		/>
+		<video
+			v-else
 			:class="$style.video"
-			:poster="video.thumbnailUrl ?? undefined"
-			:title="video.comment ?? undefined"
 			:alt="video.comment"
 			preload="metadata"
-			controls
-			@keydown.prevent
 		>
 			<source :src="video.url">
 		</video>
-		<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
-		<div :class="$style.indicators">
-			<div v-if="video.comment" :class="$style.indicator">ALT</div>
-			<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
-		</div>
-	</div>
-
-	<div v-else :class="$style.videoRoot">
-		<video
-			ref="videoEl"
-			:class="$style.video"
-			:poster="video.thumbnailUrl ?? undefined"
-			:title="video.comment ?? undefined"
-			:alt="video.comment"
-			preload="metadata"
-			playsinline
-			@keydown.prevent
-			@click.self="togglePlayPause"
-		>
-			<source :src="video.url">
-		</video>
-		<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
-		<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
-			<MkLoading/>
-		</div>
-		<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
-		<div :class="$style.indicators">
-			<div v-if="video.comment" :class="$style.indicator">ALT</div>
-			<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
-		</div>
-		<div :class="$style.videoControls" @click.self="togglePlayPause">
-			<div :class="[$style.controlsChild, $style.controlsLeft]">
-				<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
-					<i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
-					<i v-else class="ti ti-player-play-filled"></i>
-				</button>
+		<div :class="$style.playIconWrapper">
+			<div :class="$style.playIcon">
+				<i class="ti ti-player-play"></i>
 			</div>
-			<div :class="[$style.controlsChild, $style.controlsRight]">
-				<button class="_button" :class="$style.controlButton" @click="showMenu">
-					<i class="ti ti-settings"></i>
-				</button>
-				<button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
-					<i v-if="isFullscreen" class="ti ti-arrows-minimize"></i>
-					<i v-else class="ti ti-arrows-maximize"></i>
-				</button>
-			</div>
-			<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }}</div>
-			<div :class="[$style.controlsChild, $style.controlsVolume]">
-				<button class="_button" :class="$style.controlButton" @click="toggleMute">
-					<i v-if="volume === 0" class="ti ti-volume-3"></i>
-					<i v-else class="ti ti-volume"></i>
-				</button>
-				<MkMediaRange
-					v-model="volume"
-					:sliderBgWhite="true"
-					:class="$style.volumeSeekbar"
-				/>
-			</div>
-			<MkMediaRange
-				v-model="rangePercent"
-				:sliderBgWhite="true"
-				:class="$style.seekbarRoot"
-				:buffer="bufferedDataRatio"
-			/>
 		</div>
+		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
+		<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
 	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
+import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import type { MenuItem } from '@/types/menu.js';
-import type { Keymap } from '@/utility/hotkey.js';
-import { copyToClipboard } from '@/utility/copy-to-clipboard';
 import bytes from '@/filters/bytes.js';
-import { hms } from '@/filters/hms.js';
 import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
-import { exitFullscreen, requestFullscreen } from '@/utility/fullscreen.js';
-import hasAudio from '@/utility/media-has-audio.js';
-import MkMediaRange from '@/components/MkMediaRange.vue';
-import { $i, iAmModerator } from '@/i.js';
 import { prefer } from '@/preferences.js';
+import * as os from '@/os.js';
+import { getFileMenu } from '@/utility/get-file-menu.js';
 import { shouldHideFileByDefault, canRevealFile } from '@/utility/sensitive-file.js';
 
 const props = defineProps<{
 	video: Misskey.entities.DriveFile;
 }>();
 
-const keymap = {
-	'up': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				volume.value = Math.min(volume.value + 0.1, 1);
-			}
-		},
-	},
-	'down': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				volume.value = Math.max(volume.value - 0.1, 0);
-			}
-		},
-	},
-	'left': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				videoEl.value.currentTime = Math.max(videoEl.value.currentTime - 5, 0);
-			}
-		},
-	},
-	'right': {
-		allowRepeat: true,
-		callback: () => {
-			if (hasFocus() && videoEl.value) {
-				videoEl.value.currentTime = Math.min(videoEl.value.currentTime + 5, videoEl.value.duration);
-			}
-		},
-	},
-	'space': () => {
-		if (hasFocus()) {
-			togglePlayPause();
-		}
-	},
-} as const satisfies Keymap;
-
-// PlayerElもしくはその子要素にフォーカスがあるかどうか
-function hasFocus() {
-	if (!playerEl.value) return false;
-	return playerEl.value === window.document.activeElement || playerEl.value.contains(window.document.activeElement);
-}
+const emit = defineEmits<{
+	(event: 'mediaClick', ev: PointerEvent): void;
+}>();
 
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const hide = ref(shouldHideFileByDefault(props.video));
@@ -187,365 +77,17 @@ async function reveal() {
 	hide.value = false;
 }
 
-// Menu
-const menuShowing = ref(false);
-
 function showMenu(ev: PointerEvent) {
-	const menu: MenuItem[] = [
-		// TODO: 再生キューに追加
-		{
-			type: 'switch',
-			text: i18n.ts._mediaControls.loop,
-			icon: 'ti ti-repeat',
-			ref: loop,
-		},
-		{
-			type: 'radio',
-			text: i18n.ts._mediaControls.playbackRate,
-			icon: 'ti ti-clock-play',
-			ref: speed,
-			options: [{
-				label: '0.25x',
-				value: 0.25,
-			}, {
-				label: '0.5x',
-				value: 0.5,
-			}, {
-				label: '0.75x',
-				value: 0.75,
-			}, {
-				label: '1.0x',
-				value: 1,
-			}, {
-				label: '1.25x',
-				value: 1.25,
-			}, {
-				label: '1.5x',
-				value: 1.5,
-			}, {
-				label: '2.0x',
-				value: 2,
-			}],
-		},
-		...(window.document.pictureInPictureEnabled ? [{
-			text: i18n.ts._mediaControls.pip,
-			icon: 'ti ti-picture-in-picture',
-			action: togglePictureInPicture,
-		}] : []),
-		{
-			type: 'divider',
-		},
-		{
-			text: i18n.ts.hide,
-			icon: 'ti ti-eye-off',
-			action: () => {
-				hide.value = true;
-			},
-		},
-	];
-
-	if (iAmModerator) {
-		menu.push({
-			text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-			icon: props.video.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
-			danger: true,
-			action: () => toggleSensitive(props.video),
-		});
-	}
-
-	const details: MenuItem[] = [];
-	if ($i?.id === props.video.userId) {
-		details.push({
-			type: 'link',
-			text: i18n.ts._fileViewer.title,
-			icon: 'ti ti-info-circle',
-			to: `/my/drive/file/${props.video.id}`,
-		});
-	}
-
-	if (iAmModerator) {
-		details.push({
-			type: 'link',
-			text: i18n.ts.moderation,
-			icon: 'ti ti-photo-exclamation',
-			to: `/admin/file/${props.video.id}`,
-		});
-	}
-
-	if (details.length > 0) {
-		menu.push({ type: 'divider' }, ...details);
-	}
-
-	if (prefer.s.devMode) {
-		menu.push({ type: 'divider' }, {
-			icon: 'ti ti-hash',
-			text: i18n.ts.copyFileId,
-			action: () => {
-				copyToClipboard(props.video.id);
-			},
-		});
-	}
-
-	menuShowing.value = true;
-	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
-		align: 'right',
-		onClosing: () => {
-			menuShowing.value = false;
-		},
-	});
+	os.popupMenu(getFileMenu(props.video, (newHide) => { hide.value = newHide; }), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
 }
 
-async function toggleSensitive(file: Misskey.entities.DriveFile) {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: file.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
-	});
-
-	if (canceled) return;
-
-	os.apiWithDialog('drive/files/update', {
-		fileId: file.id,
-		isSensitive: !file.isSensitive,
-	});
+function onContextmenu(ev: PointerEvent) {
+	os.contextMenu(getFileMenu(props.video, (newHide) => { hide.value = newHide; }), ev);
 }
-
-// MediaControl: Video State
-const videoEl = useTemplateRef('videoEl');
-const playerEl = useTemplateRef('playerEl');
-const isHoverring = ref(false);
-const controlsShowing = computed(() => {
-	if (!oncePlayed.value) return true;
-	if (isHoverring.value) return true;
-	if (menuShowing.value) return true;
-	return false;
-});
-const isFullscreen = ref(false);
-let controlStateTimer: number | null = null;
-
-// MediaControl: Common State
-const oncePlayed = ref(false);
-const isReady = ref(false);
-const isPlaying = ref(false);
-const isActuallyPlaying = ref(false);
-const elapsedTimeMs = ref(0);
-const durationMs = ref(0);
-const rangePercent = computed({
-	get: () => {
-		return (elapsedTimeMs.value / durationMs.value) || 0;
-	},
-	set: (to) => {
-		if (!videoEl.value) return;
-		videoEl.value.currentTime = to * durationMs.value / 1000;
-	},
-});
-const volume = ref(.25);
-const speed = ref(1);
-const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える
-const bufferedEnd = ref(0);
-const bufferedDataRatio = computed(() => {
-	if (!videoEl.value) return 0;
-	return bufferedEnd.value / videoEl.value.duration;
-});
-
-// MediaControl Events
-function onMouseOver() {
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-	}
-	isHoverring.value = true;
-
-	controlStateTimer = window.setTimeout(() => {
-		isHoverring.value = false;
-	}, 3000);
-}
-
-function onMouseMove() {
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-	}
-	isHoverring.value = true;
-	controlStateTimer = window.setTimeout(() => {
-		isHoverring.value = false;
-	}, 3000);
-}
-
-function onMouseLeave() {
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-	}
-	controlStateTimer = window.setTimeout(() => {
-		isHoverring.value = false;
-	}, 100);
-}
-
-function togglePlayPause() {
-	if (!isReady.value || !videoEl.value) return;
-
-	if (isPlaying.value) {
-		videoEl.value.pause();
-		isPlaying.value = false;
-	} else {
-		videoEl.value.play();
-		isPlaying.value = true;
-		oncePlayed.value = true;
-	}
-}
-
-function toggleFullscreen() {
-	if (playerEl.value == null || videoEl.value == null) return;
-	if (isFullscreen.value) {
-		exitFullscreen({
-			videoEl: videoEl.value,
-		});
-		isFullscreen.value = false;
-	} else {
-		requestFullscreen({
-			videoEl: videoEl.value,
-			playerEl: playerEl.value,
-			options: {
-				navigationUI: 'hide',
-			},
-		});
-		isFullscreen.value = true;
-	}
-}
-
-function togglePictureInPicture() {
-	if (videoEl.value) {
-		if (window.document.pictureInPictureElement) {
-			window.document.exitPictureInPicture();
-		} else {
-			videoEl.value.requestPictureInPicture();
-		}
-	}
-}
-
-function toggleMute() {
-	if (volume.value === 0) {
-		volume.value = .25;
-	} else {
-		volume.value = 0;
-	}
-}
-
-let onceInit = false;
-let mediaTickFrameId: number | null = null;
-let stopVideoElWatch: () => void;
-
-function init() {
-	if (onceInit) return;
-	onceInit = true;
-
-	stopVideoElWatch = watch(videoEl, () => {
-		if (videoEl.value) {
-			isReady.value = true;
-
-			function updateMediaTick() {
-				if (videoEl.value) {
-					try {
-						bufferedEnd.value = videoEl.value.buffered.end(0);
-					} catch (err) {
-						bufferedEnd.value = 0;
-					}
-
-					elapsedTimeMs.value = videoEl.value.currentTime * 1000;
-
-					if (videoEl.value.loop !== loop.value) {
-						loop.value = videoEl.value.loop;
-					}
-				}
-				mediaTickFrameId = window.requestAnimationFrame(updateMediaTick);
-			}
-
-			updateMediaTick();
-
-			videoEl.value.addEventListener('play', () => {
-				isActuallyPlaying.value = true;
-			});
-
-			videoEl.value.addEventListener('pause', () => {
-				isActuallyPlaying.value = false;
-				isPlaying.value = false;
-			});
-
-			videoEl.value.addEventListener('ended', () => {
-				oncePlayed.value = false;
-				isActuallyPlaying.value = false;
-				isPlaying.value = false;
-			});
-
-			durationMs.value = videoEl.value.duration * 1000;
-			videoEl.value.addEventListener('durationchange', () => {
-				if (videoEl.value) {
-					durationMs.value = videoEl.value.duration * 1000;
-				}
-			});
-
-			videoEl.value.volume = volume.value;
-			hasAudio(videoEl.value).then(had => {
-				if (!had && videoEl.value) {
-					videoEl.value.loop = videoEl.value.muted = true;
-					videoEl.value.play();
-				}
-			});
-		}
-	}, {
-		immediate: true,
-	});
-}
-
-watch(volume, (to) => {
-	if (videoEl.value) videoEl.value.volume = to;
-});
-
-watch(speed, (to) => {
-	if (videoEl.value) videoEl.value.playbackRate = to;
-});
-
-watch(loop, (to) => {
-	if (videoEl.value) videoEl.value.loop = to;
-});
-
-watch(hide, (to) => {
-	if (videoEl.value && to && isFullscreen.value) {
-		exitFullscreen({
-			videoEl: videoEl.value,
-		});
-		isFullscreen.value = false;
-	}
-});
-
-onMounted(() => {
-	init();
-});
-
-onActivated(() => {
-	init();
-});
-
-onDeactivated(() => {
-	isReady.value = false;
-	isPlaying.value = false;
-	isActuallyPlaying.value = false;
-	elapsedTimeMs.value = 0;
-	durationMs.value = 0;
-	bufferedEnd.value = 0;
-	hide.value = (prefer.s.nsfw === 'force' || prefer.s.dataSaver.media) ? true : (props.video.isSensitive && prefer.s.nsfw !== 'ignore');
-	stopVideoElWatch();
-	onceInit = false;
-	if (mediaTickFrameId) {
-		window.cancelAnimationFrame(mediaTickFrameId);
-		mediaTickFrameId = null;
-	}
-	if (controlStateTimer) {
-		window.clearTimeout(controlStateTimer);
-		controlStateTimer = null;
-	}
-});
 </script>
 
 <style lang="scss" module>
-.videoContainer {
+.root {
 	container-type: inline-size;
 	position: relative;
 	overflow: clip;
@@ -553,6 +95,12 @@ onDeactivated(() => {
 	&:focus-visible {
 		outline: none;
 	}
+
+	&:hover {
+		.playIcon {
+			scale: 1.2;
+		}
+	}
 }
 
 .sensitive {
@@ -571,42 +119,6 @@ onDeactivated(() => {
 	}
 }
 
-.indicators {
-	display: inline-flex;
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	pointer-events: none;
-	opacity: .5;
-	gap: 6px;
-}
-
-.indicator {
-	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
-	background-color: black;
-	border-radius: 6px;
-	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
-	display: inline-block;
-	font-weight: bold;
-	font-size: 0.8em;
-	padding: 2px 5px;
-}
-
-.hide {
-	display: block;
-	position: absolute;
-	border-radius: 6px;
-	background-color: var(--MI_THEME-fg);
-	color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
-	font-size: 12px;
-	opacity: .5;
-	padding: 5px 8px;
-	text-align: center;
-	cursor: pointer;
-	top: 12px;
-	right: 12px;
-}
-
 .hidden {
 	width: 100%;
 	height: 100%;
@@ -616,7 +128,7 @@ onDeactivated(() => {
 	font: inherit;
 	color: inherit;
 	cursor: pointer;
-	padding: 60px 0;
+	padding: 12px 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -640,154 +152,62 @@ onDeactivated(() => {
 	display: block;
 	height: 100%;
 	width: 100%;
+	object-fit: contain;
 }
 
-.videoOverlayPlayButton {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%,-50%);
-
-	opacity: 0;
-	transition: opacity .4s ease-in-out;
-
-	background: var(--MI_THEME-accent);
-	color: #fff;
-	padding: 1rem;
-	border-radius: 99rem;
-
-	font-size: 1.1rem;
-
-	&:focus-visible {
-		outline: none;
-	}
-}
-
-.videoLoading {
+.playIconWrapper {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.videoControls {
 	display: grid;
-	grid-template-areas:
-		"left time . volume right"
-		"seekbar seekbar seekbar seekbar seekbar";
-	grid-template-columns: auto auto 1fr auto auto;
-	align-items: center;
-	gap: 4px 8px;
+	place-items: center;
+}
 
-	padding: 35px 10px 10px 10px;
-	background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75));
+.playIcon {
+	display: grid;
+	place-items: center;
+	width: 50px;
+	height: 50px;
+	border-radius: 100%;
+	font-size: 120%;
+	background: var(--MI_THEME-accent);
+	color: var(--MI_THEME-fgOnAccent);
+	scale: 1;
+	transition: scale 100ms ease;
+}
 
+.menu {
+	display: block;
 	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
-
-	transform: translateY(100%);
-	pointer-events: none;
-	opacity: 0;
-	transition: opacity .4s ease-in-out, transform .4s ease-in-out;
-}
-
-.active {
-	.videoControls {
-		transform: translateY(0);
-		opacity: 1;
-		pointer-events: auto;
-	}
-
-	.videoOverlayPlayButton {
-		opacity: 1;
-	}
-}
-
-.controlsChild {
-	display: flex;
-	align-items: center;
-	gap: 4px;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+	border-radius: 9px 0 0 0;
 	color: #fff;
-
-	.controlButton {
-		padding: 6px;
-		border-radius: calc(var(--MI-radius) / 2);
-		transition: background-color .15s ease;
-		font-size: 1.05rem;
-
-		&:hover {
-			background-color: var(--MI_THEME-accent);
-		}
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
+	font-size: 0.8em;
+	width: 28px;
+	height: 28px;
+	text-align: center;
+	bottom: 0;
+	right: 0;
 }
 
-.controlsLeft {
-	grid-area: left;
-}
-
-.controlsRight {
-	grid-area: right;
-}
-
-.controlsTime {
-	grid-area: time;
-	font-size: .9rem;
-}
-
-.controlsVolume {
-	grid-area: volume;
-
-	.volumeSeekbar {
-		display: none;
-	}
-}
-
-.seekbarRoot {
-	grid-area: seekbar;
-	/* ▼シークバー操作をやりやすくするためにクリックイベントが伝播されないエリアを拡張する */
-	margin: -10px;
-	padding: 10px;
-}
-
-@container (min-width: 500px) {
-	.videoControls {
-		grid-template-areas: "left seekbar time volume right";
-		grid-template-columns: auto 1fr auto auto auto;
-	}
-
-	.controlsVolume {
-		.volumeSeekbar {
-			max-width: 90px;
-			display: block;
-			flex-grow: 1;
-		}
-	}
-}
-
-@container (max-width: 300px) {
-	.videoControls {
-		grid-template-areas:
-			"left . right"
-			"seekbar seekbar seekbar";
-		grid-template-columns: auto 1fr auto;
-	}
-
-	.controlsTime {
-		display: none;
-	}
-
-	.controlsVolume {
-		display: none;
-	}
+.hide {
+	display: block;
+	position: absolute;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+	border-radius: 0 0 0 9px;
+	color: #fff;
+	font-size: 12px;
+	opacity: .5;
+	padding: 5px 8px;
+	text-align: center;
+	cursor: pointer;
+	top: 0;
+	right: 0;
 }
 </style>

packages/frontend/src/components/MkModal.vue

@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:duration="transitionDuration" appear @afterLeave="onClosed" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" ref="modalRootEl" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div data-cy-bg :data-cy-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div data-testid="bg" :data-test-is-transparent="isEnableBgTransparent" class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>

packages/frontend/src/components/MkModalWindow.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkModal ref="modal" v-slot="{ type }" :preferType="deviceKind === 'smartphone' ? 'drawer' : 'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
 	<div ref="rootEl" :class="[$style.root, type === 'drawer' ? $style.asDrawer : null]" :style="{ width: type === 'drawer' ? '' : `${width}px`, height: type === 'drawer' ? '' : `min(${height}px, 100%)` }">
 		<div :class="$style.header">
-			<button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-testid="modal-window-close" @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span :class="$style.title">
 				<slot name="header"></slot>
 			</span>

packages/frontend/src/components/MkPasswordDialog.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
 		<div style="padding: 0 0 16px 0; text-align: center;">
-			<img src="/client-assets/locked_with_key_3d.png" alt="🔐" style="display: block; margin: 0 auto; width: 48px;">
+			<img src="/fluent-emoji/1f510.png" alt="🔐" style="display: block; margin: 0 auto; width: 48px;">
 			<div style="margin-top: 16px;">{{ i18n.ts.authenticationRequiredToContinue }}</div>
 		</div>
 

packages/frontend/src/components/MkPostForm.vue

@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<span v-else><i class="ti ti-rocket-off"></i></span>
 			</button>
 			<button ref="otherSettingsButton" v-tooltip="i18n.ts.other" class="_button" :class="$style.headerRightItem" @click="showOtherSettings"><i class="ti ti-dots"></i></button>
-			<button ref="submitButtonEl" v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+			<button ref="submitButtonEl" v-click-anime class="_button" :class="$style.submit" :disabled="!canPost" data-testid="post-form-submit" @click="post">
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
@@ -77,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
 		<div v-if="targetChannel" :class="$style.colorBar" :style="{ background: targetChannel.color }"></div>
-		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @keyup="onKeyup" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-testid="post-form-text" @keydown="onKeydown" @keyup="onKeyup" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"></textarea>
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
 	<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">

packages/frontend/src/components/MkServerSetupWizard.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<MkInput v-model="q_name" data-cy-server-name>
+	<MkInput v-model="q_name" data-testid="server-setup-server-name">
 		<template #label>{{ i18n.ts.instanceName }}</template>
 	</MkInput>
 
@@ -186,7 +186,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<template #footer>
-			<MkButton gradate large rounded data-cy-server-setup-wizard-apply style="margin: 0 auto;" @click="applySettings">
+			<MkButton gradate large rounded data-testid="server-setup-wizard-apply" style="margin: 0 auto;" @click="applySettings">
 				<i class="ti ti-check"></i> {{ i18n.ts._serverSetupWizard.applyTheseSettings }}
 			</MkButton>
 		</template>

packages/frontend/src/components/MkSignin.input.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.wrapper" data-cy-signin-page-input>
+<div :class="$style.wrapper" data-testid="signin-page-input">
 	<div :class="$style.root">
 		<div :class="$style.avatar">
 			<i class="ti ti-user"></i>
@@ -32,11 +32,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<!-- username入力 -->
 		<form class="_gaps_s" @submit.prevent="emit('usernameSubmitted', username)">
-			<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username>
+			<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-testid="signin-username">
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkButton type="submit" large primary rounded style="margin: 0 auto;" data-cy-signin-page-input-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+			<MkButton type="submit" large primary rounded style="margin: 0 auto;" data-testid="signin-page-input-continue">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 		</form>
 
 		<!-- パスワードレスログイン -->

packages/frontend/src/components/MkSignin.password.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.wrapper" data-cy-signin-page-password>
+<div :class="$style.wrapper" data-testid="signin-page-password">
 	<div class="_gaps" :class="$style.root">
 		<div :class="$style.avatar" :style="{ backgroundImage: user ? `url('${user.avatarUrl}')` : undefined }"></div>
 		<div :class="$style.welcomeBackMessage">
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- ブラウザ オートコンプリート用 -->
 			<input type="hidden" name="username" autocomplete="username" :value="user.username">
 
-			<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required autofocus data-cy-signin-password>
+			<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required autofocus data-testid="signin-password">
 				<template #prefix><i class="ti ti-lock"></i></template>
 				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
 			</MkInput>
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkCaptcha v-if="instance.enableTestcaptcha" ref="testcaptcha" v-model="testcaptchaResponse" provider="testcaptcha" :sitekey="null"/>
 			</div>
 
-			<MkButton type="submit" :disabled="needCaptcha && captchaFailed" large primary rounded style="margin: 0 auto;" data-cy-signin-page-password-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+			<MkButton type="submit" :disabled="needCaptcha && captchaFailed" large primary rounded style="margin: 0 auto;" data-testid="signin-page-password-continue">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 		</form>
 	</div>
 </div>

packages/frontend/src/components/MkSignupDialog.form.vue

@@ -10,11 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 32px;">
 		<form class="_gaps_m" autocomplete="new-password" @submit.prevent="onSubmit">
-			<MkInput v-if="instance.disableRegistration" v-model="invitationCode" type="text" :spellcheck="false" required data-cy-signup-invitation-code>
+			<MkInput v-if="instance.disableRegistration" v-model="invitationCode" type="text" :spellcheck="false" required data-testid="signup-invitation-code">
 				<template #label>{{ i18n.ts.invitationCode }}</template>
 				<template #prefix><i class="ti ti-key"></i></template>
 			</MkInput>
-			<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" autocomplete="username" required data-cy-signup-username @update:modelValue="onChangeUsername">
+			<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" autocomplete="username" required data-testid="signup-username" @update:modelValue="onChangeUsername">
 				<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span v-else-if="usernameState === 'max-range'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
 				</template>
 			</MkInput>
-			<MkInput v-if="instance.emailRequiredForSignup" v-model="email" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
+			<MkInput v-if="instance.emailRequiredForSignup" v-model="email" :debounce="true" type="email" :spellcheck="false" required data-testid="signup-email" @update:modelValue="onChangeEmail">
 				<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template>
 				<template #prefix><i class="ti ti-mail"></i></template>
 				<template #caption>
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span v-else-if="emailState === 'error'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
 				</template>
 			</MkInput>
-			<MkInput v-model="password" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
+			<MkInput v-model="password" type="password" autocomplete="new-password" required data-testid="signup-password" @update:modelValue="onChangePassword">
 				<template #label>{{ i18n.ts.password }}</template>
 				<template #prefix><i class="ti ti-lock"></i></template>
 				<template #caption>
@@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<span v-if="passwordStrength == 'high'" style="color: var(--MI_THEME-success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
 				</template>
 			</MkInput>
-			<MkInput v-model="retypedPassword" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
+			<MkInput v-model="retypedPassword" type="password" autocomplete="new-password" required data-testid="signup-password-retype" @update:modelValue="onChangePasswordRetype">
 				<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
 				<template #prefix><i class="ti ti-lock"></i></template>
 				<template #caption>
@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 			<MkCaptcha v-if="instance.enableTestcaptcha" ref="testcaptcha" v-model="testcaptchaResponse" :class="$style.captcha" provider="testcaptcha" :sitekey="null"/>
-			<MkButton type="submit" :disabled="shouldDisableSubmitting" large gradate rounded data-cy-signup-submit style="margin: 0 auto;">
+			<MkButton type="submit" :disabled="shouldDisableSubmitting" large gradate rounded data-testid="signup-submit" style="margin: 0 auto;">
 				<template v-if="submitting">
 					<MkLoading :em="true" :colored="false"/>
 				</template>

packages/frontend/src/components/MkSignupDialog.rules.vue

@@ -49,14 +49,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<a href="https://misskey-hub.net/docs/for-users/onboarding/warning/" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
 
-				<MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch>
+				<MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-testid="signup-rules-notes-agree" @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch>
 			</MkFolder>
 
 			<div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div>
 
 			<div class="_buttonsCenter">
 				<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
-				<MkButton inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+				<MkButton inline primary rounded gradate :disabled="!agreed" data-testid="signup-rules-continue" @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 			</div>
 		</div>
 	</div>

packages/frontend/src/components/MkSwitch.button.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		[$style.buttonChecked]: checked,
 		[$style.buttonDisabled]: props.disabled
 	}"
-	data-cy-switch-toggle
+	data-testid="switch-toggle"
 	@click.prevent.stop="toggle"
 >
 	<div :class="{ [$style.knob]: true, [$style.knobChecked]: checked }"></div>

packages/frontend/src/components/MkUserSetupDialog.Profile.vue

@@ -17,11 +17,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</FormSlot>
 
-	<MkInput v-model="name" :max="30" manualSave data-cy-user-setup-user-name>
+	<MkInput v-model="name" :max="30" manualSave data-testid="user-setup-user-name">
 		<template #label>{{ i18n.ts._profile.name }}</template>
 	</MkInput>
 
-	<MkTextarea v-model="description" :max="500" tall manualSave data-cy-user-setup-user-description>
+	<MkTextarea v-model="description" :max="500" tall manualSave data-testid="user-setup-user-description">
 		<template #label>{{ i18n.ts._profile.description }}</template>
 	</MkTextarea>
 

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="dialog"
 	:width="500"
 	:height="550"
-	data-cy-user-setup
+	data-testid="user-setup-dialog"
 	@close="close(true)"
 	@closed="emit('closed')"
 >
@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
 							<div>{{ i18n.ts._initialAccountSetting.letsStartAccountSetup }}</div>
-							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts._initialAccountSetting.profileSetting }} <i class="ti ti-arrow-right"></i></MkButton>
+							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-testid="user-setup-continue" @click="page++">{{ i18n.ts._initialAccountSetting.profileSetting }} <i class="ti ti-arrow-right"></i></MkButton>
 							<MkButton style="margin: 0 auto;" transparent rounded @click="later(true)">{{ i18n.ts.later }}</MkButton>
 						</div>
 					</div>
@@ -52,8 +52,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 						<div :class="$style.pageFooter">
 							<div class="_buttonsCenter">
-								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+								<MkButton rounded data-testid="user-setup-back" @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-testid="user-setup-continue" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
 						</div>
 					</div>
@@ -67,8 +67,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 						<div :class="$style.pageFooter">
 							<div class="_buttonsCenter">
-								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+								<MkButton rounded data-testid="user-setup-back" @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-testid="user-setup-continue" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
 						</div>
 					</div>
@@ -81,8 +81,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<div :class="$style.pageFooter">
 						<div class="_buttonsCenter">
-							<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-							<MkButton primary rounded gradate style="" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							<MkButton rounded data-testid="user-setup-back" @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+							<MkButton primary rounded gradate style="" data-testid="user-setup-continue" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 						</div>
 					</div>
 				</div>
@@ -96,8 +96,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<div style="padding: 0 16px;">{{ i18n.tsx._initialAccountSetting.pushNotificationDescription({ name: instance.name ?? host }) }}</div>
 							<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
-								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+								<MkButton rounded data-testid="user-setup-back" @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton primary rounded gradate data-testid="user-setup-continue" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
 						</div>
 					</div>
@@ -112,11 +112,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
 							<div>{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? host }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
-								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
+								<MkButton rounded primary gradate data-testid="user-setup-continue" @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
 							<div class="_buttonsCenter">
-								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
+								<MkButton rounded data-testid="user-setup-back" @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+								<MkButton rounded primary data-testid="user-setup-continue" @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
 							</div>
 						</div>
 					</div>

packages/frontend/src/components/MkVideoControl.vue

@@ -0,0 +1,318 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div :class="[$style.seekbar]">
+		<MkMediaRange
+			v-model="rangePercent"
+			:buffer="bufferedDataRatio"
+		/>
+	</div>
+
+	<div :class="[$style.controlsChild, $style.controlsLeft]">
+		<button class="_button" :class="$style.controlButton" @click="togglePlayPause">
+			<i v-if="isPlaying" class="ti ti-player-pause"></i>
+			<i v-else class="ti ti-player-play"></i>
+		</button>
+
+		<div :class="[$style.controlsChild, $style.controlsTime]">{{ hms(elapsedTimeMs) }} / {{ hms(durationMs) }}</div>
+	</div>
+	<div :class="[$style.controlsChild, $style.controlsCenter]">
+	</div>
+	<div :class="[$style.controlsChild, $style.controlsRight]">
+		<button class="_button" :class="$style.controlButton" @click="toggleMute">
+			<i v-if="volume === 0" class="ti ti-volume-3"></i>
+			<i v-else class="ti ti-volume"></i>
+		</button>
+		<MkMediaRange
+			v-model="volume"
+			:class="$style.volumeSeekbar"
+		/>
+		<button class="_button" :class="$style.controlButton" @click="showMenu">
+			<i class="ti ti-settings"></i>
+		</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, shallowRef, inject, computed, watch, onBeforeUnmount } from 'vue';
+import type { MenuItem } from '@/types/menu.js';
+import { DI } from '@/di.js';
+import { hms } from '@/filters/hms.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import hasAudio from '@/utility/media-has-audio.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+
+const videoEl = inject(DI.mkLightboxItemVideoEl, shallowRef<HTMLVideoElement | null>(null));
+
+// Menu
+const menuShowing = ref(false);
+
+function showMenu(ev: PointerEvent) {
+	const menu: MenuItem[] = [
+		// TODO: 再生キューに追加
+		{
+			type: 'switch',
+			text: i18n.ts._mediaControls.loop,
+			icon: 'ti ti-repeat',
+			ref: loop,
+		},
+		{
+			type: 'radio',
+			text: i18n.ts._mediaControls.playbackRate,
+			icon: 'ti ti-clock-play',
+			ref: speed,
+			options: [{
+				label: '0.25x',
+				value: 0.25,
+			}, {
+				label: '0.5x',
+				value: 0.5,
+			}, {
+				label: '0.75x',
+				value: 0.75,
+			}, {
+				label: '1.0x',
+				value: 1,
+			}, {
+				label: '1.25x',
+				value: 1.25,
+			}, {
+				label: '1.5x',
+				value: 1.5,
+			}, {
+				label: '2.0x',
+				value: 2,
+			}],
+		},
+		...(window.document.pictureInPictureEnabled ? [{
+			text: i18n.ts._mediaControls.pip,
+			icon: 'ti ti-picture-in-picture',
+			action: togglePictureInPicture,
+		}] : []),
+	];
+
+	menuShowing.value = true;
+	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
+		align: 'right',
+		onClosing: () => {
+			menuShowing.value = false;
+		},
+	});
+}
+
+// MediaControl: Common State
+const oncePlayed = ref(false);
+const isReady = ref(false);
+const isPlaying = ref(false);
+const isActuallyPlaying = ref(false);
+const elapsedTimeMs = ref(0);
+const durationMs = ref(0);
+const rangePercent = computed({
+	get: () => {
+		return (elapsedTimeMs.value / durationMs.value) || 0;
+	},
+	set: (to) => {
+		if (videoEl.value == null) return;
+		videoEl.value.currentTime = to * durationMs.value / 1000;
+	},
+});
+const volume = ref(.25);
+const speed = ref(1);
+const loop = ref(false); // TODO: ドライブファイルのフラグに置き換える
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (videoEl.value == null || videoEl.value.duration === 0) return 0;
+	return bufferedEnd.value / videoEl.value.duration;
+});
+
+function togglePlayPause() {
+	if (!isReady.value) return;
+
+	if (isPlaying.value) {
+		videoEl.value?.pause();
+		isPlaying.value = false;
+	} else {
+		videoEl.value?.play();
+		isPlaying.value = true;
+		oncePlayed.value = true;
+	}
+}
+
+function togglePictureInPicture() {
+	if (window.document.pictureInPictureElement) {
+		window.document.exitPictureInPicture();
+	} else {
+		videoEl.value?.requestPictureInPicture();
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .25;
+	} else {
+		volume.value = 0;
+	}
+}
+
+let abortController: AbortController | null = null;
+let mediaTickFrameId: number | null = null;
+
+function init() {
+	if (videoEl.value == null) return;
+
+	isReady.value = true;
+	abortController = new AbortController();
+
+	function updateMediaTick() {
+		if (videoEl.value == null) return;
+
+		try {
+			bufferedEnd.value = videoEl.value.buffered.end(0);
+		} catch (err) {
+			bufferedEnd.value = 0;
+		}
+
+		elapsedTimeMs.value = videoEl.value.currentTime * 1000;
+
+		if (videoEl.value.loop !== loop.value) {
+			loop.value = videoEl.value.loop;
+		}
+
+		if (videoEl.value.paused !== !isPlaying.value) {
+			isPlaying.value = !videoEl.value.paused;
+		}
+
+		mediaTickFrameId = window.requestAnimationFrame(updateMediaTick);
+	}
+
+	updateMediaTick();
+
+	videoEl.value.addEventListener('waiting', () => {
+		isActuallyPlaying.value = false;
+	}, { signal: abortController.signal });
+
+	videoEl.value.addEventListener('playing', () => {
+		isActuallyPlaying.value = true;
+	}, { signal: abortController.signal });
+
+	videoEl.value.addEventListener('pause', () => {
+		isActuallyPlaying.value = false;
+		isPlaying.value = false;
+	}, { signal: abortController.signal });
+
+	videoEl.value.addEventListener('ended', () => {
+		oncePlayed.value = false;
+		isActuallyPlaying.value = false;
+		isPlaying.value = false;
+	}, { signal: abortController.signal });
+
+	durationMs.value = videoEl.value.duration * 1000;
+	videoEl.value.addEventListener('durationchange', () => {
+		durationMs.value = videoEl.value!.duration * 1000;
+	}, { signal: abortController.signal });
+
+	videoEl.value.volume = volume.value;
+	hasAudio(videoEl.value).then(had => {
+		if (!had) {
+			videoEl.value!.loop = videoEl.value!.muted = true;
+			videoEl.value!.play();
+		}
+	});
+}
+
+watch(volume, (to) => {
+	if (videoEl.value == null) return;
+	videoEl.value.volume = to;
+});
+
+watch(speed, (to) => {
+	if (videoEl.value == null) return;
+	videoEl.value.playbackRate = to;
+});
+
+watch(loop, (to) => {
+	if (videoEl.value == null) return;
+	videoEl.value.loop = to;
+});
+
+watch(videoEl, () => {
+	if (abortController != null) {
+		abortController.abort();
+	}
+	if (mediaTickFrameId != null) {
+		window.cancelAnimationFrame(mediaTickFrameId);
+	}
+	init();
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+	if (mediaTickFrameId != null) {
+		window.cancelAnimationFrame(mediaTickFrameId);
+	}
+});
+
+defineExpose({
+	isPlaying,
+	isActuallyPlaying,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: grid;
+	grid-template-areas:
+		"seekbar seekbar seekbar"
+		"left center right";
+	grid-template-columns: auto 1fr auto;
+	align-items: center;
+	gap: 4px 8px;
+	width: 100%;
+}
+
+.controlsChild {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.controlsLeft {
+	grid-area: left;
+}
+
+.controlsRight {
+	grid-area: right;
+}
+
+.controlsCenter {
+	grid-area: center;
+	justify-content: center;
+}
+
+.controlButton {
+	padding: 6px;
+	border-radius: 4px;
+
+	&:hover {
+		background-color: var(--MI_THEME-accentedBg);
+		color: var(--MI_THEME-accent);
+	}
+
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.controlsTime {
+	font-size: 85%;
+}
+
+.seekbar {
+	grid-area: seekbar;
+}
+</style>

packages/frontend/src/components/MkVisitorDashboard.vue

@@ -24,9 +24,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInfo v-else-if="instance.federation === 'none'" warn>{{ i18n.ts.federationDisabled }}</MkInfo>
 			</div>
 			<div class="_gaps_s" :class="$style.mainActions">
-				<MkButton :class="$style.mainAction" full rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
+				<MkButton :class="$style.mainAction" full rounded gradate data-testid="signup" style="margin-right: 12px;" @click="signup()">{{ i18n.ts.joinThisServer }}</MkButton>
 				<MkButton :class="$style.mainAction" full rounded type="a" target="_blank" rel="noopener" href="https://misskey-hub.net/servers/">{{ i18n.ts.exploreOtherServers }}</MkButton>
-				<MkButton :class="$style.mainAction" full rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
+				<MkButton :class="$style.mainAction" full rounded data-testid="signin" @click="signin()">{{ i18n.ts.login }}</MkButton>
 			</div>
 		</div>
 	</div>

packages/frontend/src/components/MkWidgets.vue

@@ -7,10 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root" class="_gaps_s">
 	<template v-if="edit">
 		<header :class="$style.editHeader">
-			<MkSelect v-model="widgetAdderSelected" :items="widgetAdderSelectedDef" style="margin-bottom: var(--MI-margin)" data-cy-widget-select>
+			<MkSelect v-model="widgetAdderSelected" :items="widgetAdderSelectedDef" style="margin-bottom: var(--MI-margin)" data-testid="widget-select">
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 			</MkSelect>
-			<MkButton inline primary data-cy-widget-add @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+			<MkButton inline primary data-testid="widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<MkDraggable
@@ -21,9 +21,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@update:modelValue="v => emit('updateWidgets', v)"
 		>
 			<template #default="{ item }">
-				<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
+				<div :class="[$style.widget, $style.customizeContainer]" data-testid="customize-container">
 					<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(item.id)"><i class="ti ti-settings"></i></button>
-					<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(item)"><i class="ti ti-x"></i></button>
+					<button :class="$style.customizeContainerRemove" data-testid="customize-container-remove" class="_button" @click.prevent.stop="removeWidget(item)"><i class="ti ti-x"></i></button>
 					<component :is="`widget-${item.name}`" :ref="(el: any) => widgetRefs[item.id] = el" :class="$style.customizeContainerHandleWidget" :widget="item" @updateProps="updateWidget(item.id, $event)"/>
 				</div>
 			</template>

packages/frontend/src/composables/use-tooltip.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ref, watch, onUnmounted } from 'vue';
+import { ref, watch, onBeforeUnmount } from 'vue';
 import type { Ref } from 'vue';
 
 export function useTooltip(
@@ -100,7 +100,15 @@ export function useTooltip(
 		flush: 'post',
 	});
 
-	onUnmounted(() => {
+	onBeforeUnmount(() => {
 		close();
+		if (elRef.value) {
+			const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
+			el.removeEventListener('mouseover', onMouseover);
+			el.removeEventListener('mouseleave', onMouseleave);
+			el.removeEventListener('touchstart', onTouchstart);
+			el.removeEventListener('touchend', onTouchend);
+			el.removeEventListener('click', close);
+		}
 	});
 }

packages/frontend/src/di.ts

@@ -19,4 +19,5 @@ export const DI = {
 	inModal: Symbol() as InjectionKey<boolean>,
 	inAppSearchMarkerId: Symbol() as InjectionKey<Ref<string | null>>,
 	inChannel: Symbol() as InjectionKey<ComputedRef<string | null> | null>, // 現在開いているチャンネルのID
+	mkLightboxItemVideoEl: Symbol() as InjectionKey<Ref<HTMLVideoElement | null>>,
 };

packages/frontend/src/directives/appear.ts

@@ -7,9 +7,7 @@ import { throttle } from 'throttle-debounce';
 import type { Directive } from 'vue';
 import type { Awaitable } from '@/types/misc.js';
 
-interface HTMLElementWithObserver extends HTMLElement {
-	_observer_?: IntersectionObserver;
-}
+const observers = new WeakMap<HTMLElement, IntersectionObserver>();
 
 export const appearDirective = {
 	mounted(src, binding) {
@@ -23,13 +21,16 @@ export const appearDirective = {
 		});
 
 		const observer = new IntersectionObserver(check);
-
 		observer.observe(src);
 
-		src._observer_ = observer;
+		observers.set(src, observer);
 	},
 
-	unmounted(src) {
-		if (src._observer_) src._observer_.disconnect();
+	beforeUnmount(src) {
+		const observer = observers.get(src);
+		if (observer) {
+			observer.disconnect();
+			observers.delete(src);
+		}
 	},
-} as Directive<HTMLElementWithObserver, (() => Awaitable<void>) | null | undefined>;
+} as Directive<HTMLElement, (() => Awaitable<void>) | null | undefined>;

packages/frontend/src/directives/click-anime.ts

@@ -6,6 +6,8 @@
 import type { Directive } from 'vue';
 import { prefer } from '@/preferences.js';
 
+const abortControllers = new WeakMap<HTMLElement, AbortController>();
+
 export const clickAnimeDirective = {
 	mounted(el) {
 		if (!prefer.s.animation) return;
@@ -14,6 +16,9 @@ export const clickAnimeDirective = {
 
 		if (target == null) return;
 
+		const abortController = new AbortController();
+		abortControllers.set(el, abortController);
+
 		target.classList.add('_anime_bounce_standBy');
 
 		el.addEventListener('mousedown', () => {
@@ -25,16 +30,26 @@ export const clickAnimeDirective = {
 			target.addEventListener('mouseleave', () => {
 				target.classList.remove('_anime_bounce_ready');
 			});
-		});
+		}, { signal: abortController.signal });
 
 		el.addEventListener('click', () => {
 			target.classList.add('_anime_bounce');
 			target.classList.remove('_anime_bounce_ready');
-		});
+		}, { signal: abortController.signal });
 
 		el.addEventListener('animationend', () => {
 			target.classList.remove('_anime_bounce');
 			target.classList.add('_anime_bounce_standBy');
-		});
+		}, { signal: abortController.signal });
+	},
+
+	beforeUnmount(el) {
+		if (!prefer.s.animation) return;
+
+		const abortController = abortControllers.get(el);
+		if (abortController) {
+			abortController.abort();
+			abortControllers.delete(el);
+		}
 	},
 } as Directive<HTMLElement>;

packages/frontend/src/directives/follow-append.ts

@@ -6,14 +6,17 @@
 import type { Directive } from 'vue';
 import { getScrollContainer, getScrollPosition } from '@@/js/scroll.js';
 
-interface HTMLElementWithRO extends HTMLElement {
-	_ro_?: ResizeObserver;
-}
+const states = new WeakMap<HTMLElement, {
+	observer: ResizeObserver;
+	abortController: AbortController;
+}>();
 
 export const followAppendDirective = {
 	mounted(src, binding) {
 		if (binding.value === false) return;
 
+		const abortController = new AbortController();
+
 		let isBottom = true;
 
 		const container = getScrollContainer(src)!;
@@ -22,10 +25,10 @@ export const followAppendDirective = {
 			const viewHeight = container.clientHeight;
 			const height = container.scrollHeight;
 			isBottom = (pos + viewHeight > height - 32);
-		}, { passive: true });
+		}, { passive: true, signal: abortController.signal });
 		container.scrollTop = container.scrollHeight;
 
-		const ro = new ResizeObserver((entries, observer) => {
+		const ro = new ResizeObserver(() => {
 			if (isBottom) {
 				const height = container.scrollHeight;
 				container.scrollTop = height;
@@ -34,11 +37,18 @@ export const followAppendDirective = {
 
 		ro.observe(src);
 
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		src._ro_ = ro;
+		states.set(src, {
+			observer: ro,
+			abortController,
+		});
 	},
 
-	unmounted(src) {
-		if (src._ro_) src._ro_.unobserve(src);
+	beforeUnmount(src) {
+		const state = states.get(src);
+		if (!state) return;
+
+		state.observer.disconnect();
+		state.abortController.abort();
+		states.delete(src);
 	},
-} as Directive<HTMLElementWithRO, boolean>;
+} as Directive<HTMLElement, boolean>;

packages/frontend/src/directives/hotkey.ts

@@ -7,30 +7,28 @@ import type { Directive } from 'vue';
 import { makeHotkey } from '@/utility/hotkey.js';
 import type { Keymap } from '@/utility/hotkey.js';
 
-interface HTMLElementWithHotkey extends HTMLElement {
-	_hotkey_global?: boolean;
-	_keyHandler?: (ev: KeyboardEvent) => void;
-}
+const abortControllers = new WeakMap<HTMLElement, AbortController>();
 
 export const hotkeyDirective = {
 	mounted(el, binding) {
-		el._hotkey_global = binding.modifiers.global === true;
+		const isGlobal = (binding.modifiers.global === true);
+		const keyHandler = makeHotkey(binding.value);
+		const abortController = new AbortController();
 
-		el._keyHandler = makeHotkey(binding.value);
-
-		if (el._hotkey_global) {
-			window.document.addEventListener('keydown', el._keyHandler, { passive: false });
+		if (isGlobal) {
+			window.document.addEventListener('keydown', keyHandler, { passive: false, signal: abortController.signal });
 		} else {
-			el.addEventListener('keydown', el._keyHandler, { passive: false });
+			el.addEventListener('keydown', keyHandler, { passive: false, signal: abortController.signal });
 		}
+
+		abortControllers.set(el, abortController);
 	},
 
-	unmounted(el) {
-		if (el._keyHandler == null) return;
-		if (el._hotkey_global) {
-			window.document.removeEventListener('keydown', el._keyHandler);
-		} else {
-			el.removeEventListener('keydown', el._keyHandler);
+	beforeUnmount(el) {
+		const abortController = abortControllers.get(el);
+		if (abortController) {
+			abortController.abort();
+			abortControllers.delete(el);
 		}
 	},
-} as Directive<HTMLElementWithHotkey, Keymap>;
+} as Directive<HTMLElement, Keymap>;

packages/frontend/src/directives/ripple.ts

@@ -8,12 +8,17 @@ import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { prefer } from '@/preferences.js';
 import { popup } from '@/os.js';
 
+const handlers = new WeakMap<HTMLElement, (ev: MouseEvent) => void>();
+const abortControllers = new WeakMap<HTMLElement, AbortController>();
+
 export const rippleDirective = {
 	mounted(el, binding) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
 		if (!prefer.s.animation) return;
 
+		const abortController = new AbortController();
+
 		el.addEventListener('click', () => {
 			const rect = el.getBoundingClientRect();
 
@@ -23,6 +28,16 @@ export const rippleDirective = {
 			const { dispose } = popup(MkRippleEffect, { x, y }, {
 				end: () => dispose(),
 			});
-		});
+		}, { passive: true, signal: abortController.signal });
+
+		abortControllers.set(el, abortController);
 	},
-} as Directive<HTMLElement, boolean | undefined>;
+
+	beforeUnmount(el) {
+		const abortController = abortControllers.get(el);
+		if (abortController) {
+			abortController.abort();
+			abortControllers.delete(el);
+		}
+	},
+} as Directive<HTMLElement, boolean | null | undefined>;

packages/frontend/src/directives/tooltip.ts

@@ -17,16 +17,15 @@ const end = isTouchUsing ? 'touchend' : 'mouseleave';
 type TooltipDirectiveState = {
 	text: string | null | undefined;
 	_close: null | (() => void);
-	showTimer: number | null;
-	hideTimer: number | null;
-	checkTimer: number | null;
 	show: () => void;
 	close: () => void;
+
+	abortController: AbortController;
+	showTimer: number | null;
+	hideTimer: number | null;
 };
 
-interface TooltipDirectiveElement extends HTMLElement {
-	_tooltipDirective_?: TooltipDirectiveState;
-}
+const states = new WeakMap<HTMLElement, TooltipDirectiveState>();
 
 type TooltipDirectiveModifiers = 'left' | 'right' | 'top' | 'bottom' | 'mfm' | 'noDelay';
 type TooltipDirectiveArg = 'dialog';
@@ -35,44 +34,44 @@ export const tooltipDirective = {
 	mounted(el, binding) {
 		const delay = binding.modifiers.noDelay ? 0 : 100;
 
-		const self = el._tooltipDirective_ = {} as TooltipDirectiveState;
+		const state = {
+			text: binding.value,
+			_close: null,
+			abortController: new AbortController(),
+			showTimer: null,
+			hideTimer: null,
+		} as TooltipDirectiveState;
 
-		self.text = binding.value;
-		self._close = null;
-		self.showTimer = null;
-		self.hideTimer = null;
-		self.checkTimer = null;
-
-		self.close = () => {
-			if (self._close) {
-				if (self.checkTimer) window.clearInterval(self.checkTimer);
-				self._close();
-				self._close = null;
+		state.close = () => {
+			if (state._close) {
+				state._close();
+				state._close = null;
 			}
 		};
 
 		if (binding.arg === 'dialog') {
 			el.addEventListener('click', (ev) => {
-				if (binding.value == null) return;
+				const text = state.text ?? undefined;
+				if (text == null) return;
 				ev.preventDefault();
 				ev.stopPropagation();
 				alert({
 					type: 'info',
-					text: binding.value,
+					text,
 				});
 				return false;
-			});
+			}, { signal: state.abortController.signal });
 		}
 
-		self.show = () => {
+		state.show = () => {
 			if (!window.document.body.contains(el)) return;
-			if (self._close) return;
-			if (self.text == null) return;
+			if (state._close) return;
+			if (state.text == null) return;
 
 			const showing = ref(true);
 			const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
 				showing,
-				text: self.text,
+				text: state.text,
 				asMfm: binding.modifiers.mfm,
 				direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
 				anchorElement: el,
@@ -80,53 +79,59 @@ export const tooltipDirective = {
 				closed: () => dispose(),
 			});
 
-			self._close = () => {
+			state._close = () => {
 				showing.value = false;
 			};
 		};
 
-		el.addEventListener('selectstart', ev => {
+		el.addEventListener('selectstart', (ev) => {
 			ev.preventDefault();
-		});
+		}, { signal: state.abortController.signal });
 
-		el.addEventListener(start, (ev) => {
-			if (self.showTimer) window.clearTimeout(self.showTimer);
-			if (self.hideTimer) window.clearTimeout(self.hideTimer);
+		el.addEventListener(start, () => {
+			if (state.showTimer) window.clearTimeout(state.showTimer);
+			if (state.hideTimer) window.clearTimeout(state.hideTimer);
 			if (delay === 0) {
-				self.show();
+				state.show();
 			} else {
-				self.showTimer = window.setTimeout(self.show, delay);
+				state.showTimer = window.setTimeout(state.show, delay);
 			}
-		}, { passive: true });
+		}, { passive: true, signal: state.abortController.signal });
 
 		el.addEventListener(end, () => {
-			if (self.showTimer) window.clearTimeout(self.showTimer);
-			if (self.hideTimer) window.clearTimeout(self.hideTimer);
+			if (state.showTimer) window.clearTimeout(state.showTimer);
+			if (state.hideTimer) window.clearTimeout(state.hideTimer);
 			if (delay === 0) {
-				self.close();
+				state.close();
 			} else {
-				self.hideTimer = window.setTimeout(self.close, delay);
+				state.hideTimer = window.setTimeout(state.close, delay);
 			}
-		}, { passive: true });
+		}, { passive: true, signal: state.abortController.signal });
 
 		el.addEventListener('click', () => {
-			if (self.showTimer) window.clearTimeout(self.showTimer);
-			self.close();
-		});
+			if (state.showTimer) window.clearTimeout(state.showTimer);
+			state.close();
+		}, { passive: true, signal: state.abortController.signal });
+
+		states.set(el, state);
 	},
 
 	updated(el, binding) {
-		const self = el._tooltipDirective_;
-		if (self == null) return;
-		self.text = binding.value as string;
+		const state = states.get(el);
+		if (!state) return;
+		state.text = binding.value;
 	},
 
-	unmounted(el) {
-		const self = el._tooltipDirective_;
-		if (self == null) return;
-		if (self.showTimer) window.clearTimeout(self.showTimer);
-		if (self.hideTimer) window.clearTimeout(self.hideTimer);
-		if (self.checkTimer) window.clearTimeout(self.checkTimer);
-		self.close();
+	beforeUnmount(el) {
+		const state = states.get(el);
+		if (!state) return;
+
+		if (state.showTimer) window.clearTimeout(state.showTimer);
+		if (state.hideTimer) window.clearTimeout(state.hideTimer);
+
+		state.close();
+		state.abortController.abort();
+
+		states.delete(el);
 	},
-} as Directive<TooltipDirectiveElement, string | null | undefined, TooltipDirectiveModifiers, TooltipDirectiveArg>;
+} as Directive<HTMLElement, string | null | undefined, TooltipDirectiveModifiers, TooltipDirectiveArg>;

packages/frontend/src/directives/user-preview.ts

@@ -106,29 +106,24 @@ export class UserPreview {
 	}
 }
 
-interface UserPreviewDirectiveElement extends HTMLElement {
-	_userPreviewDirective_?: {
-		preview: UserPreview;
-	};
-}
+const states = new WeakMap<HTMLElement, UserPreview>();
 
 export const userPreviewDirective = {
 	mounted(el, binding) {
 		if (binding.value == null) return;
 		if (isTouchUsing) return;
 
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		// ただメモリ的には↓の方が省メモリかもしれないので検討中
-		el._userPreviewDirective_ = {
-			preview: new UserPreview(el, binding.value),
-		};
+		// メモリ的にはWeakMapを使わずに要素にプロパティを生やしたほうが省メモリかもしれないので検討中
+		const preview = new UserPreview(el, binding.value);
+		states.set(el, preview);
 	},
 
 	unmounted(el, binding) {
 		if (binding.value == null) return;
-
-		const self = el._userPreviewDirective_;
-		if (self == null) return;
-		self.preview.detach();
+		const preview = states.get(el);
+		if (preview) {
+			preview.detach();
+			states.delete(el);
+		}
 	},
-} as Directive<UserPreviewDirectiveElement, string | Misskey.entities.UserDetailed | null | undefined>;
+} as Directive<HTMLElement, string | Misskey.entities.UserDetailed | null | undefined>;

packages/frontend/src/pages/settings/account-data.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/account-data" :label="i18n.ts._settings.accountData" :keywords="['import', 'export', 'data', 'archive']" icon="ti ti-package">
 	<div class="_gaps_m">
-		<MkFeatureBanner icon="/client-assets/package_3d.png" color="#ff9100">
+		<MkFeatureBanner icon="/fluent-emoji/1f4e6.png" color="#ff9100">
 			<SearchText>{{ i18n.ts._settings.accountDataBanner }}</SearchText>
 		</MkFeatureBanner>
 

packages/frontend/src/pages/settings/connect.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/connect" :label="i18n.ts._settings.serviceConnection" :keywords="['app', 'service', 'connect', 'webhook', 'api', 'token']" icon="ti ti-link">
 	<div class="_gaps_m">
-		<MkFeatureBanner icon="/client-assets/link_3d.png" color="#ff0088">
+		<MkFeatureBanner icon="/fluent-emoji/1f517.png" color="#ff0088">
 			<SearchText>{{ i18n.ts._settings.serviceConnectionBanner }}</SearchText>
 		</MkFeatureBanner>
 

packages/frontend/src/pages/settings/drive.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/drive" :label="i18n.ts.drive" :keywords="['drive']" icon="ti ti-cloud">
 	<div class="_gaps_m">
-		<MkFeatureBanner icon="/client-assets/cloud_3d.png" color="#0059ff">
+		<MkFeatureBanner icon="/fluent-emoji/2601.png" color="#0059ff">
 			<SearchText>{{ i18n.ts._settings.driveBanner }}</SearchText>
 		</MkFeatureBanner>