Merge remote-tracking branch 'misskey-original/develop' into develop

# Conflicts:
#	packages/backend/src/core/QueryService.ts
#	packages/backend/src/server/api/endpoints/drive/files/attached-notes.ts
#	packages/backend/src/server/api/endpoints/hashtags/users.ts
#	packages/backend/src/server/api/endpoints/notes/create.ts
#	packages/frontend/src/pages/emojis.emoji.vue

.github/workflows/changelog-check.yml

@@ -0,0 +1,43 @@
+name: Check the description in CHANGELOG.md
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+
+jobs:
+  check-changelog:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout head
+        uses: actions/checkout@v4.1.1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.0.1
+        with:
+          node-version-file: '.node-version'
+
+      - name: Checkout base
+        run: |
+          mkdir _base
+          cp -r .git _base/.git
+          cd _base
+          git fetch --depth 1 origin ${{ github.base_ref }}
+          git checkout origin/${{ github.base_ref }} CHANGELOG.md
+
+      - name: Copy to Checker directory for CHANGELOG-base.md
+        run: cp _base/CHANGELOG.md scripts/changelog-checker/CHANGELOG-base.md
+      - name: Copy to Checker directory for CHANGELOG-head.md
+        run: cp CHANGELOG.md scripts/changelog-checker/CHANGELOG-head.md
+      - name: diff
+        continue-on-error: true
+        run: diff -u CHANGELOG-base.md CHANGELOG-head.md
+        working-directory: scripts/changelog-checker
+
+      - name: Setup Checker
+        run: npm install
+        working-directory: scripts/changelog-checker
+      - name: Run Checker
+        run: npm run run
+        working-directory: scripts/changelog-checker

.github/workflows/check-misskey-js-autogen.yml

