Merge branch 'develop'

.github/workflows/docker-develop.yml

@@ -31,3 +31,5 @@ jobs:
           push: true
           tags: misskey/misskey:develop
           labels: develop
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/test.yml

@@ -109,8 +109,12 @@ jobs:
     # 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@v4
+      uses: cypress-io/github-action@v5
       with:
         install: false
         start: pnpm start:test

.node-version

@@ -1 +1 @@
-v18.12.1
+v18.13.0

CHANGELOG.md

@@ -9,6 +9,19 @@
 You should also include the user name that made the change.
 -->
 
+## 13.2.4 (2023/01/27)
+### Improvements
+- リモートカスタム絵文字表示時のパフォーマンスを改善
+- Default to `animation: false` when prefers-reduced-motion is set
+- リアクション履歴が公開なら、ログインしていなくても表示できるように
+- tweak blur setting
+- tweak custom emoji cache
+
+### Bugfixes
+- fix aggregation of retention
+- ダッシュボードでオンラインユーザー数が表示されない問題を修正
+- フォロー申請・フォローのボタンが、通知から消えている問題を修正
+
 ## 13.2.3 (2023/01/26)
 ### Improvements
 - カスタム絵文字の更新をリアルタイムで反映するように

Dockerfile

@@ -2,8 +2,12 @@ ARG NODE_VERSION=18.13.0-bullseye
 
 FROM node:${NODE_VERSION} AS builder
 
-RUN apt-get update \
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
-	&& apt-get install -y --no-install-recommends \
+	--mount=type=cache,target=/var/lib/apt,sharing=locked \
+	rm -f /etc/apt/apt.conf.d/docker-clean \
+	; echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' > /etc/apt/apt.conf.d/keep-cache \
+	&& apt-get update \
+	&& apt-get install -yqq --no-install-recommends \
 	build-essential
 
 RUN corepack enable
@@ -16,7 +20,8 @@ COPY ["packages/backend/package.json", "./packages/backend/"]
 COPY ["packages/frontend/package.json", "./packages/frontend/"]
 COPY ["packages/sw/package.json", "./packages/sw/"]
 
-RUN pnpm i --frozen-lockfile
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store,sharing=locked \
+	pnpm i --frozen-lockfile --aggregate-output
 
 COPY . ./
 
@@ -30,11 +35,13 @@ FROM node:${NODE_VERSION}-slim AS runner
 ARG UID="991"
 ARG GID="991"
 
-RUN apt-get update \
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+	--mount=type=cache,target=/var/lib/apt,sharing=locked \
+	rm -f /etc/apt/apt.conf.d/docker-clean \
+	; echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' > /etc/apt/apt.conf.d/keep-cache \
+	&& apt-get update \
 	&& apt-get install -y --no-install-recommends \
 	ffmpeg tini \
-	&& apt-get -y clean \
-	&& rm -rf /var/lib/apt/lists/* \
 	&& corepack enable \
 	&& groupadd -g "${GID}" misskey \
 	&& useradd -l -u "${UID}" -g "${GID}" -m -d /misskey misskey

locales/uk-UA.yml

@@ -688,7 +688,7 @@ pageLikesCount: "Кількість отриманих вподобань сто
 pageLikedCount: "Кількість вподобаних сторінок"
 contact: "Контакт"
 useSystemFont: "Використовувати стандартний шрифт системи"
-clips: "Добірка"
+clips: "Добірки"
 experimentalFeatures: "Експериментальні функції"
 developer: "Розробник"
 makeExplorable: "Зробіть обліковий запис видимим у розділі \"Огляд\""
@@ -1003,9 +1003,19 @@ _achievements:
       title: "Майстер нотаток III"
       description: "1000 днів користування загально"
       flavor: "Дякуємо, що користуєтеся Misskey!"
+    _noteClipped1:
+      title: "Не можна не зберегти"
+      description: "Перша нотатка у добірці"
+    _noteFavorited1:
+      title: "Дивитися на зірки"
     _myNoteFavorited1:
       title: "У пошуках зірок"
+    _profileFilled:
+      title: "Повна готовність"
+      description: "Профіль заповнено"
     _markedAsCat:
+      title: "Я кіт"
+      description: "Позначено як акаунт кота"
       flavor: "Я дам тобі ім'я пізніше"
     _following1:
       title: "Перша підписка"
@@ -1034,6 +1044,7 @@ _achievements:
     _followers300:
       description: "Кількість підписників досягла 300"
     _followers500:
+      title: "Радіовежа"
       description: "Кількість підписників досягла 500"
     _followers1000:
       title: "Інфлюенсер"
@@ -1047,6 +1058,8 @@ _achievements:
       description: "Минуло 3 роки з моменту створення акаунта"
     _loggedInOnBirthday:
       title: "З Днем народження!"
+    _loggedInOnNewYearsDay:
+      description: "Увійшли в перший день року"
     _brainDiver:
       title: "Brain Diver"
       flavor: "Misskey-Misskey La-Tu-Ma"
@@ -1586,6 +1599,7 @@ _notification:
   youReceivedFollowRequest: "Ви отримали запит на підписку"
   yourFollowRequestAccepted: "Запит на підписку прийнято"
   youWereInvitedToGroup: "Запрошення до групи"
+  achievementEarned: "Досягнення відкрито"
   _types:
     all: "Все"
     follow: "Підписки"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.2.3",
+	"version": "13.2.4",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
@@ -57,7 +57,7 @@
 		"@typescript-eslint/eslint-plugin": "5.49.0",
 		"@typescript-eslint/parser": "5.49.0",
 		"cross-env": "7.0.3",
-		"cypress": "12.3.0",
+		"cypress": "12.4.0",
 		"eslint": "^8.32.0",
 		"start-server-and-test": "1.15.3"
 	},

packages/backend/package.json

@@ -32,8 +32,8 @@
 		"@fastify/cors": "8.2.0",
 		"@fastify/http-proxy": "^8.4.0",
 		"@fastify/multipart": "7.4.0",
-		"@fastify/static": "6.6.1",
+		"@fastify/static": "6.7.0",
-		"@fastify/view": "7.4.0",
+		"@fastify/view": "7.4.1",
 		"@nestjs/common": "9.2.1",
 		"@nestjs/core": "9.2.1",
 		"@nestjs/testing": "9.2.1",
@@ -110,7 +110,7 @@
 		"stringz": "2.1.0",
 		"summaly": "2.7.0",
 		"syslog-pro": "git+https://github.com/misskey-dev/SyslogPro#0.2.9-misskey.2",
-		"systeminformation": "5.17.3",
+		"systeminformation": "5.17.4",
 		"tinycolor2": "1.5.2",
 		"tmp": "0.2.1",
 		"tsc-alias": "1.8.2",
@@ -131,7 +131,7 @@
 	"devDependencies": {
 		"@redocly/openapi-core": "1.0.0-beta.120",
 		"@swc/cli": "^0.1.59",
-		"@swc/core": "1.3.27",
+		"@swc/core": "1.3.29",
 		"@swc/jest": "0.2.24",
 		"@types/accepts": "1.3.5",
 		"@types/archiver": "5.3.1",
@@ -143,11 +143,11 @@
 		"@types/escape-regexp": "0.0.1",
 		"@types/fluent-ffmpeg": "2.1.20",
 		"@types/ioredis": "4.28.10",
-		"@types/jest": "29.2.6",
+		"@types/jest": "29.4.0",
 		"@types/js-yaml": "4.0.5",
 		"@types/jsdom": "20.0.1",
 		"@types/jsonld": "1.5.8",
-		"@types/jsrsasign": "10.5.4",
+		"@types/jsrsasign": "10.5.5",
 		"@types/mime-types": "2.1.1",
 		"@types/node": "18.11.18",
 		"@types/node-fetch": "3.0.3",
@@ -181,7 +181,7 @@
 		"eslint": "8.32.0",
 		"eslint-plugin-import": "2.27.5",
 		"execa": "6.1.0",
-		"jest": "29.3.1",
+		"jest": "29.4.1",
-		"jest-mock": "^29.3.1"
+		"jest-mock": "^29.4.1"
 	}
 }

