Merge 4ad11a238d into a5e61b8c19

This reverts commit 0134e6e420.

CHANGELOG.md

@@ -1,7 +1,8 @@
 ## Unreleased
 
 ### General
--
+- Enhance: 人気ユーザーの算出基準を変更できるように  
+  (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/653, https://github.com/MisskeyIO/misskey/pull/664, https://github.com/MisskeyIO/misskey/pull/728, https://github.com/MisskeyIO/misskey/pull/734, https://github.com/MisskeyIO/misskey/pull/737)
 
 ### Client
 - Feat: ノート単体・ユーザーのノート・クリップのノートの埋め込み機能
@@ -11,6 +12,8 @@
 - Enhance: コントロールパネル内のファイル一覧でセンシティブなファイルを区別しやすく
 - Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
 - Fix: 月の違う同じ日はセパレータが表示されないのを修正
+- Fix: 縦横比が極端なカスタム絵文字を表示する際にレイアウトが崩れる箇所があるのを修正  
+  (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/725)
 
 ### Server
 - Fix: アンテナの書き込み時にキーワードが与えられなかった場合のエラーをApiErrorとして投げるように
@@ -71,8 +74,6 @@
 - Feat: メディアサイレンスを実装 #13842
   - メディアサイレンスされたサーバーに所属するアカウントによるファイルはすべてセンシティブとして扱われ、カスタム絵文字が使用できないようになります。
 - Enhance: 管理画面でアーカイブにしたお知らせを表示・編集できるように
-- Enhance: 人気ユーザーの算出基準を変更できるように  
-  (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/653 , https://github.com/MisskeyIO/misskey/pull/664)
 - Fix: 配信停止したインスタンス一覧が見れなくなる問題を修正
 - Fix: Dockerコンテナの立ち上げ時に`pnpm`のインストールで固まることがある問題
 - Fix: デフォルトテーマに無効なテーマコードを入力するとUIが使用できなくなる問題を修正

packages/backend/src/core/chart/charts/per-user-pv.ts

@@ -7,6 +7,7 @@ import { Injectable, Inject } from '@nestjs/common';
 import { DataSource } from 'typeorm';
 import type { MiUser } from '@/models/User.js';
 import { AppLockService } from '@/core/AppLockService.js';
+import { addTime, dateUTC, subtractTime } from '@/misc/prelude/time.js';
 import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
 import Chart from '../core.js';
@@ -54,10 +55,30 @@ export default class PerUserPvChart extends Chart<typeof schema> { // eslint-dis
 	}
 
 	@bindThis
-	public async getChartUsers(span: 'hour' | 'day', order: 'ASC' | 'DESC', amount: number, cursor: Date | null, limit = 0, offset = 0): Promise<{
-    userId: string;
-    count: number;
-}[]> {
-		return await this.getChartPv(span, amount, cursor, limit, offset, order);
+	public async getUsersRanking(span: 'hour' | 'day', order: 'ASC' | 'DESC', amount: number, cursor: Date | null, limit = 0, offset = 0): Promise<{ userId: string; count: number; }[]> {
+		const [y, m, d, h, _m, _s, _ms] = cursor ? Chart.parseDate(subtractTime(addTime(cursor, 1, span), 1)) : Chart.getCurrentDate();
+		const [y2, m2, d2, h2] = cursor ? Chart.parseDate(addTime(cursor, 1, span)) : [] as never;
+
+		const lt = dateUTC([y, m, d, h, _m, _s, _ms]);
+
+		const gt =
+			span === 'day' ? subtractTime(cursor ? dateUTC([y2, m2, d2, 0]) : dateUTC([y, m, d, 0]), amount - 1, 'day') :
+			span === 'hour' ? subtractTime(cursor ? dateUTC([y2, m2, d2, h2]) : dateUTC([y, m, d, h]), amount - 1, 'hour') :
+				new Error('not happen') as never;
+
+		const repository =
+			span === 'hour' ? this.repositoryForHour :
+			span === 'day' ? this.repositoryForDay :
+				new Error('not happen') as never;
+
+		// ログ取得
+		return await repository.createQueryBuilder()
+			.select('"group" as "userId", sum("___upv_user" + "___upv_visitor") as "count"')
+			.where('date BETWEEN :gt AND :lt', { gt: Chart.dateToTimestamp(gt), lt: Chart.dateToTimestamp(lt) })
+			.groupBy('"userId"')
+			.orderBy('"count"', order)
+			.offset(offset)
+			.limit(limit)
+			.getRawMany<{ userId: string, count: number }>();
 	}
 }

packages/backend/src/core/chart/core.ts

@@ -150,10 +150,8 @@ export default abstract class Chart<T extends Schema> {
 	// ↓にしたいけどfindOneとかで型エラーになる
 	//private repositoryForHour: MiAndOrmRepository<RawRecord<T>>;
 	//private repositoryForDay: MiAndOrmRepository<RawRecord<T>>;
-	private repositoryForHour: MiAndOrmRepository<{ id: number; group?: string | null; date: number;}>;
-	private repositoryForDay: MiAndOrmRepository<{ id: number; group?: string | null; date: number;}>;
-	private repositoryUserPvForHour: MiAndOrmRepository<{ id: number; group?: string | null; date: number; ___pv_user:number; ___upv_user:number; ___pv_visitor:number; ___upv_visitor:number;}>;
-	private repositoryUserPvForDay: MiAndOrmRepository<{ id: number; group?: string | null; date: number; ___pv_user:number; ___upv_user:number; ___pv_visitor:number; ___upv_visitor:number;}>;
+	protected repositoryForHour: MiAndOrmRepository<{ id: number; group?: string | null; date: number; }>;
+	protected repositoryForDay: MiAndOrmRepository<{ id: number; group?: string | null; date: number; }>;
 	/**
 	 * 1日に一回程度実行されれば良いような計算処理を入れる(主にCASCADE削除などアプリケーション側で感知できない変動によるズレの修正用)
 	 */
@@ -189,11 +187,11 @@ export default abstract class Chart<T extends Schema> {
 		return columns;
 	}
 
-	private static dateToTimestamp(x: Date): number {
+	protected static dateToTimestamp(x: Date): number {
 		return Math.floor(x.getTime() / 1000);
 	}
 
-	private static parseDate(date: Date): [number, number, number, number, number, number, number] {
+	protected static parseDate(date: Date): [number, number, number, number, number, number, number] {
 		const y = date.getUTCFullYear();
 		const m = date.getUTCMonth();
 		const d = date.getUTCDate();
@@ -205,7 +203,7 @@ export default abstract class Chart<T extends Schema> {
 		return [y, m, d, h, _m, _s, _ms];
 	}
 
-	private static getCurrentDate() {
+	protected static getCurrentDate() {
 		return Chart.parseDate(new Date());
 	}
 
@@ -281,8 +279,6 @@ export default abstract class Chart<T extends Schema> {
 		const { hour, day } = Chart.schemaToEntity(name, schema, grouped);
 		this.repositoryForHour = db.getRepository<{ id: number; group?: string | null; date: number; }>(hour).extend(miRepository);
 		this.repositoryForDay = db.getRepository<{ id: number; group?: string | null; date: number; }>(day).extend(miRepository);
-		this.repositoryUserPvForHour = db.getRepository<{ id: number; group?: string | null; date: number; ___pv_user:number; ___upv_user:number; ___pv_visitor:number; ___upv_visitor:number;}>(hour).extend(miRepository);
-		this.repositoryUserPvForDay = db.getRepository<{ id: number; group?: string | null; date: number; ___pv_user:number; ___upv_user:number; ___pv_visitor:number; ___upv_visitor:number;}>(day).extend(miRepository);
 	}
 
 	@bindThis
@@ -732,37 +728,4 @@ export default abstract class Chart<T extends Schema> {
 		}
 		return object as Unflatten<ChartResult<T>>;
 	}
-
-	@bindThis
-	public async getChartPv(span: 'hour' | 'day', amount: number, cursor: Date | null, limit: number, offset: number, order: 'ASC' | 'DESC'): Promise<
-		{
-			userId: string,
-			count: number,
-		}[]
-	> {
-		const [y, m, d, h, _m, _s, _ms] = cursor ? Chart.parseDate(subtractTime(addTime(cursor, 1, span), 1)) : Chart.getCurrentDate();
-		const [y2, m2, d2, h2] = cursor ? Chart.parseDate(addTime(cursor, 1, span)) : [] as never;
-
-		const lt = dateUTC([y, m, d, h, _m, _s, _ms]);
-
-		const gt =
-			span === 'day' ? subtractTime(cursor ? dateUTC([y2, m2, d2, 0]) : dateUTC([y, m, d, 0]), amount - 1, 'day') :
-			span === 'hour' ? subtractTime(cursor ? dateUTC([y2, m2, d2, h2]) : dateUTC([y, m, d, h]), amount - 1, 'hour') :
-			new Error('not happen') as never;
-
-		const repository =
-			span === 'hour' ? this.repositoryUserPvForHour :
-			span === 'day' ? this.repositoryUserPvForDay :
-			new Error('not happen') as never;
-
-		// ログ取得
-		return await repository.createQueryBuilder()
-			.select('"group" as "userId", sum("___upv_user" + "___upv_visitor") as "count"')
-			.where('date BETWEEN :gt AND :lt', { gt: Chart.dateToTimestamp(gt), lt: Chart.dateToTimestamp(lt) })
-			.groupBy('"userId"')
-			.orderBy('"count"', order)
-			.offset(offset)
-			.limit(limit)
-			.getRawMany<{ userId: string, count: number }>();
-	}
 }

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

@@ -72,12 +72,16 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			if (ps.hostname) {
 				query.andWhere('user.host = :hostname', { hostname: ps.hostname.toLowerCase() });
 			}
-			const chartUsers: { userId: string; count: number; }[] = [];
+
+			let pvRankedUsers: { userId: string; count: number; }[] | undefined = undefined;
 			if (ps.sort?.endsWith('pv')) {
-				await this.perUserPvChart.getChartUsers('day', ps.sort === '+pv' ? 'DESC' : 'ASC', 0, null, ps.limit, ps.offset).then(users => {
-					chartUsers.push(...users);
-				});
+				// 直近12時間のPVランキングを取得
+				pvRankedUsers = await this.perUserPvChart.getUsersRanking(
+					'hour', ps.sort.startsWith('+') ? 'DESC' : 'ASC',
+					12, null, ps.limit, ps.offset,
+				);
 			}
+
 			switch (ps.sort) {
 				case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
 				case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
@@ -85,16 +89,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				case '-createdAt': query.orderBy('user.id', 'ASC'); break;
 				case '+updatedAt': query.andWhere('user.updatedAt IS NOT NULL').orderBy('user.updatedAt', 'DESC'); break;
 				case '-updatedAt': query.andWhere('user.updatedAt IS NOT NULL').orderBy('user.updatedAt', 'ASC'); break;
-				case '+pv':
-					if (chartUsers.length > 0) {
-						query.andWhere('user.id IN (:...userIds)', { userIds: chartUsers.map(user => user.userId) });
-					}
-					break;
-				case '-pv':
-					if (chartUsers.length > 0) {
-						query.andWhere('user.id IN (:...userIds)', { userIds: chartUsers.map(user => user.userId) });
-					}
-					break;
+				case '+pv': query.andWhere((pvRankedUsers?.length ?? 0) > 0 ? 'user.id IN (:...userIds)' : '1 = 0', { userIds: pvRankedUsers?.map(user => user.userId) ?? [] }); break;
+				case '-pv': query.andWhere((pvRankedUsers?.length ?? 0) > 0 ? 'user.id IN (:...userIds)' : '1 = 0', { userIds: pvRankedUsers?.map(user => user.userId) ?? [] }); break;
 				default: query.orderBy('user.id', 'ASC'); break;
 			}
 
@@ -107,14 +103,14 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			const users = await query.getMany();
 			if (ps.sort === '+pv') {
 				users.sort((a, b) => {
-					const aPv = chartUsers.find(user => user.userId === a.id)?.count ?? 0;
-					const bPv = chartUsers.find(user => user.userId === b.id)?.count ?? 0;
+					const aPv = pvRankedUsers?.find(u => u.userId === a.id)?.count ?? 0;
+					const bPv = pvRankedUsers?.find(u => u.userId === b.id)?.count ?? 0;
 					return bPv - aPv;
 				});
 			} else if (ps.sort === '-pv') {
 				users.sort((a, b) => {
-					const aPv = chartUsers.find(user => user.userId === a.id)?.count ?? 0;
-					const bPv = chartUsers.find(user => user.userId === b.id)?.count ?? 0;
+					const aPv = pvRankedUsers?.find(u => u.userId === a.id)?.count ?? 0;
+					const bPv = pvRankedUsers?.find(u => u.userId === b.id)?.count ?? 0;
 					return aPv - bPv;
 				});
 			}

packages/frontend/src/components/MkEmojiPicker.vue

@@ -611,6 +611,7 @@ defineExpose({
 						width: auto;
 						height: auto;
 						min-width: 0;
+						padding: 0;
 
 						&:disabled {
 							cursor: not-allowed;
@@ -717,7 +718,7 @@ defineExpose({
 
 				> .item {
 					position: relative;
-					padding: 0;
+					padding: 0 3px;
 					width: var(--eachSize);
 					height: var(--eachSize);
 					contain: strict;

packages/frontend/src/components/MkNotification.vue

@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:withTooltip="true"
 				:reaction="notification.reaction.replace(/^:(\w+):$/, ':$1@.:')"
 				:noStyle="true"
-				style="width: 100%; height: 100%;"
+				style="width: 100%; height: 100% !important; object-fit: contain;"
 			/>
 		</div>
 	</div>
@@ -122,7 +122,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:withTooltip="true"
 							:reaction="reaction.reaction.replace(/^:(\w+):$/, ':$1@.:')"
 							:noStyle="true"
-							style="width: 100%; height: 100%;"
+							style="width: 100%; height: 100% !important; object-fit: contain;"
 						/>
 					</div>
 				</div>

packages/frontend/src/components/MkReactionTooltip.vue

@@ -36,6 +36,7 @@ const emit = defineEmits<{
 .icon {
 	display: block;
 	width: 60px;
+	max-height: 60px;
 	font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 	margin: 0 auto;
 	object-fit: contain;

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

@@ -63,6 +63,7 @@ function getReactionName(reaction: string): string {
 .reactionIcon {
 	display: block;
 	width: 60px;
+	max-height: 60px;
 	font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 	object-fit: contain;
 	margin: 0 auto;

packages/frontend/src/components/global/MkMfm.stories.impl.ts

@@ -2,16 +2,15 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
+ 
 import { StoryObj } from '@storybook/vue3';
 import { expect, within } from '@storybook/test';
-import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.js';
+import MkMfm from './MkMfm.js';
 export const Default = {
 	render(args) {
 		return {
 			components: {
-				MkMisskeyFlavoredMarkdown,
+				MkMfm,
 			},
 			setup() {
 				return {
@@ -25,7 +24,7 @@ export const Default = {
 					};
 				},
 			},
-			template: '<MkMisskeyFlavoredMarkdown v-bind="props" />',
+			template: '<MkMfm v-bind="props" />',
 		};
 	},
 	async play({ canvasElement, args }) {
@@ -54,25 +53,25 @@ export const Default = {
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;
+} satisfies StoryObj<typeof MkMfm>;
 export const Plain = {
 	...Default,
 	args: {
 		...Default.args,
 		plain: true,
 	},
-} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;
+} satisfies StoryObj<typeof MkMfm>;
 export const Nowrap = {
 	...Default,
 	args: {
 		...Default.args,
 		nowrap: true,
 	},
-} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;
+} satisfies StoryObj<typeof MkMfm>;
 export const IsNotNote = {
 	...Default,
 	args: {
 		...Default.args,
 		isNote: false,
 	},
-} satisfies StoryObj<typeof MkMisskeyFlavoredMarkdown>;
+} satisfies StoryObj<typeof MkMfm>;

packages/frontend/src/components/index.ts

@@ -5,7 +5,7 @@
 
 import { App } from 'vue';
 
-import Mfm from './global/MkMisskeyFlavoredMarkdown.js';
+import Mfm from './global/MkMfm.js';
 import MkA from './global/MkA.vue';
 import MkAcct from './global/MkAcct.vue';
 import MkAvatar from './global/MkAvatar.vue';

packages/frontend/src/pages/custom-emojis-manager.vue

@@ -344,6 +344,7 @@ definePageMetadata(() => ({
 				> .img {
 					width: 42px;
 					height: 42px;
+					object-fit: contain;
 				}
 
 				> .body {
@@ -390,6 +391,7 @@ definePageMetadata(() => ({
 				> .img {
 					width: 32px;
 					height: 32px;
+					object-fit: contain;
 				}
 
 				> .body {