@@ -0,0 +1,127 @@
+name: Check Misskey JS autogen
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+    paths:
+      - packages/backend/**
+
+jobs:
+  check-misskey-js-autogen:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+
+    env:
+      api_json_names: "api-base.json api-head.json"
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: setup node
+        id: setup-node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: pnpm
+
+      - name: install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: wait get-api-diff
+        uses: lewagon/wait-on-check-action@v1.3.3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          check-regexp: get-from-misskey .+
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 30
+
+      - name: Download artifact
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+
+            const workflows = await github.rest.actions.listWorkflowRunsForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              head_sha: `${{ github.event.pull_request.head.sha }}`
+            }).then(x => x.data.workflow_runs);
+
+            console.log(workflows.map(x => ({name: x.name, title: x.display_title})));
+
+            const run_id = workflows.find(x => x.name.includes("Get api.json from Misskey")).id;
+
+            let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               run_id: run_id,
+            });
+
+            let matchArtifacts = allArtifacts.data.artifacts.filter((artifact) => {
+              return artifact.name.startsWith("api-artifact-") || artifact.name == "api-artifact"
+            });
+
+            await Promise.all(matchArtifacts.map(async (artifact) => {
+              let download = await github.rest.actions.downloadArtifact({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                artifact_id: artifact.id,
+                archive_format: 'zip',
+              });
+              await fs.promises.writeFile(`${process.env.GITHUB_WORKSPACE}/${artifact.name}.zip`, Buffer.from(download.data));
+            }));
+
+      - name: unzip artifacts
+        run: |-
+          find . -mindepth 1 -maxdepth 1 -type f -name '*.zip' -exec unzip {} -d . ';'
+          ls -la
+
+      - name: build autogen
+        run: |-
+          for name in $(echo $api_json_names)
+          do
+            checksum=$(mktemp)
+            mv $name packages/misskey-js/generator/api.json
+
+            cd packages/misskey-js/generator
+            pnpm run generate
+            find built -type f -exec sh -c 'echo $(sed -E "s/^\s+\*\s+generatedAt:.+$//" {} | sha256sum | cut -d" " -f 1) {}' \; > $checksum
+            cd ../../..
+            cp $checksum ${name}_checksum
+          done
+
+      - name: check update for type definitions
+        run: diff $(echo -n ${api_json_names} | awk -v RS=" " '{ printf "%s_checksum ", $0 }')
+
+      - name: send message
+        if: failure()
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: check-misskey-js-autogen
+          message: |-
+            Thank you for sending us a great Pull Request! 👍
+            Please regenerate misskey-js type definitions! 🙏
+
+            example:
+            ```sh
+            pnpm run build-misskey-js-with-types
+            ```
+
+      - name: send message
+        if: success()
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: check-misskey-js-autogen
+          mode: delete
+          message: "Thank you!"

.github/workflows/validate-api-json.yml

@@ -33,8 +33,8 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
-    - name: Install swagger-cli
-      run: npm i -g swagger-cli
+    - name: Install Redocly CLI
+      run: npm i -g @redocly/cli
     - run: corepack enable
     - run: pnpm i --frozen-lockfile
     - name: Check pnpm-lock.yaml
@@ -44,4 +44,4 @@ jobs:
     - name: Build and generate
       run: pnpm build && pnpm --filter backend generate-api-json
     - name: Validation
-      run: swagger-cli validate ./packages/backend/built/api.json
+      run: npx @redocly/cli lint --extends=minimal ./packages/backend/built/api.json

CHANGELOG.md

@@ -20,12 +20,16 @@
 
 ### Client
 - Feat: 新しいゲームを追加
+- Feat: 音声・映像プレイヤーを追加
+- Feat: 絵文字の詳細ダイアログを追加
+- Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるように
 - Enhance: 管理者の場合はAPI tokenの発行画面で管理機能に関する権限を付与できるように
 - Enhance: AiScriptを0.17.0に更新　[CHANGELOG](https://github.com/aiscript-dev/aiscript/blob/bb89d132b633a622d3cb0eff0d0cc7e476c0cfdd/CHANGELOG.md)
   - 配列の範囲外・非整数のインデックスへの代入が完全禁止になるので注意
 - Enhance: 絵文字ピッカー・オートコンプリートで、完全一致した絵文字を優先的に表示するように
+- Enhance: Playの説明欄にMFMを使えるように
 - Fix: ネイティブモードの絵文字がモノクロにならないように
 - Fix: v2023.12.0で追加された「モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能」が管理画面上で正しく表示されていない問題を修正
 - Fix: AiScriptの`readline`関数が不正な値を返すことがある問題のv2023.12.0時点での修正がPlay以外に適用されていないのを修正
@@ -35,7 +39,12 @@
 - Enhance: 連合先のレートリミットに引っかかった際にリトライするようになりました
 - Enhance: ActivityPub Deliver queueでBodyを事前処理するように (#12916)
 - Enhance: クリップをエクスポートできるように
+- Enhance: `/files`のファイルに対してHTTP Rangeリクエストを行えるように
+- Enhance: `api.json`のOpenAPI Specificationを3.1.0に更新
 - Fix: `drive/files/update`でファイル名のバリデーションが機能していない問題を修正
+- Fix: `notes/create`で、`text`が空白文字のみで構成されているか`null`であって、かつ`text`だけであるリクエストに対するレスポンスが400になるように変更
+- Fix: `notes/create`で、`text`が空白文字のみで構成されていてかつリノート、ファイルまたは投票を含んでいるリクエストに対するレスポンスの`text`が`""`から`null`になるように変更
+- Fix: ipv4とipv6の両方が利用可能な環境でallowedPrivateNetworksが設定されていた場合プライベートipの検証ができていなかった問題を修正
 
 ## 2023.12.2
 

locales/index.d.ts

@@ -1104,6 +1104,8 @@ export interface Locale {
     "noteIdOrUrl": string;
     "video": string;
     "videos": string;
+    "audio": string;
+    "audioFiles": string;
     "dataSaver": string;
     "cellularWithDataSaver": string;
     "UltimateDataSaver": string;

locales/ja-JP.yml

@@ -1101,6 +1101,8 @@ limitWidthOfReaction: "リアクションの最大横幅を制限し、縮小し
 noteIdOrUrl: "ノートIDまたはURL"
 video: "動画"
 videos: "動画"
+audio: "音声"
+audioFiles: "音声"
 dataSaver: "データセーバー"
 cellularWithDataSaver: "モバイルデータ通信でデータセーバーをオンにする"
 UltimateDataSaver: "究極のデータセーバー"

packages/backend/migration/1705222772858-optimize-note-index-for-array-column.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class OptimizeNoteIndexForArrayColumns1705222772858 {
+    name = 'OptimizeNoteIndexForArrayColumns1705222772858'
+
+    async up(queryRunner) {
+        await queryRunner.query(`DROP INDEX "public"."IDX_796a8c03959361f97dc2be1d5c"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_54ebcb6d27222913b908d56fd8"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_88937d94d7443d9a99a76fa5c0"`);
+        await queryRunner.query(`DROP INDEX "public"."IDX_51c063b6a133a9cb87145450f5"`);
+        await queryRunner.query(`CREATE INDEX "IDX_NOTE_FILE_IDS" ON "note" using gin ("fileIds")`)
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`DROP INDEX "IDX_NOTE_FILE_IDS"`)
+        await queryRunner.query(`CREATE INDEX "IDX_51c063b6a133a9cb87145450f5" ON "note" ("fileIds") `);
+        await queryRunner.query(`CREATE INDEX "IDX_88937d94d7443d9a99a76fa5c0" ON "note" ("tags") `);
+        await queryRunner.query(`CREATE INDEX "IDX_54ebcb6d27222913b908d56fd8" ON "note" ("mentions") `);
+        await queryRunner.query(`CREATE INDEX "IDX_796a8c03959361f97dc2be1d5c" ON "note" ("visibleUserIds") `);
+    }
+}

packages/backend/src/core/DownloadService.ts

@@ -145,7 +145,8 @@ export class DownloadService {
 		const parsedIp = ipaddr.parse(ip);
 
 		for (const net of this.config.allowedPrivateNetworks ?? []) {
-			if (parsedIp.match(ipaddr.parseCIDR(net))) {
+			const cidr = ipaddr.parseCIDR(net);
+			if (cidr[0].kind() === parsedIp.kind() && parsedIp.match(ipaddr.parseCIDR(net))) {
 				return false;
 			}
 		}

packages/backend/src/core/NoteCreateService.ts

@@ -294,6 +294,9 @@ export class NoteCreateService implements OnApplicationShutdown {
 				data.text = data.text.slice(0, DB_MAX_NOTE_TEXT_LENGTH);
 			}
 			data.text = data.text.trim();
+			if (data.text === '') {
+				data.text = null;
+			}
 		} else {
 			data.text = null;
 		}

packages/backend/src/core/QueryService.ts

@@ -212,8 +212,8 @@ export class QueryService {
 				// または 自分自身
 					.orWhere('note.userId = :meId')
 				// または 自分宛て
-					.orWhere(':meId IN (SELECT unnest(note.visibleUserIds))')
-					.orWhere(':meId IN (SELECT unnest(note.mentions))')
+					.orWhere(':meIdAsList <@ note.visibleUserIds')
+					.orWhere(':meIdAsList <@ note.mentions')
 					.orWhere(new Brackets(qb => {
 						qb
 						// または フォロワー宛ての投稿であり、
@@ -228,7 +228,7 @@ export class QueryService {
 					}));
 			}));
 
-			q.setParameters({ meId: me.id });
+			q.setParameters({ meId: me.id, meIdAsList: [me.id] });
 		}
 	}
 

packages/backend/src/models/Note.ts

@@ -11,9 +11,6 @@ import { MiChannel } from './Channel.js';
 import type { MiDriveFile } from './DriveFile.js';
 
 @Entity('note')
-@Index('IDX_NOTE_TAGS', { synchronize: false })
-@Index('IDX_NOTE_MENTIONS', { synchronize: false })
-@Index('IDX_NOTE_VISIBLE_USER_IDS', { synchronize: false })
 export class MiNote {
 	@PrimaryColumn(id())
 	public id: string;
@@ -137,7 +134,7 @@ export class MiNote {
 	})
 	public url: string | null;
 
-	@Index()
+	@Index('IDX_NOTE_FILE_IDS', { synchronize: false })
 	@Column({
 		...id(),
 		array: true, default: '{}',
@@ -149,14 +146,14 @@ export class MiNote {
 	})
 	public attachedFileTypes: string[];
 
-	@Index()
+	@Index('IDX_NOTE_VISIBLE_USER_IDS', { synchronize: false })
 	@Column({
 		...id(),
 		array: true, default: '{}',
 	})
 	public visibleUserIds: MiUser['id'][];
 
-	@Index()
+	@Index('IDX_NOTE_MENTIONS', { synchronize: false })
 	@Column({
 		...id(),
 		array: true, default: '{}',
@@ -178,7 +175,7 @@ export class MiNote {
 	})
 	public emojis: string[];
 
-	@Index()
+	@Index('IDX_NOTE_TAGS', { synchronize: false })
 	@Column('varchar', {
 		length: 128, array: true, default: '{}',
 	})

packages/backend/src/server/FileServerService.ts

@@ -168,11 +168,35 @@ export class FileServerService {
 				}
 
 				if (!image) {
-					image = {
-						data: fs.createReadStream(file.path),
-						ext: file.ext,
-						type: file.mime,
-					};
+					if (request.headers.range && file.file.size > 0) {
+						const range = request.headers.range as string;
+						const parts = range.replace(/bytes=/, '').split('-');
+						const start = parseInt(parts[0], 10);
+						let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+						if (end > file.file.size) {
+							end = file.file.size - 1;
+						}
+						const chunksize = end - start + 1;
+
+						image = {
+							data: fs.createReadStream(file.path, {
+								start,
+								end,
+							}),
+							ext: file.ext,
+							type: file.mime,
+						};
+
+						reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+						reply.header('Accept-Ranges', 'bytes');
+						reply.header('Content-Length', chunksize);
+					} else {
+						image = {
+							data: fs.createReadStream(file.path),
+							ext: file.ext,
+							type: file.mime,
+						};
+					}
 				}
 
 				if ('pipe' in image.data && typeof image.data.pipe === 'function') {
@@ -203,11 +227,54 @@ export class FileServerService {
 				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.mime) ? file.mime : 'application/octet-stream');
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', filename));
+
+				if (request.headers.range && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+					const fileStream = fs.createReadStream(file.path, {
+						start,
+						end,
+					});
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+					reply.code(206);
+					return fileStream;
+				}
+
 				return fs.createReadStream(file.path);
 			} else {
 				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.file.type) ? file.file.type : 'application/octet-stream');
 				reply.header('Cache-Control', 'max-age=31536000, immutable');
 				reply.header('Content-Disposition', contentDisposition('inline', file.filename));
+
+				if (request.headers.range && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					console.log(end);
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+					const fileStream = fs.createReadStream(file.path, {
+						start,
+						end,
+					});
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+					reply.code(206);
+					return fileStream;
+				}
+
 				return fs.createReadStream(file.path);
 			}
 		} catch (e) {
@@ -362,11 +429,35 @@ export class FileServerService {
 			}
 
 			if (!image) {
-				image = {
-					data: fs.createReadStream(file.path),
-					ext: file.ext,
-					type: file.mime,
-				};
+				if (request.headers.range && file.file && file.file.size > 0) {
+					const range = request.headers.range as string;
+					const parts = range.replace(/bytes=/, '').split('-');
+					const start = parseInt(parts[0], 10);
+					let end = parts[1] ? parseInt(parts[1], 10) : file.file.size - 1;
+					if (end > file.file.size) {
+						end = file.file.size - 1;
+					}
+					const chunksize = end - start + 1;
+
+					image = {
+						data: fs.createReadStream(file.path, {
+							start,
+							end,
+						}),
+						ext: file.ext,
+						type: file.mime,
+					};
+
+					reply.header('Content-Range', `bytes ${start}-${end}/${file.file.size}`);
+					reply.header('Accept-Ranges', 'bytes');
+					reply.header('Content-Length', chunksize);
+				} else {
+					image = {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				}
 			}
 
 			if ('cleanup' in file) {

packages/backend/src/server/api/endpoints/drive/files.ts

@@ -36,7 +36,7 @@ export const paramDef = {
 		untilId: { type: 'string', format: 'misskey:id' },
 		folderId: { type: 'string', format: 'misskey:id', nullable: true, default: null },
 		type: { type: 'string', nullable: true, pattern: /^[a-zA-Z\/\-*]+$/.toString().slice(1, -1) },
-		sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size'] },
+		sort: { type: 'string', nullable: true, enum: ['+createdAt', '-createdAt', '+name', '-name', '+size', '-size', null] },
 	},
 	required: [],
 } as const;

packages/backend/src/server/api/endpoints/federation/instances.ts

@@ -60,6 +60,7 @@ export const paramDef = {
 				'-firstRetrievedAt',
 				'+latestRequestReceivedAt',
 				'-latestRequestReceivedAt',
+				null,
 			],
 		},
 	},

packages/backend/src/server/api/endpoints/hashtags/users.ts

@@ -6,6 +6,7 @@
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { UsersRepository } from '@/models/_.js';
+import { safeForSql } from "@/misc/safe-for-sql.js";
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { DI } from '@/di-symbols.js';
@@ -47,8 +48,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		private userEntityService: UserEntityService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
+			if (!safeForSql(normalizeForSearch(ps.tag))) throw new Error('Injection');
 			const query = this.usersRepository.createQueryBuilder('user')
-				.where(':tag IN (user.tags)', { tag: normalizeForSearch(ps.tag) })
+				.where(':tag <@ user.tags', { tag: [normalizeForSearch(ps.tag)] })
 				.andWhere('user.isSuspended = FALSE');
 
 			const recent = new Date(Date.now() - (1000 * 60 * 60 * 24 * 5));

packages/backend/src/server/api/endpoints/i/2fa/register-key.ts

@@ -103,13 +103,13 @@ export const meta = {
 							items: {
 								type: 'string',
 								enum: [
-									"ble",
-									"cable",
-									"hybrid",
-									"internal",
-									"nfc",
-									"smart-card",
-									"usb",
+									'ble',
+									'cable',
+									'hybrid',
+									'internal',
+									'nfc',
+									'smart-card',
+									'usb',
 								],
 							},
 						},
@@ -123,8 +123,8 @@ export const meta = {
 					authenticatorAttachment: {
 						type: 'string',
 						enum: [
-							"cross-platform",
-							"platform",
+							'cross-platform',
+							'platform',
 						],
 					},
 					requireResidentKey: {
@@ -133,9 +133,9 @@ export const meta = {
 					userVerification: {
 						type: 'string',
 						enum: [
-							"discouraged",
-							"preferred",
-							"required",
+							'discouraged',
+							'preferred',
+							'required',
 						],
 					},
 				},
@@ -144,10 +144,11 @@ export const meta = {
 				type: 'string',
 				nullable: true,
 				enum: [
-					"direct",
-					"enterprise",
-					"indirect",
-					"none",
+					'direct',
+					'enterprise',
+					'indirect',
+					'none',
+					null,
 				],
 			},
 			extensions: {

packages/backend/src/server/api/endpoints/notes/create.test.ts

@@ -34,11 +34,10 @@ describe('api:notes/create', () => {
 					.toBe(VALID);
 			});
 
-			// TODO
-			//test('null post', () => {
-			//	expect(v({ text: null }))
-			//		.toBe(INVALID);
-			//});
+			test('null post', () => {
+				expect(v({ text: null }))
+					.toBe(INVALID);
+			});
 
 			test('0 characters post', () => {
 				expect(v({ text: '' }))
@@ -49,6 +48,11 @@ describe('api:notes/create', () => {
 				expect(v({ text: await tooLong }))
 					.toBe(INVALID);
 			});
+
+			test('whitespace-only post', () => {
+				expect(v({ text: ' ' }))
+					.toBe(INVALID);
+			});
 		});
 
 		describe('cw', () => {

packages/backend/src/server/api/endpoints/notes/create.ts

@@ -213,14 +213,36 @@ export const paramDef = {
 		},
 	},
 	// (re)note with text, files and poll are optional
-	anyOf: [
-		{ required: ['text'] },
-		{ required: ['renoteId'] },
-		{ required: ['fileIds'] },
-		{ required: ['mediaIds'] },
-		{ required: ['poll'] },
-		{ required: ['schedule'] },
-	],
+	if: {
+		properties: {
+			renoteId: {
+				type: 'null',
+			},
+			fileIds: {
+				type: 'null',
+			},
+			mediaIds: {
+				type: 'null',
+			},
+			poll: {
+				type: 'null',
+			},
+			schedule:{
+				type: 'null'
+			}
+		},
+	},
+	then: {
+		properties: {
+			text: {
+				type: 'string',
+				minLength: 1,
+				maxLength: MAX_NOTE_TEXT_LENGTH,
+				pattern: '[^\\s]+',
+			},
+		},
+		required: ['text'],
+	},
 } as const;
 
 @Injectable()

packages/backend/src/server/api/endpoints/notes/mentions.ts

@@ -61,9 +61,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
 				.andWhere(new Brackets(qb => {
-					qb
-						.where(`'{"${me.id}"}' <@ note.mentions`)
-						.orWhere(`'{"${me.id}"}' <@ note.visibleUserIds`);
+					qb // このmeIdAsListパラメータはqueryServiceのgenerateVisibilityQueryでセットされる
+						.where(':meIdAsList <@ note.mentions')
+						.orWhere(':meIdAsList <@ note.visibleUserIds');
 				}))
 				// Avoid scanning primary key index
 				.orderBy('CONCAT(note.id)', 'DESC')

packages/backend/src/server/api/endpoints/notes/search-by-tag.ts

@@ -87,14 +87,14 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			try {
 				if (ps.tag) {
 					if (!safeForSql(normalizeForSearch(ps.tag))) throw new Error('Injection');
-					query.andWhere(`'{"${normalizeForSearch(ps.tag)}"}' <@ note.tags`);
+					query.andWhere(':tag <@ note.tags', { tag: [normalizeForSearch(ps.tag)] });
 				} else {
 					query.andWhere(new Brackets(qb => {
 						for (const tags of ps.query!) {
 							qb.orWhere(new Brackets(qb => {
 								for (const tag of tags) {
 									if (!safeForSql(normalizeForSearch(tag))) throw new Error('Injection');
-									qb.andWhere(`'{"${normalizeForSearch(tag)}"}' <@ note.tags`);
+									qb.andWhere(':tag <@ note.tags', { tag: [normalizeForSearch(tag)] });
 								}
 							}));
 						}

packages/backend/src/server/api/openapi/gen-spec.ts

@@ -10,7 +10,7 @@ import { schemas, convertSchemaToOpenApiSchema } from './schemas.js';
 
 export function genOpenapiSpec(config: Config) {
 	const spec = {
-		openapi: '3.0.0',
+		openapi: '3.1.0',
 
 		info: {
 			version: config.version,
@@ -56,7 +56,7 @@ export function genOpenapiSpec(config: Config) {
 			}
 		}
 
-		const resSchema = endpoint.meta.res ? convertSchemaToOpenApiSchema(endpoint.meta.res) : {};
+		const resSchema = endpoint.meta.res ? convertSchemaToOpenApiSchema(endpoint.meta.res, 'res') : {};
 
 		let desc = (endpoint.meta.description ? endpoint.meta.description : 'No description provided.') + '\n\n';
 
@@ -71,7 +71,7 @@ export function genOpenapiSpec(config: Config) {
 		}
 
 		const requestType = endpoint.meta.requireFile ? 'multipart/form-data' : 'application/json';
-		const schema = { ...endpoint.params };
+		const schema = { ...convertSchemaToOpenApiSchema(endpoint.params, 'param') };
 
 		if (endpoint.meta.requireFile) {
 			schema.properties = {
@@ -210,7 +210,9 @@ export function genOpenapiSpec(config: Config) {
 		};
 
 		spec.paths['/' + endpoint.name] = {
-			...(endpoint.meta.allowGet ? { get: info } : {}),
+			...(endpoint.meta.allowGet ? {
+				get: info,
+			} : {}),
 			post: info,
 		};
 	}

packages/backend/src/server/api/openapi/schemas.ts

@@ -6,32 +6,35 @@
 import type { Schema } from '@/misc/json-schema.js';
 import { refs } from '@/misc/json-schema.js';
 
-export function convertSchemaToOpenApiSchema(schema: Schema) {
-	// optional, refはスキーマ定義に含まれないので分離しておく
+export function convertSchemaToOpenApiSchema(schema: Schema, type: 'param' | 'res') {
+	// optional, nullable, refはスキーマ定義に含まれないので分離しておく
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { optional, ref, ...res }: any = schema;
+	const { optional, nullable, ref, ...res }: any = schema;
 
 	if (schema.type === 'object' && schema.properties) {
-		const required = Object.entries(schema.properties).filter(([k, v]) => !v.optional).map(([k]) => k);
-		if (required.length > 0) {
+		if (type === 'res') {
+			const required = Object.entries(schema.properties).filter(([k, v]) => !v.optional).map(([k]) => k);
+			if (required.length > 0) {
 			// 空配列は許可されない
-			res.required = required;
+				res.required = required;
+			}
 		}
 
 		for (const k of Object.keys(schema.properties)) {
-			res.properties[k] = convertSchemaToOpenApiSchema(schema.properties[k]);
+			res.properties[k] = convertSchemaToOpenApiSchema(schema.properties[k], type);
 		}
 	}
 
 	if (schema.type === 'array' && schema.items) {
-		res.items = convertSchemaToOpenApiSchema(schema.items);
+		res.items = convertSchemaToOpenApiSchema(schema.items, type);
 	}
 
-	if (schema.anyOf) res.anyOf = schema.anyOf.map(convertSchemaToOpenApiSchema);
-	if (schema.oneOf) res.oneOf = schema.oneOf.map(convertSchemaToOpenApiSchema);
-	if (schema.allOf) res.allOf = schema.allOf.map(convertSchemaToOpenApiSchema);
+	for (const o of ['anyOf', 'oneOf', 'allOf'] as const) {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		if (o in schema) res[o] = schema[o]!.map(schema => convertSchemaToOpenApiSchema(schema, type));
+	}
 
-	if (schema.ref) {
+	if (type === 'res' && schema.ref) {
 		const $ref = `#/components/schemas/${schema.ref}`;
 		if (schema.nullable || schema.optional) {
 			res.allOf = [{ $ref }];
@@ -40,6 +43,14 @@ export function convertSchemaToOpenApiSchema(schema: Schema) {
 		}
 	}
 
+	if (schema.nullable) {
+		if (Array.isArray(schema.type) && !schema.type.includes('null')) {
+			res.type.push('null');
+		} else if (typeof schema.type === 'string') {
+			res.type = [res.type, 'null'];
+		}
+	}
+
 	return res;
 }
 
@@ -72,6 +83,6 @@ export const schemas = {
 	},
 
 	...Object.fromEntries(
-		Object.entries(refs).map(([key, schema]) => [key, convertSchemaToOpenApiSchema(schema)]),
+		Object.entries(refs).map(([key, schema]) => [key, convertSchemaToOpenApiSchema(schema, 'res')]),
 	),
 };

packages/backend/test/e2e/drive.ts

@@ -0,0 +1,95 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import { MiNote } from '@/models/Note.js';
+import { api, initTestDb, makeStreamCatcher, post, signup, uploadFile } from '../utils.js';
+import type * as misskey from 'misskey-js';
+import type{ Repository } from 'typeorm'
+import type { Packed } from '@/misc/json-schema.js';
+
+
+describe('Drive', () => {
+	let Notes: Repository<MiNote>;
+
+	let alice: misskey.entities.SignupResponse;
+	let bob: misskey.entities.SignupResponse;
+
+	beforeAll(async () => {
+		const connection = await initTestDb(true);
+		Notes = connection.getRepository(MiNote);
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+	}, 1000 * 60 * 2);
+
+	test('ファイルURLからアップロードできる', async () => {
+		// utils.js uploadUrl の処理だがAPIレスポンスも見るためここで同様の処理を書いている
+
+		const marker = Math.random().toString();
+
+		const url = 'https://raw.githubusercontent.com/misskey-dev/misskey/develop/packages/backend/test/resources/Lenna.jpg'
+
+		const catcher = makeStreamCatcher(
+			alice,
+			'main',
+			(msg) => msg.type === 'urlUploadFinished' && msg.body.marker === marker,
+			(msg) => msg.body.file as Packed<'DriveFile'>,
+			10 * 1000);
+
+		const res = await api('drive/files/upload-from-url', {
+			url,
+			marker,
+			force: true,
+		}, alice);
+
+		const file = await catcher;
+
+		assert.strictEqual(res.status, 204);
+		assert.strictEqual(file.name, 'Lenna.jpg');
+		assert.strictEqual(file.type, 'image/jpeg');
+	})
+
+	test('ローカルからアップロードできる', async () => {
+		// APIレスポンスを直接使用するので utils.js uploadFile が通過することで成功とする
+
+		const res = await uploadFile(alice, { path: 'Lenna.jpg', name: 'テスト画像' });
+
+		assert.strictEqual(res.body?.name, 'テスト画像.jpg');
+		assert.strictEqual(res.body?.type, 'image/jpeg');
+	})
+
+	test('添付ノート一覧を取得できる', async () => {
+		const ids = (await Promise.all([uploadFile(alice), uploadFile(alice), uploadFile(alice)])).map(elm => elm.body!.id)
+
+		const note0 = await post(alice, { fileIds: [ids[0]] });
+		const note1 = await post(alice, { fileIds: [ids[0], ids[1]] });
+
+		const attached0 = await api('drive/files/attached-notes', { fileId: ids[0] }, alice);
+		assert.strictEqual(attached0.body.length, 2);
+		assert.strictEqual(attached0.body[0].id, note1.id)
+		assert.strictEqual(attached0.body[1].id, note0.id)
+
+		const attached1 = await api('drive/files/attached-notes', { fileId: ids[1] }, alice);
+		assert.strictEqual(attached1.body.length, 1);
+		assert.strictEqual(attached1.body[0].id, note1.id)
+
+		const attached2 = await api('drive/files/attached-notes', { fileId: ids[2] }, alice);
+		assert.strictEqual(attached2.body.length, 0)
+	})
+
+	test('添付ノート一覧は他の人から見えない', async () => {
+		const file = await uploadFile(alice);
+
+		await post(alice, { fileIds: [file.body!.id] });
+
+		const res = await api('drive/files/attached-notes', { fileId: file.body!.id }, bob);
+		assert.strictEqual(res.status, 400);
+		assert.strictEqual('error' in res.body, true);
+
+	})
+});
+

packages/backend/test/e2e/note.ts

@@ -136,6 +136,19 @@ describe('Note', () => {
 		assert.strictEqual(res.body.createdNote.renote.text, bobPost.text);
 	});
 
+	test('引用renoteで空白文字のみで構成されたtextにするとレスポンスがtext: nullになる', async () => {
+		const bobPost = await post(bob, {
+			text: 'test',
+		});
+		const res = await api('/notes/create', {
+			text: ' ',
+			renoteId: bobPost.id,
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(res.body.createdNote.text, null);
+	});
+
 	test('visibility: followersでrenoteできる', async () => {
 		const createRes = await api('/notes/create', {
 			text: 'test',

packages/backend/test/utils.ts

@@ -16,6 +16,7 @@ import { DEFAULT_POLICIES } from '@/core/RoleService.js';
 import { entities } from '../src/postgres.js';
 import { loadConfig } from '../src/config.js';
 import type * as misskey from 'misskey-js';
+import { Packed } from '@/misc/json-schema.js';
 
 export { server as startServer, jobQueue as startJobQueue } from '@/boot/common.js';
 
@@ -114,6 +115,20 @@ export function randomString(chars = 'abcdefghijklmnopqrstuvwxyz0123456789', len
 	return randomString;
 }
 
+/**
+ * @brief プロミスにタイムアウト追加
+ * @param p 待ち対象プロミス
+ * @param timeout 待機ミリ秒
+ */
+function timeoutPromise<T>(p: Promise<T>, timeout: number): Promise<T> {
+	return Promise.race([
+		p,
+		new Promise((reject) =>{
+			setTimeout(() => { reject(new Error('timed out')); }, timeout)
+		}) as never
+	]);
+}
+
 export const signup = async (params?: Partial<misskey.Endpoints['signup']['req']>): Promise<NonNullable<misskey.Endpoints['signup']['res']>> => {
 	const q = Object.assign({
 		username: randomString(),
@@ -320,17 +335,16 @@ export const uploadFile = async (user?: UserToken, { path, name, blob }: UploadO
 	};
 };
 
-export const uploadUrl = async (user: UserToken, url: string) => {
-	let resolve: unknown;
-	const file = new Promise(ok => resolve = ok);
+export const uploadUrl = async (user: UserToken, url: string): Promise<Packed<'DriveFile'>> => {
 	const marker = Math.random().toString();
 
-	const ws = await connectStream(user, 'main', (msg) => {
-		if (msg.type === 'urlUploadFinished' && msg.body.marker === marker) {
-			ws.close();
-			resolve(msg.body.file);
-		}
-	});
+	const catcher = makeStreamCatcher(
+		user,
+		'main',
+		(msg) => msg.type === 'urlUploadFinished' && msg.body.marker === marker,
+		(msg) => msg.body.file as Packed<'DriveFile'>,
+		60 * 1000
+	);
 
 	await api('drive/files/upload-from-url', {
 		url,
@@ -338,7 +352,7 @@ export const uploadUrl = async (user: UserToken, url: string) => {
 		force: true,
 	}, user);
 
-	return file;
+	return catcher;
 };
 
 export function connectStream(user: UserToken, channel: string, listener: (message: Record<string, any>) => any, params?: any): Promise<WebSocket> {
@@ -410,6 +424,35 @@ export const waitFire = async (user: UserToken, channel: string, trgr: () => any
 	});
 };
 
+/**
+ * @brief WebSocketストリームから特定条件の通知を拾うプロミスを生成
+ * @param user ユーザー認証情報
+ * @param channel チャンネル
+ * @param cond 条件
+ * @param extractor 取り出し処理
+ * @param timeout ミリ秒タイムアウト
+ * @returns 時間内に正常に処理できた場合に通知からextractorを通した値を得る
+ */
+export function makeStreamCatcher<T>(
+		user: UserToken,
+		channel: string,
+		cond: (message: Record<string, any>) => boolean,
+		extractor: (message: Record<string, any>) => T,
+		timeout = 60 * 1000): Promise<T> {
+	let ws: WebSocket
+	const p = new Promise<T>(async (resolve) => {
+		ws = await connectStream(user, channel, (msg) => {
+			if (cond(msg)) {
+				resolve(extractor(msg))
+			}
+		});
+	}).finally(() => {
+		ws?.close();
+	});
+
+	return timeoutPromise(p, timeout);
+}
+
 export type SimpleGetResponse = {
 	status: number,
 	body: any | JSDOM | null,

packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue

@@ -0,0 +1,102 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+  <MkModalWindow ref="dialogEl" @close="cancel()" @closed="$emit('closed')">
+    <template #header>:{{ emoji.name }}:</template>
+    <template #default>
+      <MkSpacer>
+        <div style="display: flex; flex-direction: column; gap: 1em;">
+          <div :class="$style.emojiImgWrapper">
+            <MkCustomEmoji :name="emoji.name" :normal="true" style="height: 100%;"></MkCustomEmoji>
+          </div>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.name }}</template>
+            <template #value>{{ emoji.name }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.tags }}</template>
+            <template #value>
+              <div v-if="emoji.aliases.length === 0">{{ i18n.ts.none }}</div>
+              <div v-else :class="$style.aliases">
+                <span v-for="alias in emoji.aliases" :key="alias" :class="$style.alias">
+                  {{ alias }}
+                </span>
+              </div>
+            </template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.category }}</template>
+            <template #value>{{ emoji.category ?? i18n.ts.none }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.sensitive }}</template>
+            <template #value>{{ emoji.isSensitive ? i18n.ts.yes : i18n.ts.no }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.localOnly }}</template>
+            <template #value>{{ emoji.localOnly ? i18n.ts.yes : i18n.ts.no }}</template>
+          </MkKeyValue>
+          <MkKeyValue>
+            <template #key>{{ i18n.ts.license }}</template>
+            <template #value>{{ emoji.license ?? i18n.ts.none }}</template>
+          </MkKeyValue>
+          <MkKeyValue :copy="emoji.url">
+            <template #key>{{ i18n.ts.emojiUrl }}</template>
+            <template #value>
+              <a :href="emoji.url" target="_blank">{{ emoji.url }}</a>
+            </template>
+          </MkKeyValue>
+        </div>
+      </MkSpacer>
+    </template>
+  </MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import * as Misskey from 'misskey-js';
+import { defineProps, shallowRef } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+const props = defineProps<{
+  emoji: Misskey.entities.EmojiDetailed,
+}>();
+const emit = defineEmits<{
+	(ev: 'ok', cropped: Misskey.entities.DriveFile): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
+const cancel = () => {
+	emit('cancel');
+	dialogEl.value!.close();
+};
+</script>
+
+<style lang="scss" module>
+.emojiImgWrapper {
+  max-width: 100%;
+  height: 40cqh;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--X5) 8px, var(--X5) 14px);
+  border-radius: var(--radius);
+  margin: auto;
+  overflow-y: hidden;
+}
+
+.aliases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.alias {
+  display: inline-block;
+  padding: 3px 10px;
+  background-color: var(--X5);
+  border: solid 1px var(--divider);
+  border-radius: var(--radius);
+}
+</style>

