Custom splash icons!

locales/en-US.yml

@@ -903,7 +903,8 @@ enterSendsMessage: "Press Return in Messaging to send message (off is Ctrl + Ret
 adminCustomCssWarn: "This setting should only be used if you know what it does. Entering improper values may cause EVERYONE'S clients to stop functioning normally. Please ensure your CSS works properly by testing it in your user settings."
 customMOTD: "Custom MOTD (splash screen messages)"
 customMOTDDescription: "Custom messages for the MOTD (splash screen) separated by line breaks to be shown randomly every time a user loads/reloads the page."
-
+customSplashIcons: "Custom splash screen icons (urls)"
+customSplashIconsDescription: "URLs for custom splash screen icons separated by line breaks to be shown randomly every time a user loads/reloads the page. Please make sure the images are on a static URL, preferably all resized to 192x192."
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."

locales/ja-JP.yml

@@ -903,6 +903,8 @@ move: "移動"
 adminCustomCssWarn: "この設定は、それが何をするものであるかを知っている場合のみ使用してください。不適切な値を入力すると、クライアントが正常に動作しなくなる可能性があります。ユーザー設定でCSSをテストし、正しく動作することを確認してください。"
 customMOTD: "カスタムMOTD（スプラッシュスクリーンメッセージ）"
 customMOTDDescription: "ユーザがページをロード/リロードするたびにランダムに表示される、改行で区切られたMOTD（スプラッシュスクリーン）用のカスタムメッセージ"
+customSplashIcons: "カスタムスプラッシュスクリーンアイコン"
+customSplashIconsDescription: "ユーザがページをロード/リロードするたびにランダムに表示される、改行で区切られたカスタムスプラッシュスクリーンアイコンの URL。画像は静的なURLで、できればすべて192x192にリサイズしてください。"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

packages/backend/migration/1658941974648CustomSplashIcons.js

@@ -0,0 +1,8 @@
+export class CustomSplashIcons1658941974648 {
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "customSplashIcons" character varying(256) array NOT NULL DEFAULT '{}'::varchar[]`);
+    }
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "customSplashIcons"`);
+    }
+}

packages/backend/src/models/entities/meta.ts

@@ -72,6 +72,11 @@ export class Meta {
 	})
 	public customMOTD: string[];
 
+	@Column('varchar', {
+		length: 256, array: true, default: '{}',
+	})
+	public customSplashIcons: string[];
+
 	@Column('varchar', {
 		length: 256, array: true, default: '{}',
 	})

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

@@ -269,6 +269,7 @@ import * as ep___pages_update from './endpoints/pages/update.js';
 import * as ep___ping from './endpoints/ping.js';
 import * as ep___pinnedUsers from './endpoints/pinned-users.js';
 import * as ep___customMOTD from './endpoints/custom-motd.js';
+import * as ep___customSplashIcons from './endpoints/custom-splash-icons.js';
 import * as ep___promo_read from './endpoints/promo/read.js';
 import * as ep___requestResetPassword from './endpoints/request-reset-password.js';
 import * as ep___resetDb from './endpoints/reset-db.js';
@@ -587,6 +588,7 @@ const eps = [
 	['ping', ep___ping],
 	['pinned-users', ep___pinnedUsers],
 	['custom-motd', ep___customMOTD],
+	['custom-motd', ep___customSplashIcons],
 	['promo/read', ep___promo_read],
 	['request-reset-password', ep___requestResetPassword],
 	['reset-db', ep___resetDb],

packages/backend/src/server/api/endpoints/admin/meta.ts

@@ -179,6 +179,14 @@ export const meta = {
 					optional: false, nullable: false,
 				},
 			},