packages/backend/src/core/CustomEmojiService.ts

@@ -6,22 +6,35 @@ import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import type { DriveFile } from '@/models/entities/DriveFile.js';
 import type { Emoji } from '@/models/entities/Emoji.js';
-import type { EmojisRepository } from '@/models/index.js';
+import type { EmojisRepository, Note } from '@/models/index.js';
 import { bindThis } from '@/decorators.js';
+import { Cache } from '@/misc/cache.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import type { Config } from '@/config.js';
+import { ReactionService } from '@/core/ReactionService.js';
+import { query } from '@/misc/prelude/url.js';
 
 @Injectable()
 export class CustomEmojiService {
+	private cache: Cache<Emoji | null>;
+
 	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
 		@Inject(DI.db)
 		private db: DataSource,
 
 		@Inject(DI.emojisRepository)
 		private emojisRepository: EmojisRepository,
 
+		private utilityService: UtilityService,
 		private idService: IdService,
 		private emojiEntityService: EmojiEntityService,
 		private globalEventService: GlobalEventService,
+		private reactionService: ReactionService,
 	) {
+		this.cache = new Cache<Emoji | null>(1000 * 60 * 60 * 12);
 	}
 
 	@bindThis
@@ -44,12 +57,135 @@ export class CustomEmojiService {
 			type: data.driveFile.webpublicType ?? data.driveFile.type,
 		}).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
 
-		await this.db.queryResultCache!.remove(['meta_emojis']);
+		if (data.host == null) {
+			await this.db.queryResultCache!.remove(['meta_emojis']);
 
-		this.globalEventService.publishBroadcastStream('emojiAdded', {
+			this.globalEventService.publishBroadcastStream('emojiAdded', {
-			emoji: await this.emojiEntityService.pack(emoji.id),
+				emoji: await this.emojiEntityService.pack(emoji.id),
-		});
+			});
+		}
 
 		return emoji;
 	}