packages/frontend/src/components/MkFlashPreview.vue

@@ -9,7 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<header>
 			<h1 :title="flash.title">{{ flash.title }}</h1>
 		</header>
-		<p v-if="flash.summary" :title="flash.summary">{{ flash.summary.length > 85 ? flash.summary.slice(0, 85) + '…' : flash.summary }}</p>
+		<p v-if="flash.summary" :title="flash.summary">
+			<Mfm class="summaryMfm" :text="flash.summary" :plain="true" :nowrap="true"/>
+		</p>
 		<footer>
 			<img class="icon" :src="flash.user.avatarUrl"/>
 			<p>{{ userName(flash.user) }}</p>
@@ -54,6 +56,12 @@ const props = defineProps<{
 			margin: 0;
 			color: var(--urlPreviewText);
 			font-size: 0.8em;
+			overflow: clip;
+
+			> .summaryMfm {
+				display: block;
+				width: 100%;
+			}
 		}
 
 		> footer {

packages/frontend/src/components/MkMediaAudio.vue

@@ -0,0 +1,363 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	:class="[
+		$style.audioContainer,
+		(audio.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
+	]"
+	@contextmenu.stop
+>
+	<button v-if="hide" :class="$style.hidden" @click="hide = false">
+		<div :class="$style.hiddenTextWrapper">
+			<b v-if="audio.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.audio}${audio.size ? ' ' + bytes(audio.size) : ''})` : '' }}</b>
+			<b v-else style="display: block;"><i class="ti ti-music"></i> {{ defaultStore.state.dataSaver.media && audio.size ? bytes(audio.size) : i18n.ts.audio }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</button>
+	<div v-else :class="$style.audioControls">
+		<audio
+			ref="audioEl"
+			preload="metadata"
+			:class="$style.audio"
+		>
+			<source :src="audio.url">
+		</audio>
+		<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>
+		<div :class="[$style.controlsChild, $style.controlsRight]">
+			<button class="_button" :class="$style.controlButton" @click="showMenu">
+				<i class="ti ti-settings"></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"
+				:class="$style.volumeSeekbar"
+			/>
+		</div>
+		<MkMediaRange
+			v-model="rangePercent"
+			:class="$style.seekbarRoot"
+			:buffer="bufferedDataRatio"
+		/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import bytes from '@/filters/bytes.js';
+import { hms } from '@/filters/hms.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+import { iAmModerator } from '@/account.js';
+
+const props = defineProps<{
+	audio: Misskey.entities.DriveFile;
+}>();
+
+const audioEl = shallowRef<HTMLAudioElement>();
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore'));
+
+// Menu
+const menuShowing = ref(false);
+
+function showMenu(ev: MouseEvent) {
+	let menu: MenuItem[] = [];
+
+	menu = [
+		// TODO: 再生キューに追加
+		{
+			text: i18n.ts.hide,
+			icon: 'ti ti-eye-off',
+			action: () => {
+				hide.value = true;
+			},
+		},
+	];
+
+	if (iAmModerator) {
+		menu.push({
+			type: 'divider',
+		}, {
+			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),
+		});
+	}
+
+	menuShowing.value = true;
+	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
+		align: 'right',
+		onClosing: () => {
+			menuShowing.value = false;
+		},
+	});
+}
+
+function toggleSensitive(file: Misskey.entities.DriveFile) {
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	});
+}
+
+// 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 (!audioEl.value) return;
+		audioEl.value.currentTime = to * durationMs.value / 1000;
+	},
+});
+const volume = ref(.5);
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (!audioEl.value) return 0;
+	return bufferedEnd.value / audioEl.value.duration;
+});
+
+// MediaControl Events
+function togglePlayPause() {
+	if (!isReady.value || !audioEl.value) return;
+
+	if (isPlaying.value) {
+		audioEl.value.pause();
+		isPlaying.value = false;
+	} else {
+		audioEl.value.play();
+		isPlaying.value = true;
+		oncePlayed.value = true;
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .5;
+	} else {
+		volume.value = 0;
+	}
+}
+
+let onceInit = false;
+let stopAudioElWatch: () => void;
+
+function init() {
+	if (onceInit) return;
+	onceInit = true;
+
+	stopAudioElWatch = watch(audioEl, () => {
+		if (audioEl.value) {
+			isReady.value = true;
+
+			function updateMediaTick() {
+				if (audioEl.value) {
+					try {
+						bufferedEnd.value = audioEl.value.buffered.end(0);
+					} catch (err) {
+						bufferedEnd.value = 0;
+					}
+
+					elapsedTimeMs.value = audioEl.value.currentTime * 1000;
+				}
+				window.requestAnimationFrame(updateMediaTick);
+			}
+
+			updateMediaTick();
+
+			audioEl.value.addEventListener('play', () => {
+				isActuallyPlaying.value = true;
+			});
+
+			audioEl.value.addEventListener('pause', () => {
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+
+			audioEl.value.addEventListener('ended', () => {
+				oncePlayed.value = false;
+				isActuallyPlaying.value = false;
+				isPlaying.value = false;
+			});
+			
+			durationMs.value = audioEl.value.duration * 1000;
+			audioEl.value.addEventListener('durationchange', () => {
+				if (audioEl.value) {
+					durationMs.value = audioEl.value.duration * 1000;
+				}
+			});
+
+			audioEl.value.volume = volume.value;
+		}
+	}, {
+		immediate: true,
+	});
+}
+
+watch(volume, (to) => {
+	if (audioEl.value) audioEl.value.volume = to;
+});
+
+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 = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.audio.isSensitive && defaultStore.state.nsfw !== 'ignore');
+	stopAudioElWatch();
+	onceInit = false;
+});
+</script>
+
+<style lang="scss" module>
+.audioContainer {
+	container-type: inline-size;
+	position: relative;
+	border: .5px solid var(--divider);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+
+.sensitive {
+	position: relative;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		border-radius: inherit;
+		box-shadow: inset 0 0 0 4px var(--warn);
+	}
+}
+
+.hidden {
+	width: 100%;
+	background: none;
+	border: none;
+	outline: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: 12px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
+}
+
+.hiddenTextWrapper {
+	text-align: center;
+	font-size: 0.8em;
+	color: #fff;
+}
+
+.audioControls {
+	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;
+	padding: 10px;
+}
+
+.controlsChild {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+
+	.controlButton {
+		padding: 6px;
+		border-radius: calc(var(--radius) / 2);
+		font-size: 1.05rem;
+
+		&:hover {
+			color: var(--accent);
+			background-color: var(--accentedBg);
+		}
+	}
+}
+
+.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;
+}
+
+@container (min-width: 500px) {
+	.audioControls {
+		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;
+		}
+	}
+}
+</style>