+			customSplashIcons: {
+				type: 'array',
+				optional: true, nullable: false,
+				items: {
+					type: 'string',
+					optional: false, nullable: false,
+				},
+			},
 			hiddenTags: {
 				type: 'array',
 				optional: true, nullable: false,
@@ -411,6 +419,7 @@ export default define(meta, paramDef, async (ps, me) => {
 		useStarForReactionFallback: instance.useStarForReactionFallback,
 		pinnedUsers: instance.pinnedUsers,
 		customMOTD: instance.customMOTD,
+		customSplashIcons: instance.customSplashIcons,
 		hiddenTags: instance.hiddenTags,
 		blockedHosts: instance.blockedHosts,
 		allowedHosts: instance.allowedHosts,

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -24,6 +24,9 @@ export const paramDef = {
 		customMOTD: { type: 'array', nullable: true, items: {
 			type: 'string',
 		} },
+		customSplashIcons: { type: 'array', nullable: true, items: {
+			type: 'string',
+		} },
 		hiddenTags: { type: 'array', nullable: true, items: {
 			type: 'string',
 		} },
@@ -142,6 +145,10 @@ export default define(meta, paramDef, async (ps, me) => {
 		set.customMOTD = ps.customMOTD.filter(Boolean);
 	}
 
+	if (Array.isArray(ps.customSplashIcons)) {
+		set.customSplashIcons = ps.customSplashIcons.filter(Boolean);
+	}
+
 	if (Array.isArray(ps.hiddenTags)) {
 		set.hiddenTags = ps.hiddenTags.filter(Boolean);
 	}

packages/backend/src/server/api/endpoints/custom-motd.ts

@@ -19,7 +19,7 @@ export const meta = {
 } as const;
 
 export const paramDef = {
-	type: 'array',
+	type: 'object',
 	properties: {},
 	required: [],
 } as const;

packages/backend/src/server/api/endpoints/custom-splash-icons.ts

@@ -0,0 +1,32 @@
+// import { IsNull } from 'typeorm';
+import { fetchMeta } from '@/misc/fetch-meta.js';
+import define from '../define.js';
+
+export const meta = {
+	tags: ['meta'],
+
+	requireCredential: false,
+	requireCredentialPrivateMode: true,
+
+	res: {
+		type: 'array',
+		optional: false, nullable: false,
+		items: {
+			type: 'string',
+			optional: false, nullable: false,
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {},
+	required: [],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+export default define(meta, paramDef, async () => {
+	const meta = await fetchMeta();
+	const icons = await Promise.all(meta.customSplashIcons.map(x => x));
+	return icons;
+});

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

@@ -530,12 +530,16 @@ router.get('(.*)', async ctx => {
 	if (meta.customMOTD.length > 0) {
 		motd = meta.customMOTD;
 	}
+	let iconUrl = meta.iconUrl;
+	if (meta.customSplashIcons.length > 0) {
+		iconUrl = meta.customSplashIcons[Math.floor(Math.random() * meta.customSplashIcons.length)];
+	}
 	await ctx.render('base', {
 		img: meta.bannerUrl,
 		title: meta.name || 'Calckey',
 		instanceName: meta.name || 'Calckey',
 		desc: meta.description,
-		icon: meta.iconUrl,
+		icon: iconUrl,
 		themeColor: meta.themeColor,
 		privateMode: meta.privateMode,
 		randomMOTD: motd[Math.floor(Math.random() * motd.length)],

packages/client/src/pages/admin/settings.vue

@@ -39,6 +39,11 @@
 						<template #caption>{{ i18n.ts.customMOTDDescription }}</template>
 					</FormTextarea>
 
+					<FormTextarea v-model="customSplashIcons" class="_formBlock">
+						<template #label>{{ i18n.ts.customSplashIcons }}</template>
+						<template #caption>{{ i18n.ts.customSplashIconsDescription }}</template>
+					</FormTextarea>
+
 					<FormSection>
 						<FormSwitch v-model="enableRegistration" class="_formBlock">
 							<template #label>{{ i18n.ts.enableRegistration }}</template>
@@ -182,6 +187,7 @@ let enableLocalTimeline: boolean = $ref(false);
 let enableGlobalTimeline: boolean = $ref(false);
 let pinnedUsers: string = $ref('');
 let customMOTD: string = $ref('');
+let customSplashIcons: string = $ref('');
 let cacheRemoteFiles: boolean = $ref(false);
 let localDriveCapacityMb: any = $ref(0);
 let remoteDriveCapacityMb: any = $ref(0);
@@ -210,6 +216,7 @@ async function init() {
 	enableGlobalTimeline = !meta.disableGlobalTimeline;
 	pinnedUsers = meta.pinnedUsers.join('\n');
 	customMOTD = meta.customMOTD.join('\n');
+	customSplashIcons = meta.customSplashIcons.join('\n');
 	cacheRemoteFiles = meta.cacheRemoteFiles;
 	localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
 	remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
@@ -239,6 +246,7 @@ function save() {
 		disableGlobalTimeline: !enableGlobalTimeline,
 		pinnedUsers: pinnedUsers.split('\n'),
 		customMOTD: customMOTD.split('\n'),
+		customSplashIcons: customSplashIcons.split('\n'),
 		cacheRemoteFiles,
 		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
 		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),