userannouncement v2

locales/index.d.ts

@@ -1068,6 +1068,7 @@ export interface Locale {
     "branding": string;
     "newUserAnnouncementAvailable": string;
     "viewAnnouncement": string;
+    "dialogCloseDuration": string;
     "_initialAccountSetting": {
         "accountCreated": string;
         "letsStartAccountSetup": string;

locales/ja-JP.yml

@@ -1065,6 +1065,7 @@ installed: "インストール済み"
 branding: "ブランディング"
 newUserAnnouncementAvailable: "新着のあなた宛てのお知らせがあります"
 viewAnnouncement: "お知らせを見る"
+dialogCloseDuration: "ダイアログを閉じるまでの待機時間"
 
 _initialAccountSetting:
   accountCreated: "アカウントの作成が完了しました！"

packages/backend/migration/1688647797135-userannouncement.js

@@ -3,9 +3,11 @@ export class Userannouncement1688647797135 {
 
     async up(queryRunner) {
         await queryRunner.query(`ALTER TABLE "announcement" ADD COLUMN "userId" character varying(32)`);
+        await queryRunner.query(`ALTER TABLE "announcement" ADD COLUMN "closeDuration" integer`);
     }
 
     async down(queryRunner) {
         await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "userId"`);
+        await queryRunner.query(`ALTER TABLE "announcement" DROP COLUMN "closeDuration"`);
     }
 }

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

@@ -39,6 +39,11 @@ export class Announcement {
 	})
 	public userId: string | null;
 
+	@Column('integer', {
+		nullable: false,
+	})
+	public closeDuration: number;
+
 	constructor(data: Partial<Announcement>) {
 		if (data == null) return;
 

packages/backend/src/server/api/endpoints/admin/announcements/create.ts

@@ -46,6 +46,10 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			closeDuration: {
+				type: 'number',
+				optional: false, nullable: false,
+			},
 		},
 	},
 } as const;
@@ -57,6 +61,7 @@ export const paramDef = {
 		text: { type: 'string', minLength: 1 },
 		imageUrl: { type: 'string', nullable: true, minLength: 1 },
 		userId: { type: 'string', nullable: true, format: 'misskey:id' },
+		closeDuration: { type: 'number', nullable: false },
 	},
 	required: ['title', 'text', 'imageUrl'],
 } as const;
@@ -79,6 +84,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				text: ps.text,
 				imageUrl: ps.imageUrl,
 				userId: ps.userId ?? null,
+				closeDuration: ps.closeDuration,
 			}).then(x => this.announcementsRepository.findOneByOrFail(x.identifiers[0]));
 
 			return Object.assign({}, announcement, { createdAt: announcement.createdAt.toISOString(), updatedAt: null });

packages/backend/src/server/api/endpoints/admin/announcements/list.ts

@@ -4,7 +4,7 @@ import type { AnnouncementsRepository, AnnouncementReadsRepository, UsersReposit
 import type { Announcement } from '@/models/entities/Announcement.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { QueryService } from '@/core/QueryService.js';
-import { UserEntityService } from '@/core/entities/UserEntityService';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { DI } from '@/di-symbols.js';
 
 export const meta = {
@@ -61,6 +61,10 @@ export const meta = {
 					type: 'number',
 					optional: false, nullable: false,
 				},
+				closeDuration: {
+					type: 'number',
+					optional: false, nullable: false,
+				},
 			},
 		},
 	},
@@ -130,6 +134,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				userId: announcement.userId,
 				user: packedUsers.find(user => user.id === announcement.userId),
 				reads: reads.get(announcement)!,
+				closeDuration: announcement.closeDuration,
 			}));
 		});
 	}

packages/backend/src/server/api/endpoints/admin/announcements/update.ts

@@ -27,8 +27,9 @@ export const paramDef = {
 		text: { type: 'string', minLength: 1 },
 		imageUrl: { type: 'string', nullable: true, minLength: 0 },
 		userId: { type: 'string', nullable: true, format: 'misskey:id' },
+		closeDuration: { type: 'number', nullable: false },
 	},
-	required: ['id', 'title', 'text', 'imageUrl'],
+	required: ['id', 'title', 'text', 'imageUrl', 'closeDuration'],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
@@ -57,6 +58,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- 空の文字列の場合、nullを渡すようにするため */
 				imageUrl: ps.imageUrl || null, 
 				userId: ps.userId ?? null,
+				closeDuration: ps.closeDuration,
 			});
 		});
 	}

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

@@ -52,6 +52,10 @@ export const meta = {
 					type: 'boolean',
 					optional: false, nullable: true,
 				},
+				closeDuration: {
+					type: 'number',
+					optional: false, nullable: false,
+				},
 			},
 		},
 	},

packages/frontend/src/boot/main-boot.ts

@@ -246,9 +246,9 @@ export async function mainBoot() {
 			signout();
 		});
 
-		const unreadUserAnnouncementsList = await api('announcements', { privateOnly: true, withUnreads: true, limit: 1 });
+		const unreadUserAnnouncementsList = await api('announcements', { privateOnly: true, withUnreads: true });
 		if (unreadUserAnnouncementsList.length > 0) {
-			popup(defineAsyncComponent(() => import('@/components/MkNewUserAnnouncementModal.vue')), {}, {}, 'closed');
+			unreadUserAnnouncementsList.forEach((v) => popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementModal.vue')), { title: v.title, text: v.text, closeDuration: v.closeDuration, announcementId: v.id }, {}, 'closed'));
 		}
 	}
 

packages/frontend/src/components/MkNewUserAnnouncementModal.vue

@@ -2,7 +2,7 @@
 <MkModal ref="modal" :zPriority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div :class="$style.root">
 		<div :class="$style.title">{{ i18n.ts.newUserAnnouncementAvailable }}</div>
-		<MkButton :class="$style.gotIt" primary full @click="jumpTo">{{ i18n.ts.viewAnnouncement }}</MkButton>
+		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}</MkButton>
 	</div>
 </MkModal>
 </template>
@@ -13,9 +13,20 @@ import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 import { useRouter } from '@/router';
+import { api } from '@/os';
 const router = useRouter();
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
+const props = defineProps<{
+	title: string;
+	text: string;
+	announcementId: string;
+}>();
+
+async function gotIt() {
+	await api('i/read-announcement', { announcementId: props.announcementId });
+}
+
 function jumpTo() {
 	modal.value.close();
 	router.push('/announcements');

packages/frontend/src/components/MkUserAnnouncementModal.vue

@@ -0,0 +1,90 @@
+<template>
+<MkModal ref="modal" :zPriority="'middle'" @click="closeModal" @closed="$emit('closed')">
+	<div :class="$style.root">
+		<div :class="$style.title"><Mfm :text="props.title"/></div>
+		<div :class="$style.text">
+			<Mfm :text="props.text"/>
+		</div>
+		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}<span v-if="secVisible">({{ sec }})</span></MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, shallowRef } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { api } from '@/os';
+
+const modal = shallowRef<InstanceType<typeof MkModal>>();
+const gotItDisabled = ref(true);
+const secVisible = ref(true);
+
+const props = defineProps<{
+	title: string;
+	text: string;
+	announcementId: string | null;
+	closeDuration: number;
+}>();
+
+const sec = ref(props.closeDuration);
+
+async function gotIt() {
+	gotItDisabled.value = true;
+	if (props.announcementId) {
+		await api('i/read-announcement', { announcementId: props.announcementId });
+	}
+	modal.value.close();
+}
+
+function closeModal() {
+	if (sec.value === 0) {
+		modal.value.close();
+	}
+}
+
+onMounted(() => {
+	if (sec.value > 0 ) {
+		const waitTimer = setInterval(() => {
+			if (sec.value === 0) {
+				clearInterval(waitTimer);
+				gotItDisabled.value = false;
+				secVisible.value = false;
+			} else {
+				gotItDisabled.value = true;
+			}
+			sec.value = sec.value - 1;
+		}, 1000);
+	} else {
+		gotItDisabled.value = false;
+		secVisible.value = false;
+	}
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	margin: auto;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+
+.title {
+	font-weight: bold;
+}
+
+.text {
+	margin: 1em 0;
+}
+
+.gotIt {
+	margin: 8px 0 0 0;
+}
+</style>

packages/frontend/src/pages/admin/announcements.vue

@@ -30,6 +30,10 @@
 					<MkInput v-model="announcement.imageUrl">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
+					<MkInput v-model="announcement.closeDuration" type="number">
+						<template #label>{{ i18n.ts.dialogCloseDuration }}</template>
+						<template #suffix>{{ i18n.ts._time.second }}</template>
+					</MkInput>
 					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
 					<MkUserCardMini v-if="announcement.userId" :user="announcement.user" @click="editUser(announcement)"></MkUserCardMini>
 					<MkButton v-else class="button" inline primary @click="editUser(announcement)">{{ i18n.ts.specifyUser }}</MkButton>
@@ -91,6 +95,7 @@ function add() {
 		imageUrl: null,
 		userId: null,
 		user: null,
+		closeDuration: 10,
 	});
 }
 

packages/misskey-js/etc/misskey-js.api.md

@@ -27,6 +27,7 @@ type Announcement = {
     imageUrl: string | null;
     isRead?: boolean;
     isPrivate: boolean;
+    closeDuration: number;
 };
 
 // @public (undocumented)

packages/misskey-js/src/entities.ts

@@ -395,6 +395,7 @@ export type Announcement = {
 	imageUrl: string | null;
 	isRead?: boolean;
 	isPrivate: boolean;
+	closeDuration: number; 
 };
 
 export type Antenna = {