packages/frontend/src/components/MkMediaBanner.vue

@@ -5,20 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div v-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
+	<MkMediaAudio v-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :audio="media"/>
+	<div v-else-if="media.isSensitive && hide" :class="$style.sensitive" @click="hide = false">
 		<span style="font-size: 1.6em;"><i class="ti ti-alert-triangle"></i></span>
 		<b>{{ i18n.ts.sensitive }}</b>
 		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" :class="$style.audio">
-		<audio
-			ref="audioEl"
-			:src="media.url"
-			:title="media.name"
-			controls
-			preload="metadata"
-		/>
-	</div>
 	<a
 		v-else :class="$style.download"
 		:href="media.url"
@@ -35,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { shallowRef, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
+import MkMediaAudio from '@/components/MkMediaAudio.vue';
 
 const props = withDefaults(defineProps<{
 	media: Misskey.entities.DriveFile;

packages/frontend/src/components/MkMediaRange.vue

@@ -0,0 +1,150 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!-- Media系専用のinput range -->
+<template>
+<div :class="$style.controlsSeekbar" :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
+	<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>
+
+<script setup lang="ts">
+import { computed, ModelRef } from 'vue';
+
+withDefaults(defineProps<{
+	buffer?: number;
+	sliderBgWhite?: boolean;
+}>(), {
+	buffer: undefined,
+	sliderBgWhite: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'dragEnded', value: number): void;
+}>();
+
+// eslint-disable-next-line no-undef
+const model = defineModel({ required: true }) as ModelRef<string | number>;
+const modelValue = computed({
+	get: () => typeof model.value === 'number' ? model.value : parseFloat(model.value),
+	set: v => { model.value = v; },
+});
+</script>
+
+<style lang="scss" module>
+.controlsSeekbar {
+	position: relative;
+}
+
+.seek {
+	position: relative;
+	-webkit-appearance: none;
+	appearance: none;
+	background: transparent;
+	border: 0;
+	border-radius: 26px;
+	color: var(--accent);
+	display: block;
+	height: 19px;
+	margin: 0;
+	min-width: 0;
+	padding: 0;
+	transition: box-shadow .3s ease;
+	width: 100%;
+
+	&::-webkit-slider-runnable-track {
+		background-color: var(--sliderBg);
+		background-image: linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
+		border: 0;
+		border-radius: 99rem;
+		height: 5px;
+		transition: box-shadow .3s ease;
+		user-select: none;
+	}
+
+	&::-moz-range-track {
+		background: transparent;
+		border: 0;
+		border-radius: 99rem;
+		height: 5px;
+		transition: box-shadow .3s ease;
+		user-select: none;
+		background-color: var(--sliderBg);
+	}
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		background: #fff;
+		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;
+		position: relative;
+		transition: all .2s ease;
+		width: 13px;
+
+		&: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);
+		}
+	}
+
+	&::-moz-range-thumb {
+		background: #fff;
+		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;
+		position: relative;
+		transition: all .2s ease;
+		width: 13px;
+
+		&: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);
+		}
+	}
+
+	&::-moz-range-progress {
+		background: currentColor;
+		border-radius: 99rem;
+		height: 5px;
+	}
+}
+
+.buffer {
+	appearance: none;
+	background: transparent;
+	color: var(--sliderBg);
+	border: 0;
+	border-radius: 99rem;
+	height: 5px;
+	left: 0;
+	margin-top: -2.5px;
+	padding: 0;
+	position: absolute;
+	top: 50%;
+	width: 100%;
+
+	&::-webkit-progress-bar {
+		background: transparent;
+	}
+
+	&::-webkit-progress-value {
+		background: currentColor;
+		border-radius: 100px;
+		min-width: 5px;
+		transition: width .2s ease;
+	}
+
+	&::-moz-progress-bar {
+		background: currentColor;
+		border-radius: 100px;
+		min-width: 5px;
+		transition: width .2s ease;
+	}
+}
+</style>

