From 44ccb1eec13e4493e6ca069cba6f071ae1bd43a1 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Fri, 26 Aug 2022 10:01:47 -0700
Subject: [PATCH] Added timeout option for notification component

---
 .../notification/notification-card.svelte     |  2 +-
 .../notification/notification.ts              | 29 +++++++++++++++----
 web/src/lib/utils/file-uploader.ts            |  3 +-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
index 77df40a65a..68f32d095f 100644
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -51,7 +51,7 @@
 	onMount(() => {
 		setTimeout(() => {
 			notificationController.removeNotificationById(notificationInfo.id);
-		}, 3000);
+		}, notificationInfo.timeout);
 	});
 </script>
 
diff --git a/web/src/lib/components/shared-components/notification/notification.ts b/web/src/lib/components/shared-components/notification/notification.ts
index e7645cb62e..3136165d93 100644
--- a/web/src/lib/components/shared-components/notification/notification.ts
+++ b/web/src/lib/components/shared-components/notification/notification.ts
@@ -9,17 +9,36 @@ export class ImmichNotification {
 	id = new Date().getTime();
 	type!: NotificationType;
 	message!: string;
+	timeout = 3000;
 }
 
+export class ImmichNotificationDto {
+	/**
+	 * Notification type
+	 * @type {NotificationType} [Info, Error]
+	 */
+	type: NotificationType = NotificationType.Info;
+
+	/**
+	 * Notification message
+	 */
+	message = '';
+
+	/**
+	 * Timeout in miliseconds
+	 */
+	timeout = 3000;
+}
 function createNotificationList() {
 	const notificationList = writable<ImmichNotification[]>([]);
 
-	const show = ({ message = '', type = NotificationType.Info }) => {
-		const notification = new ImmichNotification();
-		notification.message = message;
-		notification.type = type;
+	const show = (notificationInfo: ImmichNotificationDto) => {
+		const newNotification = new ImmichNotification();
+		newNotification.message = notificationInfo.message;
+		newNotification.type = notificationInfo.type;
+		newNotification.timeout = notificationInfo.timeout;
 
-		notificationList.update((currentList) => [...currentList, notification]);
+		notificationList.update((currentList) => [...currentList, newNotification]);
 	};
 
 	const removeNotificationById = (id: number) => {
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index 4aa4b81e2e..8544461442 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -38,9 +38,10 @@ export const openFileUploadDialog = (uploadType: UploadType) => {
 
 			if (files.length > 50) {
 				notificationController.show({
+					type: NotificationType.Error,
 					message: `Cannot upload more than 50 files at a time - you are uploading ${files.length} files. 
           Please use the CLI tool if you need to upload more than 50 files.`,
-					type: NotificationType.Error
+					timeout: 5000
 				});
 
 				return;