+
+	@bindThis
+	private normalizeHost(src: string | undefined, noteUserHost: string | null): string | null {
+	// クエリに使うホスト
+		let host = src === '.' ? null	// .はローカルホスト (ここがマッチするのはリアクションのみ)
+			: src === undefined ? noteUserHost	// ノートなどでホスト省略表記の場合はローカルホスト (ここがリアクションにマッチすることはない)
+			: this.utilityService.isSelfHost(src) ? null	// 自ホスト指定
+			: (src || noteUserHost);	// 指定されたホスト || ノートなどの所有者のホスト (こっちがリアクションにマッチすることはない)
+
+		host = this.utilityService.toPunyNullable(host);
+
+		return host;
+	}
+
+	@bindThis
+	private parseEmojiStr(emojiName: string, noteUserHost: string | null) {
+		const match = emojiName.match(/^(\w+)(?:@([\w.-]+))?$/);
+		if (!match) return { name: null, host: null };
+
+		const name = match[1];
+
+		// ホスト正規化
+		const host = this.utilityService.toPunyNullable(this.normalizeHost(match[2], noteUserHost));
+
+		return { name, host };
+	}
+
+	/**
+	 * 添付用(リモート)カスタム絵文字URLを解決する
+	 * @param emojiName ノートやユーザープロフィールに添付された、またはリアクションのカスタム絵文字名 (:は含めない, リアクションでローカルホストの場合は@.を付ける (これはdecodeReactionで可能))
+	 * @param noteUserHost ノートやユーザープロフィールの所有者のホスト
+	 * @returns URL, nullは未マッチを意味する
+	 */
+	@bindThis
+	public async populateEmoji(emojiName: string, noteUserHost: string | null): Promise<string | null> {
+		const { name, host } = this.parseEmojiStr(emojiName, noteUserHost);
+		if (name == null) return null;
+		if (host == null) return null;
+
+		const queryOrNull = async () => (await this.emojisRepository.findOneBy({
+			name,
+			host: host ?? IsNull(),
+		})) ?? null;
+
+		const emoji = await this.cache.fetch(`${name} ${host}`, queryOrNull);
+
+		if (emoji == null) return null;
+
+		const isLocal = emoji.host == null;
+		const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため（publicUrlはstringなので??はだめ）
+		const url = isLocal
+			? emojiUrl
+			: this.config.proxyRemoteFiles
+				? `${this.config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`
+				: emojiUrl;
+
+		return url;
+	}
+
+	/**
+	 * 複数の添付用(リモート)カスタム絵文字URLを解決する (キャシュ付き, 存在しないものは結果から除外される)
+	 */
+	@bindThis
+	public async populateEmojis(emojiNames: string[], noteUserHost: string | null): Promise<Record<string, string>> {
+		const emojis = await Promise.all(emojiNames.map(x => this.populateEmoji(x, noteUserHost)));
+		const res = {} as any;
+		for (let i = 0; i < emojiNames.length; i++) {
+			if (emojis[i] != null) {
+				res[emojiNames[i]] = emojis[i];
+			}
+		}
+		return res;
+	}
+
+	@bindThis
+	public aggregateNoteEmojis(notes: Note[]) {
+		let emojis: { name: string | null; host: string | null; }[] = [];
+		for (const note of notes) {
+			emojis = emojis.concat(note.emojis
+				.map(e => this.parseEmojiStr(e, note.userHost)));
+			if (note.renote) {
+				emojis = emojis.concat(note.renote.emojis
+					.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
+				if (note.renote.user) {
+					emojis = emojis.concat(note.renote.user.emojis
+						.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
+				}
+			}
+			const customReactions = Object.keys(note.reactions).map(x => this.reactionService.decodeReaction(x)).filter(x => x.name != null) as typeof emojis;
+			emojis = emojis.concat(customReactions);
+			if (note.user) {
+				emojis = emojis.concat(note.user.emojis
+					.map(e => this.parseEmojiStr(e, note.userHost)));
+			}
+		}
+		return emojis.filter(x => x.name != null && x.host != null) as { name: string; host: string; }[];
+	}
+
+	/**
+	 * 与えられた絵文字のリストをデータベースから取得し、キャッシュに追加します
+	 */
+	@bindThis
+	public async prefetchEmojis(emojis: { name: string; host: string | null; }[]): Promise<void> {
+		const notCachedEmojis = emojis.filter(emoji => this.cache.get(`${emoji.name} ${emoji.host}`) == null);
+		const emojisQuery: any[] = [];
+		const hosts = new Set(notCachedEmojis.map(e => e.host));
+		for (const host of hosts) {
+			if (host == null) continue;
+			emojisQuery.push({
+				name: In(notCachedEmojis.filter(e => e.host === host).map(e => e.name)),
+				host: host,
+			});
+		}
+		const _emojis = emojisQuery.length > 0 ? await this.emojisRepository.find({
+			where: emojisQuery,
+			select: ['name', 'host', 'originalUrl', 'publicUrl'],
+		}) : [];
+		for (const emoji of _emojis) {
+			this.cache.set(`${emoji.name} ${emoji.host}`, emoji);
+		}
+	}
 }

packages/backend/src/core/ImageProcessingService.ts

@@ -9,6 +9,14 @@ export type IImage = {
 	type: string;
 };
 
+export type IImageStream = {
+	data: Readable;
+	ext: string | null;
+	type: string;
+};
+
+export type IImageStreamable = IImage | IImageStream;
+
 export const webpDefault: sharp.WebpOptions = {
 	quality: 85,
 	alphaQuality: 95,
@@ -19,6 +27,7 @@ export const webpDefault: sharp.WebpOptions = {
 };
 
 import { bindThis } from '@/decorators.js';
+import { Readable } from 'node:stream';
 
 @Injectable()
 export class ImageProcessingService {
@@ -64,7 +73,7 @@ export class ImageProcessingService {
 	 */
 	@bindThis
 	public async convertToWebp(path: string, width: number, height: number, options: sharp.WebpOptions = webpDefault): Promise<IImage> {
-		return this.convertSharpToWebp(await sharp(path), width, height, options);
+		return this.convertSharpToWebp(sharp(path), width, height, options);
 	}
 
 	@bindThis
@@ -85,6 +94,27 @@ export class ImageProcessingService {
 		};
 	}
 
+	@bindThis
+	public convertToWebpStream(path: string, width: number, height: number, options: sharp.WebpOptions = webpDefault): IImageStream {
+		return this.convertSharpToWebpStream(sharp(path), width, height, options);
+	}
+
+	@bindThis
+	public convertSharpToWebpStream(sharp: sharp.Sharp, width: number, height: number, options: sharp.WebpOptions = webpDefault): IImageStream {
+		const data = sharp
+			.resize(width, height, {
+				fit: 'inside',
+				withoutEnlargement: true,
+			})
+			.rotate()
+			.webp(options)
+
+		return {
+			data,
+			ext: 'webp',
+			type: 'image/webp',
+		};
+	}
 	/**
 	 * Convert to PNG
 	 *   with resize, remove metadata, resolve orientation, stop animation

packages/backend/src/core/entities/NoteEntityService.ts

@@ -282,7 +282,9 @@ export class NoteEntityService implements OnModuleInit {
 				: await this.channelsRepository.findOneBy({ id: note.channelId })
 			: null;
 
-		const reactionEmojiNames = Object.keys(note.reactions).filter(x => x.startsWith(':')).map(x => this.reactionService.decodeReaction(x).reaction).map(x => x.replace(/:/g, ''));
+		const reactionEmojiNames = Object.keys(note.reactions)
+			.filter(x => x.startsWith(':') && x.includes('@') && !x.includes('@.')) // リモートカスタム絵文字のみ
+			.map(x => this.reactionService.decodeReaction(x).reaction.replaceAll(':', ''));
 
 		const packed: Packed<'Note'> = await awaitAll({
 			id: note.id,
@@ -299,6 +301,8 @@ export class NoteEntityService implements OnModuleInit {
 			renoteCount: note.renoteCount,
 			repliesCount: note.repliesCount,
 			reactions: this.reactionService.convertLegacyReactions(note.reactions),
+			reactionEmojis: this.customEmojiService.populateEmojis(reactionEmojiNames, host),
+			emojis: host != null ? this.customEmojiService.populateEmojis(note.emojis, host) : undefined,
 			tags: note.tags.length > 0 ? note.tags : undefined,
 			fileIds: note.fileIds,
 			files: this.driveFileEntityService.packMany(note.fileIds),
@@ -384,6 +388,8 @@ export class NoteEntityService implements OnModuleInit {
 			}
 		}
 
+		await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
+
 		return await Promise.all(notes.map(n => this.pack(n, me, {
 			...options,
 			_hint_: {

packages/backend/src/core/entities/NotificationEntityService.ts

@@ -146,6 +146,8 @@ export class NotificationEntityService implements OnModuleInit {
 			myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) ?? null);
 		}
 
+		await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
+
 		return await Promise.all(notifications.map(x => this.pack(x, {
 			_hintForEachNotes_: {
 				myReactions: myReactionsMap,

packages/backend/src/core/entities/UserEntityService.ts

@@ -413,6 +413,7 @@ export class UserEntityService implements OnModuleInit {
 				faviconUrl: instance.faviconUrl,
 				themeColor: instance.themeColor,
 			} : undefined) : undefined,
+			emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
 			onlineStatus: this.getOnlineStatus(user),
 
 			...(opts.detail ? {

packages/backend/src/logger.ts

@@ -68,6 +68,7 @@ export default class Logger {
 		if (envOption.withLogTime) log = chalk.gray(time) + ' ' + log;
 
 		console.log(important ? chalk.bold(log) : log);
+		if (level === 'error' && data) console.log(data);
 
 		if (store) {
 			if (this.syslogClient) {

packages/backend/src/queue/processors/AggregateRetentionProcessorService.ts

@@ -57,8 +57,15 @@ export class AggregateRetentionProcessorService {
 			usersCount: targetUserIds.length,
 		});
 
+		// 今日活動したユーザーを全て取得
+		const activeUsers = await this.usersRepository.findBy({
+			host: IsNull(),
+			lastActiveDate: MoreThan(new Date(Date.now() - (1000 * 60 * 60 * 24))),
+		});
+		const activeUsersIds = activeUsers.map(u => u.id);
+
 		for (const record of pastRecords) {
-			const retention = record.userIds.filter(id => targetUserIds.includes(id)).length;
+			const retention = record.userIds.filter(id => activeUsersIds.includes(id)).length;
 
 			const data = deepClone(record.data);
 			data[dateKey] = retention;

packages/backend/src/server/FileServerService.ts

@@ -5,14 +5,14 @@ import { Inject, Injectable } from '@nestjs/common';
 import fastifyStatic from '@fastify/static';
 import rename from 'rename';
 import type { Config } from '@/config.js';
-import type { DriveFilesRepository } from '@/models/index.js';
+import type { DriveFile, DriveFilesRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
 import { createTemp } from '@/misc/create-temp.js';
 import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
 import { StatusError } from '@/misc/status-error.js';
 import type Logger from '@/logger.js';
 import { DownloadService } from '@/core/DownloadService.js';
-import { ImageProcessingService } from '@/core/ImageProcessingService.js';
+import { IImageStreamable, ImageProcessingService, webpDefault } from '@/core/ImageProcessingService.js';
 import { VideoProcessingService } from '@/core/VideoProcessingService.js';
 import { InternalStorageService } from '@/core/InternalStorageService.js';
 import { contentDisposition } from '@/misc/content-disposition.js';
@@ -20,6 +20,8 @@ import { FileInfoService } from '@/core/FileInfoService.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import { bindThis } from '@/decorators.js';
 import type { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
+import { isMimeImage } from '@/misc/is-mime-image.js';
+import sharp from 'sharp';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -57,7 +59,7 @@ export class FileServerService {
 			reply.header('Cache-Control', 'max-age=300');
 		};
 	}
-	
+
 	@bindThis
 	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
 		fastify.addHook('onRequest', (request, reply, done) => {
@@ -70,23 +72,309 @@ export class FileServerService {
 			serve: false,
 		});
 
-		fastify.get('/app-default.jpg', (request, reply) => {
+		fastify.get('/files/app-default.jpg', (request, reply) => {
 			const file = fs.createReadStream(`${_dirname}/assets/dummy.png`);
 			reply.header('Content-Type', 'image/jpeg');
 			reply.header('Cache-Control', 'max-age=31536000, immutable');
 			return reply.send(file);
 		});
 
-		fastify.get<{ Params: { key: string; } }>('/:key', async (request, reply) => await this.sendDriveFile(request, reply));
+		fastify.get<{ Params: { key: string; } }>('/files/:key', async (request, reply) => {
-		fastify.get<{ Params: { key: string; } }>('/:key/*', async (request, reply) => await this.sendDriveFile(request, reply));
+			return await this.sendDriveFile(request, reply)
+				.catch(err => this.errorHandler(request, reply, err));
+		});
+		fastify.get<{ Params: { key: string; } }>('/files/:key/*', async (request, reply) => {
+			return await this.sendDriveFile(request, reply)
+				.catch(err => this.errorHandler(request, reply, err));
+		});
+
+		fastify.get<{
+			Params: { url: string; };
+			Querystring: { url?: string; };
+		}>('/proxy/:url*', async (request, reply) => {
+			return await this.proxyHandler(request, reply)
+				.catch(err => this.errorHandler(request, reply, err));
+		});
 
 		done();
 	}
 
+	@bindThis
+	private async errorHandler(request: FastifyRequest<{ Params?: { [x: string]: any }; Querystring?: { [x: string]: any }; }>, reply: FastifyReply, err?: any) {
+		this.logger.error(`${err}`);
+
+		reply.header('Cache-Control', 'max-age=300');
+
+		if (request.query && 'fallback' in request.query) {
+			return reply.sendFile('/dummy.png', assets);
+		}
+
+		if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
+			reply.code(err.statusCode);
+			return;
+		}
+
+		reply.code(500);
+		return;
+	}
+
 	@bindThis
 	private async sendDriveFile(request: FastifyRequest<{ Params: { key: string; } }>, reply: FastifyReply) {
 		const key = request.params.key;
+		const file = await this.getFileFromKey(key).then();
 
+		if (file === '404') {
+			reply.code(404);
+			reply.header('Cache-Control', 'max-age=86400');
+			return reply.sendFile('/dummy.png', assets);
+		}
+
+		if (file === '204') {
+			reply.code(204);
+			reply.header('Cache-Control', 'max-age=86400');
+			return;
+		}
+
+		try {
+			if (file.state === 'remote') {
+				const convertFile = async () => {
+					if (file.fileRole === 'thumbnail') {
+						if (['image/jpeg', 'image/webp', 'image/avif', 'image/png', 'image/svg+xml'].includes(file.mime)) {
+							return this.imageProcessingService.convertToWebpStream(
+								file.path,
+								498,
+								280
+							);
+						} else if (file.mime.startsWith('video/')) {
+							return await this.videoProcessingService.generateVideoThumbnail(file.path);
+						}
+					}
+
+					if (file.fileRole === 'webpublic') {
+						if (['image/svg+xml'].includes(file.mime)) {
+							return this.imageProcessingService.convertToWebpStream(
+								file.path,
+								2048,
+								2048,
+								{ ...webpDefault, lossless: true }
+							)
+						}
+					}
+
+					return {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				};
+
+				const image = await convertFile();
+
+				if ('pipe' in image.data && typeof image.data.pipe === 'function') {
+					// image.dataがstreamなら、stream終了後にcleanup
+					image.data.on('end', file.cleanup);
+					image.data.on('close', file.cleanup);
+				} else {
+					// image.dataがstreamでないなら直ちにcleanup
+					file.cleanup();
+				}
+
+				reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
+				reply.header('Cache-Control', 'max-age=31536000, immutable');
+				return image.data;
+			}
+
+			if (file.fileRole !== 'original') {
+				const filename = rename(file.file.name, {
+					suffix: file.fileRole === 'thumbnail' ? '-thumb' : '-web',
+					extname: file.ext ? `.${file.ext}` : undefined,
+				}).toString();
+
+				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));
+				return fs.createReadStream(file.path);
+			} else {
+				const stream = fs.createReadStream(file.path);
+				stream.on('error', this.commonReadableHandlerGenerator(reply));
+				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.file.name));
+				return stream;
+			}
+		} catch (e) {
+			if ('cleanup' in file) file.cleanup();
+			throw e;
+		}
+	}
+
+	@bindThis
+	private async proxyHandler(request: FastifyRequest<{ Params: { url: string; }; Querystring: { url?: string; }; }>, reply: FastifyReply) {
+		const url = 'url' in request.query ? request.query.url : 'https://' + request.params.url;
+
+		if (typeof url !== 'string') {
+			reply.code(400);
+			return;
+		}
+
+		// Create temp file
+		const file = await this.getStreamAndTypeFromUrl(url);
+		if (file === '404') {
+			reply.code(404);
+			reply.header('Cache-Control', 'max-age=86400');
+			return reply.sendFile('/dummy.png', assets);
+		}
+
+		if (file === '204') {
+			reply.code(204);
+			reply.header('Cache-Control', 'max-age=86400');
+			return;
+		}
+
+		try {
+			const isConvertibleImage = isMimeImage(file.mime, 'sharp-convertible-image');
+			const isAnimationConvertibleImage = isMimeImage(file.mime, 'sharp-animation-convertible-image');
+
+			let image: IImageStreamable | null = null;
+			if ('emoji' in request.query && isConvertibleImage) {
+				if (!isAnimationConvertibleImage && !('static' in request.query)) {
+					image = {
+						data: fs.createReadStream(file.path),
+						ext: file.ext,
+						type: file.mime,
+					};
+				} else {
+					const data = sharp(file.path, { animated: !('static' in request.query) })
+							.resize({
+								height: 128,
+								withoutEnlargement: true,
+							})
+							.webp(webpDefault);
+
+					image = {
+						data,
+						ext: 'webp',
+						type: 'image/webp',
+					};
+				}
+			} else if ('static' in request.query && isConvertibleImage) {
+				image = this.imageProcessingService.convertToWebpStream(file.path, 498, 280);
+			} else if ('preview' in request.query && isConvertibleImage) {
+				image = this.imageProcessingService.convertToWebpStream(file.path, 200, 200);
+			} else if ('badge' in request.query) {
+				if (!isConvertibleImage) {
+					// 画像でないなら404でお茶を濁す
+					throw new StatusError('Unexpected mime', 404);
+				}
+
+				const mask = sharp(file.path)
+					.resize(96, 96, {
+						fit: 'inside',
+						withoutEnlargement: false,
+					})
+					.greyscale()
+					.normalise()
+					.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+					.flatten({ background: '#000' })
+					.toColorspace('b-w');
+	
+				const stats = await mask.clone().stats();
+	
+				if (stats.entropy < 0.1) {
+					// エントロピーがあまりない場合は404にする
+					throw new StatusError('Skip to provide badge', 404);
+				}
+	
+				const data = sharp({
+					create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+				})
+					.pipelineColorspace('b-w')
+					.boolean(await mask.png().toBuffer(), 'eor');
+	
+				image = {
+					data: await data.png().toBuffer(),
+					ext: 'png',
+					type: 'image/png',
+				};
+			} else if (file.mime === 'image/svg+xml') {
+				image = this.imageProcessingService.convertToWebpStream(file.path, 2048, 2048);
+			} else if (!file.mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(file.mime)) {
+				throw new StatusError('Rejected type', 403, 'Rejected type');
+			}
+
+			if (!image) {
+				image = {
+					data: fs.createReadStream(file.path),
+					ext: file.ext,
+					type: file.mime,
+				};
+			}
+
+			if ('cleanup' in file) {
+				if ('pipe' in image.data && typeof image.data.pipe === 'function') {
+					// image.dataがstreamなら、stream終了後にcleanup
+					image.data.on('end', file.cleanup);
+					image.data.on('close', file.cleanup);
+				} else {
+					// image.dataがstreamでないなら直ちにcleanup
+					file.cleanup();
+				}
+			}
+
+			reply.header('Content-Type', image.type);
+			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			return image.data;
+		} catch (e) {
+			if ('cleanup' in file) file.cleanup();
+			throw e;
+		}
+	}
+
+	@bindThis
+	private async getStreamAndTypeFromUrl(url: string): Promise<
+		{ state: 'remote'; fileRole?: 'thumbnail' | 'webpublic' | 'original'; file?: DriveFile; mime: string; ext: string | null; path: string; cleanup: () => void; }
+		| { state: 'stored_internal'; fileRole: 'thumbnail' | 'webpublic' | 'original'; file: DriveFile; mime: string; ext: string | null; path: string; }
+		| '404'
+		| '204'
+	> {
+		if (url.startsWith(`${this.config.url}/files/`)) {
+			const key = url.replace(`${this.config.url}/files/`, '').split('/').shift();
+			if (!key) throw new StatusError('Invalid File Key', 400, 'Invalid File Key');
+
+			return await this.getFileFromKey(key);
+		}
+
+		return await this.downloadAndDetectTypeFromUrl(url);
+	}
+
+	@bindThis
+	private async downloadAndDetectTypeFromUrl(url: string): Promise<
+		{ state: 'remote' ; mime: string; ext: string | null; path: string; cleanup: () => void; }
+	> {
+		const [path, cleanup] = await createTemp();
+		try {
+			await this.downloadService.downloadUrl(url, path);
+
+			const { mime, ext } = await this.fileInfoService.detectType(path);
+	
+			return {
+				state: 'remote',
+				mime, ext,
+				path, cleanup,
+			}
+		} catch (e) {
+			cleanup();
+			throw e;
+		}
+	}
+
+	@bindThis
+	private async getFileFromKey(key: string): Promise<
+		{ state: 'remote'; fileRole: 'thumbnail' | 'webpublic' | 'original'; file: DriveFile; mime: string; ext: string | null; path: string; cleanup: () => void; }
+		| { state: 'stored_internal'; fileRole: 'thumbnail' | 'webpublic' | 'original'; file: DriveFile; mime: string; ext: string | null; path: string; }
+		| '404'
+		| '204'
+	> {
 		// Fetch drive file
 		const file = await this.driveFilesRepository.createQueryBuilder('file')
 			.where('file.accessKey = :accessKey', { accessKey: key })
@@ -94,89 +382,41 @@ export class FileServerService {
 			.orWhere('file.webpublicAccessKey = :webpublicAccessKey', { webpublicAccessKey: key })
 			.getOne();
 
-		if (file == null) {
+		if (file == null) return '404';
-			reply.code(404);
-			reply.header('Cache-Control', 'max-age=86400');
-			return reply.sendFile('/dummy.png', assets);
-		}
 
 		const isThumbnail = file.thumbnailAccessKey === key;
 		const isWebpublic = file.webpublicAccessKey === key;
 
 		if (!file.storedInternal) {
-			if (file.isLink && file.uri) {	// 期限切れリモートファイル
+			if (!(file.isLink && file.uri)) return '204';
-				const [path, cleanup] = await createTemp();
+			const result = await this.downloadAndDetectTypeFromUrl(file.uri);
-
+			return {
-				try {
+				...result,
-					await this.downloadService.downloadUrl(file.uri, path);
+				fileRole: isThumbnail ? 'thumbnail' : isWebpublic ? 'webpublic' : 'original',
-
+				file,
-					const { mime, ext } = await this.fileInfoService.detectType(path);
-
-					const convertFile = async () => {
-						if (isThumbnail) {
-							if (['image/jpeg', 'image/webp', 'image/avif', 'image/png', 'image/svg+xml'].includes(mime)) {
-								return await this.imageProcessingService.convertToWebp(path, 498, 280);
-							} else if (mime.startsWith('video/')) {
-								return await this.videoProcessingService.generateVideoThumbnail(path);
-							}
-						}
-
-						if (isWebpublic) {
-							if (['image/svg+xml'].includes(mime)) {
-								return await this.imageProcessingService.convertToPng(path, 2048, 2048);
-							}
-						}
-
-						return {
-							data: fs.readFileSync(path),
-							ext,
-							type: mime,
-						};
-					};
-
-					const image = await convertFile();
-					reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
-					reply.header('Cache-Control', 'max-age=31536000, immutable');
-					return image.data;
-				} catch (err) {
-					this.logger.error(`${err}`);
-
-					if (err instanceof StatusError && err.isClientError) {
-						reply.code(err.statusCode);
-						reply.header('Cache-Control', 'max-age=86400');
-					} else {
-						reply.code(500);
-						reply.header('Cache-Control', 'max-age=300');
-					}
-				} finally {
-					cleanup();
-				}
-				return;
 			}
-
-			reply.code(204);
-			reply.header('Cache-Control', 'max-age=86400');
-			return;
 		}
 
-		if (isThumbnail || isWebpublic) {
+		const path = this.internalStorageService.resolvePath(key);
-			const { mime, ext } = await this.fileInfoService.detectType(this.internalStorageService.resolvePath(key));
-			const filename = rename(file.name, {
-				suffix: isThumbnail ? '-thumb' : '-web',
-				extname: ext ? `.${ext}` : undefined,
-			}).toString();
 
-			reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
+		if (isThumbnail || isWebpublic) {
-			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			const { mime, ext } = await this.fileInfoService.detectType(path);
-			reply.header('Content-Disposition', contentDisposition('inline', filename));
+			return {
-			return this.internalStorageService.read(key);
+				state: 'stored_internal',
-		} else {
+				fileRole: isThumbnail ? 'thumbnail' : 'webpublic',
-			const readable = this.internalStorageService.read(file.accessKey!);
+				file,
-			readable.on('error', this.commonReadableHandlerGenerator(reply));
+				mime, ext,
-			reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
+				path,
-			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			};
-			reply.header('Content-Disposition', contentDisposition('inline', file.name));
+		}
-			return readable;
+
+		return {
+			state: 'stored_internal',
+			fileRole: 'original',
+			file,
+			mime: file.type,
+			ext: null,
+			path,
 		}
 	}
 }

packages/backend/src/server/MediaProxyServerService.ts

@@ -1,177 +0,0 @@
-import * as fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import { Inject, Injectable } from '@nestjs/common';
-import sharp from 'sharp';
-import fastifyStatic from '@fastify/static';
-import { DI } from '@/di-symbols.js';
-import type { Config } from '@/config.js';
-import { isMimeImage } from '@/misc/is-mime-image.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { DownloadService } from '@/core/DownloadService.js';
-import { ImageProcessingService, webpDefault } from '@/core/ImageProcessingService.js';
-import type { IImage } from '@/core/ImageProcessingService.js';
-import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
-import { StatusError } from '@/misc/status-error.js';
-import type Logger from '@/logger.js';
-import { FileInfoService } from '@/core/FileInfoService.js';
-import { LoggerService } from '@/core/LoggerService.js';
-import { bindThis } from '@/decorators.js';
-import type { FastifyInstance, FastifyPluginOptions, FastifyReply, FastifyRequest } from 'fastify';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-const assets = `${_dirname}/../../src/server/assets/`;
-
-@Injectable()
-export class MediaProxyServerService {
-	private logger: Logger;
-
-	constructor(
-		@Inject(DI.config)
-		private config: Config,
-
-		private fileInfoService: FileInfoService,
-		private downloadService: DownloadService,
-		private imageProcessingService: ImageProcessingService,
-		private loggerService: LoggerService,
-	) {
-		this.logger = this.loggerService.getLogger('server', 'gray', false);
-
-		//this.createServer = this.createServer.bind(this);
-	}
-
-	@bindThis
-	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
-		fastify.addHook('onRequest', (request, reply, done) => {
-			reply.header('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
-			done();
-		});
-
-		fastify.register(fastifyStatic, {
-			root: _dirname,
-			serve: false,
-		});
-
-		fastify.get<{
-			Params: { url: string; };
-			Querystring: { url?: string; };
-		}>('/:url*', async (request, reply) => await this.handler(request, reply));
-
-		done();
-	}
-
-	@bindThis
-	private async handler(request: FastifyRequest<{ Params: { url: string; }; Querystring: { url?: string; }; }>, reply: FastifyReply) {
-		const url = 'url' in request.query ? request.query.url : 'https://' + request.params.url;
-	
-		if (typeof url !== 'string') {
-			reply.code(400);
-			return;
-		}
-	
-		// Create temp file
-		const [path, cleanup] = await createTemp();
-	
-		try {
-			await this.downloadService.downloadUrl(url, path);
-	
-			const { mime, ext } = await this.fileInfoService.detectType(path);
-			const isConvertibleImage = isMimeImage(mime, 'sharp-convertible-image');
-			const isAnimationConvertibleImage = isMimeImage(mime, 'sharp-animation-convertible-image');
-	
-			let image: IImage;
-			if ('emoji' in request.query && isConvertibleImage) {
-				if (!isAnimationConvertibleImage && !('static' in request.query)) {
-					image = {
-						data: fs.readFileSync(path),
-						ext,
-						type: mime,
-					};
-				} else {
-					const data = await sharp(path, { animated: !('static' in request.query) })
-					.resize({
-						height: 128,
-						withoutEnlargement: true,
-					})
-					.webp(webpDefault)
-					.toBuffer();
-
-					image = {
-						data,
-						ext: 'webp',
-						type: 'image/webp',
-					};
-				}
-			} else if ('static' in request.query && isConvertibleImage) {
-				image = await this.imageProcessingService.convertToWebp(path, 498, 280);
-			} else if ('preview' in request.query && isConvertibleImage) {
-				image = await this.imageProcessingService.convertToWebp(path, 200, 200);
-			} else if ('badge' in request.query) {
-				if (!isConvertibleImage) {
-					// 画像でないなら404でお茶を濁す
-					throw new StatusError('Unexpected mime', 404);
-				}
-
-				const mask = sharp(path)
-					.resize(96, 96, {
-						fit: 'inside',
-						withoutEnlargement: false,
-					})
-					.greyscale()
-					.normalise()
-					.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
-					.flatten({ background: '#000' })
-					.toColorspace('b-w');
-	
-				const stats = await mask.clone().stats();
-	
-				if (stats.entropy < 0.1) {
-					// エントロピーがあまりない場合は404にする
-					throw new StatusError('Skip to provide badge', 404);
-				}
-	
-				const data = sharp({
-					create: { width: 96, height: 96, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
-				})
-					.pipelineColorspace('b-w')
-					.boolean(await mask.png().toBuffer(), 'eor');
-	
-				image = {
-					data: await data.png().toBuffer(),
-					ext: 'png',
-					type: 'image/png',
-				};
-			} else if (mime === 'image/svg+xml') {
-				image = await this.imageProcessingService.convertToWebp(path, 2048, 2048, webpDefault);
-			} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
-				throw new StatusError('Rejected type', 403, 'Rejected type');
-			} else {
-				image = {
-					data: fs.readFileSync(path),
-					ext,
-					type: mime,
-				};
-			}
-	
-			reply.header('Content-Type', image.type);
-			reply.header('Cache-Control', 'max-age=31536000, immutable');
-			return image.data;
-		} catch (err) {
-			this.logger.error(`${err}`);
-
-			if ('fallback' in request.query) {
-				return reply.sendFile('/dummy.png', assets);
-			}
-	
-			if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
-				reply.code(err.statusCode);
-			} else {
-				reply.code(500);
-			}
-		} finally {
-			cleanup();
-		}
-	}
-}

packages/backend/src/server/ServerModule.ts

@@ -3,7 +3,6 @@ import { EndpointsModule } from '@/server/api/EndpointsModule.js';
 import { CoreModule } from '@/core/CoreModule.js';
 import { ApiCallService } from './api/ApiCallService.js';
 import { FileServerService } from './FileServerService.js';
-import { MediaProxyServerService } from './MediaProxyServerService.js';
 import { NodeinfoServerService } from './NodeinfoServerService.js';
 import { ServerService } from './ServerService.js';
 import { WellKnownServerService } from './WellKnownServerService.js';
@@ -51,7 +50,6 @@ import { UserListChannelService } from './api/stream/channels/user-list.js';
 		UrlPreviewService,
 		ActivityPubServerService,
 		FileServerService,
-		MediaProxyServerService,
 		NodeinfoServerService,
 		ServerService,
 		WellKnownServerService,

packages/backend/src/server/ServerService.ts

@@ -20,7 +20,6 @@ import { NodeinfoServerService } from './NodeinfoServerService.js';
 import { ApiServerService } from './api/ApiServerService.js';
 import { StreamingApiServerService } from './api/StreamingApiServerService.js';
 import { WellKnownServerService } from './WellKnownServerService.js';
-import { MediaProxyServerService } from './MediaProxyServerService.js';
 import { FileServerService } from './FileServerService.js';
 import { ClientServerService } from './web/ClientServerService.js';
 
@@ -48,7 +47,6 @@ export class ServerService {
 		private wellKnownServerService: WellKnownServerService,
 		private nodeinfoServerService: NodeinfoServerService,
 		private fileServerService: FileServerService,
-		private mediaProxyServerService: MediaProxyServerService,
 		private clientServerService: ClientServerService,
 		private globalEventService: GlobalEventService,
 		private loggerService: LoggerService,
@@ -73,8 +71,7 @@ export class ServerService {
 		}
 
 		fastify.register(this.apiServerService.createServer, { prefix: '/api' });
-		fastify.register(this.fileServerService.createServer, { prefix: '/files' });
+		fastify.register(this.fileServerService.createServer);
-		fastify.register(this.mediaProxyServerService.createServer, { prefix: '/proxy' });
 		fastify.register(this.activityPubServerService.createServer);
 		fastify.register(this.nodeinfoServerService.createServer);
 		fastify.register(this.wellKnownServerService.createServer);

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

@@ -61,7 +61,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		super(meta, paramDef, async (ps, me) => {
 			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: ps.userId });
 
-			if (me == null || (me.id !== ps.userId && !profile.publicReactions)) {
+			if ((me == null || me.id !== ps.userId) && !profile.publicReactions) {
 				throw new ApiError(meta.errors.reactionsNotPublic);
 			}
 

packages/frontend/package.json

@@ -12,7 +12,7 @@
 		"@rollup/plugin-json": "6.0.0",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.12.2",
-		"@tabler/icons-webfont": "^2.0.0",
+		"@tabler/icons-webfont": "^2.1.2",
 		"@vitejs/plugin-vue": "4.0.0",
 		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
@@ -44,7 +44,7 @@
 		"punycode": "2.3.0",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
-		"rollup": "3.10.1",
+		"rollup": "3.11.0",
 		"s-age": "1.1.2",
 		"sanitize-html": "^2.8.1",
 		"sass": "1.57.1",
@@ -53,7 +53,7 @@
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
-		"three": "0.148.0",
+		"three": "0.149.0",
 		"throttle-debounce": "5.0.0",
 		"tinycolor2": "1.5.2",
 		"tsc-alias": "1.8.2",
@@ -86,7 +86,7 @@
 		"@typescript-eslint/parser": "5.49.0",
 		"@vue/runtime-core": "3.2.45",
 		"cross-env": "7.0.3",
-		"cypress": "12.3.0",
+		"cypress": "12.4.0",
 		"eslint": "8.32.0",
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.9.0",

packages/frontend/src/components/MkAutocomplete.vue

@@ -17,7 +17,7 @@
 	</ol>
 	<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
 		<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<MkEmoji :emoji="emoji.emoji" :class="$style.emoji"/>
+			<MkCustomEmoji :name="emoji.emoji" :class="$style.emoji"/>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
 			<span v-else v-text="emoji.name"></span>
@@ -112,7 +112,7 @@ const emojiDb = computed(() => {
 	customEmojiDB.sort((a, b) => a.name.length - b.name.length);
 	//#endregion
 
-	return markRaw([ ...customEmojiDB, ...unicodeEmojiDB ]);
+	return markRaw([...customEmojiDB, ...unicodeEmojiDB]);
 });
 
 export default {

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -11,7 +11,8 @@
 			class="_button item"
 			@click="emit('chosen', emoji, $event)"
 		>
-			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+			<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+			<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
 		</button>
 	</div>
 </section>

packages/frontend/src/components/MkEmojiPicker.vue

@@ -12,7 +12,7 @@
 					tabindex="0"
 					@click="chosen(emoji, $event)"
 				>
-					<MkEmoji class="emoji" :emoji="`:${emoji.name}:`"/>
+					<MkCustomEmoji class="emoji" :name="emoji.name"/>
 				</button>
 			</div>
 			<div v-if="searchResultUnicode.length > 0" class="body">
@@ -39,7 +39,8 @@
 						tabindex="0"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+						<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
 					</button>
 				</div>
 			</section>
@@ -53,7 +54,8 @@
 						class="_button item"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+						<MkCustomEmoji v-if="emoji[0] === ':'" class="emoji" :name="emoji" :normal="true"/>
+						<MkEmoji v-else class="emoji" :emoji="emoji" :normal="true"/>
 					</button>
 				</div>
 			</section>

packages/frontend/src/components/MkNote.vue

@@ -48,12 +48,12 @@
 					<div :class="$style.text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" v-once :text="appearNote.text" :author="appearNote.user" :i="$i"/>
+						<Mfm v-if="appearNote.text" v-once :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 						<div v-if="translating || translation" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else :class="$style.translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -65,13 +65,13 @@
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"/>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else class="translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>

packages/frontend/src/components/MkNoteSimple.vue

@@ -5,7 +5,7 @@
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 		<div>
 			<p v-if="note.cw != null" :class="$style.cw">
-				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i"/>
+				<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i" :emoji-urls="note.emojis"/>
 				<MkCwButton v-model="showContent" :note="note"/>
 			</p>
 			<div v-show="note.cw == null || showContent">

packages/frontend/src/components/MkNotification.vue

@@ -38,26 +38,26 @@
 		<div v-once :class="$style.content">
 			<MkA v-if="notification.type === 'reaction'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'renote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :author="notification.note.renote.user"/>
+				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="true" :author="notification.note.renote.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'reply'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'mention'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'quote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'pollEnded'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="true" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'achievementEarned'" :class="$style.text" to="/my/achievements">
@@ -68,7 +68,7 @@
 			<span v-else-if="notification.type === 'receiveFollowRequest'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
 			<span v-else-if="notification.type === 'groupInvited'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
 			<span v-else-if="notification.type === 'app'" :class="$style.text">
-				<Mfm :text="notification.body" :nowrap="!full"/>
+				<Mfm :text="notification.body" :nowrap="false"/>
 			</span>
 		</div>
 	</div>

packages/frontend/src/components/MkNotifications.vue

@@ -10,7 +10,7 @@
 	<template #default="{ items: notifications }">
 		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="false" class="_panel notification"/>
+			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</MkDateSeparatedList>
 	</template>
 </MkPagination>

packages/frontend/src/components/MkReactionIcon.vue

@@ -1,5 +1,6 @@
 <template>
-<MkEmoji :emoji="reaction" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<MkCustomEmoji v-if="reaction[0] === ':'" :name="reaction" :normal="true" :no-style="noStyle" :url="emojiUrl"/>
+<MkEmoji v-else :emoji="reaction" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,5 +9,6 @@ import { } from 'vue';
 const props = defineProps<{
 	reaction: string;
 	noStyle?: boolean;
+	emojiUrl?: string;
 }>();
 </script>

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

@@ -6,7 +6,7 @@
 	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
 	@click="toggleReaction()"
 >
-	<MkReactionIcon :class="$style.icon" :reaction="reaction"/>
+	<MkReactionIcon :class="$style.icon" :reaction="reaction" :emoji-url="note.reactionEmojis[reaction.substr(1, reaction.length - 2)]"/>
 	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>

packages/frontend/src/components/MkSubNoteContent.vue

@@ -4,7 +4,7 @@
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-		<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i"/>
+		<Mfm v-if="note.text" v-once :text="note.text" :author="note.user" :i="$i" :emoji-urls="note.emojis"/>
 		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">

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

@@ -0,0 +1,61 @@
+<template>
+<span v-if="errored">:{{ customEmojiName }}:</span>
+<img v-else :class="[$style.root, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true" @load="errored = false"/>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStaticImageUrl } from '@/scripts/media-proxy';
+import { defaultStore } from '@/store';
+import { customEmojis } from '@/custom-emojis';
+
+const props = defineProps<{
+	name: string;
+	normal?: boolean;
+	noStyle?: boolean;
+	host?: string | null;
+	url?: string;
+}>();
+
+const customEmojiName = computed(() => (props.name[0] === ':' ? props.name.substr(1, props.name.length - 2) : props.name).replace('@.', ''));
+const url = computed(() => {
+	if (props.url) {
+		return props.url;
+	} else if (props.host == null && !customEmojiName.value.includes('@')) {
+		const found = customEmojis.value.find(x => x.name === customEmojiName.value);
+		return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
+	} else {
+		const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
+		return defaultStore.state.disableShowingAnimatedImages
+			? getStaticImageUrl(rawUrl)
+			: rawUrl;
+	}
+});
+const alt = computed(() => `:${customEmojiName.value}:`);
+let errored = $ref(url.value == null);
+</script>
+
+<style lang="scss" module>
+.root {
+	height: 2.5em;
+	vertical-align: middle;
+	transition: transform 0.2s ease;
+
+	&:hover {
+		transform: scale(1.2);
+	}
+}
+
+.normal {
+	height: 1.25em;
+	vertical-align: -0.25em;
+
+	&:hover {
+		transform: none;
+	}
+}
+
+.noStyle {
+	height: auto !important;
+}
+</style>

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

@@ -1,54 +1,29 @@
 <template>
-<span v-if="isCustom && errored">:{{ customEmojiName }}:</span>
+<img v-if="!useOsNativeEmojis" :class="$style.root" :src="url" :alt="props.emoji" decoding="async" @pointerenter="computeTitle"/>
-<img v-else-if="isCustom" :class="[$style.root, $style.custom, { [$style.normal]: normal, [$style.noStyle]: noStyle }]" :src="url" :alt="alt" :title="alt" decoding="async" @error="errored = true" @load="errored = false"/>
+<span v-else-if="useOsNativeEmojis" :alt="props.emoji" @pointerenter="computeTitle">{{ props.emoji }}</span>
-<img v-else-if="char && !useOsNativeEmojis" :class="$style.root" :src="url" :alt="alt" decoding="async" @pointerenter="computeTitle"/>
-<span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
 <span v-else>{{ emoji }}</span>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getStaticImageUrl } from '@/scripts/media-proxy';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { defaultStore } from '@/store';
 import { getEmojiName } from '@/scripts/emojilist';
-import { customEmojis } from '@/custom-emojis';
 
 const props = defineProps<{
 	emoji: string;
-	normal?: boolean;
-	noStyle?: boolean;
-	isReaction?: boolean;
-	host?: string | null;
 }>();
 
 const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
 
-const isCustom = computed(() => props.emoji.startsWith(':'));
+const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native');
-const customEmojiName = computed(() => props.emoji.substr(1, props.emoji.length - 2).replace('@.', ''));
-const char = computed(() => isCustom.value ? undefined : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
 const url = computed(() => {
-	if (char.value) {
+	return char2path(props.emoji);
-		return char2path(char.value);
-	} else if (props.host == null && !customEmojiName.value.includes('@')) {
-		const found = customEmojis.value.find(x => x.name === customEmojiName.value);
-		return found ? defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(found.url) : found.url : null;
-	} else {
-		const rawUrl = props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
-		return defaultStore.state.disableShowingAnimatedImages
-			? getStaticImageUrl(rawUrl)
-			: rawUrl;
-	}
 });
-const alt = computed(() => isCustom.value ? `:${customEmojiName.value}:` : char.value);
-let errored = $ref(isCustom.value && url.value == null);
 
 // Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
 function computeTitle(event: PointerEvent): void {
-	const title = isCustom.value
+	const title = getEmojiName(props.emoji as string) ?? props.emoji as string;
-		? `:${customEmojiName.value}:`
-		: (getEmojiName(char.value as string) ?? char.value as string);
 	(event.target as HTMLElement).title = title;
 }
 </script>
@@ -58,27 +33,4 @@ function computeTitle(event: PointerEvent): void {
 	height: 1.25em;
 	vertical-align: -0.25em;
 }
-
-.custom {
-	height: 2.5em;
-	vertical-align: middle;
-	transition: transform 0.2s ease;
-
-	&:hover {
-		transform: scale(1.2);
-	}
-}
-
-.normal {
-	height: 1.25em;
-	vertical-align: -0.25em;
-
-	&:hover {
-		transform: none;
-	}
-}
-
-.noStyle {
-	height: auto !important;
-}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap"/>
+<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emoji-urls="user.emojis"/>
 </template>
 
 <script lang="ts" setup>

packages/frontend/src/components/index.ts

@@ -5,6 +5,7 @@ import MkA from './global/MkA.vue';
 import MkAcct from './global/MkAcct.vue';
 import MkAvatar from './global/MkAvatar.vue';
 import MkEmoji from './global/MkEmoji.vue';
+import MkCustomEmoji from './global/MkCustomEmoji.vue';
 import MkUserName from './global/MkUserName.vue';
 import MkEllipsis from './global/MkEllipsis.vue';
 import MkTime from './global/MkTime.vue';
@@ -26,6 +27,7 @@ export default function(app: App) {
 	app.component('MkAcct', MkAcct);
 	app.component('MkAvatar', MkAvatar);
 	app.component('MkEmoji', MkEmoji);
+	app.component('MkCustomEmoji', MkCustomEmoji);
 	app.component('MkUserName', MkUserName);
 	app.component('MkEllipsis', MkEllipsis);
 	app.component('MkTime', MkTime);
@@ -47,6 +49,7 @@ declare module '@vue/runtime-core' {
 		MkAcct: typeof MkAcct;
 		MkAvatar: typeof MkAvatar;
 		MkEmoji: typeof MkEmoji;
+		MkCustomEmoji: typeof MkCustomEmoji;
 		MkUserName: typeof MkUserName;
 		MkEllipsis: typeof MkEllipsis;
 		MkTime: typeof MkTime;

packages/frontend/src/components/mfm.ts

@@ -4,6 +4,7 @@ import MkUrl from '@/components/global/MkUrl.vue';
 import MkLink from '@/components/MkLink.vue';
 import MkMention from '@/components/MkMention.vue';
 import MkEmoji from '@/components/global/MkEmoji.vue';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 import { concat } from '@/scripts/array';
 import MkCode from '@/components/MkCode.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
@@ -47,6 +48,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		emojiUrls: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	render() {
@@ -301,20 +306,35 @@ export default defineComponent({
 				}
 
 				case 'emojiCode': {
-					return [h(MkEmoji, {
+					// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-						key: Math.random(),
+					if (this.author?.host == null) {
-						emoji: `:${token.props.name}:`,
+						return [h(MkCustomEmoji, {
-						normal: this.plain,
+							key: Math.random(),
+							name: token.props.name,
+							normal: this.plain,
+							host: null,
+						})];
+					} else {
 						// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-						host: this.author?.host,
+						if (this.emojiUrls && (this.emojiUrls[token.props.name] == null)) {
-					})];
+							return [h('span', `:${token.props.name}:`)];
+						} else {
+							return [h(MkCustomEmoji, {
+								key: Math.random(),
+								name: token.props.name,
+								// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+								url: this.emojiUrls ? this.emojiUrls[token.props.name] : null,
+								normal: this.plain,
+								host: this.author.host,
+							})];
+						}
+					}
 				}
 
 				case 'unicodeEmoji': {
 					return [h(MkEmoji, {
 						key: Math.random(),
 						emoji: token.props.emoji,
-						normal: this.plain,
 					})];
 				}
 

packages/frontend/src/custom-emojis.ts

@@ -1,6 +1,6 @@
 import { shallowRef, computed, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
-import { apiGet } from './os';
+import { api, apiGet } from './os';
 import { miLocalStorage } from './local-storage';
 import { stream } from '@/stream';
 
@@ -28,12 +28,17 @@ stream.on('emojiDeleted', emojiData => {
 	customEmojis.value = customEmojis.value.filter(item => !emojiData.emojis.some(search => search.name === item.name));
 });
 
-export async function fetchCustomEmojis() {
+export async function fetchCustomEmojis(force = false) {
 	const now = Date.now();
-	const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
-	if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
 
-	const res = await apiGet('emojis', {});
+	let res;
+	if (force) {
+		res = await api('emojis', {});
+	} else {
+		const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
+		if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
+		res = await apiGet('emojis', {});
+	}
 
 	customEmojis.value = res.emojis;
 	miLocalStorage.setItem('emojis', JSON.stringify(res.emojis));

packages/frontend/src/pages/about-misskey.vue

@@ -9,7 +9,10 @@
 						<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
 						<div class="misskey">Misskey</div>
 						<div class="version">v{{ version }}</div>
-						<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"><MkEmoji class="emoji" :emoji="emoji.emoji" :is-reaction="false" :normal="true" :no-style="true"/></span>
+						<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }">
+							<MkCustomEmoji v-if="emoji.emoji[0] === ':'" class="emoji" :name="emoji.emoji" :normal="true" :no-style="true"/>
+							<MkEmoji v-else class="emoji" :emoji="emoji.emoji" :normal="true" :no-style="true"/>
+						</span>
 					</div>
 					<button v-if="thereIsTreasure" class="_button treasure" @click="getTreasure"><img src="/fluent-emoji/1f3c6.png" class="treasureImg"></button>
 				</div>

packages/frontend/src/pages/admin/overview.stats.vue

@@ -45,7 +45,7 @@
 				<div class="icon"><i class="ti ti-access-point"></i></div>
 				<div class="body">
 					<div class="value">
-						<MkNumber :value="stats.onlineUsersCount" style="margin-right: 0.5em;"/>
+						<MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/>
 					</div>
 					<div class="label">Online</div>
 				</div>

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

@@ -34,6 +34,7 @@ import { useRouter } from '@/router';
 import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import * as os from '@/os';
 import { miLocalStorage } from '@/local-storage';
+import { fetchCustomEmojis } from '@/custom-emojis';
 
 const indexInfo = {
 	title: i18n.ts.settings,
@@ -180,11 +181,13 @@ const menuDef = computed(() => [{
 		type: 'button',
 		icon: 'ti ti-trash',
 		text: i18n.ts.clearCache,
-		action: () => {
+		action: async () => {
+			os.waiting();
 			miLocalStorage.removeItem('locale');
 			miLocalStorage.removeItem('theme');
 			miLocalStorage.removeItem('emojis');
 			miLocalStorage.removeItem('lastEmojisFetchedAt');
+			await fetchCustomEmojis();
 			unisonReload();
 		},
 	}, {

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

@@ -6,7 +6,8 @@
 			<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
-						<MkEmoji :emoji="element" :normal="true"/>
+						<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
+						<MkEmoji v-else :emoji="element" :normal="true"/>
 					</button>
 				</template>
 				<template #footer>

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

@@ -4,7 +4,7 @@ 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);
 
-export const deviceKind = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
+export const deviceKind: 'smartphone' | 'tablet' | 'desktop' = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
 	: isSmartphone ? 'smartphone'
 	: isTablet ? 'tablet'
 	: 'desktop';

packages/frontend/src/scripts/use-note-capture.ts

@@ -20,11 +20,8 @@ export function useNoteCapture(props: {
 			case 'reacted': {
 				const reaction = body.reaction;
 
-				if (body.emoji) {
+				if (body.emoji && !(body.emoji.name in note.value.reactionEmojis)) {
-					const emojis = note.value.emojis || [];
+					note.value.reactionEmojis[body.emoji.name] = body.emoji.url;
-					if (!emojis.includes(body.emoji)) {
-						note.value.emojis = [...emojis, body.emoji];
-					}
 				}
 
 				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる

packages/frontend/src/store.ts

@@ -156,7 +156,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	animation: {
 		where: 'device',
-		default: true,
+		default: !matchMedia('(prefers-reduced-motion)').matches,
 	},
 	animatedMfm: {
 		where: 'device',
@@ -184,11 +184,11 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	useBlurEffectForModal: {
 		where: 'device',
-		default: true,
+		default: !/mobile|iphone|android/.test(navigator.userAgent.toLowerCase()), // 循環参照するのでdevice-kind.tsは参照できない
 	},
 	useBlurEffect: {
 		where: 'device',
-		default: true,
+		default: !/mobile|iphone|android/.test(navigator.userAgent.toLowerCase()), // 循環参照するのでdevice-kind.tsは参照できない
 	},
 	showFixedPostForm: {
 		where: 'device',

packages/frontend/src/ui/_common_/notification.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="$style.root">
-	<XNotification :notification="notification" class="notification _acrylic"/>
+	<XNotification :notification="notification" class="notification _acrylic" :full="false"/>
 </div>
 </template>
 

packages/sw/package.json

@@ -7,15 +7,15 @@
 		"lint": "tsc --noEmit && eslint --quiet src/**/*.ts"
 	},
 	"dependencies": {
-		"esbuild": "^0.14.42",
+		"esbuild": "^0.17.4",
-		"idb-keyval": "^6.1.0",
+		"idb-keyval": "^6.2.0",
 		"misskey-js": "0.0.14"
 	},
 	"devDependencies": {
-		"@typescript-eslint/parser": "^5.45.0",
+		"@typescript-eslint/parser": "^5.49.0",
-		"@typescript/lib-webworker": "npm:@types/serviceworker@^0.0.58",
+		"@typescript/lib-webworker": "npm:@types/serviceworker@0.0.61",
-		"eslint": "^8.16.0",
+		"eslint": "^8.32.0",
-		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-import": "^2.27.5",
 		"typescript": "4.9.4"
 	}
 }