packages/frontend/src/components/MkMediaVideo.vue

@@ -4,68 +4,345 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="hide" :class="[$style.hidden, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]" @click="hide = false">
-	<!-- 【注意】dataSaverMode が有効になっている際には、hide が false になるまでサムネイルや動画を読み込まないようにすること -->
-	<div :class="$style.sensitive">
-		<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
-		<b v-else style="display: block;"><i class="ti ti-movie"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-</div>
-<div v-else :class="[$style.visible, (video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitiveContainer]">
-	<video
-		ref="videoEl"
-		:class="$style.video"
-		:poster="video.thumbnailUrl"
-		:title="video.comment"
-		:alt="video.comment"
-		preload="none"
-		controls
-		@contextmenu.stop
-	>
-		<source
-			:src="video.url"
+<div
+	ref="playerEl"
+	:class="[
+		$style.videoContainer,
+		controlsShowing && $style.active,
+		(video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
+	]"
+	@mouseover="onMouseOver"
+	@mouseleave="onMouseLeave"
+	@contextmenu.stop
+>
+	<button v-if="hide" :class="$style.hidden" @click="hide = false">
+		<div :class="$style.hiddenTextWrapper">
+			<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
+			<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</button>
+	<div v-else :class="$style.videoRoot" @click.self="togglePlayPause">
+		<video
+			ref="videoEl"
+			:class="$style.video"
+			:poster="video.thumbnailUrl ?? undefined"
+			:title="video.comment ?? undefined"
+			:alt="video.comment"
+			preload="metadata"
+			playsinline
 		>
-	</video>
-	<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
+			<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(--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>
+			<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>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, watch } from 'vue';
+import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
 import bytes from '@/filters/bytes.js';
+import { hms } from '@/filters/hms.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import { isFullscreenNotSupported } from '@/scripts/device-kind.js';
 import hasAudio from '@/scripts/media-has-audio.js';
+import MkMediaRange from '@/components/MkMediaRange.vue';
+import { iAmModerator } from '@/account.js';
 
 const props = defineProps<{
 	video: Misskey.entities.DriveFile;
 }>();
 
+// eslint-disable-next-line vue/no-setup-props-destructure
 const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
 
-const videoEl = shallowRef<HTMLVideoElement>();
+// Menu
+const menuShowing = ref(false);
 
-watch(videoEl, () => {
-	if (videoEl.value) {
-		videoEl.value.volume = 0.3;
-		hasAudio(videoEl.value).then(had => {
-			if (!had) {
-				videoEl.value.loop = videoEl.value.muted = true;
-				videoEl.value.play();
-			}
+function showMenu(ev: MouseEvent) {
+	let menu: MenuItem[] = [];
+
+	menu = [
+		// TODO: 再生キューに追加
+		{
+			text: i18n.ts.hide,
+			icon: 'ti ti-eye-off',
+			action: () => {
+				hide.value = true;
+			},
+		},
+	];
+
+	if (iAmModerator) {
+		menu.push({
+			type: 'divider',
+		}, {
+			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),
 		});
 	}
+
+	menuShowing.value = true;
+	os.popupMenu(menu, ev.currentTarget ?? ev.target, {
+		align: 'right',
+		onClosing: () => {
+			menuShowing.value = false;
+		},
+	});
+}
+
+function toggleSensitive(file: Misskey.entities.DriveFile) {
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	});
+}
+
+// MediaControl: Video State
+const videoEl = shallowRef<HTMLVideoElement>();
+const playerEl = shallowRef<HTMLDivElement>();
+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: string | number;
+
+// 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(.5);
+const bufferedEnd = ref(0);
+const bufferedDataRatio = computed(() => {
+	if (!videoEl.value) return 0;
+	return bufferedEnd.value / videoEl.value.duration;
+});
+
+// MediaControl Events
+function onMouseOver() {
+	if (controlStateTimer) {
+		clearTimeout(controlStateTimer);
+	}
+	isHoverring.value = true;
+}
+
+function onMouseLeave() {
+	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 (isFullscreenNotSupported && videoEl.value) {
+		if (isFullscreen.value) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			//@ts-ignore
+			videoEl.value.webkitExitFullscreen();
+			isFullscreen.value = false;
+		} else {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			//@ts-ignore
+			videoEl.value.webkitEnterFullscreen();
+			isFullscreen.value = true;
+		}
+	} else if (playerEl.value) {
+		if (isFullscreen.value) {
+			document.exitFullscreen();
+			isFullscreen.value = false;
+		} else {
+			playerEl.value.requestFullscreen({ navigationUI: 'hide' });
+			isFullscreen.value = true;
+		}
+	}
+}
+
+function toggleMute() {
+	if (volume.value === 0) {
+		volume.value = .5;
+	} else {
+		volume.value = 0;
+	}
+}
+
+let onceInit = false;
+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;
+				}
+				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(hide, (to) => {
+	if (to && isFullscreen.value) {
+		document.exitFullscreen();
+		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 = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore');
+	stopVideoElWatch();
+	onceInit = false;
 });
 </script>
 
 <style lang="scss" module>
-.visible {
+.videoContainer {
+	container-type: inline-size;
 	position: relative;
+	overflow: clip;
 }
 
-.sensitiveContainer {
+.sensitive {
 	position: relative;
 
 	&::after {
@@ -81,44 +358,197 @@ watch(videoEl, () => {
 	}
 }
 
+.indicators {
+	display: inline-flex;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	pointer-events: none;
+	opacity: .5;
+	gap: 6px;
+}
+
+.indicator {
+	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
+	background-color: black;
+	border-radius: 6px;
+	color: var(--accentLighten);
+	display: inline-block;
+	font-weight: bold;
+	font-size: 0.8em;
+	padding: 2px 5px;
+}
+
 .hide {
 	display: block;
 	position: absolute;
 	border-radius: 6px;
 	background-color: var(--fg);
 	color: var(--accentLighten);
-	font-size: 14px;
+	font-size: 12px;
 	opacity: .5;
-	padding: 3px 6px;
+	padding: 5px 8px;
 	text-align: center;
 	cursor: pointer;
 	top: 12px;
 	right: 12px;
 }
 
-.video {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 3.5em;
-	overflow: hidden;
-	background-position: center;
-	background-size: cover;
+.hidden {
 	width: 100%;
-	height: 100%;
+	background: none;
+	border: none;
+	outline: none;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	padding: 120px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
 }
 
-.hidden {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #111;
+.hiddenTextWrapper {
+	text-align: center;
+	font-size: 0.8em;
 	color: #fff;
 }
 
-.sensitive {
-	display: table-cell;
-	text-align: center;
-	font-size: 12px;
+.videoRoot {
+	background: #000;
+	position: relative;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.video {
+	display: block;
+	height: 100%;
+	width: 100%;
+	pointer-events: none;
+}
+
+.videoOverlayPlayButton {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+
+	opacity: 0;
+	transition: opacity .4s ease-in-out;
+
+	background: var(--accent);
+	color: #fff;
+	padding: 1rem;
+	border-radius: 99rem;
+
+	font-size: 1.1rem;
+}
+
+.videoLoading {
+	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;
+	pointer-events: none;
+
+	padding: 35px 10px 10px 10px;
+	background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75));
+
+	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;
+	color: #fff;
+
+	.controlButton {
+		padding: 6px;
+		border-radius: calc(var(--radius) / 2);
+		transition: background-color .2s ease-in-out;
+		font-size: 1.05rem;
+
+		&:hover {
+			background-color: var(--accent);
+		}
+	}
+}
+
+.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;
+}
+
+@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;
+		}
+	}
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	class="_button"
 	:class="[$style.root, { [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light' ,[$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.small]: defaultStore.state.reactionsDisplaySize === 'small', [$style.large]: defaultStore.state.reactionsDisplaySize === 'large' }]"
 	@click="toggleReaction()"
+	@contextmenu.prevent.stop="menu"
 >
 	<MkReactionIcon :class="defaultStore.state.limitWidthOfReaction ? $style.limitWidth : ''" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substring(1, reaction.length - 1)]"/>
 	<span :class="[$style.count,{ [$style.gamingDark]: gamingType === 'dark',[$style.gamingLight]: gamingType === 'light'}]">{{ count }}</span>
@@ -21,6 +22,7 @@ import {computed, inject, onMounted, ref, shallowRef, watch} from 'vue';
 import * as Misskey from 'misskey-js';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
+import MkCustomEmojiDetailedDialog from './MkCustomEmojiDetailedDialog.vue';
 import * as os from '@/os.js';
 import { misskeyApi, misskeyApiGet } from '@/scripts/misskey-api.js';
 import { useTooltip } from '@/scripts/use-tooltip.js';
@@ -100,6 +102,22 @@ async function toggleReaction() {
 	}
 }
 
+async function menu(ev) {
+	if (!canToggle.value) return;
+	if (!props.reaction.includes(":")) return;
+	os.popupMenu([{
+		text: i18n.ts.info,
+		icon: 'ti ti-info-circle',
+		action: async () => {
+			os.popup(MkCustomEmojiDetailedDialog, {
+				emoji: await misskeyApiGet('emoji', {
+					name: props.reaction.replace(/:/g, '').replace(/@\./, ''),
+				}),
+			});
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
 function anime() {
 	if (document.hidden) return;
 	if (!defaultStore.state.animation) return;

packages/frontend/src/components/global/MkCustomEmoji.vue

@@ -24,9 +24,11 @@ import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy.js'
 import { defaultStore } from '@/store.js';
 import { customEmojisMap } from '@/custom-emojis.js';
 import * as os from '@/os.js';
+import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import * as sound from '@/scripts/sound.js';
 import { i18n } from '@/i18n.js';
+import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
 
 const props = defineProps<{
 	name: string;
@@ -101,7 +103,19 @@ function onClick(ev: MouseEvent) {
 				react(`:${props.name}:`);
 				sound.playMisskeySfx('reaction');
 			},
-		}] : [])], ev.currentTarget ?? ev.target);
+		}] : []), {
+			text: i18n.ts.info,
+			icon: 'ti ti-info-circle',
+			action: async () => {
+				os.popup(MkCustomEmojiDetailedDialog, {
+					emoji: await misskeyApiGet('emoji', {
+						name: customEmojiName.value,
+					}),
+				}, {
+					anchor: ev.target,
+				});
+			},
+		}], ev.currentTarget ?? ev.target);
 	}
 }
 </script>

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -95,7 +95,12 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 		if (t == null || typeof t === 'boolean') return null;
 		return t.match(/^[0-9.]+s$/) ? t : null;
 	};
-
+	
+	const validColor = (c: string | null | undefined): string | null => {
+		if (c == null) return null;
+		return c.match(/^[0-9a-f]{3,6}$/i) ? c : null;
+	};
+	
 	const useAnim = defaultStore.state.advancedMfm && defaultStore.state.animatedMfm;
 
 	/**
@@ -290,17 +295,30 @@ export default function(props: MfmProps, context: SetupContext<MfmEvents>) {
 						break;
 					}
 					case 'fg': {
-						let color = token.props.args.color;
-						if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
+						let color = validColor(token.props.args.color);
+						color = color ?? 'f00';
 						style = `color: #${color}; overflow-wrap: anywhere;`;
 						break;
 					}
 					case 'bg': {
-						let color = token.props.args.color;
-						if (!/^[0-9a-f]{3,6}$/i.test(color)) color = 'f00';
+						let color = validColor(token.props.args.color);
+						color = color ?? 'f00';
 						style = `background-color: #${color}; overflow-wrap: anywhere;`;
 						break;
 					}
+					case 'border': {
+						let color = validColor(token.props.args.color);
+						color = color ? `#${color}` : 'var(--accent)';
+						let b_style = token.props.args.style;
+						if (
+							!['hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
+								.includes(b_style)
+						) b_style = 'solid';
+						const width = parseFloat(token.props.args.width ?? '1');
+						const radius = parseFloat(token.props.args.radius ?? '0');
+						style = `border: ${width}px ${b_style} ${color}; border-radius: ${radius}px`;
+						break;
+					}
 					case 'ruby': {
 						if (token.children.length === 1) {
 							const child = token.children[0];

packages/frontend/src/const.ts

@@ -112,4 +112,4 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
 
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];

packages/frontend/src/filters/hms.ts

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { i18n } from '@/i18n.js';
+
+export function hms(ms: number, options: {
+	textFormat?: 'colon' | 'locale';
+	enableSeconds?: boolean;
+	enableMs?: boolean;
+}) {
+	const _options = {
+		textFormat: 'colon',
+		enableSeconds: true,
+		enableMs: false,
+		...options,
+	};
+
+	const res: {
+		h?: string;
+		m?: string;
+		s?: string;
+		ms?: string;
+	} = {};
+
+	// ミリ秒を秒に変換
+	let seconds = Math.floor(ms / 1000);
+
+	// 小数点以下の値（２位まで）
+	const mili = ms - seconds * 1000;
+
+	// 時間を計算
+	const hours = Math.floor(seconds / 3600);
+	res.h = format(hours);
+	seconds %= 3600;
+
+	// 分を計算
+	const minutes = Math.floor(seconds / 60);
+	res.m = format(minutes);
+	seconds %= 60;
+
+	// 残った秒数を取得
+	seconds = seconds % 60;
+	res.s = format(seconds);
+
+	// ミリ秒を取得
+	res.ms = format(Math.floor(mili / 10));
+
+	// 結果を返す
+	if (_options.textFormat === 'locale') {
+		res.h += i18n.ts._time.hour;
+		res.m += i18n.ts._time.minute;
+		res.s += i18n.ts._time.second;
+	}
+	return [
+		res.h.startsWith('00') ? undefined : res.h,
+		res.m,
+		(_options.enableSeconds ? res.s : undefined),
+	].filter(v => v !== undefined).join(_options.textFormat === 'colon' ? ':' : ' ') + (_options.enableMs ? _options.textFormat === 'colon' ? `.${res.ms}` : ` ${res.ms}` : '');
+}
+
+function format(n: number) {
+	return n.toString().padStart(2, '0');
+}

packages/frontend/src/global/router/definition.ts

@@ -523,6 +523,10 @@ const routes = [{
 	path: '/timeline/antenna/:antennaId',
 	component: page(() => import('@/pages/antenna-timeline.vue')),
 	loginRequired: true,
+}, {
+	path: '/games',
+	component: page(() => import('@/pages/games.vue')),
+	loginRequired: true,
 }, {
 	path: '/clicker',
 	component: page(() => import('@/pages/clicker.vue')),

packages/frontend/src/navbar.ts

@@ -4,6 +4,7 @@
  */
 
 import { computed, reactive } from 'vue';
+import { clearCache } from './scripts/clear-cache.js';
 import { $i } from '@/account.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { openInstanceMenu, openToolsMenu } from '@/ui/_common_/common.js';
@@ -12,7 +13,6 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { ui } from '@/config.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
-import { clearCache } from './scripts/clear-cache.js';
 
 export const navbarItemDef = reactive({
 	notifications: {
@@ -117,6 +117,11 @@ export const navbarItemDef = reactive({
 		show: computed(() => $i != null),
 		to: '/my/achievements',
 	},
+	games: {
+		title: 'Misskey Games',
+		icon: 'ti ti-device-gamepad',
+		to: '/games',
+	},
 	ui: {
 		title: i18n.ts.switchUi,
 		icon: 'ti ti-devices',

packages/frontend/src/pages/drop-and-fusion.vue

@@ -4,16 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="800">
-	<Transition
-		:enterActiveClass="$style.transition_zoom_enterActive"
-		:leaveActiveClass="$style.transition_zoom_leaveActive"
-		:enterFromClass="$style.transition_zoom_enterFrom"
-		:leaveToClass="$style.transition_zoom_leaveTo"
-		:moveClass="$style.transition_zoom_move"
-		mode="out-in"
-	>
-		<div v-if="!gameStarted" :class="$style.root">
+<Transition
+	:enterActiveClass="$style.transition_zoom_enterActive"
+	:leaveActiveClass="$style.transition_zoom_leaveActive"
+	:enterFromClass="$style.transition_zoom_enterFrom"
+	:leaveToClass="$style.transition_zoom_leaveTo"
+	:moveClass="$style.transition_zoom_move"
+	mode="out-in"
+>
+	<MkSpacer v-if="!gameStarted" :contentMax="800">
+		<div :class="$style.root">
 			<div class="_gaps">
 				<div :class="$style.frame" style="text-align: center;">
 					<div :class="$style.frameInner">
@@ -27,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<option value="normal">NORMAL</option>
 								<option value="square">SQUARE</option>
 								<option value="yen">YEN</option>
+								<option value="sweets">SWEETS</option>
 							</MkSelect>
 							<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
 						</div>
@@ -48,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
 									<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
 									<MkUserName :user="r.user" :nowrap="true"/>
-									<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ gameMode === 'yen' ? '円' : 'pt' }}</b>
+									<b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ getScoreUnit(gameMode) }}</b>
 								</div>
 							</div>
 							<div v-else>{{ i18n.ts.loading }}</div>
@@ -78,15 +79,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 		</div>
-		<div v-else>
-			<XGame :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
-		</div>
-	</Transition>
-</MkSpacer>
+	</MkSpacer>
+	<XGame v-else :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
+</Transition>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import XGame from './drop-and-fusion.game.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
@@ -95,7 +94,7 @@ import MkSelect from '@/components/MkSelect.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 
-const gameMode = ref<'normal' | 'square' | 'yen'>('normal');
+const gameMode = ref<'normal' | 'square' | 'yen' | 'sweets'>('normal');
 const gameStarted = ref(false);
 const mute = ref(false);
 const ranking = ref(null);
@@ -104,6 +103,14 @@ watch(gameMode, async () => {
 	ranking.value = await misskeyApiGet('bubble-game/ranking', { gameMode: gameMode.value });
 }, { immediate: true });
 
+function getScoreUnit(gameMode: string) {
+	return gameMode === 'normal' ? 'pt' :
+		gameMode === 'square' ? 'pt' :
+		gameMode === 'yen' ? '円' :
+		gameMode === 'sweets' ? 'kcal' :
+		'' as never;
+}
+
 async function start() {
 	gameStarted.value = true;
 }

packages/frontend/src/pages/emojis.emoji.vue

@@ -22,17 +22,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import * as os from '@/os.js';
+import * as Misskey from 'misskey-js';
 import { misskeyApiGet } from '@/scripts/misskey-api.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
+import MkCustomEmojiDetailedDialog from '@/components/MkCustomEmojiDetailedDialog.vue';
 
 const props = defineProps<{
-  emoji: {
-    name: string;
-    aliases: string[];
-    category: string;
-    url: string;
-  };
+  emoji: Misskey.entities.EmojiSimple;
   request?: boolean;
 }>();
 
@@ -50,12 +47,13 @@ function menu(ev) {
 	}, {
 		text: i18n.ts.info,
 		icon: 'ti ti-info-circle',
-		action: () => {
-			misskeyApiGet('emoji', { name: props.emoji.name }).then(res => {
-				os.alert({
-					type: 'info',
-					text: `License: ${res.license}`,
-				});
+		action: async () => {
+			os.popup(MkCustomEmojiDetailedDialog, {
+				emoji: await misskeyApiGet('emoji', {
+					name: props.emoji.name,
+				})
+			}, {
+				anchor: ev.target,
 			});
 		},
 	}], ev.currentTarget ?? ev.target);

packages/frontend/src/pages/flash/flash-edit.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkInput v-model="title">
 				<template #label>{{ i18n.ts._play.title }}</template>
 			</MkInput>
-			<MkTextarea v-model="summary">
+			<MkTextarea v-model="summary" :mfmAutocomplete="true" :mfmPreview="true">
 				<template #label>{{ i18n.ts._play.summary }}</template>
 			</MkTextarea>
 			<MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ti ti-chevron-down"></i></MkButton>

packages/frontend/src/pages/flash/flash.vue

@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-else :class="$style.ready">
 						<div class="_panel main">
 							<div class="title">{{ flash.title }}</div>
-							<div class="summary">{{ flash.summary }}</div>
+							<div class="summary"><Mfm :text="flash.summary"/></div>
 							<MkButton class="start" gradate rounded large @click="start">Play</MkButton>
 							<div class="info">
 								<span v-tooltip="i18n.ts.numberOfLikes"><i class="ti ti-heart"></i> {{ flash.likedCount }}</span>

packages/frontend/src/pages/games.vue

@@ -0,0 +1,27 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :contentMax="800">
+		<div class="_panel">
+			<MkA to="/bubble-game">
+				<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
+			</MkA>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+
+definePageMetadata({
+	title: 'Misskey Games',
+	icon: 'ti ti-device-gamepad',
+});
+</script>

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

@@ -222,9 +222,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps">
 			<MkFolder>
 				<template #label>{{ i18n.ts.additionalEmojiDictionary }}</template>
-				<div v-for="lang in emojiIndexLangs" class="_buttons">
-					<MkButton @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ lang }}{{ defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
-					<MkButton v-if="defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+				<div class="_buttons">
+					<template v-for="lang in emojiIndexLangs" :key="lang">
+						<MkButton v-if="defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }} ({{ getEmojiIndexLangName(lang) }})</MkButton>
+						<MkButton v-else @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ getEmojiIndexLangName(lang) }}{{ defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
+					</template>
 				</div>
 			</MkFolder>
 			<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
@@ -396,15 +398,29 @@ watch([
 	await reloadAsk();
 });
 
-const emojiIndexLangs = ['en-US'];
+const emojiIndexLangs = ['en-US', 'ja-JP', 'ja-JP_hira'] as const;
 
-function downloadEmojiIndex(lang: string) {
+function getEmojiIndexLangName(targetLang: typeof emojiIndexLangs[number]) {
+	if (langs.find(x => x[0] === targetLang)) {
+		return langs.find(x => x[0] === targetLang)![1];
+	} else {
+		// 絵文字辞書限定の言語定義
+		switch (targetLang) {
+			case 'ja-JP_hira': return 'ひらがな';
+			default: return targetLang;
+		}
+	}
+}
+
+function downloadEmojiIndex(lang: typeof emojiIndexLangs[number]) {
 	async function main() {
 		const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
 
 		function download() {
 			switch (lang) {
 				case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
+				case 'ja-JP': return import('../../unicode-emoji-indexes/ja-JP.json').then(x => x.default);
+				case 'ja-JP_hira': return import('../../unicode-emoji-indexes/ja-JP_hira.json').then(x => x.default);
 				default: throw new Error('unrecognized lang: ' + lang);
 			}
 		}

packages/frontend/src/scripts/device-kind.ts

@@ -11,6 +11,13 @@ const ua = navigator.userAgent.toLowerCase();
 const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
 const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);
 
+const isIPhone = /iphone|ipod/gi.test(ua) && navigator.maxTouchPoints > 1;
+// navigator.platform may be deprecated but this check is still required
+const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+const isIos = /ipad|iphone|ipod/gi.test(ua) && navigator.maxTouchPoints > 1;
+
+export const isFullscreenNotSupported = isIPhone || isIos;
+
 export const deviceKind: 'smartphone' | 'tablet' | 'desktop' = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
 	: isSmartphone ? 'smartphone'
 	: isTablet ? 'tablet'

packages/frontend/src/ui/_common_/common.ts

@@ -27,11 +27,6 @@ function toolsMenuItems(): MenuItem[] {
 		to: '/clicker',
 		text: '●👈',
 		icon: 'ti ti-cookie',
-	}, {
-		type: 'link',
-		to: '/bubble-game',
-		text: i18n.ts.bubbleGame,
-		icon: 'ti ti-apple',
 	}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
 		type: 'link',
 		to: '/custom-emojis-manager',